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

chore(module): update colors

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-07 12:55:00 +01:00
parent e257a43964
commit 1530e82235
3 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/module.ts
View File

@@ -1,6 +1,7 @@
import { defu } from 'defu' import { defu } from 'defu'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, addTemplate, installModule } from '@nuxt/kit' import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule } from '@nuxt/kit'
import tailwindcss from '@tailwindcss/vite' import tailwindcss from '@tailwindcss/vite'
import createTemplates from './templates'
import type { DeepPartial } from './runtime/types' import type { DeepPartial } from './runtime/types'
import * as theme from './runtime/theme' import * as theme from './runtime/theme'
@@ -46,43 +47,17 @@ export default defineNuxtModule({
} }
}) })
await installModule('nuxt-icon')
addVitePlugin(tailwindcss) addVitePlugin(tailwindcss)
createTemplates(nuxt)
await installModule('nuxt-icon')
// await installModule('@nuxtjs/color-mode', { classSuffix: '' })
addPlugin({ addPlugin({
src: resolver.resolve('./runtime/plugins/index') src: resolver.resolve('./runtime/plugins/index')
}) })
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
const template = addTemplate({
filename: 'main.css',
write: true,
getContents: () => `
@import "tailwindcss";
@theme {
--color-cool-50: #f9fafb;
--color-cool-100: #f3f4f6;
--color-cool-200: #e5e7eb;
--color-cool-300: #d1d5db;
--color-cool-400: #9ca3af;
--color-cool-500: #6b7280;
--color-cool-600: #4b5563;
--color-cool-700: #374151;
--color-cool-800: #1f2937;
--color-cool-900: #111827;
--color-cool-950: #030712;
${shades.map(shade => `--color-primary-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-gray-${shade}: var(--color-${nuxt.options.appConfig.ui.gray}-${shade});`).join('\n')}
}
`
})
nuxt.options.css.push(template.dst)
addComponentsDir({ addComponentsDir({
path: resolver.resolve('./runtime/components'), path: resolver.resolve('./runtime/components'),
prefix: 'U', prefix: 'U',

5
src/runtime/plugins/index.ts
View File

@@ -9,9 +9,14 @@ export default defineNuxtPlugin(() => {
const root = computed(() => { const root = computed(() => {
return `:root { return `:root {
${shades.map(shade => `--color-current-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')} ${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
--color-primary-DEFAULT: var(--color-primary-500);
${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')} ${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')}
} }
.dark {
--color-primary-DEFAULT: var(--color-primary-400);
}
` `
}) })

34
src/templates.ts Normal file
View File

@@ -0,0 +1,34 @@
import { useNuxt, addTemplate } from '@nuxt/kit'
export default function createTemplates (nuxt = useNuxt()) {
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
const template = addTemplate({
filename: 'ui.css',
write: true,
getContents: () => `
@import "tailwindcss";
@theme {
--color-gray-*: initial;
--color-cool-50: #f9fafb;
--color-cool-100: #f3f4f6;
--color-cool-200: #e5e7eb;
--color-cool-300: #d1d5db;
--color-cool-400: #9ca3af;
--color-cool-500: #6b7280;
--color-cool-600: #4b5563;
--color-cool-700: #374151;
--color-cool-800: #1f2937;
--color-cool-900: #111827;
--color-cool-950: #030712;
${shades.map(shade => `--color-current-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-primary-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-gray-${shade}: var(--color-${nuxt.options.appConfig.ui.gray}-${shade});`).join('\n')}
}
`
})
nuxt.options.css.push(template.dst)
}