feat(components): uniformize colors and variants (#141)

src/theme/alert.ts

@@ -5,19 +5,17 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
     wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
     title: 'text-sm font-medium',
-    description: 'text-sm',
+    description: 'text-sm opacity-90',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
     avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
-    close: 'p-0'
+    close: 'p-0.5'
   },
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      white: '',
-      gray: '',
-      black: ''
+      gray: ''
     },
     variant: {
       solid: '',
@@ -46,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
     color,
     variant: 'outline',
     class: {
-      root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
+      root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
     }
   })), ...options.colors.map((color: string) => ({
     color,
@@ -61,26 +59,32 @@ export default (options: Required<ModuleOptions>) => ({
       root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
     }
   })), {
-    color: 'white',
-    variant: 'solid',
-    class: {
-      root: 'ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
-    }
-  }, {
     color: 'gray',
     variant: 'solid',
-    class: {
-      root: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
-    }
-  }, {
-    color: 'black',
-    variant: 'solid',
     class: {
       root: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
     }
+  }, {
+    color: 'gray',
+    variant: 'outline',
+    class: {
+      root: 'ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
+    }
+  }, {
+    color: 'gray',
+    variant: 'soft',
+    class: {
+      root: 'text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50'
+    }
+  }, {
+    color: 'gray',
+    variant: 'subtle',
+    class: {
+      root: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50'
+    }
   }],
   defaultVariants: {
-    color: 'white',
-    variant: 'solid'
+    color: 'primary',
+    variant: 'outline'
   }
 })

src/theme/badge.ts

