chore: more rationalization

.ladle/stories.css

@@ -12,7 +12,7 @@
   }
 
   div[role='dialog'] {
-    @apply shadow-lg shadow-black/40;
+    @apply shadow-th;
   }
 
   .ladle-wrapper {

shared.tailwind.config.ts

@@ -25,27 +25,19 @@ export default {
       colors: {
         gray: colors.zinc,
         primary: {
-          50: `rgb(var(--primary-50,   ${toRGB(colors.zinc[50])}) / <alpha-value>)`,
-          100: `rgb(var(--primary-100, ${toRGB(colors.zinc[100])}) / <alpha-value>)`,
-          200: `rgb(var(--primary-200, ${toRGB(colors.zinc[200])}) / <alpha-value>)`,
-          300: `rgb(var(--primary-300, ${toRGB(colors.zinc[300])}) / <alpha-value>)`,
-          400: `rgb(var(--primary-400, ${toRGB(colors.zinc[400])}) / <alpha-value>)`,
-          500: `rgb(var(--primary-500, ${toRGB(colors.zinc[500])}) / <alpha-value>)`,
-          600: `rgb(var(--primary-600, ${toRGB(colors.zinc[600])}) / <alpha-value>)`,
-          700: `rgb(var(--primary-700, ${toRGB(colors.zinc[700])}) / <alpha-value>)`,
-          800: `rgb(var(--primary-800, ${toRGB(colors.zinc[800])}) / <alpha-value>)`,
-          900: `rgb(var(--primary-900, ${toRGB(colors.zinc[900])}) / <alpha-value>)`,
-          950: `rgb(var(--primary-950, ${toRGB(colors.zinc[950])}) / <alpha-value>)`,
+          50: `rgb(var(--primary-50,   ${toRGB(colors.gray[50])}) / <alpha-value>)`,
+          100: `rgb(var(--primary-100, ${toRGB(colors.gray[100])}) / <alpha-value>)`,
+          200: `rgb(var(--primary-200, ${toRGB(colors.gray[200])}) / <alpha-value>)`,
+          300: `rgb(var(--primary-300, ${toRGB(colors.gray[300])}) / <alpha-value>)`,
+          400: `rgb(var(--primary-400, ${toRGB(colors.gray[400])}) / <alpha-value>)`,
+          500: `rgb(var(--primary-500, ${toRGB(colors.gray[500])}) / <alpha-value>)`,
+          600: `rgb(var(--primary-600, ${toRGB(colors.gray[600])}) / <alpha-value>)`,
+          700: `rgb(var(--primary-700, ${toRGB(colors.gray[700])}) / <alpha-value>)`,
+          800: `rgb(var(--primary-800, ${toRGB(colors.gray[800])}) / <alpha-value>)`,
+          900: `rgb(var(--primary-900, ${toRGB(colors.gray[900])}) / <alpha-value>)`,
+          950: `rgb(var(--primary-950, ${toRGB(colors.gray[950])}) / <alpha-value>)`,
         },
       },
-      stroke: {
-        th: colors.white,
-        'th-dark': colors.zinc[900],
-      },
-      fill: {
-        th: colors.zinc[500],
-        'th-dark': colors.zinc[400],
-      },
       spacing: {
         icon: spacing[4],
         input: spacing[9],

src/Button/index.tsx

@@ -38,7 +38,7 @@ export const Button: FC<ButtonProps> = ({
       variant === 'primary' &&
         `font-medium
         text-th-reversed border-primary ring-primary
-        bg-primary hover:enabled:bg-primary/95 selection:bg-gray-900 selection:dark:bg-gray-50`,
+        bg-primary hover:enabled:bg-primary/95 selection:bg-th-reversed`,
       variant === 'destructive' &&
         `font-medium
         text-destructive

src/Checkbox/index.tsx

@@ -40,7 +40,7 @@ export const Checkbox: FC<CheckboxProps> = ({ label, className, ...props }) => (
         aria-hidden="true"
         className={`
           w-icon h-icon fill-none
-          stroke-3 stroke-th dark:stroke-th-dark
+          stroke-3 stroke-th
           [stroke-dasharray:22px]
           [stroke-dashoffset:66] group-selected:[stroke-dashoffset:44]
           transition-all duration-150 motion-reduce:transition-none

src/Modal/ModalComponent.tsx

@@ -121,7 +121,7 @@ export const ModalComponent: ModalComponentProps = forwardRef<ModalRef, PropsWit
               `relative flex flex-col rounded-xl p-6
               bg-th
               text-base text-th
-              fill-th dark:fill-th-dark`,
+              fill-th`,
               closing ? 'animate-modal-shrink opacity-0' : 'animate-modal-grow',
               contentClassName,
             )}
@@ -134,7 +134,7 @@ export const ModalComponent: ModalComponentProps = forwardRef<ModalRef, PropsWit
                 {...titleProps}
                 id={titleId}
                 className={twMerge(
-                  'm-0 grow truncate text-xl font-bold capitalize leading-th text-gray-900 dark:text-gray-50',
+                  'm-0 grow truncate text-xl font-bold capitalize leading-th text-h1',
                   titleClassName,
                 )}
               >

src/Select/Item.tsx

@@ -32,12 +32,7 @@ export const Item = <T extends Key>({ value, textValue, className, ...props }: I
     {({ isSelected }) => (
       <>
         {isSelected && (
-          <Icon
-            id="check"
-            width={18}
-            height={18}
-            className="py-0.5 -ml-5 mr-0.5 text-green-600 dark:text-green-400"
-          />
+          <Icon id="check" width={18} height={18} className="py-0.5 -ml-5 mr-0.5 text-valid" />
         )}
         {textValue}
       </>

src/Select/Select.tsx

@@ -118,7 +118,7 @@ export const Select = <T extends Key>({
         `rounded-md leading-7
           border border-th-light
           bg-th
-          shadow-md dark:shadow-inner`,
+          shadow-th`,
         popoverClassName,
       )}
     >

src/tailwind.css

@@ -7,7 +7,7 @@
     @apply bg-th text-th;
     @apply selection:bg-primary selection:text-th-reversed;
     @apply text-base min-h-screen;
-    @apply dark:fill-th-dark;
+    @apply fill-th;
     @apply tap-highlight-primary;
   }
 }
@@ -17,6 +17,9 @@
   .bg-th {
     @apply bg-gray-50 dark:bg-gray-900;
   }
+  .bg-th-reversed {
+    @apply bg-gray-900 dark:bg-gray-50;
+  }
   .bg-primary {
     @apply bg-primary-500 dark:bg-primary-400;
   }
@@ -65,13 +68,19 @@
   .text-th {
     @apply text-gray-500 dark:text-gray-400;
   }
+  .text-h1 {
+    @apply text-gray-900 dark:text-gray-50;
+  }
   .text-primary {
     @apply text-primary-500 dark:text-primary-400;
   }
   .text-destructive,
   .text-error {
     @apply text-red-600 dark:text-red-500;
   }
+  .text-valid {
+    @apply text-green-600 dark:text-green-400;
+  }
   .text-th-reversed {
     @apply text-gray-50 dark:text-gray-900;
   }
@@ -110,4 +119,19 @@
   .caret-error {
     @apply caret-red-600 dark:caret-red-500;
   }
+
+  /* stroke-color classes */
+  .stroke-th {
+    @apply stroke-white dark:stroke-gray-900;
+  }
+
+  /* fill-color classes */
+  .fill-th {
+    @apply fill-gray-500 dark:fill-gray-400;
+  }
+
+  /* shadow class */
+  .shadow-th {
+    @apply shadow-md dark:shadow-inner;
+  }
 }