diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index cd96eaa7..63e68128 100644
--- 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 } }
@@ -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
+ ui?: PartialString
}
export interface InputEmits {
@@ -59,7 +62,7 @@ const slots = defineSlots()
const [modelValue, modelModifiers] = defineModel()
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props)
const { orientation, size: buttonGroupSize } = useButtonGroup(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
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 86613502..9f9d87f9 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -81,6 +81,8 @@ export interface InputMenuProps extends Pick, 'modelValu
*/
filter?: boolean | string[]
items?: T[] | T[][]
+ /** Highlight the ring color like a focus state. */
+ highlight?: boolean
class?: any
ui?: PartialString
}
@@ -131,7 +133,7 @@ const searchTerm = defineModel('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(props)
+const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props)
const { orientation, size: buttonGroupSize } = useButtonGroup(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,
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index 2ded0115..08d320ad 100644
--- 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()
-
+
{{ getKbdKey(value) }}
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 15a6d3e1..4a057c67 100644
--- 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]
(), {
- color: 'white',
- activeColor: 'black',
- variant: 'solid',
+ color: 'gray',
+ activeColor: 'primary',
+ variant: 'outline',
activeVariant: 'solid',
showControls: true
})
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index c475e2a0..b61d70db 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -59,6 +59,8 @@ export interface SelectProps extends Omit, UseCompone
*/
portal?: boolean
items?: T[] | T[][]
+ /** Highlight the ring color like a focus state. */
+ highlight?: boolean
class?: any
ui?: PartialString
}
@@ -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(props)
+const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props)
const { orientation, size: buttonGroupSize } = useButtonGroup(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
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index c29267b6..e4c61808 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -68,6 +68,8 @@ export interface SelectMenuProps extends Pick, 'modelVal
*/
filter?: boolean | string[]
items?: T[] | T[][]
+ /** Highlight the ring color like a focus state. */
+ highlight?: boolean
class?: any
ui?: PartialString
}
@@ -115,7 +117,7 @@ const searchTerm = defineModel('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(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField(props)
const { orientation, size: buttonGroupSize } = useButtonGroup(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
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 1f50de43..c40fde17 100644
--- 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
}
@@ -57,12 +59,13 @@ const emits = defineEmits()
const [modelValue, modelModifiers] = defineModel()
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField(props)
const ui = computed(() => textarea({
color: color.value,
variant: props.variant,
- size: size?.value
+ size: size?.value,
+ highlight: highlight.value
}))
const textareaRef = ref(null)
diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts
index f8b917be..707ec7f4 100644
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -11,6 +11,7 @@ type Props = {
color?: GetObjectField
eagerValidation?: boolean
legend?: string
+ highlight?: boolean
disabled?: boolean
}
@@ -64,7 +65,8 @@ export function useFormField(props?: Props) {
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,
diff --git a/src/templates.ts b/src/templates.ts
index d2acf5c2..f643cc95 100644
--- 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')}
}
`
diff --git a/src/theme/alert.ts b/src/theme/alert.ts
index a66b6321..15bd1f9e 100644
--- a/src/theme/alert.ts
+++ b/src/theme/alert.ts
@@ -5,19 +5,17 @@ export default (options: Required) => ({
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) => ({
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) => ({
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'
}
})
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
index 033bbaa6..f761d571 100644
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -5,9 +5,7 @@ export default (options: Required) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
- white: '',
- gray: '',
- black: ''
+ gray: ''
},
variant: {
solid: '',
@@ -28,7 +26,7 @@ export default (options: Required) => ({
})), ...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) => ({
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',
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index cdc4aca8..84f5e315 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -5,7 +5,7 @@ export default (options: Required) => ({
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',
diff --git a/src/theme/button.ts b/src/theme/button.ts
index a3471a0a..80fbb5d7 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -13,9 +13,7 @@ export default (options: Required) => ({
...buttonGroupVariant,
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
- white: '',
- gray: '',
- black: ''
+ gray: ''
},
variant: {
solid: '',
@@ -74,63 +72,51 @@ export default (options: Required) => ({
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,
diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts
index 2ae72b42..7a829e89 100644
--- a/src/theme/checkbox.ts
+++ b/src/theme/checkbox.ts
@@ -13,7 +13,7 @@ export default (options: Required) => ({
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) => ({
},
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) => ({
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'
}],
diff --git a/src/theme/chip.ts b/src/theme/chip.ts
index a88eef06..b9886535 100644
--- a/src/theme/chip.ts
+++ b/src/theme/chip.ts
@@ -8,9 +8,7 @@ export default (options: Required) => ({
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]',
diff --git a/src/theme/form-field.ts b/src/theme/form-field.ts
index 6b0a54f2..9548439a 100644
--- 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`
}
}
},
diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts
index 308dcc44..08885302 100644
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -21,25 +21,25 @@ export default (options: Required) => {
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) => {
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))
}
diff --git a/src/theme/input.ts b/src/theme/input.ts
index 647534b7..a330f211 100644
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
export default (options: Required) => ({
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) => ({
}
},
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) => ({
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) => ({
}],
defaultVariants: {
size: 'md',
- color: 'white',
+ color: 'primary',
variant: 'outline'
}
})
diff --git a/src/theme/kbd.ts b/src/theme/kbd.ts
index 340290ca..b53d98ff 100644
--- 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'
}
}
diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts
index e8246e9c..617e795f 100644
--- a/src/theme/navigation-menu.ts
+++ b/src/theme/navigation-menu.ts
@@ -5,7 +5,7 @@ export default (options: Required) => ({
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) => ({
},
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) => ({
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) => ({
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) => ({
link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
}
})), {
- highlightColor: 'black',
+ highlightColor: 'gray',
highlight: true,
active: true,
class: {
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index fe484deb..f99dc891 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -21,7 +21,7 @@ export default (options: Required) => ({
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'
}
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index e005a4ea..60b254dd 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -19,7 +19,7 @@ export default (options: Required) => ({
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) => ({
},
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'
}
}
},
diff --git a/src/theme/select.ts b/src/theme/select.ts
index 7b5e4937..3bd07089 100644
--- a/src/theme/select.ts
+++ b/src/theme/select.ts
@@ -66,13 +66,10 @@ export default (options: Required) => {
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: {
diff --git a/src/theme/separator.ts b/src/theme/separator.ts
index 3829a0d5..3c6b7bf4 100644
--- a/src/theme/separator.ts
+++ b/src/theme/separator.ts
@@ -13,9 +13,7 @@ export default (options: Required) => ({
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: {
diff --git a/src/theme/slider.ts b/src/theme/slider.ts
index 348fdffb..868ad243 100644
--- a/src/theme/slider.ts
+++ b/src/theme/slider.ts
@@ -13,7 +13,7 @@ export default (options: Required) => ({
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'
}
diff --git a/src/theme/switch.ts b/src/theme/switch.ts
index 20484b23..a1108db0 100644
--- a/src/theme/switch.ts
+++ b/src/theme/switch.ts
@@ -17,7 +17,7 @@ export default (options: Required) => ({
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) => ({
},
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: {
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 26643f67..cd49b6cb 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -5,7 +5,7 @@ export default (options: Required) => ({
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) => ({
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) => ({
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'
}
diff --git a/src/theme/toast.ts b/src/theme/toast.ts
index 205d7ce6..dbf8f760 100644
--- a/src/theme/toast.ts
+++ b/src/theme/toast.ts
@@ -11,13 +11,19 @@ export default (options: Required) => ({
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',
diff --git a/test/components/Alert.spec.ts b/test/components/Alert.spec.ts
index 22570e0d..40e2615c 100644
--- a/test/components/Alert.spec.ts
+++ b/test/components/Alert.spec.ts
@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/alert'
describe('Alert', () => {
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const props = { title: 'Alert' }
@@ -17,8 +16,8 @@ describe('Alert', () => {
['with avatar', { props: { ...props, avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
['with close', { props: { ...props, close: true } }],
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, color: 'primary', variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with as', { props: { ...props, as: 'article' } }],
['with class', { props: { ...props, class: 'w-48' } }],
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
index 0f3c9dfc..9cceca40 100644
--- a/test/components/Badge.spec.ts
+++ b/test/components/Badge.spec.ts
@@ -5,7 +5,6 @@ import theme from '#build/ui/badge'
describe('Badge', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -14,8 +13,8 @@ describe('Badge', () => {
['with as', { props: { label: 'Badge', as: 'div' } }],
['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Badge', size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { label: 'Badge', color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Badge', variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Badge', variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { label: 'Badge', variant, color: 'gray' } }]),
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: BadgeProps, slots?: Partial }) => {
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index 59a82182..09c3b226 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -5,15 +5,14 @@ import theme from '#build/ui/button'
describe('Button', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with label', { props: { label: 'Button' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Button', size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { label: 'Button', color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Button', variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Button', variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { label: 'Button', variant, color: 'gray' } }]),
['with icon', { props: { icon: 'i-heroicons-rocket-launch' } }],
['with leading and icon', { props: { leading: true, icon: 'i-heroicons-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-heroicons-arrow-left' } }],
diff --git a/test/components/Checkbox.spec.ts b/test/components/Checkbox.spec.ts
index c24752c6..460f3947 100644
--- a/test/components/Checkbox.spec.ts
+++ b/test/components/Checkbox.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Checkbox', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -24,7 +23,7 @@ describe('Checkbox', () => {
['with required', { props: { label: 'Label', required: true } }],
['with description', { props: { label: 'Label', description: 'Description' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
+ ['with color gray', { props: { color: 'gray', defaultValue: true } }],
['with class', { props: { class: 'inline-flex' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots
diff --git a/test/components/Chip.spec.ts b/test/components/Chip.spec.ts
index 3b6a7baf..72e89217 100644
--- a/test/components/Chip.spec.ts
+++ b/test/components/Chip.spec.ts
@@ -5,7 +5,6 @@ import theme from '#build/ui/chip'
describe('Chip', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const positions = Object.keys(theme.variants.position) as any
it.each([
@@ -14,8 +13,8 @@ describe('Chip', () => {
['with text', { props: { text: 'Text' } }],
['with inset', { props: { inset: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...positions.map((position: string) => [`with position ${position}`, { props: { position } }]),
+ ['with color gray', { props: { color: 'gray' } }],
['without show', { props: { show: false } }],
['with class', { props: { class: 'mx-auto' } }],
['with ui', { props: { ui: { base: 'text-gray-500 dark:text-gray-400' } } }],
diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts
index b64aad2a..72d82699 100644
--- a/test/components/Input.spec.ts
+++ b/test/components/Input.spec.ts
@@ -9,7 +9,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Input', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -28,8 +27,8 @@ describe('Input', () => {
['with loading', { props: { loading: true } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { variant, color: 'gray' } }]),
['with class', { props: { class: 'absolute' } }],
['with ui', { props: { ui: { base: 'rounded-full' } } }],
// Slots
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
index 37de35d8..247cac76 100644
--- a/test/components/InputMenu.spec.ts
+++ b/test/components/InputMenu.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('InputMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -51,8 +50,8 @@ describe('InputMenu', () => {
['with selectedIcon', { props: { ...props, selectedIcon: 'i-heroicons-check' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
diff --git a/test/components/Kbd.spec.ts b/test/components/Kbd.spec.ts
index 5fcab612..e98de92e 100644
--- a/test/components/Kbd.spec.ts
+++ b/test/components/Kbd.spec.ts
@@ -5,14 +5,14 @@ import theme from '#build/ui/kbd'
describe('Kbd', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
+ const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with value', { props: { value: 'K' } }],
['with as', { props: { value: 'K', as: 'span' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { value: 'K', size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { value: 'K', color } }]),
+ ...variants.map((variant: string) => [`with variant ${variant}`, { props: { value: 'K', variant } }]),
['with class', { props: { value: 'K', class: 'font-bold' } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts
index 6302e823..6741553a 100644
--- a/test/components/NavigationMenu.spec.ts
+++ b/test/components/NavigationMenu.spec.ts
@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/navigation-menu'
describe('NavigationMenu', () => {
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [
@@ -82,10 +81,11 @@ describe('NavigationMenu', () => {
['with items', { props }],
['with arrow', { props: { ...props, arrow: true } }],
['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
- ...variants.map((variant: string) => [`with highlight ${variant}`, { props: { ...props, highlight: true, variant } }]),
- ...colors.map((highlightColor: string) => [`with highlight color ${highlightColor}`, { props: { ...props, highlight: true, highlightColor } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant} highlight`, { props: { ...props, variant, highlight: true } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant} highlight`, { props: { ...props, variant, color: 'gray', highlight: true } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant} highlight gray`, { props: { ...props, variant, color: 'gray', highlight: true, highlightColor: 'gray' } }]),
['with trailingIcon', { props: { ...props, trailingIcon: 'i-heroicons-plus' } }],
['with class', { props: { ...props, class: 'w-48' } }],
['with ui', { props: { ...props, ui: { itemLeadingIcon: 'size-4' } } }],
diff --git a/test/components/Pagination.spec.ts b/test/components/Pagination.spec.ts
index c134cdf4..35292b21 100644
--- a/test/components/Pagination.spec.ts
+++ b/test/components/Pagination.spec.ts
@@ -5,7 +5,6 @@ import theme from '#build/ui/button'
describe('Pagination', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const props = { total: 100 }
@@ -27,10 +26,10 @@ describe('Pagination', () => {
['with lastIcon', { props: { ...props, lastIcon: 'i-heroicons-arrow-right' } }],
['with ellipsisIcon', { props: { ...props, ellipsisIcon: 'i-heroicons-ellipsis-vertical', siblingCount: 1, showEdges: true, page: 5 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, color: 'primary', variant } }]),
- ...colors.map((activeColor: string) => [`with active color ${activeColor}`, { props: { ...props, activeColor } }]),
- ...variants.map((activeVariant: string) => [`with active variant ${activeVariant}`, { props: { ...props, color: 'primary', activeVariant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, color: 'primary' } }]),
+ ...variants.map((activeVariant: string) => [`with primary active variant ${activeVariant}`, { props: { ...props, activeVariant } }]),
+ ...variants.map((activeVariant: string) => [`with gray active variant ${activeVariant}`, { props: { ...props, activeVariant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'relative' } }],
['with ui', { props: { ...props, ui: { list: 'gap-3' } } }],
// Slots
diff --git a/test/components/Progress.spec.ts b/test/components/Progress.spec.ts
index a9f740cf..2160ee9f 100644
--- a/test/components/Progress.spec.ts
+++ b/test/components/Progress.spec.ts
@@ -5,7 +5,6 @@ import theme from '#build/ui/progress'
describe('Progress', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const orientations = Object.keys(theme.variants.orientation) as any
const animations = Object.keys(theme.variants.animation) as any
const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
@@ -19,9 +18,9 @@ describe('Progress', () => {
['with max inverted', { props: { modelValue: 2, status: true, inverted: true, max } }],
['with as', { props: { as: 'span' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { orientation } }]),
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
+ ['with color gray', { props: { color: 'gray', modelValue: 50 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { base: 'bg-white dark:bg-gray-900' } } }],
// Slots
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 72e69265..77a12b09 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('RadioGroup', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const items = [
{ value: '1', label: 'Option 1' },
@@ -25,7 +24,7 @@ describe('RadioGroup', () => {
['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
['with required', { props: { ...props, legend: 'Legend', required: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
+ ['with color gray', { props: { color: 'gray', defaultValue: '1' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { wrapper: 'ms-4' } } }],
['with orientation', { props: { ...props, orientation: 'horizontal' } }],
diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts
index 260b0b5b..38f8789f 100644
--- a/test/components/Select.spec.ts
+++ b/test/components/Select.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Select', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -54,8 +53,8 @@ describe('Select', () => {
['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'rounded-full' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots
diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts
index 9f0b610b..847fd153 100644
--- a/test/components/SelectMenu.spec.ts
+++ b/test/components/SelectMenu.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('SelectMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -57,8 +56,8 @@ describe('SelectMenu', () => {
['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'rounded-full' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots
diff --git a/test/components/Separator.spec.ts b/test/components/Separator.spec.ts
index 5ee5779b..cab48dc7 100644
--- a/test/components/Separator.spec.ts
+++ b/test/components/Separator.spec.ts
@@ -6,7 +6,6 @@ import theme from '#build/ui/separator'
describe('Separator', () => {
const types = Object.keys(theme.variants.type) as any
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -18,7 +17,7 @@ describe('Separator', () => {
['with decorative', { props: { decorative: true } }],
...types.map((type: string) => [`with type ${type}`, { props: { type } }]),
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
+ ['with color primary', { props: { color: 'primary' } }],
['with class', { props: { class: 'flex-row-reverse' } }],
['with ui', { props: { ui: { label: 'text-lg' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SeparatorProps, slots?: Partial }) => {
diff --git a/test/components/Slider.spec.ts b/test/components/Slider.spec.ts
index 140ee132..970af003 100644
--- a/test/components/Slider.spec.ts
+++ b/test/components/Slider.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Slider', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -21,7 +20,7 @@ describe('Slider', () => {
['with min max step', { props: { min: 4, max: 12, step: 2 } }],
['with min steps between thumbs', { props: { defaultValue: [0, 30], minStepsBetweenThumbs: 30 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
+ ['with color gray', { props: { color: 'gray', defaultValue: 10 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { track: 'bg-gray-100 dark:bg-gray-800' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps }) => {
diff --git a/test/components/Switch.spec.ts b/test/components/Switch.spec.ts
index bee6779c..00fafc3d 100644
--- a/test/components/Switch.spec.ts
+++ b/test/components/Switch.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Switch', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -26,7 +25,7 @@ describe('Switch', () => {
['with required', { props: { label: 'Label', required: true } }],
['with description', { props: { label: 'Label', description: 'Description' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
+ ['with color gray', { props: { color: 'gray', defaultValue: true } }],
['with class', { props: { class: 'inline-flex' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots
diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts
index 21355398..950f2cca 100644
--- a/test/components/Tabs.spec.ts
+++ b/test/components/Tabs.spec.ts
@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/tabs'
describe('Tabs', () => {
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const sizes = Object.keys(theme.variants.size) as any
@@ -33,9 +32,9 @@ describe('Tabs', () => {
['with modelValue', { props: { ...props, modelValue: '1' } }],
['with defaultValue', { props: { ...props, defaultValue: '1' } }],
['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['without content', { props: { ...props, content: false } }],
['with class', { props: { ...props, class: 'w-96' } }],
['with ui', { props: { ...props, ui: { content: 'w-full ring ring-gray-200 dark:ring-gray-800' } } }],
diff --git a/test/components/Textarea.spec.ts b/test/components/Textarea.spec.ts
index 754862f9..fd5b746d 100644
--- a/test/components/Textarea.spec.ts
+++ b/test/components/Textarea.spec.ts
@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Textarea', () => {
const sizes = Object.keys(theme.variants.size) as any
- const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -20,8 +19,8 @@ describe('Textarea', () => {
['with disabled', { props: { disabled: true } }],
['with rows', { props: { rows: 5 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
- ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
- ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
+ ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
+ ...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { variant, color: 'gray' } }]),
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots
diff --git a/test/components/Toast.spec.ts b/test/components/Toast.spec.ts
index eb29e82f..ad88403d 100644
--- a/test/components/Toast.spec.ts
+++ b/test/components/Toast.spec.ts
@@ -4,7 +4,6 @@ import Toaster from '../../src/runtime/components/Toaster.vue'
import Toast, { type ToastProps, type ToastSlots } from '../../src/runtime/components/Toast.vue'
import ComponentRender from '../component-render'
import { ClientOnly } from '#components'
-import theme from '#build/ui/toast'
const ToastWrapper = defineComponent({
components: {
@@ -25,8 +24,6 @@ const ToastWrapper = defineComponent({
})
describe('Toast', () => {
- const colors = Object.keys(theme.variants.color) as any
-
const props = { title: 'Toast' }
it.each([
@@ -40,7 +37,7 @@ describe('Toast', () => {
['without close', { props: { ...props, close: false } }],
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
['with type', { props: { ...props, type: 'background' as const } }],
- ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
+ ['with color gray', { props: { ...props, color: 'gray' as const } }],
['with class', { props: { ...props, class: 'bg-gray-50 dark:bg-gray-800/50' } }],
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
// Slots
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index ea335bf3..f5dd0b6a 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Alert > renders with as correctly 1`] = `
-"
+"
Alert
@@ -13,7 +13,7 @@ exports[`Alert > renders with as correctly 1`] = `
`;
exports[`Alert > renders with avatar correctly 1`] = `
-"
+"
Alert
@@ -24,7 +24,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
`;
exports[`Alert > renders with class correctly 1`] = `
-"
+"
Alert
@@ -36,14 +36,14 @@ exports[`Alert > renders with class correctly 1`] = `
`;
exports[`Alert > renders with close correctly 1`] = `
-"
+"
-