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

fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-14 10:42:26 +02:00
committed by GitHub
parent ea07dffdd5
commit dcce571cda
131 changed files with 3724 additions and 3724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
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" class="text-[--ui-primary]"} theme picker in the header above to change `primary` and `neutral` colors.
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--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:
@@ -211,7 +211,7 @@ 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 classes like `text-[var(--ui-primary)]`, it will automatically adapt to the current color scheme.
::
::tip
@@ -308,7 +308,7 @@ Nuxt UI automatically applies a text and background color on the `<body>` elemen
```css
body {
@apply antialiased text-[--ui-text] bg-[--ui-bg];
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
}
```
::
@@ -345,7 +345,7 @@ Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding.
```
::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.
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
::
::tip
@@ -376,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-[calc(var(--ui-radius)*2)] shadow',
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--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'
@@ -435,7 +435,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-[var(--ui-bg-elevated)]',
image: 'h-full w-full rounded-[inherit] object-cover'
},
variants: {