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

feat(module): define default color shades (#3916)

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-16 16:10:54 +02:00
committed by GitHub
parent f9737c8f40
commit 7ac7aa9ba7
3 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/content/1.getting-started/2.migration.md
View File

@@ -203,15 +203,6 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
```
::
- The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
```diff
<template>
- <p class="text-primary">Hello</p>
+ <p class="text-(--ui-primary)">Hello</p>
</template>
```
- The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
```diff

6
docs/content/1.getting-started/3.theme.md
View File

@@ -369,7 +369,11 @@ Nuxt UI automatically creates a CSS variable for each color alias you define whi
::
::note
You can use these variables in classes like `text-(--ui-primary)`, it will automatically adapt to the current color scheme.
You can use these variables in your Tailwind CSS classes in two ways:
- Using CSS variable syntax: `text-(--ui-primary)` or `bg-(--ui-primary)`
- Using color alias: `text-primary` or `bg-primary`
Both approaches will automatically adapt to the current color scheme, ensuring consistent styling across light and dark modes.
::
::tip

6
src/templates.ts
View File

@@ -88,8 +88,10 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
--color-old-neutral-800: ${colors.neutral[800]};
--color-old-neutral-900: ${colors.neutral[900]};
--color-old-neutral-950: ${colors.neutral[950]};
${[...(options.theme?.colors || []).filter(color => !colors[color as keyof typeof 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')}
${[...(options.theme?.colors || []).filter(color => !colors[color as keyof typeof colors]), 'neutral'].map(color => [
color !== 'neutral' && `--color-${color}: var(--ui-${color});`,
...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`)
].filter(Boolean).join('\n\t')).join('\n\t')}
--radius-xs: calc(var(--ui-radius) * 0.5);
--radius-sm: var(--ui-radius);
--radius-md: calc(var(--ui-radius) * 1.5);