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

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

8
docs/app/components/Footer.vue
View File

@@ -23,11 +23,11 @@ const route = useRoute()
<UFooter>
<template #left>
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[--ui-text-muted]">
Purchase <span class="text-[--ui-text-highlighted]">Nuxt UI Pro</span>
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
Purchase <span class="text-[var(--ui-text-highlighted)]">Nuxt UI Pro</span>
</NuxtLink>
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[--ui-text-muted]">
Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
Published under <span class="text-[var(--ui-text-highlighted)]">MIT License</span>
</NuxtLink>
</template>

4
docs/app/components/Header.vue
View File

@@ -22,10 +22,10 @@ defineShortcuts({
<template>
<UHeader :ui="{ left: 'min-w-0' }">
<template #left>
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0 focus-visible:outline-[--ui-primary]" aria-label="Nuxt UI">
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[var(--ui-text-highlighted)] min-w-0 focus-visible:outline-[var(--ui-primary)]" aria-label="Nuxt UI">
<Logo class="w-auto h-6 shrink-0" />
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate" />
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[var(--ui-radius)] font-semibold inline-block truncate" />
</NuxtLink>
</template>

14
docs/app/components/content/ComponentCode.vue
View File

@@ -214,15 +214,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<template>
<div class="my-5">
<div>
<div v-if="options.length" class="flex items-center gap-2.5 border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
value-key="value"
color="neutral"
variant="soft"
class="rounded-[--ui-radius] rounded-l-none min-w-12"
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
:search-input="false"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@@ -256,14 +256,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
:model-value="getComponentProp(option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
@update:model-value="setComponentProp(option.name, $event)"
/>
</UFormField>
</template>
</div>
<div class="flex justify-center border border-b-0 border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<div class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<ContentSlot :name="slot" unwrap="p">

14
docs/app/components/content/ComponentExample.vue
View File

@@ -114,8 +114,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
<template>
<div class="my-5">
<div v-if="preview">
<div class="border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700]">
<div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
<slot name="options" />
<UFormField
@@ -124,10 +124,10 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:label="option.label"
:name="option.name"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
color="neutral"
variant="soft"
class="rounded-[--ui-radius] rounded-l-none min-w-12"
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
:multiple="option.multiple"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:model-value="get(optionsValues, option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
@update:model-value="set(optionsValues, option.name, $event)"
/>
</UFormField>

2
docs/app/components/content/ComponentProps.vue
View File

@@ -77,7 +77,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
<ProseTd>
<HighlightInlineType v-if="prop.type" :type="prop.type" />
<MDC v-if="prop.description" :value="prop.description" class="text-[--ui-text-toned] mt-1" />
<MDC v-if="prop.description" :value="prop.description" class="text-[var(--ui-text-toned)] mt-1" />
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
</ProseTd>

2
docs/app/components/content/ComponentPropsSchema.vue
View File

@@ -40,7 +40,7 @@ const schemaProps = computed(() => {
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[--ui-text-muted] my-1" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[var(--ui-text-muted)] my-1" />
</ProseLi>
</ProseUl>
</Collapsible>

2
docs/app/components/content/ComponentSlots.vue
View File

@@ -31,7 +31,7 @@ const meta = await fetchComponentMeta(name as any)
<ProseTd>
<HighlightInlineType v-if="slot.type" :type="slot.type" />
<MDC v-if="slot.description" :value="slot.description" class="text-[--ui-text-toned] mt-1" />
<MDC v-if="slot.description" :value="slot.description" class="text-[var(--ui-text-toned)] mt-1" />
</ProseTd>
</ProseTr>
</ProseTbody>

4
docs/app/components/content/Placeholder.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded-[--ui-radius] border border-dashed border-[--ui-border-accented] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[--ui-border-inverted]/10" fill="none">
<div class="relative overflow-hidden rounded-[var(--ui-radius)] border border-dashed border-[var(--ui-border-accented)] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

2
docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
View File

@@ -18,7 +18,7 @@ const items = [
<template>
<UAccordion :items="items">
<template #content="{ item }">
<p class="pb-3.5 text-sm text-[--ui-text-muted]">
<p class="pb-3.5 text-sm text-[var(--ui-text-muted)]">
This is the {{ item.label }} panel.
</p>
</template>

2
docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
View File

@@ -22,7 +22,7 @@ const items = [
<template>
<UAccordion :items="items">
<template #colors="{ item }">
<p class="text-sm pb-3.5 text-[--ui-primary]">
<p class="text-sm pb-3.5 text-[var(--ui-primary)]">
{{ item.content }}
</p>
</template>

6
docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
View File

@@ -3,7 +3,7 @@
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar
@@ -15,7 +15,7 @@
<ULink
to="https://github.com/romhml"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar
@@ -27,7 +27,7 @@
<ULink
to="https://github.com/noook"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar

2
docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
View File

@@ -14,7 +14,7 @@ const items = [{
<template>
<UBreadcrumb :items="items">
<template #separator>
<span class="mx-2 text-[--ui-text-muted]">/</span>
<span class="mx-2 text-[var(--ui-text-muted)]">/</span>
</template>
</UBreadcrumb>
</template>

4
docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
View File

@@ -13,7 +13,7 @@ const items = [{
<template>
<UContextMenu :items="items" class="w-48">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
@@ -22,7 +22,7 @@ const items = [{
</template>
<template #refresh-trailing>
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[--ui-primary] animate-spin" />
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
</template>
</UContextMenu>
</template>

2
docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
View File

@@ -32,7 +32,7 @@ const groups = computed(() => [{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-96 border-t border-[--ui-border]"
class="h-96 border-t border-[var(--ui-border)]"
/>
</template>
</UDrawer>

2
docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
View File

@@ -17,7 +17,7 @@ const items = [{
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<template #profile-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
</template>
</UDropdownMenu>
</template>

2
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
View File

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template #item-label="{ item }">
{{ item.label }}
<span class="text-[--ui-text-muted]">
<span class="text-[var(--ui-text-muted)]">
{{ item.email }}
</span>
</template>

2
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
View File

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template #item-label="{ item }">
{{ item.label }}
<span class="text-[--ui-text-muted]">
<span class="text-[var(--ui-text-muted)]">
{{ item.email }}
</span>
</template>

4
docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
View File

@@ -26,7 +26,7 @@ const state = reactive({
<template>
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
<template #account="{ item }">
<p class="text-[--ui-text-muted] mb-4">
<p class="text-[var(--ui-text-muted)] mb-4">
{{ item.description }}
</p>
@@ -43,7 +43,7 @@ const state = reactive({
</template>
<template #password="{ item }">
<p class="text-[--ui-text-muted] mb-4">
<p class="text-[var(--ui-text-muted)] mb-4">
{{ item.description }}
</p>

6
docs/app/components/content/examples/toaster/ToasterDurationExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.duration"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterExpandExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.expand"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterPositionExample.vue
View File

@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.position"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

2
docs/app/components/theme-picker/ThemePicker.vue
View File

@@ -7,7 +7,7 @@
:variant="open ? 'soft' : 'ghost'"
square
aria-label="Color picker"
:ui="{ leadingIcon: 'text-[--ui-primary]' }"
:ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
/>
</template>

4
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -5,13 +5,13 @@
:icon="icon"
:label="label"
:variant="selected ? 'soft' : 'outline'"
class="capitalize ring-[--ui-border] rounded-[--ui-radius] text-[11px]"
class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
@click.stop.prevent="$emit('select')"
>
<template v-if="chip" #leading>
<span
class="inline-block w-2 h-2 rounded-full"
:class="`bg-[--color-light] dark:bg-[--color-dark]`"
:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
:style="{
'--color-light': `var(--color-${chip}-500)`,
'--color-dark': `var(--color-${chip}-400)`

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: {

2
docs/content/3.components/button.md
View File

@@ -214,7 +214,7 @@ props:
color: neutral
variant: outline
ui:
leadingIcon: 'text-[--ui-primary]'
leadingIcon: 'text-[var(--ui-primary)]'
slots:
default: |

12
docs/content/3.components/context-menu.md
View File

@@ -90,12 +90,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
::note
@@ -131,12 +131,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
### Disabled
@@ -164,12 +164,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
## Examples

4
docs/content/3.components/drawer.md
View File

@@ -224,7 +224,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
```vue [app.vue]
<template>
<UApp>
<div class="bg-[--ui-bg]" vaul-drawer-wrapper>
<div class="bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
@@ -238,7 +238,7 @@ export default defineNuxtConfig({
app: {
rootAttrs: {
'vaul-drawer-wrapper': '',
'class': 'bg-[--ui-bg]'
'class': 'bg-[var(--ui-bg)]'
}
}
})

12
docs/content/3.components/form.md
View File

@@ -171,10 +171,10 @@ When accessing the component via a template ref, you can use the following:
| Name | Type |
| ---- | ---- |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |

2
docs/content/3.components/link.md
View File

@@ -65,7 +65,7 @@ props:
raw: true
to: /components/link
activeClass: 'font-bold'
inactiveClass: 'text-[--ui-text-muted]'
inactiveClass: 'text-[var(--ui-text-muted)]'
slots:
default: Link
---

2
docs/content/3.components/navigation-menu.md
View File

@@ -203,7 +203,7 @@ props:
badge: 3.8k
to: https://github.com/nuxt/ui
target: _blank
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[--ui-border]'
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'
---
::

2
docs/nuxt.config.ts
View File

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
app: {
rootAttrs: {
'vaul-drawer-wrapper': '',
'class': 'bg-[--ui-bg]'
'class': 'bg-[var(--ui-bg)]'
}
},