mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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'
|
||||
}"
|
||||
>
|
||||
|
||||
@@ -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'
|
||||
}"
|
||||
>
|
||||
|
||||
@@ -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'
|
||||
}"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user