arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 14:31:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
src/runtime/plugins/colors.ts
View File

@@ -9,19 +9,24 @@ export default defineNuxtPlugin(() => {
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
function generateColor(key: string, value: string) {
return `${shades.map(shade => `--color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n ')}`
function generateShades(key: string, value: string) {
return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n ')}`
}
function generateColor(key: string, shade: number) {
return `--ui-${key}: var(--ui-color-${key}-${shade});`
}
const root = computed(() => {
const { neutral, ...colors } = appConfig.ui.colors
return `:root {
${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateColor(key, value)).join('\n ')}
--color-primary-DEFAULT: var(--color-primary-500);
${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n ')}
${Object.keys(colors).map(key => generateColor(key, 500)).join('\n ')}
}
.dark {
--color-primary-DEFAULT: var(--color-primary-400);
}
`
${Object.keys(colors).map(key => generateColor(key, 400)).join('\n ')}
}`
})
// Head