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

chore: use new syntax for css variables (#3258)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-02-07 11:24:14 +01:00
committed by GitHub
parent 8e7c52e1fb
commit 104852a55c
230 changed files with 12934 additions and 12958 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
playground/app/app.vue
View File

@@ -84,9 +84,9 @@ defineShortcuts({
<template>
<template v-if="!$route.path.startsWith('/__nuxt_ui__')">
<UApp :toaster="appConfig.toaster">
<div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
<div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
<div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
<ClientOnly v-if="!colorMode?.forced">

4
playground/app/components/Placeholder.vue
View File

@@ -1,6 +1,6 @@
<template>
<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">
<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">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

4
playground/app/pages/components/accordion.vue
View File

@@ -32,13 +32,13 @@ const items = [{
<UCard :ui="{ body: 'p-0 sm:p-0' }">
<UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
<template #body="{ item }">
<p class="text-[var(--ui-text-muted)]">
<p class="text-(--ui-text-muted)">
{{ item.content }}
</p>
</template>
<template #custom-body="{ item }">
<p class="text-[var(--ui-text-muted)]">
<p class="text-(--ui-text-muted)">
Custom: {{ item.content }}
</p>
</template>

2
playground/app/pages/components/command-palette.vue
View File

@@ -138,7 +138,7 @@ defineShortcuts({
<UButton label="Open drawer" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-[var(--ui-border)] mt-4" />
<ReuseTemplate class="border-t border-(--ui-border) mt-4" />
</template>
</UDrawer>

4
playground/app/pages/components/context-menu.vue
View File

@@ -106,13 +106,13 @@ defineShortcuts(extractShortcuts(items.value))
</div>
<UContextMenu :items="items" :ui="{ content: 'w-48' }" :size="size">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
<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>
</UContextMenu>
<UContextMenu :items="itemsWithColor" :ui="{ content: 'w-48' }" :size="size">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
Color right click here
</div>
</UContextMenu>

4
playground/app/pages/components/dropdown-menu.vue
View File

@@ -144,7 +144,7 @@ defineShortcuts(extractShortcuts(items.value))
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #custom-trailing>
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
</template>
</UDropdownMenu>
@@ -152,7 +152,7 @@ defineShortcuts(extractShortcuts(items.value))
<UButton label="Color" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #custom-trailing>
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
</template>
</UDropdownMenu>
</div>

4
playground/app/pages/components/form.vue
View File

@@ -54,7 +54,7 @@ const disabled = ref(false)
<FormExampleNestedList />
</div>
<div class="border border-[var(--ui-border)] rounded-lg">
<div class="border border-(--ui-border) rounded-lg">
<div class="py-2 px-4 flex gap-4 items-center">
<UFormField label="Validate on" class="flex items-center gap-2">
<USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
@@ -62,7 +62,7 @@ const disabled = ref(false)
<UCheckbox v-model="disabled" label="Disabled" />
</div>
<FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-[var(--ui-border)] p-4" />
<FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-(--ui-border) p-4" />
</div>
</div>
</template>

8
playground/app/pages/components/link.vue
View File

@@ -8,7 +8,7 @@
<ULink active>
Button active
</ULink>
<ULink active class="font-medium" active-class="text-[var(--ui-text-highlighted)]">
<ULink active class="font-medium" active-class="text-(--ui-text-highlighted)">
Button active with class
</ULink>
<ULink active disabled>
@@ -18,7 +18,7 @@
<ULink>
Button inactive
</ULink>
<ULink class="font-medium" inactive-class="hover:text-[var(--ui-primary)]">
<ULink class="font-medium" inactive-class="hover:text-(--ui-primary)">
Button inactive with class
</ULink>
<ULink disabled>
@@ -34,7 +34,7 @@
<ULink to="/components/link">
Link active
</ULink>
<ULink to="/components/link" class="font-medium" active-class="text-[var(--ui-text-highlighted)]">
<ULink to="/components/link" class="font-medium" active-class="text-(--ui-text-highlighted)">
Link active with class
</ULink>
<ULink to="/components/link" disabled>
@@ -44,7 +44,7 @@
<ULink to="/components/button">
Link inactive
</ULink>
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-[var(--ui-primary)]">
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-(--ui-primary)">
Link inactive with class
</ULink>
<ULink to="/components/button" disabled>

2
playground/app/pages/components/navigation-menu.vue
View File

@@ -112,7 +112,7 @@ const items = [
:content-orientation="contentOrientation"
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"
:class="highlight && 'data-[orientation=horizontal]:border-b border-(--ui-border)'"
class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
/>
</div>

2
playground/app/pages/components/separator.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-4">
<div>
<p class="font-semibold text-[var(--ui-text-highlighted)]">
<p class="font-semibold text-(--ui-text-highlighted)">
Nuxt UI
</p>
<p>An open-source UI component library.</p>

6
playground/app/pages/components/table.vue
View File

@@ -333,10 +333,10 @@ onMounted(() => {
getPaginationRowModel: getPaginationRowModel()
}"
:ui="{
tr: 'divide-x divide-[var(--ui-border)]'
tr: 'divide-x divide-(--ui-border)'
}"
sticky
class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
class="border border-(--ui-border-accented) rounded-(--ui-radius)"
>
<template #expanded="{ row }">
<pre>{{ row.original }}</pre>
@@ -344,7 +344,7 @@ onMounted(() => {
</UTable>
<div class="flex items-center justify-between gap-3">
<div class="text-sm text-[var(--ui-text-muted)]">
<div class="text-sm text-(--ui-text-muted)">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

2
playground/app/pages/components/tabs.vue
View File

@@ -57,7 +57,7 @@ const items = [{
class="w-96"
>
<template #custom="{ item }">
<span class="text-[var(--ui-text-muted)]">Custom: {{ item.content }}</span>
<span class="text-(--ui-text-muted)">Custom: {{ item.content }}</span>
</template>
</UTabs>
</div>