mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 05:58:07 +01:00
95aa6f68b3
Co-authored-by: Max Steinwand <msteinwand@kues.de> Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Romain Hamel <rom.hml@gmail.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import type { ModuleOptions } from '../module'
|
|
|
|
export default (options: Required<ModuleOptions>) => ({
|
|
slots: {
|
|
root: 'relative inline-flex items-center gap-1.5',
|
|
base: ['rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors']
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
base: 'size-6 text-xs'
|
|
},
|
|
sm: {
|
|
base: 'size-7 text-xs'
|
|
},
|
|
md: {
|
|
base: 'size-8 text-sm'
|
|
},
|
|
lg: {
|
|
base: 'size-9 text-sm'
|
|
},
|
|
xl: {
|
|
base: 'size-10 text-base'
|
|
}
|
|
},
|
|
variant: {
|
|
outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
|
|
soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
|
|
subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
|
|
ghost: 'text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
|
|
none: 'text-[var(--ui-text-highlighted)] bg-transparent'
|
|
},
|
|
color: {
|
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
|
neutral: ''
|
|
},
|
|
highlight: {
|
|
true: ''
|
|
}
|
|
},
|
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
|
color,
|
|
variant: ['outline', 'subtle'],
|
|
class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
|
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
|
color,
|
|
highlight: true,
|
|
class: `ring ring-inset ring-[var(--ui-${color})]`
|
|
})), {
|
|
color: 'neutral',
|
|
variant: ['outline', 'subtle'],
|
|
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
|
|
}, {
|
|
color: 'neutral',
|
|
highlight: true,
|
|
class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
|
|
}],
|
|
defaultVariants: {
|
|
size: 'md',
|
|
color: 'primary',
|
|
variant: 'outline'
|
|
}
|
|
})
|