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

@@ -3,12 +3,12 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative inline-flex items-center justify-center shrink-0',
base: 'rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
base: 'rounded-full ring ring-[--ui-bg] flex items-center justify-center text-[--ui-bg] font-medium whitespace-nowrap'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
gray: 'bg-gray-500 dark:bg-gray-400'
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-[--ui-${color}]`])),
neutral: 'bg-[--ui-text-muted]'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px]',