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

feat(module): implement --ui-radius CSS variable (#2341)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-09 14:28:29 +02:00
committed by GitHub
parent 68ee3f11ca
commit 057e86cfda
60 changed files with 2406 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,7 +110,7 @@ export default defineAppConfig({
```
::note
Try the :prose-icon{name="i-heroicons-swatch-20-solid" class="text-[--ui-primary]"} picker in the header above to change `primary` and `neutral` colors.
Try the :prose-icon{name="i-heroicons-swatch" 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:
@@ -149,7 +149,7 @@ export default defineNuxtConfig({
::
::note
::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.<br><br>
However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
@@ -178,7 +178,11 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
### Tokens
Nuxt UI generates CSS variables as design tokens for component styling. These tokens enable consistent theming and support both light and dark modes. You can use them in Tailwind classes like `text-[--ui-primary]`, which automatically adapts to the current color scheme.
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
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:
::code-group
@@ -206,6 +210,10 @@ Nuxt UI generates CSS variables as design tokens for component styling. These to
::
::note
You can use these variables in classes like `text-[--ui-primary]`, it will automatically adapt to the current color scheme.
::
::tip
You can change which shade is used for each color on light and dark mode:
@@ -225,6 +233,8 @@ You can change which shade is used for each color on light and dark mode:
```
::
#### Neutral Palette
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:
::code-group
@@ -293,7 +303,18 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
::
You can easily customize these CSS variables in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property) to tailor the appearance of your application:
::note
Nuxt UI automatically applies a text and background color on the `<body>` element of your app:
```css
body {
@apply antialiased font-sans text-[--ui-text] bg-[--ui-bg];
}
```
::
::tip
You can customize these CSS variables to tailor the appearance of your application:
```vue [app.vue]
<style>
@@ -311,15 +332,35 @@ You can easily customize these CSS variables in your `app.vue`{lang="ts-type"} o
}
</style>
```
::
::note
Nuxt UI automatically applies a text and background color on the `<body>` element of your app:
#### Border Radius
Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding. Components use variations of this base value, like `rounded-[calc(var(--ui-radius)*2)]`, to create different levels of roundness throughout the UI:
```css
body {
@apply antialiased font-sans text-[--ui-text] bg-[--ui-bg];
:root {
--ui-radius: var(--radius-sm);
}
```
::note
Try the :prose-icon{name="i-heroicons-swatch" class="text-[--ui-primary]"} theme picker in the header above to change the base radius value.
::
::tip
You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
```vue [app.vue]
<style>
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: var(--radius-sm);
}
</style>
```
::
## Components theme
@@ -335,7 +376,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 shadow',
root: 'bg-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--ui-border] rounded-[calc(var(--ui-radius)*2)] shadow',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'