Merge pull request #222 from frappe/dark-mode-config

refactor: colors and config for dark mode setup

src/components/Badge.vue

@@ -41,37 +41,35 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 
 const classes = computed(() => {
   let solidClasses = {
-    gray: 'text-text-icons-white bg-surface-gray-7',
-    blue: 'text-text-icons-blue-1 bg-surface-blue-2',
-    green: 'text-text-icons-green-1 bg-surface-green-3',
-    orange: 'text-text-icons-amber-1 bg-surface-amber-2',
-    red: 'text-text-icons-red-1 bg-surface-red-4',
+    gray: 'text-ink-white bg-surface-gray-7',
+    blue: 'text-ink-blue-1 bg-surface-blue-2',
+    green: 'text-ink-green-1 bg-surface-green-3',
+    orange: 'text-ink-amber-1 bg-surface-amber-2',
+    red: 'text-ink-red-1 bg-surface-red-4',
   }[props.theme]
 
   let subtleClasses = {
-    gray: 'text-text-icons-gray-6 bg-surface-gray-2',
-    blue: 'text-text-icons-blue-2 bg-surface-blue-1',
-    green: 'text-text-icons-green-3 bg-surface-green-2',
-    orange: 'text-text-icons-amber-3 bg-surface-amber-1',
-    red: 'text-text-icons-red-4 bg-surface-red-1',
+    gray: 'text-ink-gray-6 bg-surface-gray-2',
+    blue: 'text-ink-blue-2 bg-surface-blue-1',
+    green: 'text-ink-green-3 bg-surface-green-2',
+    orange: 'text-ink-amber-3 bg-surface-amber-1',
+    red: 'text-ink-red-4 bg-surface-red-1',
   }[props.theme]
 
   let outlineClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent border border-outline-gray-1',
-    blue: 'text-text-icons-blue-2 bg-transparent border border-outline-blue-1',
-    green:
-      'text-text-icons-green-3 bg-transparent border border-outline-green-2',
-    orange:
-      'text-text-icons-amber-3 bg-transparent border border-outline-amber-2',
-    red: 'text-text-icons-red-4 bg-transparent border border-outline-red-2',
+    gray: 'text-ink-gray-6 bg-transparent border border-outline-gray-1',
+    blue: 'text-ink-blue-2 bg-transparent border border-outline-blue-1',
+    green: 'text-ink-green-3 bg-transparent border border-outline-green-2',
+    orange: 'text-ink-amber-3 bg-transparent border border-outline-amber-2',
+    red: 'text-ink-red-4 bg-transparent border border-outline-red-2',
   }[props.theme]
 
   let ghostClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent',
-    blue: 'text-text-icons-blue-2 bg-transparent',
-    green: 'text-text-icons-green-3 bg-transparent',
-    orange: 'text-text-icons-amber-3 bg-transparent',
-    red: 'text-text-icons-red-4 bg-transparent',
+    gray: 'text-ink-gray-6 bg-transparent',
+    blue: 'text-ink-blue-2 bg-transparent',
+    green: 'text-ink-green-3 bg-transparent',
+    orange: 'text-ink-amber-3 bg-transparent',
+    red: 'text-ink-red-4 bg-transparent',
   }[props.theme]
 
   let variantClasses = {

src/components/Dropdown.vue

@@ -26,7 +26,7 @@
           <div v-for="group in groups" :key="group.key" class="p-1.5">
             <div
               v-if="group.group && !group.hideLabel"
-              class="flex h-7 items-center px-2 text-sm font-medium text-text-icons-gray-6"
+              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6"
             >
               {{ group.group }}
             </div>
@@ -43,19 +43,19 @@
               <button
                 v-else
                 :class="[
-                  active ? 'bg-gray-100' : 'text-text-icons-gray-6',
+                  active ? 'bg-gray-100' : 'text-ink-gray-6',
                   'group flex h-7 w-full items-center rounded px-2 text-base',
                 ]"
                 @click="item.onClick"
               >
                 <FeatherIcon
                   v-if="item.icon && typeof item.icon === 'string'"
                   :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   aria-hidden="true"
                 />
                 <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   v-else-if="item.icon"
                   :is="item.icon"
                 />

src/components/Rating/Rating.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-1">
-    <label class="block text-xs text-text-icons-gray-5" v-if="label">
+    <label class="block text-xs text-ink-gray-5" v-if="label">
       {{ label }}
     </label>
     <div class="flex text-center">
@@ -12,7 +12,7 @@
       >
         <FeatherIcon
           name="star"
-          class="fill-gray-400 text-text-icons-gray-1 stroke-1 mr-1"
+          class="fill-gray-400 text-ink-gray-1 stroke-1 mr-1"
           :class="iconClasses(index)"
           @click="markRating(index)"
         />

src/style.css

@@ -1,37 +1,5 @@
 @import './fonts/Inter/inter.css';
-@import './espressoColors.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  html,
-  body,
-  button,
-  p,
-  span,
-  div {
-    font-variation-settings: 'opsz' 24;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  select {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>');
-    background-size: 1.13em;
-    background-position: right 0.44rem center;
-  }
-}
-
-@layer components {
-  .form-input,
-  .form-textarea,
-  .form-select {
-    @apply h-7 rounded border border-gray-100 bg-gray-100 py-1.5 pl-2 pr-2 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400;
-  }
-
-  .form-checkbox {
-    @apply rounded-md bg-gray-100 text-blue-500 focus:ring-0 focus-visible:ring-1;
-  }
-}