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

refactor(module)!: implement design system with CSS variables (#2298)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/app/app.config.ts
View File

@@ -7,7 +7,7 @@ export default defineAppConfig({
ui: {
colors: {
primary: 'green',
gray: 'slate'
neutral: 'slate'
}
}
})

4
playground/app/app.vue
View File

@@ -65,8 +65,8 @@ defineShortcuts({
<template>
<UApp :toaster="appConfig.toaster">
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-white dark:bg-gray-900" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="border-r border-gray-200 dark:border-gray-800 overflow-y-auto w-48 p-4" />
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[--ui-bg]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="border-r border-[--ui-border] overflow-y-auto w-48 p-4" />
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
<NuxtPage />

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

@@ -95,11 +95,11 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UFormField>
<div class="flex gap-2">
<UButton color="gray" type="submit">
<UButton color="neutral" type="submit">
Submit
</UButton>
<UButton color="gray" variant="outline" @click="form?.clear()">
<UButton color="neutral" variant="outline" @click="form?.clear()">
Clear
</UButton>
</div>

2
playground/app/components/FormNestedExample.vue
View File

@@ -57,7 +57,7 @@ function onError(event: any) {
</UForm>
<div>
<UButton color="gray" type="submit">
<UButton color="neutral" type="submit">
Submit
</UButton>
</div>

6
playground/app/components/FormNestedListExample.vue
View File

@@ -68,16 +68,16 @@ function onError(event: any) {
</UForm>
<div class="flex gap-2">
<UButton color="gray" variant="subtle" size="sm" @click="addItem()">
<UButton color="neutral" variant="subtle" size="sm" @click="addItem()">
Add Item
</UButton>
<UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
<UButton color="neutral" variant="ghost" size="sm" @click="removeItem()">
Remove Item
</UButton>
</div>
<div>
<UButton color="gray" type="submit">
<UButton color="neutral" type="submit">
Submit
</UButton>
</div>

2
playground/app/components/ModalExample.vue
View File

@@ -9,7 +9,7 @@ defineProps<{
<template>
<UModal :title="`This modal was opened programmatically ${count} times`">
<template #footer>
<UButton color="gray" label="Close" @click="modal.close()" />
<UButton color="neutral" label="Close" @click="modal.close()" />
</template>
</UModal>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
<div class="relative overflow-hidden rounded 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"

2
playground/app/components/SlideoverExample.vue
View File

@@ -13,7 +13,7 @@ defineProps<{
</template>
<template #footer>
<UButton color="gray" label="Close" @click="slideover.close()" />
<UButton color="neutral" label="Close" @click="slideover.close()" />
</template>
</USlideover>
</template>

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-gray-500 dark:text-gray-400">
<p class="text-[--ui-text-muted]">
{{ item.content }}
</p>
</template>
<template #custom-body="{ item }">
<p class="text-gray-500 dark:text-gray-400">
<p class="text-[--ui-text-muted]">
Custom: {{ item.content }}
</p>
</template>

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

@@ -35,7 +35,7 @@ const data = {
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions('gray')"
:actions="actions('neutral')"
:variant="variant"
/>
</div>
@@ -45,7 +45,7 @@ const data = {
:key="variant"
v-bind="data"
:actions="actions('primary')"
color="gray"
color="neutral"
:variant="variant"
/>
</div>

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

@@ -17,7 +17,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="gray" />
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="neutral" />
</div>
<div class="flex items-center gap-2 ml-[-56px]">
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />

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

@@ -25,7 +25,7 @@ const items = [{
<UBreadcrumb :items="items">
<template #dropdown="{ item }">
<UDropdownMenu :items="item.children">
<UButton :icon="item.icon" color="gray" variant="link" class="p-0.5" />
<UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
</UDropdownMenu>
</template>
</UBreadcrumb>

14
playground/app/pages/components/button-group.vue
View File

@@ -16,26 +16,26 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
</UButtonGroup>
<UButtonGroup>
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
<UButton color="gray" variant="subtle">
<UButton color="neutral" variant="subtle">
Button
</UButton>
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
</UButtonGroup>
<UButtonGroup orientation="vertical">
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
<UInput placeholder="Search..." />
@@ -43,7 +43,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<UButtonGroup>
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
</UButtonGroup>
@@ -52,7 +52,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<div class="flex gap-4 items-center justify-center">
<UButtonGroup v-for="size in sizes" :key="size" :size="size">
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
<UButton color="neutral" variant="outline">
Button
</UButton>
</UButtonGroup>

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

@@ -51,7 +51,7 @@ function onClick() {
icon="i-heroicons-rocket-launch"
:label="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
/>
</div>
<div class="flex items-center gap-2 ml-[-129px]">

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

@@ -10,7 +10,7 @@ const checked = ref(true)
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4">
<UCheckbox v-model="checked" label="Primary" />
<UCheckbox label="Gray" color="gray" :default-value="true" />
<UCheckbox label="Neutral" color="neutral" :default-value="true" />
<UCheckbox label="Error" color="error" :model-value="true" />
<UCheckbox label="Icon" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />

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

@@ -19,13 +19,13 @@ const items = [{
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<UChip v-for="position in positions" :key="position" :position="position">
<UButton icon="i-heroicons-inbox" color="gray" variant="subtle" />
<UButton icon="i-heroicons-inbox" color="neutral" variant="subtle" />
</UChip>
</div>
<div class="flex items-center gap-2">
<UChip v-for="{ name, icon, count } in items" :key="name" :text="count" :show="count > 0" size="lg">
<UButton :icon="icon" color="gray" variant="subtle" />
<UButton :icon="icon" color="neutral" variant="subtle" />
</UChip>
</div>

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

@@ -9,7 +9,7 @@ const appConfig = useAppConfig()
class="group"
icon="i-heroicons-light-bulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="gray"
color="neutral"
variant="outline"
label="Open"
block

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

@@ -67,17 +67,17 @@ const groups = computed(() => [{
const labels = [{
label: 'bug',
chip: {
color: 'red' as const
color: 'error' as const
}
}, {
label: 'feature',
chip: {
color: 'green' as const
color: 'success' as const
}
}, {
label: 'enhancement',
chip: {
color: 'blue' as const
color: 'info' as const
}
}]
const label = ref()
@@ -114,7 +114,7 @@ defineShortcuts({
<div class="flex-1 flex flex-col gap-12 w-full max-w-lg">
<div class="flex items-center justify-between gap-2 mt-[58px]">
<UModal v-model:open="open">
<UButton label="Open modal" color="gray" variant="outline" />
<UButton label="Open modal" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate :close="true" @close="open = false" />
@@ -122,15 +122,15 @@ defineShortcuts({
</UModal>
<UDrawer should-scale-background>
<UButton label="Open drawer" color="gray" variant="outline" />
<UButton label="Open drawer" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-gray-200 dark:border-gray-800" />
<ReuseTemplate class="border-t border-[--ui-border]" />
</template>
</UDrawer>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton label="Select label (popover)" color="gray" variant="outline" />
<UButton label="Select label (popover)" color="neutral" variant="outline" />
<template #content>
<UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-9' }" />

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

@@ -88,7 +88,7 @@ defineShortcuts(extractShortcuts(items))
</div>
<UContextMenu :items="items" class="min-w-48" :size="size">
<div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 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>

16
playground/app/pages/components/drawer.vue
View File

@@ -5,20 +5,20 @@ const open = ref(false)
<template>
<div class="flex flex-col gap-2">
<UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
<UButton color="gray" variant="outline" label="Open with v-model" />
<UButton color="neutral" variant="outline" label="Open with v-model" />
<template #body>
<Placeholder class="h-48 w-full" />
</template>
<template #footer>
<UButton label="Submit" color="gray" class="justify-center" />
<UButton label="Cancel" color="gray" variant="outline" class="justify-center" @click="open = false" />
<UButton label="Submit" color="neutral" class="justify-center" />
<UButton label="Cancel" color="neutral" variant="outline" class="justify-center" @click="open = false" />
</template>
</UDrawer>
<UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work.">
<UButton color="gray" variant="outline" label="Open with scale" />
<UButton color="neutral" variant="outline" label="Open with scale" />
<template #body>
<Placeholder class="h-screen w-full" />
@@ -26,7 +26,7 @@ const open = ref(false)
</UDrawer>
<UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false">
<UButton color="gray" variant="outline" label="Open on bottom" />
<UButton color="neutral" variant="outline" label="Open on bottom" />
<template #body>
<Placeholder class="h-96 w-full" />
@@ -34,7 +34,7 @@ const open = ref(false)
</UDrawer>
<UDrawer title="Drawer with left direction" direction="left" :handle="false">
<UButton color="gray" variant="outline" label="Open on left" />
<UButton color="neutral" variant="outline" label="Open on left" />
<template #body>
<Placeholder class="w-96 h-full" />
@@ -42,7 +42,7 @@ const open = ref(false)
</UDrawer>
<UDrawer title="Drawer with top direction" direction="top" :handle="false">
<UButton color="gray" variant="outline" label="Open on top" />
<UButton color="neutral" variant="outline" label="Open on top" />
<template #body>
<Placeholder class="h-96 w-full" />
@@ -50,7 +50,7 @@ const open = ref(false)
</UDrawer>
<UDrawer title="Drawer with right direction" direction="right" :handle="false">
<UButton color="gray" variant="outline" label="Open on right" />
<UButton color="neutral" variant="outline" label="Open on right" />
<template #body>
<Placeholder class="w-96 h-full" />

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

@@ -127,10 +127,10 @@ defineShortcuts(extractShortcuts(items))
<USelectMenu v-model="size" :items="sizes" placeholder="Size" />
<UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
<UButton label="Open" color="gray" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<template #custom-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-primary-500 dark:text-primary-400" />
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
</template>
</UDropdownMenu>
</div>

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

@@ -40,7 +40,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UFormField>
<div>
<UButton color="gray" type="submit">
<UButton color="neutral" type="submit">
Submit
</UButton>
</div>
@@ -67,7 +67,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UFormField>
<div>
<UButton color="gray" type="submit">
<UButton color="neutral" type="submit">
Submit
</UButton>
</div>

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

@@ -64,7 +64,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
class="w-48"
/>
</div>
@@ -83,7 +83,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" placeholder="Disabled" disabled />
<UInputMenu :items="items" placeholder="Required" required />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple color="neutral" />
<UInputMenu :items="items" loading placeholder="Search..." />
</div>
<div class="flex items-center gap-4">

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

@@ -20,7 +20,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
class="w-48"
/>
</div>

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-gray-900 dark:text-white">
<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-primary-500 dark:hover:text-primary-400">
<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-gray-900 dark:text-white">
<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-primary-500 dark:hover:text-primary-400">
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-[--ui-primary]">
Link inactive with class
</ULink>
<ULink to="/components/button" disabled>

22
playground/app/pages/components/modal.vue
View File

@@ -19,7 +19,7 @@ function openModal() {
<template>
<div class="flex flex-col gap-2">
<UModal title="First modal">
<UButton color="gray" variant="outline" label="Open with nested" />
<UButton color="neutral" variant="outline" label="Open with nested" />
<template #footer>
<UModal title="Second modal">
@@ -30,40 +30,40 @@ function openModal() {
<UModal v-model:open="open" title="Modal with v-model" description="This can be useful to control the state of the modal yourself." />
<UButton label="Open with v-model" color="gray" variant="subtle" @click="open = true" />
<UButton label="Open with v-model" color="neutral" variant="subtle" @click="open = true" />
<UModal title="Modal without overlay" description="This modal has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="gray" variant="outline" />
<UButton label="Open without overlay" color="neutral" variant="outline" />
</UModal>
<UModal title="Modal without modal & overlay" description="This modal has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="gray" variant="subtle" />
<UButton label="Open without modal" color="neutral" variant="subtle" />
</UModal>
<UModal title="Modal without transition" description="This modal has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="gray" variant="outline" />
<UButton label="Open without transition" color="neutral" variant="outline" />
</UModal>
<UModal title="Modal without portal" description="This modal has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" variant="subtle" />
<UButton label="Open without portal" color="neutral" variant="subtle" />
</UModal>
<UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
<UButton label="Open fullscreen" color="gray" variant="outline" />
<UButton label="Open fullscreen" color="neutral" variant="outline" />
</UModal>
<UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" variant="subtle" />
<UButton label="Open unclosable" color="neutral" variant="subtle" />
</UModal>
<UModal title="Modal without close button" description="This modal has `close: false` prop." :close="false">
<UButton label="Open without close button" color="gray" variant="outline" />
<UButton label="Open without close button" color="neutral" variant="outline" />
</UModal>
<UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" variant="subtle" />
<UButton label="Open with custom close button" color="neutral" variant="subtle" />
</UModal>
<UButton label="Open programmatically" color="gray" variant="outline" @click="openModal" />
<UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
</div>
</template>

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

@@ -99,7 +99,7 @@ const items = [
:orientation="orientation"
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[--ui-border]'"
/>
</div>
</template>

20
playground/app/pages/components/popover.vue
View File

@@ -16,7 +16,7 @@ function send() {
<div class="text-center">
<div>
<UPopover arrow :content="{ side: 'top' }">
<UButton label="Click me top" color="gray" variant="outline" />
<UButton label="Click me top" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -25,7 +25,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover arrow :content="{ side: 'left' }">
<UButton label="Click me top" color="gray" variant="outline" />
<UButton label="Click me top" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -33,7 +33,7 @@ function send() {
</UPopover>
<UPopover arrow :content="{ side: 'right' }">
<UButton label="Click me top" color="gray" variant="outline" />
<UButton label="Click me top" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -42,12 +42,12 @@ function send() {
</div>
<UPopover v-model:open="open" arrow>
<UButton label="Click me bottom" color="gray" variant="outline" />
<UButton label="Click me bottom" color="neutral" variant="outline" />
<template #content>
<div class="flex justify-center gap-2 p-4 w-48">
<UButton label="Close" color="gray" @click="open = false" />
<UButton label="Send" color="gray" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
<UButton label="Close" color="neutral" @click="open = false" />
<UButton label="Send" color="neutral" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
</div>
</template>
</UPopover>
@@ -55,7 +55,7 @@ function send() {
<div class="mt-24">
<UPopover mode="hover" arrow :content="{ side: 'top' }">
<UButton label="Hover me top" color="gray" variant="outline" />
<UButton label="Hover me top" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -64,7 +64,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover mode="hover" arrow :content="{ side: 'left' }">
<UButton label="Hover me left" color="gray" variant="outline" />
<UButton label="Hover me left" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -72,7 +72,7 @@ function send() {
</UPopover>
<UPopover mode="hover" arrow :content="{ side: 'right' }">
<UButton label="Hover me right" color="gray" variant="outline" />
<UButton label="Hover me right" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -81,7 +81,7 @@ function send() {
</div>
<UPopover mode="hover" arrow>
<UButton label="Hover me bottom" color="gray" variant="outline" />
<UButton label="Hover me bottom" color="neutral" variant="outline" />
<template #content>
<div class="w-48 h-16" />

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

@@ -33,7 +33,7 @@ onMounted(() => {
<div class="flex flex-col gap-8 items-center">
<div class="flex flex-col gap-4 w-48">
<UProgress />
<UProgress color="gray" />
<UProgress color="neutral" />
<UProgress color="error" />
<UProgress animation="carousel-inverse" />
<UProgress animation="swing" />

2
playground/app/pages/components/radio-group.vue
View File

@@ -25,7 +25,7 @@ const itemsWithDescription = [
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[100px]">
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="items" color="gray" default-value="1" />
<URadioGroup :items="items" color="neutral" default-value="1" />
<URadioGroup :items="items" color="error" default-value="2" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />

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

@@ -69,7 +69,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
class="w-48"
/>
</div>

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

@@ -71,7 +71,7 @@ function getUserAvatar(value: string) {
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
class="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-gray-900 dark:text-white">
<p class="font-semibold text-[--ui-text-highlighted]">
Nuxt UI
</p>
<p>An open-source UI component library.</p>

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

@@ -33,7 +33,7 @@
<h3 class="font-bold">
Logs
</h3>
<UButton icon="i-heroicons-trash" size="sm" color="gray" class="-my-1" @click="logs = []" />
<UButton icon="i-heroicons-trash" size="sm" color="neutral" class="-my-1" @click="logs = []" />
</div>
</template>

26
playground/app/pages/components/slideover.vue
View File

@@ -19,7 +19,7 @@ function openSlideover() {
<template>
<div class="flex flex-col gap-2">
<USlideover title="First slideover">
<UButton color="gray" variant="outline" label="Open with nested" />
<UButton color="neutral" variant="outline" label="Open with nested" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -33,7 +33,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
<UButton label="Open on left" color="gray" variant="subtle" />
<UButton label="Open on left" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -41,7 +41,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on top side" description="This slideover has `side: 'top'` prop." side="top">
<UButton label="Open on top" color="gray" variant="outline" />
<UButton label="Open on top" color="neutral" variant="outline" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -49,7 +49,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on bottom side" description="This slideover has `side: 'bottom'` prop." side="bottom">
<UButton label="Open on bottom" color="gray" variant="subtle" />
<UButton label="Open on bottom" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -62,10 +62,10 @@ function openSlideover() {
</template>
</USlideover>
<UButton label="Open with v-model" color="gray" variant="outline" @click="open = true" />
<UButton label="Open with v-model" color="neutral" variant="outline" @click="open = true" />
<USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="gray" variant="subtle" />
<UButton label="Open without overlay" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -73,7 +73,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without modal & overlay" description="This slideover has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="gray" variant="outline" />
<UButton label="Open without modal" color="neutral" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -81,7 +81,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="gray" variant="subtle" />
<UButton label="Open without transition" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -89,7 +89,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" variant="outline" />
<UButton label="Open without portal" color="neutral" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -97,7 +97,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" variant="subtle" />
<UButton label="Open unclosable" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -105,7 +105,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without close button" description="This slideover has `close: false` prop." :close="false">
<UButton label="Open without close button" color="gray" variant="outline" />
<UButton label="Open without close button" color="neutral" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -113,13 +113,13 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" variant="subtle" />
<UButton label="Open with custom close button" color="neutral" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<UButton label="Open programmatically" color="gray" variant="outline" @click="openSlideover" />
<UButton label="Open programmatically" color="neutral" variant="outline" @click="openSlideover" />
</div>
</template>

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

@@ -10,7 +10,7 @@ const value = ref(50)
<div class="flex flex-col gap-6 items-center">
<div class="flex flex-col gap-6 w-48">
<USlider v-model="value" />
<USlider color="gray" :model-value="50" />
<USlider color="neutral" :model-value="50" />
<USlider color="error" :model-value="50" />
<USlider :default-value="100" />
<USlider inverted />

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

@@ -10,7 +10,7 @@ const checked = ref(true)
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-114px]">
<USwitch v-model="checked" label="Primary" />
<USwitch color="gray" label="Gray" :default-value="true" />
<USwitch color="neutral" label="Neutral" :default-value="true" />
<USwitch color="error" label="Error" :default-value="true" />
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />

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

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

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

@@ -20,7 +20,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
color="neutral"
class="w-48"
/>
</div>

10
playground/app/pages/components/toast.vue
View File

@@ -49,13 +49,13 @@ const templates = (id: number) => [{
icon: 'i-heroicons-rocket-launch',
actions: [{
label: 'Action 1',
color: 'gray' as const,
color: 'neutral' as const,
click() {
console.log(`Toast ${id} action 1 clicked`)
}
}, {
label: 'Action 2',
color: 'gray' as const,
color: 'neutral' as const,
variant: 'outline' as const,
click() {
console.log(`Toast ${id} action 2 clicked`)
@@ -116,9 +116,9 @@ function removeToast() {
</div>
<div class="flex items-center gap-2">
<UButton label="Add new" color="gray" variant="outline" @click="addToast" />
<UButton label="Update last" color="gray" variant="outline" @click="updateToast" />
<UButton label="Remove last" color="gray" variant="outline" @click="removeToast" />
<UButton label="Add new" color="neutral" variant="outline" @click="addToast" />
<UButton label="Update last" color="neutral" variant="outline" @click="updateToast" />
<UButton label="Remove last" color="neutral" variant="outline" @click="removeToast" />
</div>
</div>
</template>

8
playground/nuxt.config.ts
View File

@@ -1,13 +1,5 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
head: {
bodyAttrs: {
class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
}
}
},
modules: ['../src/module'],
future: {