arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 23:11:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): generate tailwindcss theme colors (#2967)

Browse Source 
Co-authored-by: HugoRCD <hugo.richard@epitech.eu>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2025-02-06 17:29:03 +01:00
committed by GitHub
parent 4aa317944e
commit 443a0be017
12 changed files with 207 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/runtime/index.css
View File

@@ -1,3 +1,4 @@
@import '#build/ui.css';
@import './keyframes.css';
@variant light (&:where(.light, .light *));

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

@@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
function generateShades(key: string, value: string) {
return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n ')}`
return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade});`).join('\n ')}`
}
function generateColor(key: string, shade: number) {
return `--ui-${key}: var(--ui-color-${key}-${shade});`

21
src/templates.ts
View File

@@ -5,6 +5,7 @@ import type { Nuxt, NuxtTemplate, NuxtTypeTemplate } from '@nuxt/schema'
import type { Resolver } from '@nuxt/kit'
import type { ModuleOptions } from './module'
import * as theme from './theme'
import colors from 'tailwindcss/colors'
export function buildTemplates(options: ModuleOptions) {
return Object.entries(theme).reduce((acc, [key, component]) => {
@@ -69,6 +70,26 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
})
}
templates.push({
filename: 'ui.css',
write: true,
getContents: () => `@theme default {
--color-old-neutral-50: ${colors.neutral[50]};
--color-old-neutral-100: ${colors.neutral[100]};
--color-old-neutral-200: ${colors.neutral[200]};
--color-old-neutral-300: ${colors.neutral[300]};
--color-old-neutral-400: ${colors.neutral[400]};
--color-old-neutral-500: ${colors.neutral[500]};
--color-old-neutral-600: ${colors.neutral[600]};
--color-old-neutral-700: ${colors.neutral[700]};
--color-old-neutral-800: ${colors.neutral[800]};
--color-old-neutral-900: ${colors.neutral[900]};
--color-old-neutral-950: ${colors.neutral[950]};
${[...(options.theme?.colors || []), 'neutral'].map(color => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join('\n\t')).join('\n\t')}
}
`
})
templates.push({
filename: 'ui/index.ts',
write: true,