mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(module): define neutral utilities (#3629)
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
This commit is contained in:
Benjamin Canac
GitHub
@@ -195,10 +195,10 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
|
||||
```diff
|
||||
<template>
|
||||
- <p class="text-gray-500 dark:text-gray-400" />
|
||||
+ <p class="text-(--ui-text-muted)" />
|
||||
+ <p class="text-muted" />
|
||||
|
||||
- <p class="text-gray-900 dark:text-white" />
|
||||
+ <p class="text-(--ui-text-highlighted)" />
|
||||
+ <p class="text-highlighted" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
@@ -118,17 +118,7 @@ Learn more about automatic content detection in the detecting classes in source
|
||||
|
||||
## Design system
|
||||
|
||||
Nuxt UI extends Tailwind CSS's theming capabilities, providing a flexible design system with pre-configured color aliases and CSS variables. This allows for easy customization and quick adaptation of the UI to your brand's aesthetic.
|
||||
|
||||
### Colors
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
Nuxt UI leverages Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) to provide customizable color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference):
|
||||
|
||||
#vue
|
||||
Nuxt UI leverages Vite config to provide customizable color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference):
|
||||
::
|
||||
Nuxt UI extends Tailwind CSS's theming capabilities, providing a flexible design system with pre-configured color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). This allows for easy customization and quick adaptation of the UI to your brand's aesthetic.
|
||||
|
||||
| Color | Default | Description |
|
||||
| --- | --- | --- |
|
||||
@@ -140,10 +130,27 @@ Nuxt UI leverages Vite config to provide customizable color aliases based on [Ta
|
||||
| `error`{color="error"} | `red` | Used for form error validation states. |
|
||||
| `neutral` | `slate` | Neutral color for backgrounds, text, etc. |
|
||||
|
||||
These colors are used to style the components but also to generate the `color` props:
|
||||
|
||||
::component-code{slug="button"}
|
||||
---
|
||||
props:
|
||||
color: primary
|
||||
slots:
|
||||
default: Button
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-primary"} theme picker in the header above to change `primary` and `neutral` colors.
|
||||
::
|
||||
|
||||
### Configuration
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::div
|
||||
You can configure these color aliases at runtime in your `app.config.ts` file under the `ui.colors` key, allowing for dynamic theme customization without requiring an application rebuild:
|
||||
You can configure these color aliases at runtime in your [`app.config.ts`](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file under the `ui.colors` key, allowing for dynamic theme customization without requiring an application rebuild:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
@@ -222,27 +229,14 @@ export default defineConfig({
|
||||
|
||||
::
|
||||
|
||||
::note
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change `primary` and `neutral` colors.
|
||||
::
|
||||
|
||||
These colors are used to style the components but also to generate the `color` variants:
|
||||
|
||||
::component-code{slug="button"}
|
||||
---
|
||||
props:
|
||||
color: primary
|
||||
slots:
|
||||
default: Button
|
||||
---
|
||||
::
|
||||
### Extend colors
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip
|
||||
You can add you own dynamic color aliases in your `app.config.ts`, you just have to make sure to define them in the [`ui.theme.colors`](/getting-started/installation/nuxt#themecolors) option in your `nuxt.config.ts` file.
|
||||
:::div
|
||||
You can add you own dynamic color aliases in your `app.config.ts`, you just have to make sure to define them in the [`ui.theme.colors`](/getting-started/installation/nuxt#themecolors) option in your `nuxt.config.ts` file:
|
||||
|
||||
```ts [app.config.ts]
|
||||
```ts [app.config.ts]{4}
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
@@ -252,11 +246,19 @@ export default defineAppConfig({
|
||||
})
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
```ts [nuxt.config.ts]{7}
|
||||
export default defineNuxtConfig({
|
||||
ui: {
|
||||
theme: {
|
||||
colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
|
||||
colors: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -266,9 +268,9 @@ export default defineNuxtConfig({
|
||||
|
||||
#vue
|
||||
|
||||
:::tip
|
||||
:::div
|
||||
|
||||
You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `ui` plugin.
|
||||
You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `ui` plugin:
|
||||
|
||||
::::module-only
|
||||
|
||||
@@ -276,7 +278,7 @@ You can add you own dynamic color aliases in your `vite.config.ts`, you just hav
|
||||
|
||||
:::::div
|
||||
|
||||
```ts [vite.config.ts]
|
||||
```ts [vite.config.ts]{11,18}
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
@@ -291,7 +293,15 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
|
||||
colors: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
]
|
||||
}
|
||||
})
|
||||
]
|
||||
@@ -304,7 +314,7 @@ export default defineConfig({
|
||||
|
||||
:::::div
|
||||
|
||||
```ts [vite.config.ts]
|
||||
```ts [vite.config.ts]{11,18}
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import uiPro from '@nuxt/ui-pro/vite'
|
||||
@@ -316,10 +326,18 @@ export default defineConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
tertiary: 'indigo'
|
||||
},
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
|
||||
colors: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
]
|
||||
}
|
||||
})
|
||||
]
|
||||
@@ -334,13 +352,13 @@ export default defineConfig({
|
||||
|
||||
::
|
||||
|
||||
### Tokens
|
||||
## CSS Variables
|
||||
|
||||
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.
|
||||
|
||||
#### Color Shades
|
||||
### Colors
|
||||
|
||||
Nuxt UI automatically creates a CSS variable for each color alias you define which represent the default shade used in both light and dark modes:
|
||||
Nuxt UI provides a CSS variable for each color alias you define which represent the default shade used in both light and dark modes:
|
||||
|
||||
::code-group
|
||||
|
||||
@@ -368,16 +386,125 @@ Nuxt UI automatically creates a CSS variable for each color alias you define whi
|
||||
|
||||
::
|
||||
|
||||
::note
|
||||
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`
|
||||
These CSS variables are defined in Tailwind CSS's `@theme` so you can use them as classes:
|
||||
|
||||
Both approaches will automatically adapt to the current color scheme, ensuring consistent styling across light and dark modes.
|
||||
::code-preview
|
||||
[Primary]{class="text-primary text-sm px-4"}
|
||||
[Secondary]{class="text-secondary text-sm px-4"}
|
||||
[Success]{class="text-success text-sm px-4"}
|
||||
[Info]{class="text-info text-sm px-4"}
|
||||
[Warning]{class="text-warning text-sm px-4"}
|
||||
[Error]{class="text-error text-sm px-4"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<span class="text-primary">Primary</span>
|
||||
<span class="text-secondary">Secondary</span>
|
||||
<span class="text-success">Success</span>
|
||||
<span class="text-info">Info</span>
|
||||
<span class="text-warning">Warning</span>
|
||||
<span class="text-error">Error</span>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::tip
|
||||
You can change which shade is used for each color on light and dark mode:
|
||||
::note
|
||||
This is how the `@theme` is generated for each color alias:
|
||||
|
||||
:::code-collapse{class="[&>div]:!my-0"}
|
||||
```scss
|
||||
@theme default {
|
||||
--color-primary: var(--ui-primary);
|
||||
--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);
|
||||
--color-secondary: var(--ui-secondary);
|
||||
--color-secondary-50: var(--ui-color-secondary-50);
|
||||
--color-secondary-100: var(--ui-color-secondary-100);
|
||||
--color-secondary-200: var(--ui-color-secondary-200);
|
||||
--color-secondary-300: var(--ui-color-secondary-300);
|
||||
--color-secondary-400: var(--ui-color-secondary-400);
|
||||
--color-secondary-500: var(--ui-color-secondary-500);
|
||||
--color-secondary-600: var(--ui-color-secondary-600);
|
||||
--color-secondary-700: var(--ui-color-secondary-700);
|
||||
--color-secondary-800: var(--ui-color-secondary-800);
|
||||
--color-secondary-900: var(--ui-color-secondary-900);
|
||||
--color-secondary-950: var(--ui-color-secondary-950);
|
||||
--color-success: var(--ui-success);
|
||||
--color-success-50: var(--ui-color-success-50);
|
||||
--color-success-100: var(--ui-color-success-100);
|
||||
--color-success-200: var(--ui-color-success-200);
|
||||
--color-success-300: var(--ui-color-success-300);
|
||||
--color-success-400: var(--ui-color-success-400);
|
||||
--color-success-500: var(--ui-color-success-500);
|
||||
--color-success-600: var(--ui-color-success-600);
|
||||
--color-success-700: var(--ui-color-success-700);
|
||||
--color-success-800: var(--ui-color-success-800);
|
||||
--color-success-900: var(--ui-color-success-900);
|
||||
--color-success-950: var(--ui-color-success-950);
|
||||
--color-info: var(--ui-info);
|
||||
--color-info-50: var(--ui-color-info-50);
|
||||
--color-info-100: var(--ui-color-info-100);
|
||||
--color-info-200: var(--ui-color-info-200);
|
||||
--color-info-300: var(--ui-color-info-300);
|
||||
--color-info-400: var(--ui-color-info-400);
|
||||
--color-info-500: var(--ui-color-info-500);
|
||||
--color-info-600: var(--ui-color-info-600);
|
||||
--color-info-700: var(--ui-color-info-700);
|
||||
--color-info-800: var(--ui-color-info-800);
|
||||
--color-info-900: var(--ui-color-info-900);
|
||||
--color-info-950: var(--ui-color-info-950);
|
||||
--color-warning: var(--ui-warning);
|
||||
--color-warning-50: var(--ui-color-warning-50);
|
||||
--color-warning-100: var(--ui-color-warning-100);
|
||||
--color-warning-200: var(--ui-color-warning-200);
|
||||
--color-warning-300: var(--ui-color-warning-300);
|
||||
--color-warning-400: var(--ui-color-warning-400);
|
||||
--color-warning-500: var(--ui-color-warning-500);
|
||||
--color-warning-600: var(--ui-color-warning-600);
|
||||
--color-warning-700: var(--ui-color-warning-700);
|
||||
--color-warning-800: var(--ui-color-warning-800);
|
||||
--color-warning-900: var(--ui-color-warning-900);
|
||||
--color-warning-950: var(--ui-color-warning-950);
|
||||
--color-error: var(--ui-error);
|
||||
--color-error-50: var(--ui-color-error-50);
|
||||
--color-error-100: var(--ui-color-error-100);
|
||||
--color-error-200: var(--ui-color-error-200);
|
||||
--color-error-300: var(--ui-color-error-300);
|
||||
--color-error-400: var(--ui-color-error-400);
|
||||
--color-error-500: var(--ui-color-error-500);
|
||||
--color-error-600: var(--ui-color-error-600);
|
||||
--color-error-700: var(--ui-color-error-700);
|
||||
--color-error-800: var(--ui-color-error-800);
|
||||
--color-error-900: var(--ui-color-error-900);
|
||||
--color-error-950: var(--ui-color-error-950);
|
||||
--color-neutral-50: var(--ui-color-neutral-50);
|
||||
--color-neutral-100: var(--ui-color-neutral-100);
|
||||
--color-neutral-200: var(--ui-color-neutral-200);
|
||||
--color-neutral-300: var(--ui-color-neutral-300);
|
||||
--color-neutral-400: var(--ui-color-neutral-400);
|
||||
--color-neutral-500: var(--ui-color-neutral-500);
|
||||
--color-neutral-600: var(--ui-color-neutral-600);
|
||||
--color-neutral-700: var(--ui-color-neutral-700);
|
||||
--color-neutral-800: var(--ui-color-neutral-800);
|
||||
--color-neutral-900: var(--ui-color-neutral-900);
|
||||
--color-neutral-950: var(--ui-color-neutral-950);
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
You can change which shade is used for each color on light and dark mode in your `main.css` file:
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
@@ -417,10 +544,6 @@ You can change which shade is used for each color on light and dark mode:
|
||||
:::
|
||||
::
|
||||
|
||||
::
|
||||
|
||||
#### Black as Primary Color
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::p
|
||||
@@ -471,7 +594,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
|
||||
:::
|
||||
::
|
||||
|
||||
#### Neutral Palette
|
||||
### Neutral
|
||||
|
||||
Nuxt UI provides a comprehensive set of design tokens for the `neutral` color palette, ensuring consistent and accessible UI styling across both light and dark modes. These tokens offer fine-grained control over text, background, and border colors:
|
||||
|
||||
@@ -479,89 +602,153 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
|
||||
|
||||
```css [Light]
|
||||
:root {
|
||||
/* Least prominent text */
|
||||
--ui-text-dimmed: var(--ui-color-neutral-400);
|
||||
/* Slightly muted text */
|
||||
--ui-text-muted: var(--ui-color-neutral-500);
|
||||
/* Moderately prominent text */
|
||||
--ui-text-toned: var(--ui-color-neutral-600);
|
||||
/* Default text color */
|
||||
--ui-text: var(--ui-color-neutral-700);
|
||||
/* Most prominent text */
|
||||
--ui-text-highlighted: var(--ui-color-neutral-900);
|
||||
--ui-text-inverted: var(--color-white);
|
||||
|
||||
/* Main background color */
|
||||
--ui-bg: var(--color-white);
|
||||
/* Subtle background */
|
||||
--ui-bg-muted: var(--ui-color-neutral-50);
|
||||
/* Slightly elevated background */
|
||||
--ui-bg-elevated: var(--ui-color-neutral-100);
|
||||
/* More prominent background */
|
||||
--ui-bg-accented: var(--ui-color-neutral-200);
|
||||
/* Inverted background color */
|
||||
--ui-bg-inverted: var(--ui-color-neutral-900);
|
||||
|
||||
/* Default border color */
|
||||
--ui-border: var(--ui-color-neutral-200);
|
||||
/* Subtle border */
|
||||
--ui-border-muted: var(--ui-color-neutral-200);
|
||||
/* More prominent border */
|
||||
--ui-border-accented: var(--ui-color-neutral-300);
|
||||
/* Inverted border color */
|
||||
--ui-border-inverted: var(--ui-color-neutral-900);
|
||||
}
|
||||
```
|
||||
|
||||
```css [Dark]
|
||||
.dark {
|
||||
/* Least prominent text */
|
||||
--ui-text-dimmed: var(--ui-color-neutral-500);
|
||||
/* Slightly muted text */
|
||||
--ui-text-muted: var(--ui-color-neutral-400);
|
||||
/* Moderately prominent text */
|
||||
--ui-text-toned: var(--ui-color-neutral-300);
|
||||
/* Default text color */
|
||||
--ui-text: var(--ui-color-neutral-200);
|
||||
/* Most prominent text */
|
||||
--ui-text-highlighted: var(--color-white);
|
||||
--ui-text-inverted: var(--ui-color-neutral-900);
|
||||
|
||||
/* Main background color */
|
||||
--ui-bg: var(--ui-color-neutral-900);
|
||||
/* Subtle background */
|
||||
--ui-bg-muted: var(--ui-color-neutral-800);
|
||||
/* Slightly elevated background */
|
||||
--ui-bg-elevated: var(--ui-color-neutral-800);
|
||||
/* More prominent background */
|
||||
--ui-bg-accented: var(--ui-color-neutral-700);
|
||||
/* Inverted background color */
|
||||
--ui-bg-inverted: var(--color-white);
|
||||
|
||||
/* Default border color */
|
||||
--ui-border: var(--ui-color-neutral-800);
|
||||
/* Subtle border */
|
||||
--ui-border-muted: var(--ui-color-neutral-700);
|
||||
/* More prominent border */
|
||||
--ui-border-accented: var(--ui-color-neutral-700);
|
||||
/* Inverted border color */
|
||||
--ui-border-inverted: var(--color-white);
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::note
|
||||
Nuxt UI automatically applies a text and background color on the `<body>` element of your app:
|
||||
These CSS variables are defined in Tailwind CSS's `@theme` so you can use them as classes:
|
||||
|
||||
```css
|
||||
body {
|
||||
@apply antialiased text-(--ui-text) bg-(--ui-bg);
|
||||
::code-preview
|
||||
[Dimmed]{class="text-dimmed text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
[Muted]{class="text-muted text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
[Toned]{class="text-toned text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
[Text]{class="text-default text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
[Highlighted]{class="text-highlighted text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
[Inverted]{class="text-inverted bg-inverted text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<span class="text-dimmed">Dimmed</span>
|
||||
<span class="text-muted">Muted</span>
|
||||
<span class="text-toned">Toned</span>
|
||||
<span class="text-default">Text</span>
|
||||
<span class="text-highlighted">Highlighted</span>
|
||||
<span class="text-inverted bg-inverted">Inverted</span>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::code-preview
|
||||
[Default]{class="bg-default text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Muted]{class="bg-muted text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Elevated]{class="bg-elevated text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Accented]{class="bg-accented text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Inverted]{class="bg-inverted text-inverted text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<div class="bg-default">Default</div>
|
||||
<div class="bg-muted">Muted</div>
|
||||
<div class="bg-elevated">Elevated</div>
|
||||
<div class="bg-accented">Accented</div>
|
||||
<div class="bg-inverted text-inverted">Inverted</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::code-preview
|
||||
[Default]{class="border-2 border-default text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Muted]{class="border-2 border-muted text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Accented]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[Inverted]{class="border-2 border-inverted text-sm px-4 py-1.5 inline-block rounded-md"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<div class="border border-default">Default</div>
|
||||
<div class="border border-muted">Muted</div>
|
||||
<div class="border border-accented">Accented</div>
|
||||
<div class="border border-inverted">Inverted</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::note
|
||||
This is how the `@theme` is generated for each design token:
|
||||
|
||||
:::code-collapse{class="[&>div]:!my-0"}
|
||||
```scss
|
||||
@theme default {
|
||||
--text-color-dimmed: var(--ui-text-dimmed);
|
||||
--text-color-muted: var(--ui-text-muted);
|
||||
--text-color-toned: var(--ui-text-toned);
|
||||
--text-color-default: var(--ui-text);
|
||||
--text-color-highlighted: var(--ui-text-highlighted);
|
||||
--text-color-inverted: var(--ui-text-inverted);
|
||||
--background-color-default: var(--ui-bg);
|
||||
--background-color-muted: var(--ui-bg-muted);
|
||||
--background-color-elevated: var(--ui-bg-elevated);
|
||||
--background-color-accented: var(--ui-bg-accented);
|
||||
--background-color-inverted: var(--ui-bg-inverted);
|
||||
--background-color-border: var(--ui-border);
|
||||
--border-color-default: var(--ui-border);
|
||||
--border-color-muted: var(--ui-border-muted);
|
||||
--border-color-accented: var(--ui-border-accented);
|
||||
--border-color-inverted: var(--ui-border-inverted);
|
||||
--ring-color-default: var(--ui-border);
|
||||
--ring-color-muted: var(--ui-border-muted);
|
||||
--ring-color-accented: var(--ui-border-accented);
|
||||
--ring-color-inverted: var(--ui-border-inverted);
|
||||
--ring-color-bg: var(--ui-bg);
|
||||
--divide-color-default: var(--ui-border);
|
||||
--divide-color-muted: var(--ui-border-muted);
|
||||
--divide-color-accented: var(--ui-border-accented);
|
||||
--divide-color-inverted: var(--ui-border-inverted);
|
||||
--outline-color-default: var(--ui-border);
|
||||
--outline-color-inverted: var(--ui-border-inverted);
|
||||
--stroke-color-default: var(--ui-border);
|
||||
--stroke-color-inverted: var(--ui-border-inverted);
|
||||
--fill-color-default: var(--ui-border);
|
||||
--fill-color-inverted: var(--ui-border-inverted);
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
::tip
|
||||
You can customize these CSS variables to tailor the appearance of your application:
|
||||
You can customize these CSS variables to tailor the appearance of your application in your `main.css` file:
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
@@ -605,13 +792,57 @@ You can customize these CSS variables to tailor the appearance of your applicati
|
||||
:::
|
||||
::
|
||||
|
||||
::
|
||||
|
||||
#### Border Radius
|
||||
|
||||
Nuxt UI provides a centralized border radius system through the `--ui-radius` CSS variable, which defaults to `0.25rem`. This system replaces Tailwind CSS's default `rounded-*` utilities while maintaining the familiar class names. The border radius system is built on a scale that multiplies the base radius value:
|
||||
::note
|
||||
Nuxt UI applies a text and background color on the `<body>` element of your app:
|
||||
|
||||
```css
|
||||
body {
|
||||
@apply antialiased text-default bg-default scheme-light dark:scheme-dark;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
### Radius
|
||||
|
||||
Nuxt UI provides a centralized border radius system through the `--ui-radius` CSS variable.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--ui-radius: 0.25rem;
|
||||
}
|
||||
```
|
||||
|
||||
This CSS variable replaces Tailwind CSS's default `rounded-*` utilities so you can use the same class names:
|
||||
|
||||
::code-preview
|
||||
[xs]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xs mr-2"}
|
||||
[sm]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-sm mr-2"}
|
||||
[md]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md mr-2"}
|
||||
[lg]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-lg mr-2"}
|
||||
[xl]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xl mr-2"}
|
||||
[2xl]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-2xl mr-2"}
|
||||
[3xl]{class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-3xl mr-2"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<div class="rounded-xs">xs</div>
|
||||
<div class="rounded-sm">sm</div>
|
||||
<div class="rounded-md">md</div>
|
||||
<div class="rounded-lg">lg</div>
|
||||
<div class="rounded-xl">xl</div>
|
||||
<div class="rounded-2xl">2xl</div>
|
||||
<div class="rounded-3xl">3xl</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::note
|
||||
This is how the `@theme` is generated for each radius value:
|
||||
|
||||
:::code-collapse{class="[&>div]:!my-0"}
|
||||
```scss
|
||||
@theme default {
|
||||
--radius-xs: calc(var(--ui-radius) * 0.5); /* 0.125rem */
|
||||
--radius-sm: var(--ui-radius); /* 0.25rem */
|
||||
@@ -622,6 +853,9 @@ Nuxt UI provides a centralized border radius system through the `--ui-radius` CS
|
||||
--radius-3xl: calc(var(--ui-radius) * 6); /* 1.5rem */
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
You can customize the base radius value in your `main.css` file:
|
||||
|
||||
@@ -656,12 +890,18 @@ You can customize the base radius value in your `main.css` file:
|
||||
::
|
||||
|
||||
::note
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change the base radius value.
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-primary"} theme picker in the header above to change the base radius value.
|
||||
::
|
||||
|
||||
#### Container
|
||||
### Container
|
||||
|
||||
Nuxt UI provides a global `--ui-container` CSS variable that controls the maximum width of the [Container](/components/container) component, which defaults to `var(--container-7xl)`.
|
||||
Nuxt UI provides a `--ui-container` CSS variable that controls the maximum width of the [Container](/components/container) component.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--ui-container: var(--container-7xl);
|
||||
}
|
||||
```
|
||||
|
||||
You can customize this value in your `main.css` file to adjust container widths consistently throughout your application:
|
||||
|
||||
@@ -716,7 +956,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
|
||||
```ts [src/theme/card.ts]
|
||||
export default {
|
||||
slots: {
|
||||
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-lg',
|
||||
root: 'bg-default ring ring-default divide-y divide-default rounded-lg',
|
||||
header: 'p-4 sm:px-6',
|
||||
body: 'p-4 sm:p-6',
|
||||
footer: 'p-4 sm:px-6'
|
||||
@@ -775,7 +1015,7 @@ Nuxt UI components use `variants` to change the `slots` styles based on props. H
|
||||
```ts [src/theme/avatar.ts]
|
||||
export default {
|
||||
slots: {
|
||||
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)',
|
||||
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
|
||||
image: 'h-full w-full rounded-[inherit] object-cover'
|
||||
},
|
||||
variants: {
|
||||
|
||||
Reference in New Issue
Block a user