@@ -5,9 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      white: '',
-      gray: '',
-      black: ''
+      gray: ''
     },
     variant: {
       solid: '',
@@ -28,7 +26,7 @@ export default (options: Required<ModuleOptions>) => ({
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'outline',
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'soft',
@@ -38,17 +36,21 @@ export default (options: Required<ModuleOptions>) => ({
     variant: 'subtle',
     class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
   })), {
-    color: 'white',
-    variant: 'solid',
-    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
-  }, {
     color: 'gray',
     variant: 'solid',
-    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
-  }, {
-    color: 'black',
-    variant: 'solid',
     class: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
+  }, {
+    color: 'gray',
+    variant: 'outline',
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
+  }, {
+    color: 'gray',
+    variant: 'soft',
+    class: 'text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
+  }, {
+    color: 'gray',
+    variant: 'subtle',
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
   }],
   defaultVariants: {
     color: 'primary',

src/theme/breadcrumb.ts

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative min-w-0',
     list: 'flex items-center gap-1.5',
     item: 'flex min-w-0',
-    link: 'group relative flex items-center gap-1.5 text-sm min-w-0',
+    link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
     linkLeadingAvatarSize: '2xs',

src/theme/button.ts

@@ -13,9 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
     ...buttonGroupVariant,
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      white: '',
-      gray: '',
-      black: ''
+      gray: ''
     },
     variant: {
       solid: '',
@@ -74,63 +72,51 @@ export default (options: Required<ModuleOptions>) => ({
   compoundVariants: [...options.colors.map((color: string) => ({
     color,
     variant: 'solid',
-    class: `shadow-sm text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+    class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'outline',
-    class: `ring ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/20 disabled:bg-transparent dark:hover:bg-${color}-400/20 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'soft',
-    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'subtle',
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'ghost',
-    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/20 disabled:bg-transparent dark:hover:bg-${color}-400/20 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent`
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'link',
     class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), {
-    color: 'white',
-    variant: 'solid',
-    class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
-    color: 'white',
-    variant: 'ghost',
-    class: 'text-gray-900 dark:text-white hover:bg-white disabled:bg-transparent dark:hover:bg-gray-900 dark:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
-    color: 'white',
-    variant: 'link',
-    class: 'text-gray-900 hover:text-gray-500 disabled:text-gray-900 dark:text-white dark:hover:text-gray-400 dark:disabled:text-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
     color: 'gray',
     variant: 'solid',
-    class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    class: 'text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white'
+  }, {
+    color: 'gray',
+    variant: 'outline',
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
+  }, {
+    color: 'gray',
+    variant: 'soft',
+    class: 'text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800'
+  }, {
+    color: 'gray',
+    variant: 'subtle',
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
   }, {
     color: 'gray',
     variant: 'ghost',
-    class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-50 disabled:bg-transparent dark:hover:bg-gray-800 dark:hover:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent'
   }, {
     color: 'gray',
     variant: 'link',
-    class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
-    color: 'black',
-    variant: 'solid',
-    class: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
-    color: 'black',
-    variant: 'ghost',
-    class: 'text-gray-900 hover:text-white disabled:text-gray-900 dark:text-white dark:hover:text-gray-900 dark:disabled:text-white hover:bg-gray-900 disabled:bg-transparent dark:hover:bg-white dark:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-  }, {
-    color: 'black',
-    variant: 'link',
-    class: 'text-gray-900 hover:text-gray-500 disabled:text-gray-900 dark:text-white dark:hover:text-gray-400 dark:disabled:text-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
   }, {
     size: 'xs',
     square: true,

src/theme/checkbox.ts

@@ -13,7 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
-      black: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
+      gray: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
     },
     size: {
       xs: {
@@ -44,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     required: {
       true: {
-        label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+        label: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
       }
     },
     disabled: {
@@ -63,7 +63,7 @@ export default (options: Required<ModuleOptions>) => ({
     checked: true,
     class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
   })), {
-    color: 'black',
+    color: 'gray',
     checked: true,
     class: 'ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white'
   }],

src/theme/chip.ts

@@ -8,9 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
-      gray: 'bg-gray-500 dark:bg-gray-400',
-      white: 'bg-white dark:bg-gray-900',
-      black: 'bg-gray-900 dark:bg-white'
+      gray: 'bg-gray-500 dark:bg-gray-400'
     },
     size: {
       '3xs': 'h-[4px] min-w-[4px] text-[4px]',

src/theme/form-field.ts

@@ -6,7 +6,7 @@ export default {
     label: 'block font-medium text-gray-700 dark:text-gray-200',
     container: 'mt-1 relative',
     description: 'text-gray-500 dark:text-gray-400',
-    error: 'mt-2 text-red-500 dark:text-red-400',
+    error: 'mt-2 text-error-500 dark:text-error-400',
     hint: 'text-gray-500 dark:text-gray-400',
     help: 'mt-2 text-gray-500 dark:text-gray-400'
   },
@@ -20,7 +20,7 @@ export default {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
+        label: `after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400`
       }
     }
   },

src/theme/input-menu.ts

@@ -21,25 +21,25 @@ export default (options: Required<ModuleOptions>) => {
       itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
       itemTrailingIcon: 'shrink-0',
       itemLabel: 'truncate',
-      tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
+      tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
       tagsItemText: 'truncate',
-      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.transitions && 'transition-colors'],
+      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.transitions && 'transition-colors'],
       tagsItemDeleteIcon: '',
       tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
     }
   }, {
     slots: {
-      base: 'rounded-md',
+      base: ['rounded-md', options.transitions && 'transition-colors'],
       trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
     },
     variants: {
       multiple: {
         true: {
           root: 'flex-wrap',
-          base: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500 dark:has-[:focus-visible]:ring-primary-400'
+          base: ''
         },
         false: {
-          base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+          base: 'w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
         }
       },
       size: {
@@ -94,6 +94,17 @@ export default (options: Required<ModuleOptions>) => {
           tagsItemDeleteIcon: 'size-4'
         }
       }
-    }
+    },
+    compoundVariants: [...options.colors.map((color: string) => ({
+      color,
+      multiple: true,
+      variant: ['outline', 'subtle'],
+      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-${color}-500 dark:has-[:focus-visible]:ring-${color}-400`
+    })), {
+      color: 'gray',
+      multiple: true,
+      variant: ['outline', 'subtle'],
+      class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-gray-500 dark:has-[:focus-visible]:ring-white'
+    }]
   }, input(options))
 }

src/theme/input.ts

@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative inline-flex items-center',
-    base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+    base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
     leading: 'absolute inset-y-0 start-0 flex items-center',
     leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
     leadingAvatar: 'shrink-0',
@@ -51,12 +51,14 @@ export default (options: Required<ModuleOptions>) => ({
       }
     },
     variant: {
-      outline: '',
-      none: 'bg-transparent'
+      outline: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700',
+      soft: 'text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50',
+      subtle: 'text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700',
+      ghost: 'text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent',
+      none: 'text-gray-900 dark:text-white'
     },
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      white: '',
       gray: ''
     },
     leading: {
@@ -68,22 +70,29 @@ export default (options: Required<ModuleOptions>) => ({
     loading: {
       true: ''
     },
+    highlight: {
+      true: ''
+    },
     type: {
       file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
     }
   },
   compoundVariants: [...options.colors.map((color: string) => ({
     color,
-    variant: 'outline',
-    class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    variant: ['outline', 'subtle'],
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...options.colors.map((color: string) => ({
+    color,
+    highlight: true,
+    class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
   })), {
-    color: 'white',
-    variant: 'outline',
-    class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    color: 'gray',
+    variant: ['outline', 'subtle'],
+    class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white'
   }, {
     color: 'gray',
-    variant: 'outline',
-    class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    highlight: true,
+    class: 'ring ring-inset ring-gray-900 dark:ring-white'
   }, {
     leading: true,
     size: 'xs',
@@ -140,7 +149,7 @@ export default (options: Required<ModuleOptions>) => ({
   }],
   defaultVariants: {
     size: 'md',
-    color: 'white',
+    color: 'primary',
     variant: 'outline'
   }
 })

src/theme/kbd.ts

@@ -1,10 +1,10 @@
 export default {
   base: 'inline-flex items-center justify-center px-1 rounded font-medium font-sans',
   variants: {
-    color: {
-      white: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
-      gray: 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700',
-      black: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
+    variant: {
+      solid: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900',
+      outline: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
+      subtle: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700'
     },
     size: {
       sm: 'h-4 min-w-[16px] text-[10px]',
@@ -13,7 +13,7 @@ export default {
     }
   },
   defaultVariants: {
-    color: 'white',
+    variant: 'outline',
     size: 'md'
   }
 }

src/theme/navigation-menu.ts

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative flex gap-1.5',
     list: 'isolate min-w-0',
     item: 'min-w-0',
-    link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
+    link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
     linkLeadingAvatarSize: '2xs',
@@ -33,12 +33,18 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      black: ''
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+        link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
+        childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+      }])),
+      gray: {
+        link: 'focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white',
+        childLink: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
+      }
     },
     highlightColor: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      black: ''
+      gray: ''
     },
     variant: {
       pill: '',
@@ -108,7 +114,7 @@ export default (options: Required<ModuleOptions>) => ({
       linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
     }
   })), {
-    color: 'black',
+    color: 'gray',
     variant: 'pill',
     active: true,
     class: {
@@ -146,7 +152,7 @@ export default (options: Required<ModuleOptions>) => ({
       linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
     }
   })), {
-    color: 'black',
+    color: 'gray',
     variant: 'link',
     active: true,
     class: {
@@ -161,7 +167,7 @@ export default (options: Required<ModuleOptions>) => ({
       link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
     }
   })), {
-    highlightColor: 'black',
+    highlightColor: 'gray',
     highlight: true,
     active: true,
     class: {

src/theme/progress.ts

@@ -21,7 +21,7 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: `bg-${color}-500 dark:bg-${color}-400`,
         steps: `text-${color}-500 dark:text-${color}-400`
       }])),
