arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 09:50:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): define neutral utilities (#3629)

Browse Source 
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
This commit is contained in:
Benjamin Canac
2025-04-21 15:20:53 +02:00
committed by GitHub
parent 2b315fd855
commit d49e0dadee
238 changed files with 14319 additions and 14046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,18 +33,18 @@ 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-(--ui-text-muted)">
<p class="text-muted">
{{ item.content }}
</p>
</template>
<template #custom="{ item }">
<p class="text-(--ui-text-muted)">
<p class="text-muted">
Custom: {{ item.content }}
</p>
</template>
<template #custom-body="{ item }">
<p class="text-(--ui-text-muted)">
<p class="text-muted">
Custom: {{ item.content }}
</p>
</template>

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

@@ -18,7 +18,7 @@ const items = [{
<template>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<UChip v-for="position in positions" :key="position" :position="position">
<UChip v-for="position in positions" :key="position" :position="position" color="neutral">
<UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
</UChip>
</div>

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-(--ui-border) mt-4" />
<ReuseTemplate class="border-t border-default 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-(--ui-border-accented) text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed 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-(--ui-border-accented) text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
Color right click here
</div>
</UContextMenu>

2
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-(--ui-primary)" />
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-primary" />
</template>
</UDropdownMenu>

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

@@ -54,7 +54,7 @@ const disabled = ref(false)
<FormExampleNestedList />
</div>
<div class="border border-(--ui-border) rounded-lg">
<div class="border border-default 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-(--ui-border) p-4" />
<FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-default 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-(--ui-text-highlighted)">
<ULink active class="font-medium" active-class="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-(--ui-primary)">
<ULink class="font-medium" inactive-class="hover:text-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-(--ui-text-highlighted)">
<ULink to="/components/link" class="font-medium" active-class="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-(--ui-primary)">
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-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-(--ui-border)'"
:class="highlight && 'data-[orientation=horizontal]:border-b border-default'"
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-(--ui-text-highlighted)">
<p class="font-semibold text-highlighted">
Nuxt UI
</p>
<p>An open-source UI component library.</p>

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

@@ -339,10 +339,10 @@ onMounted(() => {
getPaginationRowModel: getPaginationRowModel()
}"
:ui="{
tr: 'divide-x divide-(--ui-border)'
tr: 'divide-x divide-default'
}"
sticky
class="border border-(--ui-border-accented) rounded-sm"
class="border border-accented rounded-sm"
@select="onSelect"
>
<template #expanded="{ row }">
@@ -351,7 +351,7 @@ onMounted(() => {
</UTable>
<div class="flex items-center justify-between gap-3">
<div class="text-sm text-(--ui-text-muted)">
<div class="text-sm 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-(--ui-text-muted)">Custom: {{ item.content }}</span>
<span class="text-muted">Custom: {{ item.content }}</span>
</template>
<template #list-trailing>

2
playground/app/pages/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="text-center">
<h1 class="font-semibold mb-1">
<h1 class="font-semibold text-primary mb-1">
Playground
</h1>