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

feat(module)!: move primary and gray inside colors object

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-01 14:57:46 +02:00
parent 30bc3a1d76
commit ccbaf6ea15
5 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/app/app.config.ts
View File

@@ -1,6 +1,8 @@
export default defineAppConfig({ export default defineAppConfig({
ui: { ui: {
primary: 'sky', colors: {
gray: 'cool' primary: 'sky',
gray: 'cool'
}
} }
}) })

6
playground/app/app.config.ts
View File

@@ -5,7 +5,9 @@ export default defineAppConfig({
duration: 5000 duration: 5000
}, },
ui: { ui: {
primary: 'sky', colors: {
gray: 'cool' primary: 'red',
gray: 'cool'
}
} }
}) })

6
src/module.ts
View File

@@ -48,8 +48,10 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.options.alias['#ui'] = resolve('./runtime') nuxt.options.alias['#ui'] = resolve('./runtime')
nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, { nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
primary: 'green', colors: {
gray: 'cool', primary: 'green',
gray: 'cool'
},
icons icons
}) })

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

@@ -7,11 +7,14 @@ export default defineNuxtPlugin(() => {
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] 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 ')}`
}
const root = computed(() => { const root = computed(() => {
return `:root { return `:root {
${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')} ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateColor(key, value)).join('\n ')}
--color-primary-DEFAULT: var(--color-primary-500); --color-primary-DEFAULT: var(--color-primary-500);
${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')}
} }
.dark { .dark {
--color-primary-DEFAULT: var(--color-primary-400); --color-primary-DEFAULT: var(--color-primary-400);

6
src/templates.ts
View File

@@ -94,8 +94,10 @@ const colors = ${JSON.stringify(options.colors)} as const;
const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)}; const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
type AppConfigUI = { type AppConfigUI = {
primary?: typeof colors[number] colors?: {
gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone' primary?: typeof colors[number]
gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
}
icons?: Partial<typeof icons> icons?: Partial<typeof icons>
} & DeepPartial<typeof ui> } & DeepPartial<typeof ui>