-      black: {
+      gray: {
         indicator: 'bg-gray-900 dark:bg-white',
         steps: 'text-white dark:text-gray-900'
       }

src/theme/radio-group.ts

@@ -19,7 +19,7 @@ export default (options: Required<ModuleOptions>) => ({
         base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
         indicator: `bg-${color}-500 dark:bg-${color}-400`
       }])),
-      black: {
+      gray: {
         base: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white',
         indicator: 'bg-gray-900 dark:bg-white'
       }
@@ -78,7 +78,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     required: {
       true: {
-        legend: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+        legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
       }
     }
   },

src/theme/select.ts

@@ -66,13 +66,10 @@ export default (options: Required<ModuleOptions>) => {
           itemTrailingIcon: 'size-6'
         }
       }
-    },
-    defaultVariants: {
-      size: 'md'
     }
   }, {
     slots: {
-      base: 'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+      base: ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
       value: 'truncate group-data-placeholder:text-current/50'
     },
     variants: {

src/theme/separator.ts

@@ -13,9 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
-      white: { border: 'border-white dark:border-gray-900' },
-      gray: { border: 'border-gray-200 dark:border-gray-800' },
-      black: { border: 'border-gray-900 dark:border-white' }
+      gray: { border: 'border-gray-200 dark:border-gray-800' }
     },
     orientation: {
       horizontal: {

src/theme/slider.ts

@@ -13,7 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
         range: `bg-${color}-500 dark:bg-${color}-400`,
         thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
       }])),
