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

2026-01-25 01:10:40 +01:00 · 2024-07-09 10:45:26 +02:00
parent 18c5ead1bd
commit c018c23224
115 changed files with 4366 additions and 4191 deletions
--- a/src/module.ts
+++ b/src/module.ts
@@ -14,7 +14,7 @@ export interface ModuleOptions {
  prefix?: string
  /**
   * Colors to generate classes for (based on TailwindCSS colors)
-   * @defaultValue ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
+   * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
   */
  colors?: string[]
  /**
@@ -40,7 +40,7 @@ export default defineNuxtModule<ModuleOptions>({
  async setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

-    options.colors = options.colors?.length ? [...new Set(['primary', ...options.colors])] : ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
+    options.colors = options.colors?.length ? [...new Set(['primary', 'error', ...options.colors])] : ['primary', 'error', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']

    // @ts-expect-error - Add ui options to nuxt
    nuxt.options.ui = options
@@ -50,6 +50,7 @@ export default defineNuxtModule<ModuleOptions>({
    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
      colors: {
        primary: 'green',
+        error: 'red',
        gray: 'cool'
      },
      icons
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -93,7 +93,7 @@ provide(formFieldInjectionKey, computed(() => ({
      </p>
    </div>

-    <div :class="[label && ui.container()]">
+    <div :class="[label && ui.container({ class: props.ui?.container })]">
      <slot :error="error" />

      <p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'

 const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }

@@ -25,8 +26,10 @@ export interface InputProps extends UseComponentIconsProps {
  autofocus?: boolean
  autofocusDelay?: number
  disabled?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
  class?: any
-  ui?: Partial<typeof input.slots>
+  ui?: PartialString<typeof input.slots>
 }

 export interface InputEmits {
@@ -59,7 +62,7 @@ const slots = defineSlots<InputSlots>()

 const [modelValue, modelModifiers] = defineModel<string | number>()

-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)

@@ -71,6 +74,7 @@ const ui = computed(() => input({
  variant: props.variant,
  size: inputSize?.value,
  loading: props.loading,
+  highlight: highlight.value,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
  buttonGroup: orientation.value
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -81,6 +81,8 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
   */
  filter?: boolean | string[]
  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
  class?: any
  ui?: PartialString<typeof inputMenu.slots>
 }
@@ -131,7 +133,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))

@@ -142,6 +144,7 @@ const ui = computed(() => inputMenu({
  variant: props.variant,
  size: inputSize?.value,
  loading: props.loading,
+  highlight: highlight.value,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
  multiple: props.multiple,
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -18,7 +18,7 @@ export interface KbdProps {
   */
  as?: any
  value: KbdKey | string
-  color?: KbdVariants['color']
+  variant?: KbdVariants['variant']
  size?: KbdVariants['size']
  class?: any
 }
@@ -41,7 +41,7 @@ const { getKbdKey } = useKbd()
 </script>

 <template>
-  <Primitive :as="as" :class="kbd({ color, size, class: props.class })">
+  <Primitive :as="as" :class="kbd({ variant, size, class: props.class })">
    <slot>
      {{ getKbdKey(value) }}
    </slot>
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -136,7 +136,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
                    <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
                      <UBadge
                        v-if="item.badge"
-                        color="white"
+                        color="gray"
+                        variant="outline"
                        :size="(ui.linkTrailingBadgeSize() as BadgeProps['size'])"
                        v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
                        :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -105,9 +105,9 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'

 const props = withDefaults(defineProps<PaginationProps>(), {
-  color: 'white',
-  activeColor: 'black',
-  variant: 'solid',
+  color: 'gray',
+  activeColor: 'primary',
+  variant: 'outline',
  activeVariant: 'solid',
  showControls: true
 })
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -59,6 +59,8 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
   */
  portal?: boolean
  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
  class?: any
  ui?: PartialString<typeof select.slots>
 }
@@ -99,7 +101,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)

-const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))

@@ -110,6 +112,7 @@ const ui = computed(() => select({
  variant: props.variant,
  size: selectSize?.value,
  loading: props.loading,
+  highlight: highlight.value,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
  buttonGroup: orientation.value
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -68,6 +68,8 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
   */
  filter?: boolean | string[]
  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
  class?: any
  ui?: PartialString<typeof selectMenu.slots>
 }
@@ -115,7 +117,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))

@@ -126,6 +128,7 @@ const ui = computed(() => selectMenu({
  variant: props.variant,
  size: selectSize?.value,
  loading: props.loading,
+  highlight: highlight.value,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
  buttonGroup: orientation.value
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -26,6 +26,8 @@ export interface TextareaProps {
  rows?: number
  maxrows?: number
  autoresize?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
  ui?: Partial<typeof textarea.slots>
 }

@@ -57,12 +59,13 @@ const emits = defineEmits<TextareaEmits>()

 const [modelValue, modelModifiers] = defineModel<string | number>()

-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)

 const ui = computed(() => textarea({
  color: color.value,
  variant: props.variant,
-  size: size?.value
+  size: size?.value,
+  highlight: highlight.value
 }))

 const textareaRef = ref<HTMLTextAreaElement | null>(null)
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -11,6 +11,7 @@ type Props<T> = {
  color?: GetObjectField<T, 'color'>
  eagerValidation?: boolean
  legend?: string
+  highlight?: boolean
  disabled?: boolean
 }

@@ -64,7 +65,8 @@ export function useFormField<T>(props?: Props<T>) {
    id: computed(() => props?.id ?? formField?.value.id),
    name: computed(() => props?.name ?? formField?.value.name),
    size: computed(() => props?.size ?? formField?.value.size),
-    color: computed(() => formField?.value.error ? 'red' : props?.color),
+    color: computed(() => formField?.value.error ? 'error' : props?.color),
+    highlight: computed(() => formField?.value.error ? true : props?.highlight),
    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
    emitFormBlur,
    emitFormInput,
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -36,6 +36,7 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
  --spacing-4_5: 1.125rem;

  ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n\t')}
+  ${shades.map(shade => `--color-error-${shade}: var(--color-error-${shade});`).join('\n\t')}
  ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n\t')}
 }
 `
--- a/src/theme/alert.ts
+++ b/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'
  }
 })
--- a/src/theme/badge.ts
+++ b/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',
--- a/src/theme/breadcrumb.ts
+++ b/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',
--- a/src/theme/button.ts
+++ b/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,
--- a/src/theme/checkbox.ts
+++ b/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'
  }],
--- a/src/theme/chip.ts
+++ b/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]',
--- a/src/theme/form-field.ts
+++ b/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`
      }
    }
  },
--- a/src/theme/input-menu.ts
+++ b/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))
 }
--- a/src/theme/input.ts
+++ b/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'
  }
 })
--- a/src/theme/kbd.ts
+++ b/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'
  }
 }
--- a/src/theme/navigation-menu.ts
+++ b/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: {
--- a/src/theme/progress.ts
+++ b/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'
      }
--- a/src/theme/radio-group.ts
+++ b/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'
      }
    }
  },
--- a/src/theme/select.ts
+++ b/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: {
--- a/src/theme/separator.ts
+++ b/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: {
--- a/src/theme/slider.ts
+++ b/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'
      }
--- a/src/theme/switch.ts
+++ b/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: {
--- a/src/theme/tabs.ts
+++ b/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'
  }
--- a/src/theme/toast.ts
+++ b/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',