Skip to content

Commit dcce571

Browse files
sandros94benjamincanac
sandros94
and
benjamincanac
authored
fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)
Co-authored-by: Benjamin Canac <[email protected]>
1 parent ea07dff commit dcce571

File tree

131 files changed

+3724
-3724
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+3724
-3724
lines changed

‎docs/app/components/Footer.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ const route = useRoute()
2323

2424
<UFooter>
2525
<template #left>
26-
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[--ui-text-muted]">
27-
Purchase <span class="text-[--ui-text-highlighted]">Nuxt UI Pro</span>
26+
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
27+
Purchase <span class="text-[var(--ui-text-highlighted)]">Nuxt UI Pro</span>
2828
</NuxtLink>
29-
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[--ui-text-muted]">
30-
Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
29+
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
30+
Published under <span class="text-[var(--ui-text-highlighted)]">MIT License</span>
3131
</NuxtLink>
3232
</template>
3333

‎docs/app/components/Header.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ defineShortcuts({
2222
<template>
2323
<UHeader :ui="{ left: 'min-w-0' }">
2424
<template #left>
25-
<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">
25+
<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">
2626
<Logo class="w-auto h-6 shrink-0" />
2727

28-
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate" />
28+
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[var(--ui-radius)] font-semibold inline-block truncate" />
2929
</NuxtLink>
3030
</template>
3131

‎docs/app/components/content/ComponentCode.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,15 +214,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
214214
<template>
215215
<div class="my-5">
216216
<div>
217-
<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">
217+
<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">
218218
<template v-for="option in options" :key="option.name">
219219
<UFormField
220220
:label="option.label"
221221
size="sm"
222-
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
222+
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
223223
:ui="{
224-
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
225-
label: 'text-[--ui-text-muted] px-2 py-1.5',
224+
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
225+
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
226226
container: 'mt-0'
227227
}"
228228
>
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
233233
value-key="value"
234234
color="neutral"
235235
variant="soft"
236-
class="rounded-[--ui-radius] rounded-l-none min-w-12"
236+
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
237237
:search-input="false"
238238
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
239239
:ui="{ itemLeadingChip: 'size-2' }"
@@ -256,14 +256,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
256256
:model-value="getComponentProp(option.name)"
257257
color="neutral"
258258
variant="soft"
259-
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
259+
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
260260
@update:model-value="setComponentProp(option.name, $event)"
261261
/>
262262
</UFormField>
263263
</template>
264264
</div>
265265

266-
<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]">
266+
<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]">
267267
<component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
268268
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
269269
<ContentSlot :name="slot" unwrap="p">

‎docs/app/components/content/ComponentExample.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
114114
<template>
115115
<div class="my-5">
116116
<div v-if="preview">
117-
<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 }]">
118-
<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]">
117+
<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 }]">
118+
<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)]">
119119
<slot name="options" />
120120

121121
<UFormField
@@ -124,10 +124,10 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
124124
:label="option.label"
125125
:name="option.name"
126126
size="sm"
127-
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
127+
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
128128
:ui="{
129-
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
130-
label: 'text-[--ui-text-muted] px-2 py-1.5',
129+
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
130+
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
131131
container: 'mt-0'
132132
}"
133133
>
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
139139
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
140140
color="neutral"
141141
variant="soft"
142-
class="rounded-[--ui-radius] rounded-l-none min-w-12"
142+
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
143143
:multiple="option.multiple"
144144
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
145145
:ui="{ itemLeadingChip: 'size-2' }"
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
160160
:model-value="get(optionsValues, option.name)"
161161
color="neutral"
162162
variant="soft"
163-
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
163+
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
164164
@update:model-value="set(optionsValues, option.name, $event)"
165165
/>
166166
</UFormField>

‎docs/app/components/content/ComponentProps.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
7777
<ProseTd>
7878
<HighlightInlineType v-if="prop.type" :type="prop.type" />
7979

