refactor(module)!: implement design system with CSS variables (#2298)

This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions

View File

@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-gray-700 dark:text-gray-200 flex',
container: 'font-medium text-[--ui-text] flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
@@ -12,8 +12,8 @@ export default (options: Required<ModuleOptions>) => ({
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
gray: { border: 'border-gray-200 dark:border-gray-800' }
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-[--ui-${color}]` }])),
neutral: { border: 'border-[--ui-border]' }
},
orientation: {
horizontal: {
@@ -88,7 +88,7 @@ export default (options: Required<ModuleOptions>) => ({
class: { border: 'border-s-[5px]' }
}],
defaultVariants: {
color: 'gray',
color: 'neutral',
size: 'xs',
type: 'solid'
}