-      black: {
+      gray: {
         range: 'bg-gray-900 dark:bg-white',
         thumb: 'ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50'
       }

src/theme/switch.ts

@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
         base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
       }])),
-      black: {
+      gray: {
         base: 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white',
         icon: 'group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white'
       }
@@ -71,7 +71,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     required: {
       true: {
-        label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+        label: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
       }
     },
     disabled: {

src/theme/tabs.ts

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'flex items-center gap-2',
     list: 'relative flex p-1 group',
     indicator: 'absolute transition-[translate,width] duration-200',
-    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
+    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.transitions && 'transition-colors'],
     content: 'focus:outline-none w-full',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
@@ -15,12 +15,11 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      white: '',
-      black: ''
+      gray: ''
     },
     variant: {
       pill: {
-        list: 'bg-gray-50 dark:bg-gray-800 rounded-lg',
+        list: 'bg-gray-100 dark:bg-gray-800 rounded-lg',
         trigger: 'flex-1',
         indicator: 'rounded-md shadow-sm'
       },
@@ -101,39 +100,32 @@ export default (options: Required<ModuleOptions>) => ({
     variant: 'pill',
     class: {
       indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
+      trigger: `data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
     }
   })), {
-    color: 'white',
-    variant: 'pill',
-    class: {
-      indicator: 'bg-white dark:bg-gray-900',
-      trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
-    }
-  }, {
-    color: 'black',
+    color: 'gray',
     variant: 'pill',
     class: {
       indicator: 'bg-gray-900 dark:bg-white',
-      trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
+      trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white'
     }
   }, ...options.colors.map((color: string) => ({
     color,
     variant: 'link',
     class: {
       indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400`
+      trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
     }
   })), {
-    color: ['white', 'black'],
+    color: 'gray',
     variant: 'link',
     class: {
       indicator: 'bg-gray-900 dark:bg-white',
-      trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
+      trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white'
     }
   }],
   defaultVariants: {
-    color: 'white',
+    color: 'primary',
     variant: 'pill',
     size: 'md'
   }

src/theme/toast.ts

@@ -11,13 +11,19 @@ export default (options: Required<ModuleOptions>) => ({
     avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
     progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
-    close: 'p-0'
+    close: 'p-0.5'
   },
   variants: {
-    color: Object.fromEntries(options.colors.map((color: string) => [color, {
-      icon: `text-${color}-500 dark:text-${color}-400`,
-      progress: `bg-${color}-500 dark:bg-${color}-400`
-    }])),
+    color: {
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+        icon: `text-${color}-500 dark:text-${color}-400`,
+        progress: `bg-${color}-500 dark:bg-${color}-400`
+      }])),
+      gray: {
+        icon: 'text-gray-900 dark:text-white',
+        progress: 'bg-gray-900 dark:bg-white'
+      }
+    },
     multiline: {
       true: {
         root: 'items-start',