80-
<MDC v-if="prop.description" :value="prop.description" class="text-[--ui-text-toned] mt-1" />
80+
<MDC v-if="prop.description" :value="prop.description" class="text-[var(--ui-text-toned)] mt-1" />
8181

8282
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
8383
</ProseTd>

‎docs/app/components/content/ComponentPropsSchema.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const schemaProps = computed(() => {
4040
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
4141
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
4242

43-
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[--ui-text-muted] my-1" />
43+
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[var(--ui-text-muted)] my-1" />
4444
</ProseLi>
4545
</ProseUl>
4646
</Collapsible>

‎docs/app/components/content/ComponentSlots.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const meta = await fetchComponentMeta(name as any)
3131
<ProseTd>
3232
<HighlightInlineType v-if="slot.type" :type="slot.type" />
3333

34-
<MDC v-if="slot.description" :value="slot.description" class="text-[--ui-text-toned] mt-1" />
34+
<MDC v-if="slot.description" :value="slot.description" class="text-[var(--ui-text-toned)] mt-1" />
3535
</ProseTd>
3636
</ProseTr>
3737
</ProseTbody>

‎docs/app/components/content/Placeholder.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="relative overflow-hidden rounded-[--ui-radius] border border-dashed border-[--ui-border-accented] opacity-75 px-4 flex items-center justify-center">
3-
<svg class="absolute inset-0 h-full w-full stroke-[--ui-border-inverted]/10" fill="none">
2+
<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">
3+
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
44
<defs>
55
<pattern
66
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

‎docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const items = [
1818
<template>
1919
<UAccordion :items="items">
2020
<template #content="{ item }">
21-
<p class="pb-3.5 text-sm text-[--ui-text-muted]">
21+
<p class="pb-3.5 text-sm text-[var(--ui-text-muted)]">
2222
This is the {{ item.label }} panel.
2323
</p>
2424
</template>

‎docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const items = [
2222
<template>
2323
<UAccordion :items="items">
2424
<template #colors="{ item }">
25-
<p class="text-sm pb-3.5 text-[--ui-primary]">
25+
<p class="text-sm pb-3.5 text-[var(--ui-primary)]">
2626
{{ item.content }}
2727
</p>
2828
</template>

‎docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ULink
44
to="https://github.com/benjamincanac"
55
target="_blank"
6-
class="hover:ring-[--ui-primary] transition"
6+
class="hover:ring-[var(--ui-primary)] transition"
77
raw
88
>
99
<UAvatar
@@ -15,7 +15,7 @@
1515
<ULink
1616
to="https://github.com/romhml"
1717
target="_blank"
18-
class="hover:ring-[--ui-primary] transition"
18+
class="hover:ring-[var(--ui-primary)] transition"
1919
raw
2020
>
2121
<UAvatar
@@ -27,7 +27,7 @@
2727
<ULink
2828
to="https://github.com/noook"
2929
target="_blank"
30-
class="hover:ring-[--ui-primary] transition"
30+
class="hover:ring-[var(--ui-primary)] transition"
3131
raw
3232
>
3333
<UAvatar

‎docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const items = [{
1414
<template>
1515
<UBreadcrumb :items="items">
1616
<template #separator>
17-
<span class="mx-2 text-[--ui-text-muted]">/</span>
17+
<span class="mx-2 text-[var(--ui-text-muted)]">/</span>
1818
</template>
1919
</UBreadcrumb>
2020
</template>

‎docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const items = [{
1313

1414
<template>
1515
<UContextMenu :items="items" class="w-48">
16-
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
16+
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
1717
Right click here
1818
</div>
1919

@@ -22,7 +22,7 @@ const items = [{
2222
</template>
2323

2424
<template #refresh-trailing>
25-
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[--ui-primary] animate-spin" />
25+
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
2626
</template>
2727
</UContextMenu>
2828
</template>

‎docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const groups = computed(() => [{
3232
:loading="status === 'pending'"
3333
:groups="groups"
3434
placeholder="Search users..."
35-
class="h-96 border-t border-[--ui-border]"
35+
class="h-96 border-t border-[var(--ui-border)]"
3636
/>
3737
</template>
3838
</UDrawer>

‎docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const items = [{
1717
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
1818

1919
<template #profile-trailing>
20-
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
20+
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
2121
</template>
2222
</UDropdownMenu>
2323
</template>

‎docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
3333
<template #item-label="{ item }">
3434
{{ item.label }}
3535

36-
<span class="text-[--ui-text-muted]">
36+
<span class="text-[var(--ui-text-muted)]">
3737
{{ item.email }}
3838
</span>
3939
</template>

‎docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
3333
<template #item-label="{ item }">
3434
{{ item.label }}
3535

36-
<span class="text-[--ui-text-muted]">
36+
<span class="text-[var(--ui-text-muted)]">
3737
{{ item.email }}
3838
</span>
3939
</template>

‎docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const state = reactive({
2626
<template>
2727
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
2828
<template #account="{ item }">
29-
<p class="text-[--ui-text-muted] mb-4">
29+
<p class="text-[var(--ui-text-muted)] mb-4">
3030
{{ item.description }}
3131
</p>
3232

@@ -43,7 +43,7 @@ const state = reactive({
4343
</template>
4444

4545
<template #password="{ item }">
46-
<p class="text-[--ui-text-muted] mb-4">
46+
<p class="text-[var(--ui-text-muted)] mb-4">
4747
{{ item.description }}
4848
</p>
4949

‎docs/app/components/content/examples/toaster/ToasterDurationExample.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
77
<UFormField
88
label="toaster.duration"
99
size="sm"
10-
class="inline-flex ring ring-[--ui-border-accented] rounded"
10+
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
1111
:ui="{
12-
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
13-
label: 'text-[--ui-text-muted] px-2 py-1.5',
12+
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
13+
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
1414
container: 'mt-0'
1515
}"
1616
>

‎docs/app/components/content/examples/toaster/ToasterExpandExample.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
77
<UFormField
88
label="toaster.expand"
99
size="sm"
10-
class="inline-flex ring ring-[--ui-border-accented] rounded"
10+
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
1111
:ui="{
12-
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
13-
label: 'text-[--ui-text-muted] px-2 py-1.5',
12+
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
13+
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
1414
container: 'mt-0'
1515
}"
1616
>

‎docs/app/components/content/examples/toaster/ToasterPositionExample.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
1010
<UFormField
1111
label="toaster.position"
1212
size="sm"
13-
class="inline-flex ring ring-[--ui-border-accented] rounded"
13+
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
1414
:ui="{
15-
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
16-
label: 'text-[--ui-text-muted] px-2 py-1.5',
15+
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
16+
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
1717
container: 'mt-0'
1818
}"
1919
>

‎docs/app/components/theme-picker/ThemePicker.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:variant="open ? 'soft' : 'ghost'"
88
square
99
aria-label="Color picker"
10-
:ui="{ leadingIcon: 'text-[--ui-primary]' }"
10+
:ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
1111
/>
1212
</template>
1313

‎docs/app/components/theme-picker/ThemePickerButton.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
:icon="icon"
66
:label="label"
77
:variant="selected ? 'soft' : 'outline'"
8-
class="capitalize ring-[--ui-border] rounded-[--ui-radius] text-[11px]"
8+
class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
99
@click.stop.prevent="$emit('select')"
1010
>
1111
<template v-if="chip" #leading>
1212
<span
1313
class="inline-block w-2 h-2 rounded-full"
14-
:class="`bg-[--color-light] dark:bg-[--color-dark]`"
14+
:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
1515
:style="{
1616
'--color-light': `var(--color-${chip}-500)`,
1717
'--color-dark': `var(--color-${chip}-400)`

0 commit comments

Comments
 (0)