From 479de29c3b9100da7ef3bef69f40509deb4005a0 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 24 Dec 2024 11:59:09 +0100 Subject: [PATCH 1/2] feat(templates): generate tailwindcss theme colors --- src/runtime/index.css | 1 + src/templates.ts | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/src/runtime/index.css b/src/runtime/index.css index 725196d5b9..3621ce2c99 100644 --- a/src/runtime/index.css +++ b/src/runtime/index.css @@ -1,3 +1,4 @@ +@import '#build/ui.css'; @import './keyframes.css'; @variant dark (&:where(.dark, .dark *)); diff --git a/src/templates.ts b/src/templates.ts index 6a41418eda..02e20c30dd 100644 --- a/src/templates.ts +++ b/src/templates.ts @@ -69,6 +69,15 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record `@theme default { + ${[...(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, From dac5f6a5888124b6aa069db1e7a118aa35accc20 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 24 Dec 2024 11:59:20 +0100 Subject: [PATCH 2/2] docs(theme): remove limitation on colors --- docs/content/1.getting-started/3.theme.md | 57 ----------------------- 1 file changed, 57 deletions(-) diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 3e506b7b7d..f1c1afaa8c 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -286,63 +286,6 @@ export default defineConfig({ ::: :: -::warning -These color aliases are not automatically defined as Tailwind CSS colors, so classes like `text-primary-500 dark:text-primary-400` won't be available by default as in Nuxt UI v2. This approach provides more flexibility and prevents overwriting of user-defined Tailwind CSS colors.

- -However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases: - -::module-only -#ui -:::div{class="*:!mb-0 *:!mt-2.5"} - -```css [main.css] -@import "tailwindcss"; -@import "@nuxt/ui"; - -@theme { - --color-primary-50: var(--ui-color-primary-50); - --color-primary-100: var(--ui-color-primary-100); - --color-primary-200: var(--ui-color-primary-200); - --color-primary-300: var(--ui-color-primary-300); - --color-primary-400: var(--ui-color-primary-400); - --color-primary-500: var(--ui-color-primary-500); - --color-primary-600: var(--ui-color-primary-600); - --color-primary-700: var(--ui-color-primary-700); - --color-primary-800: var(--ui-color-primary-800); - --color-primary-900: var(--ui-color-primary-900); - --color-primary-950: var(--ui-color-primary-950); -} -``` - -::: - -#ui-pro -:::div{class="*:!mb-0 *:!mt-2.5"} - -```css [main.css] -@import "tailwindcss"; -@import "@nuxt/ui-pro"; - -@theme { - --color-primary-50: var(--ui-color-primary-50); - --color-primary-100: var(--ui-color-primary-100); - --color-primary-200: var(--ui-color-primary-200); - --color-primary-300: var(--ui-color-primary-300); - --color-primary-400: var(--ui-color-primary-400); - --color-primary-500: var(--ui-color-primary-500); - --color-primary-600: var(--ui-color-primary-600); - --color-primary-700: var(--ui-color-primary-700); - --color-primary-800: var(--ui-color-primary-800); - --color-primary-900: var(--ui-color-primary-900); - --color-primary-950: var(--ui-color-primary-950); -} -``` - -::: -:: - -:: - ### Tokens Nuxt UI leverages a robust system of CSS variables as design tokens to ensure consistent and flexible component styling. These tokens form the foundation of the theming system, offering smooth support for both light and dark modes.