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

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

2
docs/app/assets/css/main.css
View File

@@ -1,7 +1,7 @@
@import "tailwindcss" theme(static) source("../../../..");
@import "@nuxt/ui-pro";
@source "../../../content";
@source "../../../content/**/*";
@source "../../../node_modules/.c12";
@theme static {

8
docs/app/components/AdsCarbon.vue
View File

@@ -23,7 +23,7 @@ onMounted(() => {
@reference "../assets/css/main.css";
.carbon :deep(#carbonads) {
@apply relative border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated)/50 w-full transition-colors min-h-[220px] p-2;
@apply relative border border-default rounded-md hover:bg-elevated/50 w-full transition-colors min-h-[220px] p-2;
.carbon-img {
@apply flex justify-center w-full;
@@ -34,16 +34,16 @@ onMounted(() => {
}
.carbon-text {
@apply text-sm text-(--ui-text-muted) transition-colors text-center text-pretty flex pt-2;
@apply text-sm text-muted transition-colors text-center text-pretty flex pt-2;
}
.carbon-poweredby {
@apply block text-xs text-center text-(--ui-text-muted) pt-2;
@apply block text-xs text-center text-muted pt-2;
}
&:hover {
.carbon-text {
@apply text-(--ui-text);
@apply text-default;
}
}
}

4
docs/app/components/Footer.vue
View File

@@ -22,8 +22,8 @@ const links = [{
<UFooter>
<template #left>
<NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-(--ui-text-muted)">
Published under <span class="text-(--ui-text-highlighted)">MIT License</span>
<NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-muted">
Published under <span class="text-highlighted">MIT License</span>
</NuxtLink>
</template>

4
docs/app/components/FrameworkSelect.vue
View File

@@ -19,8 +19,8 @@ watch(framework, () => {
:content="false"
color="neutral"
:ui="{
indicator: 'bg-(--ui-bg)',
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
indicator: 'bg-default',
trigger: 'px-1 data-[state=active]:text-highlighted'
}"
size="xs"
@update:model-value="(framework = $event as string)"

6
docs/app/components/Header.vue
View File

@@ -41,7 +41,7 @@ const mobileLinks = computed(() => [
<template>
<UHeader :ui="{ left: 'min-w-0' }" :menu="{ shouldScaleBackground: true }">
<template #left>
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0" aria-label="Nuxt UI">
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-highlighted min-w-0 focus-visible:outline-primary shrink-0" aria-label="Nuxt UI">
<Logo v-if="route.path === '/'" class="w-auto h-6 shrink-0" />
<LogoPro v-else-if="route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
<template v-else>
@@ -63,7 +63,7 @@ const mobileLinks = computed(() => [
trailing-icon="i-lucide-chevron-down"
size="xs"
class="-mb-[6px] font-semibold rounded-full truncate"
:class="[open && 'bg-(--ui-primary)/15 ']"
:class="[open && 'bg-primary/15 ']"
:ui="{
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
}"
@@ -108,7 +108,7 @@ const mobileLinks = computed(() => [
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-primary">PRO</sup>
</span>
</template>
</UContentNavigation>

4
docs/app/components/ModuleSelect.vue
View File

@@ -19,8 +19,8 @@ watch(module, () => {
:content="false"
color="neutral"
:ui="{
indicator: 'bg-(--ui-bg)',
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
indicator: 'bg-default',
trigger: 'px-1 data-[state=active]:text-highlighted'
}"
size="xs"
@update:model-value="(module = $event as string)"

10
docs/app/components/content/ComponentCode.vue
View File

@@ -329,15 +329,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<template>
<div class="my-5">
<div class="relative">
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-muted border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
class="inline-flex ring ring-accented rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
label: 'text-muted px-2 py-1.5',
container: 'mt-0'
}"
>
@@ -377,7 +377,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
</template>
</div>
<div v-if="component" class="flex justify-center border border-b-0 border-(--ui-border-muted) relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
<div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
<component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<slot :name="slot" mdc-unwrap="p">

10
docs/app/components/content/ComponentExample.vue
View File

@@ -150,8 +150,8 @@ const urlSearchParams = computed(() => {
<template>
<div ref="el" class="my-5">
<template v-if="preview">
<div class="border border-(--ui-border-muted) relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-(--ui-border-muted)">
<div class="border border-muted relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-muted">
<slot name="options" />
<UFormField
@@ -160,10 +160,10 @@ const urlSearchParams = computed(() => {
:label="option.label"
:name="option.name"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
class="inline-flex ring ring-accented rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
label: 'text-muted px-2 py-1.5',
container: 'mt-0'
}"
>

2
docs/app/components/content/ComponentProps.vue
View File

@@ -112,7 +112,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
<ProseTd>
<HighlightInlineType v-if="prop.type" :type="prop.type" />
<MDC v-if="prop.description" :value="prop.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-description`" />
<MDC v-if="prop.description" :value="prop.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-description`" />
<ComponentPropsLinks v-if="prop.tags?.length" :prop="prop" />
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />

2
docs/app/components/content/ComponentPropsSchema.vue
View File

@@ -43,7 +43,7 @@ const schemaProps = computed(() => {
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-(--ui-text-muted) my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-muted my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`" />
</ProseLi>
</ProseUl>
</ProseCollapsible>

2
docs/app/components/content/ComponentSlots.vue
View File

@@ -36,7 +36,7 @@ const meta = await fetchComponentMeta(name as any)
<ProseTd>
<HighlightInlineType v-if="slot.type" :type="slot.type" />
<MDC v-if="slot.description" :value="slot.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
<MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
</ProseTd>
</ProseTr>
</ProseTbody>

4
docs/app/components/content/Placeholder.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded-sm 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">
<div class="relative overflow-hidden rounded-sm border border-dashed border-accented opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-inverted/10" fill="none">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

2
docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
View File

@@ -20,7 +20,7 @@ const items: AccordionItem[] = [
<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-muted">
This is the {{ item.label }} panel.
</p>
</template>

2
docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
View File

@@ -24,7 +24,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-primary">
{{ item.content }}
</p>
</template>

6
docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
View File

@@ -3,7 +3,7 @@
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-(--ui-primary) transition"
class="hover:ring-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-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-primary transition"
raw
>
<UAvatar

2
docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
View File

@@ -20,7 +20,7 @@ const items: BreadcrumbItem[] = [
<template>
<UBreadcrumb :items="items">
<template #separator>
<span class="mx-2 text-(--ui-text-muted)">/</span>
<span class="mx-2 text-muted">/</span>
</template>
</UBreadcrumb>
</template>

2
docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
View File

@@ -35,7 +35,7 @@ const items = computed<ContextMenuItem[]>(() => [{
<template>
<UContextMenu :items="items" :ui="{ content: '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-accented text-sm aspect-video w-72">
Right click here
</div>
</UContextMenu>

2
docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
View File

@@ -28,7 +28,7 @@ const items: ContextMenuItem[][] = [
<template>
<UContextMenu :items="items" :ui="{ content: '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-accented text-sm aspect-video w-72">
Right click here
</div>
</UContextMenu>

4
docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
View File

@@ -19,7 +19,7 @@ const items = [
<template>
<UContextMenu :items="items" :ui="{ content: '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-accented text-sm aspect-video w-72">
Right click here
</div>
@@ -28,7 +28,7 @@ const items = [
</template>
<template #refresh-trailing>
<UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-(--ui-primary) animate-spin" />
<UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-primary animate-spin" />
</template>
</UContextMenu>
</template>

2
docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
View File

@@ -7,7 +7,7 @@ const open = ref(false)
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
<template #header>
<h2 class="text-(--ui-text-highlighted) font-semibold">
<h2 class="text-highlighted font-semibold">
Drawer non-dismissible
</h2>

2
docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
View File

@@ -21,7 +21,7 @@ const items = [
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #profile-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>
</template>

2
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
View File

@@ -36,7 +36,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-muted">
{{ item.email }}
</span>
</template>

2
docs/app/components/content/examples/input/InputButtonGroupExample.vue
View File

@@ -15,7 +15,7 @@ const domain = ref(domains[0])
}"
>
<template #leading>
<p class="text-sm text-(--ui-text-muted)">
<p class="text-sm text-muted">
https://
</p>
</template>

2
docs/app/components/content/examples/input/InputCharacterLimitExample.vue
View File

@@ -13,7 +13,7 @@ const maxLength = 15
<template #trailing>
<div
id="character-count"
class="text-xs text-(--ui-text-muted) tabular-nums"
class="text-xs text-muted tabular-nums"
aria-live="polite"
role="status"
>

4
docs/app/components/content/examples/input/InputFloatingLabelExample.vue
View File

@@ -4,8 +4,8 @@ const value = ref('')
<template>
<UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
<label class="pointer-events-none absolute left-0 -top-2.5 text-(--ui-text-highlighted) text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-(--ui-text-highlighted) peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-(--ui-text-dimmed) peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
<span class="inline-flex bg-(--ui-bg) px-1">Email address</span>
<label class="pointer-events-none absolute left-0 -top-2.5 text-highlighted text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-highlighted peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-dimmed peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
<span class="inline-flex bg-default px-1">Email address</span>
</label>
</UInput>
</template>

2
docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
View File

@@ -77,7 +77,7 @@ const text = computed(() => {
v-for="(req, index) in strength"
:key="index"
class="flex items-center gap-0.5"
:class="req.met ? 'text-(--ui-success)' : 'text-(--ui-text-muted)'"
:class="req.met ? 'text-success' : 'text-muted'"
>
<UIcon :name="req.met ? 'i-lucide-circle-check' : 'i-lucide-circle-x'" class="size-4 shrink-0" />

6
docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
View File

@@ -76,11 +76,11 @@ const items = [
</li>
<li v-for="child in item.children" :key="child.label">
<ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-(--ui-bg-elevated)/50">
<p class="font-medium text-(--ui-text-highlighted)">
<ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-elevated/50">
<p class="font-medium text-highlighted">
{{ child.label }}
</p>
<p class="text-(--ui-text-muted) line-clamp-2">
<p class="text-muted line-clamp-2">
{{ child.description }}
</p>
</ULink>

2
docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
View File

@@ -8,7 +8,7 @@ const open = ref(false)
<template #content>
<div class="flex items-center gap-4 mb-4">
<h2 class="text-(--ui-text-highlighted) font-semibold">
<h2 class="text-highlighted font-semibold">
Popover non-dismissible
</h2>

2
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
View File

@@ -36,7 +36,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-muted">
{{ item.email }}
</span>
</template>

2
docs/app/components/content/examples/table/TableColumnFiltersExample.vue
View File

@@ -100,7 +100,7 @@ const columnFilters = ref([{
<template>
<div class="flex flex-col flex-1 w-full">
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
<div class="flex px-4 py-3.5 border-b border-accented">
<UInput
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
class="max-w-sm"

2
docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
View File

@@ -131,7 +131,7 @@ function getHeader(column: Column<Payment>, label: string) {
'variant': 'ghost',
label,
'icon': isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
'class': '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)',
'class': '-mx-2.5 data-[state=open]:bg-elevated',
'aria-label': `Sort by ${isSorted === 'asc' ? 'descending' : 'ascending'}`
}))
}

2
docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
View File

@@ -100,7 +100,7 @@ const columnVisibility = ref({
<template>
<div class="flex flex-col flex-1 w-full">
<div class="flex justify-end px-4 py-3.5 border-b border-(--ui-border-accented)">
<div class="flex justify-end px-4 py-3.5 border-b border-accented">
<UDropdownMenu
:items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
label: upperFirst(column.id),

4
docs/app/components/content/examples/table/TableExample.vue
View File

@@ -265,7 +265,7 @@ function randomize() {
</script>
<template>
<div class="flex-1 divide-y divide-(--ui-border-accented) w-full">
<div class="flex-1 divide-y divide-accented w-full">
<div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
<UInput
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
@@ -313,7 +313,7 @@ function randomize() {
</template>
</UTable>
<div class="px-4 py-3.5 text-sm text-(--ui-text-muted)">
<div class="px-4 py-3.5 text-sm text-muted">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

2
docs/app/components/content/examples/table/TableFetchExample.vue
View File

@@ -36,7 +36,7 @@ const columns: TableColumn<User>[] = [{
size: 'lg'
}),
h('div', undefined, [
h('p', { class: 'font-medium text-(--ui-text-highlighted)' }, row.original.name),
h('p', { class: 'font-medium text-highlighted' }, row.original.name),
h('p', { class: '' }, `@${row.original.username}`)
])
])

2
docs/app/components/content/examples/table/TableGlobalFilterExample.vue
View File

@@ -95,7 +95,7 @@ const globalFilter = ref('45')
<template>
<div class="flex flex-col flex-1 w-full">
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
<div class="flex px-4 py-3.5 border-b border-accented">
<UInput
v-model="globalFilter"
class="max-w-sm"

2
docs/app/components/content/examples/table/TablePaginationExample.vue
View File

@@ -162,7 +162,7 @@ const pagination = ref({
class="flex-1"
/>
<div class="flex justify-center border-t border-(--ui-border) pt-4">
<div class="flex justify-center border-t border-default pt-4">
<UPagination
:default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
:items-per-page="table?.tableApi?.getState().pagination.pageSize"

2
docs/app/components/content/examples/table/TableRowExpandableExample.vue
View File

@@ -112,7 +112,7 @@ const expanded = ref({ 1: true })
v-model:expanded="expanded"
:data="data"
:columns="columns"
:ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"
:ui="{ tr: 'data-[expanded=true]:bg-elevated/50' }"
class="flex-1"
>
<template #expanded="{ row }">

2
docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
View File

@@ -122,7 +122,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
@select="onSelect"
/>
<div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
<div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

2
docs/app/components/content/examples/table/TableRowSelectionExample.vue
View File

@@ -113,7 +113,7 @@ const rowSelection = ref({ 1: true })
:columns="columns"
/>
<div class="px-4 py-3.5 border-t border-(--ui-border-accented) text-sm text-(--ui-text-muted)">
<div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

2
docs/app/components/content/examples/table/TableSlotsExample.vue
View File

@@ -97,7 +97,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
<div class="flex items-center gap-3">
<UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" :alt="`${row.original.name} avatar`" />
<div>
<p class="font-medium text-(--ui-text-highlighted)">
<p class="font-medium text-highlighted">
{{ row.original.name }}
</p>
<p>

4
docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
View File

@@ -28,7 +28,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-muted mb-4">
{{ item.description }}
</p>
@@ -45,7 +45,7 @@ const state = reactive({
</template>
<template #password="{ item }">
<p class="text-(--ui-text-muted) mb-4">
<p class="text-muted mb-4">
{{ item.description }}
</p>

6
docs/app/components/content/examples/toaster/ToasterDurationExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.duration"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
class="inline-flex ring ring-accented rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
label: 'text-muted px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterExpandExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.expand"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
class="inline-flex ring ring-accented rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
label: 'text-muted px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterPositionExample.vue
View File

@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.position"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
class="inline-flex ring ring-accented rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
label: 'text-muted px-2 py-1.5',
container: 'mt-0'
}"
>

4
docs/app/components/home/HomeContributors.vue
View File

@@ -20,7 +20,7 @@ const { width } = useElementSize(el)
<template>
<div
class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-(--ui-bg) before:rounded-full z-(--level)"
class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-default before:rounded-full z-(--level)"
:class="{ 'animation-paused': paused }"
:style="{
'--duration': `${((level + 1) * 8)}s`,
@@ -65,7 +65,7 @@ const { width } = useElementSize(el)
:src="`https://ipx.nuxt.com/s_56x56/gh_avatar/${contributor.username}`"
:srcset="`https://ipx.nuxt.com/s_112x112/gh_avatar/${contributor.username} 2x`"
:alt="contributor.username"
class="ring-2 ring-(--ui-border) lg:hover:ring-(--ui-border-inverted) transition rounded-full size-7"
class="ring-2 ring-default lg:hover:ring-inverted transition rounded-full size-7"
loading="lazy"
>
</NuxtLink>

2
docs/app/components/theme-picker/ThemePicker.vue
View File

@@ -69,7 +69,7 @@ function setBlackAsPrimary(value: boolean) {
:variant="open ? 'soft' : 'ghost'"
square
aria-label="Color picker"
:ui="{ leadingIcon: 'text-(--ui-primary)' }"
:ui="{ leadingIcon: 'text-primary' }"
/>
</template>

4
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -18,8 +18,8 @@ const slots = defineSlots<{
variant="outline"
:icon="icon"
:label="label"
class="capitalize ring-(--ui-border) rounded-sm text-[11px]"
:class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
class="capitalize ring-default rounded-sm text-[11px]"
:class="[selected ? 'bg-elevated' : 'hover:bg-elevated/50']"
>
<template v-if="chip || !!slots.leading" #leading>
<slot name="leading">

2
docs/app/layouts/docs.vue
View File

@@ -22,7 +22,7 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-primary">PRO</sup>
</span>
</template>
</UContentNavigation>

2
docs/app/pages/[...slug].vue
View File

@@ -130,7 +130,7 @@ const communityLinks = computed(() => [{
</template>
<template #title>
{{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
{{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-primary">PRO</sup>
</template>
<template #description>

20
docs/app/pages/components.vue
View File

@@ -82,7 +82,7 @@ onMounted(() => {
:ui="{ title: 'text-balance', container: 'relative' }"
>
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
</template>
<template #headline>
@@ -97,7 +97,7 @@ onMounted(() => {
/>
</template>
<template #title>
Build beautiful UI with <span class="text-(--ui-primary)">{{ components!.length }}+</span> powerful components
Build beautiful UI with <span class="text-primary">{{ components!.length }}+</span> powerful components
</template>
<template #links>
@@ -121,22 +121,22 @@ onMounted(() => {
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
</UPageHero>
<div v-for="category in categories" :key="category.id">
<div data-track-sticky class="group mb-4 sm:mb-6 lg:mb-8 sticky top-[calc(var(--ui-header-height)-1px)] bg-(--ui-bg)/75 backdrop-blur z-[1]">
<div class="relative border-y border-(--ui-border) py-4 sm:not-group-[[data-stuck]]:py-6 lg:not-group-[[data-stuck]]:py-8 transition-all duration-300">
<div data-track-sticky class="group mb-4 sm:mb-6 lg:mb-8 sticky top-[calc(var(--ui-header-height)-1px)] bg-default/75 backdrop-blur z-[1]">
<div class="relative border-y border-default py-4 sm:not-group-[[data-stuck]]:py-6 lg:not-group-[[data-stuck]]:py-8 transition-all duration-300">
<UContainer>
<h2 class="relative text-pretty font-bold text-(--ui-text-highlighted) text-base sm:not-group-[[data-stuck]]:text-xl lg:not-group-[[data-stuck]]:text-2xl transition-all duration-300 ">
<h2 class="relative text-pretty font-bold text-highlighted text-base sm:not-group-[[data-stuck]]:text-xl lg:not-group-[[data-stuck]]:text-2xl transition-all duration-300 ">
<a :href="`#${category.id}`" class="group lg:not-group-[[data-stuck]]:ps-2 lg:not-group-[[data-stuck]]:-ms-2">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-(--ui-bg-elevated) hover:text-(--ui-primary) rounded-md hidden lg:not-group-[[data-stuck]]:flex text-(--ui-text-muted) transition">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:not-group-[[data-stuck]]:flex text-muted transition">
<UIcon name="i-lucide-hash" class="size-4 shrink-0" />
</span>
{{ category.title }}
</a>
</h2>
<p class="text-pretty text-(--ui-text-muted) text-sm sm:not-group-[[data-stuck]]:text-base lg:not-group-[[data-stuck]]:text-lg mt-1 sm:not-group-[[data-stuck]]:mt-2 line-clamp-1 transition-all duration-300">
<p class="text-pretty text-muted text-sm sm:not-group-[[data-stuck]]:text-base lg:not-group-[[data-stuck]]:text-lg mt-1 sm:not-group-[[data-stuck]]:mt-2 line-clamp-1 transition-all duration-300">
{{ category.description }}
</p>
</UContainer>
@@ -157,11 +157,11 @@ onMounted(() => {
<template #title>
<div class="flex items-center gap-0.5">
<span>{{ component.title }}</span>
<sup v-if="component.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
<sup v-if="component.module === 'ui-pro'" class="text-[8px] font-medium text-primary">PRO</sup>
</div>
</template>
<div class="rounded-md border border-(--ui-border-muted) overflow-hidden aspect-[16/9]">
<div class="rounded-md border border-muted overflow-hidden aspect-[16/9]">
<UColorModeImage
:light="`${component.path.replace('/components/', '/components/light/')}.png`"
:dark="`${component.path.replace('/components/', '/components/dark/')}.png`"

6
docs/app/pages/figma/.figma.yml
View File

@@ -27,7 +27,7 @@ features1:
description: Start with essential components, or unlock Pro for complete blocks and templates.
icon: i-lucide-files
cta1:
title: Everything you need in a [single file]{class="text-(--ui-primary)"}.
title: Everything you need in a [single file]{class="text-primary"}.
description: Design and development in perfect sync with our [Free](https://www.figma.com/community/file/1288455405058138934/nuxt-ui-v3-official-design-kit-free) and Pro files. Developers can implement designs faster, while designers work with production-ready components.
section1:
title: Customize in a few clicks to fit your needs
@@ -181,7 +181,7 @@ pricing:
# discount: $119
billing_period: one-time payment
billing_cycle: plus local taxes
class: bg-(--ui-bg-elevated)/50
class: bg-elevated/50
features:
- '**1 Designer**'
- Nuxt UI & Nuxt UI Pro Components
@@ -203,7 +203,7 @@ pricing:
# discount: $279
billing_period: one-time payment
billing_cycle: plus local taxes
class: bg-(--ui-bg-elevated)/50
class: bg-elevated/50
features:
- '**Up to 20 Designers**'
- Nuxt UI & Nuxt UI Pro Components

28
docs/app/pages/figma/index.vue
View File

@@ -57,7 +57,7 @@ onMounted(async () => {
<template>
<div class="relative">
<div id="cursor1" class="absolute z-10 pointer-events-none" :style="{ opacity: 0 }">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-white dark:text-(--ui-bg)">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-inverted">
<path
fill="var(--ui-info)"
stroke="currentColor"
@@ -72,7 +72,7 @@ onMounted(async () => {
</UBadge>
</div>
<div id="cursor2" class="absolute z-10 pointer-events-none" :style="{ opacity: 0 }">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-white dark:text-(--ui-bg)">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-inverted">
<path
fill="var(--ui-success)"
stroke="currentColor"
@@ -99,7 +99,7 @@ onMounted(async () => {
<template #description>
<MDC :value="page.hero.description" unwrap="p" cache-key="figma-hero-description" />
</template>
<!-- <img src="/pro/figma/nuxt-ui-figma.png" alt="Screnshot of the Nuxt UI Figma design kit" class="w-full h-auto border border-(--ui-border) border-b-0"> -->
<!-- <img src="/pro/figma/nuxt-ui-figma.png" alt="Screnshot of the Nuxt UI Figma design kit" class="w-full h-auto border border-default border-b-0"> -->
<div class="relative">
<video
ref="video"
@@ -126,10 +126,10 @@ onMounted(async () => {
</div>
</div>
<Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
</Motion>
</UPageHero>
<UPageSection v-bind="page.features1" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-(--ui-border)" />
<UPageSection v-bind="page.features1" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-default" />
<UPageCTA
v-if="page.cta1"
variant="naked"
@@ -138,7 +138,7 @@ onMounted(async () => {
wrapper: 'grid grid-cols-1 lg:grid-cols-2',
description: 'lg:mt-0' }"
orientation="horizontal"
class="rounded-none bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
class="rounded-none bg-gradient-to-b from-elevated/50 to-default"
>
<template #title>
<MDC :value="page.cta1.title" unwrap="p" cache-key="figma-cta-1-title" />
@@ -192,8 +192,8 @@ onMounted(async () => {
<template #description>
<MDC :value="page.section4.description" unwrap="p" cache-key="figma-section-4-description" />
</template>
<div aria-hidden="true" class="absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center border border-(--ui-border) border-b-0 sm:divide-x divide-y lg:divide-y-0 divide-(--ui-border)">
<div aria-hidden="true" class="absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center border border-default border-b-0 sm:divide-x divide-y lg:divide-y-0 divide-default">
<li v-for="(step, index) in page?.section4.steps" :key="step.title" class="flex flex-col gap-y-4 justify-start group h-full p-4">
<NuxtImg
v-if="step.image"
@@ -205,14 +205,14 @@ onMounted(async () => {
<h2 class="font-semibold inline-flex items-center gap-x-1">
<UBadge :label="index + 1" size="sm" color="neutral" variant="subtle" class="rounded-full tabular-nums" /> {{ step.title }}
</h2>
<p class="text-(--ui-text-muted) text-sm">
<p class="text-muted text-sm">
{{ step.description }}
</p>
</div>
</li>
</ul>
</UPageSection>
<UPageSection v-bind="page.features2" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-(--ui-border)" />
<UPageSection v-bind="page.features2" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-default" />
<UPageSection
v-if="page.pricing"
:title="page.pricing.title"
@@ -226,7 +226,7 @@ onMounted(async () => {
wrapper: 'sm:pl-8'
}"
>
<div aria-hidden="true" class="absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<UPricingPlans compact class="-space-x-px">
<UPricingPlan
v-for="(plan, index) in page.pricing.plans"
@@ -246,8 +246,8 @@ onMounted(async () => {
>
<template #features>
<li v-for="(feature, i) in plan.features" :key="i" class="flex items-center gap-2 min-w-0">
<UIcon name="i-lucide-circle-check" class="size-5 shrink-0 text-(--ui-primary)" />
<MDC :value="feature" unwrap="p" tag="span" class="text-sm truncate text-(--ui-text-accented)" :cache-key="`figma-pricing-plan-${index}-feature-${i}`" />
<UIcon name="i-lucide-circle-check" class="size-5 shrink-0 text-primary" />
<MDC :value="feature" unwrap="p" tag="span" class="text-sm truncate text-accented" :cache-key="`figma-pricing-plan-${index}-feature-${i}`" />
</li>
</template>
<template #button>
@@ -278,7 +278,7 @@ onMounted(async () => {
</UPageMarquee>
</UPageCTA>
<UPageSection v-bind="page.faq" :ui="{ container: 'relative' }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<UPageAccordion
multiple
:items="(page.faq.items as any[])"

46
docs/app/pages/index.vue
View File

@@ -48,7 +48,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
}"
>
<template #title>
The Intuitive <br> <span class="text-(--ui-primary)">Vue UI Library</span>
The Intuitive <br> <span class="text-primary">Vue UI Library</span>
</template>
<template #description>
{{ page.hero.description }}
@@ -81,14 +81,14 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
pause-on-hover
:overlay="false"
:ui="{
root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
}"
>
<ULink
v-for="component of components?.slice(0, 10)"
:key="component.path"
class="relative group/link aspect-video border-(--ui-border) w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
class="relative group/link aspect-video border-default w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
:to="component.path"
>
<UColorModeImage
@@ -98,7 +98,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
width="290"
height="163"
format="webp"
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-default 2xl:border-y-0"
loading="lazy"
/>
<UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
@@ -110,14 +110,14 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
reverse
:overlay="false"
:ui="{
root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
}"
>
<ULink
v-for="component of components?.slice(10, 20)"
:key="component.path"
class="relative group/link aspect-video border-(--ui-border) w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
class="relative group/link aspect-video border-default w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
:to="component.path"
>
<UColorModeImage
@@ -127,7 +127,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
width="290"
height="163"
format="webp"
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-default 2xl:border-y-0"
loading="lazy"
/>
<UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
@@ -168,11 +168,11 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
<UIcon :name="feature.icon" class="size-5 shrink-0" />
</div>
<div class="flex flex-col">
<h2 class="font-medium text-(--ui-text-highlighted) inline-flex items-center gap-x-1">
<h2 class="font-medium text-highlighted inline-flex items-center gap-x-1">
{{ feature.title }}
<UIcon v-if="feature.to" name="i-lucide-arrow-right" class="size-4 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0" />
</h2>
<p class="text-sm text-(--ui-text-muted)">
<p class="text-sm text-muted">
{{ feature.description }}
</p>
</div>
@@ -215,33 +215,33 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
:links="page.community.links"
orientation="horizontal"
:ui="{ features: 'flex items-center gap-4 lg:gap-8' }"
class="border-b border-(--ui-border)"
class="border-b border-default"
>
<template #features>
<li>
<NuxtLink to="https://npm.chart.dev/@nuxt/ui" target="_blank" class="min-w-0">
<p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
<p class="text-4xl font-semibold text-highlighted truncate">
{{ format(module?.stats?.downloads ?? 0) }}+
</p>
<p class="text-(--ui-text-muted) text-sm truncate">monthly downloads</p>
<p class="text-muted text-sm truncate">monthly downloads</p>
</NuxtLink>
</li>
<li>
<NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="min-w-0">
<p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
<p class="text-4xl font-semibold text-highlighted truncate">
{{ format(module?.stats?.stars ?? 0) }}+
</p>
<p class="text-(--ui-text-muted) text-sm truncate">GitHub stars</p>
<p class="text-muted text-sm truncate">GitHub stars</p>
</NuxtLink>
</li>
<li>
<NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0">
<p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
<p class="text-4xl font-semibold text-highlighted truncate">
175+
</p>
<p class="text-(--ui-text-muted) text-sm truncate">Contributors</p>
<p class="text-muted text-sm truncate">Contributors</p>
</NuxtLink>
</li>
</template>
@@ -253,10 +253,10 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
<UPageSection :ui="{ container: 'relative !pb-0 overflow-hidden' }">
<template #title>
Build faster with Nuxt UI <span class="text-(--ui-primary)">Pro</span>.
Build faster with Nuxt UI <span class="text-primary">Pro</span>.
</template>
<template #description>
A collection of premium Vue components, composables and utils built on top of Nuxt UI. <br> Focused on structure and layout, these <span class="text-(--ui-text)">responsive components</span> are designed to be the perfect <span class="text-(--ui-text)">building blocks for your next idea</span>.
A collection of premium Vue components, composables and utils built on top of Nuxt UI. <br> Focused on structure and layout, these <span class="text-default">responsive components</span> are designed to be the perfect <span class="text-default">building blocks for your next idea</span>.
</template>
<template #links>
<UButton to="/pro" size="lg">
@@ -269,8 +269,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="relative h-[400px] border border-default bg-muted overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -left-[100px] -top-[300px] h-[940px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
<img
v-for="i in 4"
@@ -280,7 +280,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -292,7 +292,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -304,7 +304,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
</div>

2
docs/app/pages/pro/.content/pricing.yml
View File

@@ -2,7 +2,7 @@ title: Nuxt UI Pro Pricing
description: Start for free in development mode, then upgrade to a paid plan to unlock the full features of Nuxt UI Pro when you are ready to launch.
pricing:
headline: Pricing
title: Upgrade to Nuxt UI [Pro]{class="text-(--ui-primary)"}.
title: Upgrade to Nuxt UI [Pro]{class="text-primary"}.
description: On top of 40+ open source components from Nuxt UI, Pro gives you access to 50+ premium Vue components to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
freePlan:
title: Free in development

6
docs/app/pages/pro/.content/pro.yml
View File

@@ -1,8 +1,8 @@
title: Build faster with Nuxt UI Pro.
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your application.
hero:
title: Build faster with Nuxt UI [Pro]{class="text-(--ui-primary)"}.
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-(--ui-text)"} are designed to be the perfect [building blocks for your next idea]{class="text-(--ui-text)"}.
title: Build faster with Nuxt UI [Pro]{class="text-primary"}.
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-default"} are designed to be the perfect [building blocks for your next idea]{class="text-default"}.
links:
- label: Buy a license
size: xl
@@ -62,7 +62,7 @@ testimonial:
# avatar:
# src: https://github.com/benjamincanac.png
mainSection:
title: Meet the [Pro Components]{class="text-(--ui-primary)"}.
title: Meet the [Pro Components]{class="text-primary"}.
description: Code with 50+ components and sections of Nuxt UI Pro to build your next application by reducing the amount of code you need to write.
sections:
- title: The freedom to build anything

2
docs/app/pages/pro/.content/templates.yml
View File

@@ -1,7 +1,7 @@
title: Official Nuxt UI Pro Templates
description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
hero:
title: Ship [in minutes]{.text-(--ui-primary)} with :br Nuxt UI Pro Templates
title: Ship [in minutes]{.text-primary} with :br Nuxt UI Pro Templates
description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
navigation: false
links:

4
docs/app/pages/pro/activate.vue
View File

@@ -73,9 +73,9 @@ onMounted(() => {
<UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">
<div class="px-4 py-10 lg:border border-default bg-default">
<div class="max-w-xl mx-auto">
<UForm
:schema="schema"

26
docs/app/pages/pro/index.vue
View File

@@ -35,9 +35,9 @@ useSeoMeta({
<LazyStarsBg />
<Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
</Motion>
<div class="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
<div class="relative h-[400px] border border-default bg-muted overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -left-[100px] -top-[300px] h-[940px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
<img
v-for="i in 4"
@@ -46,7 +46,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -57,7 +57,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -68,7 +68,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
class="aspect-video border border-default rounded-lg bg-white"
>
</UPageMarquee>
</div>
@@ -101,10 +101,10 @@ useSeoMeta({
container: 'relative',
wrapper: 'sm:px-8'
}"
class="border-t border-(--ui-border)"
class="border-t border-default"
>
<Motion as-child :initial="{ height: 0 }" :while-in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
</Motion>
</UPageSection>
@@ -116,7 +116,7 @@ useSeoMeta({
wrapper: 'grid grid-cols-1 lg:grid-cols-2',
description: 'lg:mt-0' }"
orientation="horizontal"
class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-elevated)/50 to-(--ui-bg)"
class="rounded-none border-t border-default bg-gradient-to-b from-elevated/50 to-default"
>
<template #title>
<MDC :value="page.mainSection.title" tag="span" unwrap="p" cache-key="pro-main-section-title" />
@@ -134,7 +134,7 @@ useSeoMeta({
:reverse="section.reverse"
:features="section.features"
orientation="horizontal"
:class="{ 'border-b border-(--ui-border)': index === page.sections.length - 1 }"
:class="{ 'border-b border-default': index === page.sections.length - 1 }"
:ui="{
container: index === 0 ? 'pb-0 sm:pb-0 lg:pb-0 py-16 sm:py-16 lg:py-16' : ''
}"
@@ -145,10 +145,10 @@ useSeoMeta({
<UPageSection
id="templates"
v-bind="page.templates"
class="overflow-hidden border-x border-(--ui-border)"
class="overflow-hidden border-x border-default"
:ui="{ container: 'relative' }"
>
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<UCarousel
v-slot="{ item }"
loop
@@ -160,7 +160,7 @@ useSeoMeta({
:ui="{
item: 'basis-1/2',
container: 'py-2',
viewport: 'border-x border-(--ui-border)',
viewport: 'border-x border-default',
arrows: 'hidden 2xl:block'
}"
>
@@ -181,7 +181,7 @@ useSeoMeta({
:light="item.thumbnail.light"
:dark="item.thumbnail.dark"
:alt="item.title"
class="rounded-lg w-full border border-(--ui-border) aspect-video"
class="rounded-lg w-full border border-default aspect-video"
loading="lazy"
/>
</UPageCard>

18
docs/app/pages/pro/pricing.vue
View File

@@ -29,13 +29,13 @@ useSeoMeta({
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
<div class="flex flex-col bg-default gap-8 lg:gap-0">
<UPricingPlan
v-bind="page.pricing.freePlan"
variant="naked"
class="lg:rounded-none border-x border-(--ui-border) border-t border-b lg:border-b-0"
class="lg:rounded-none border-x border-default border-t border-b lg:border-b-0"
/>
<UPricingPlans compact>
<UPricingPlan
@@ -48,7 +48,7 @@ useSeoMeta({
:billing-period="plan.billing_period"
:billing-cycle="plan.billing_cycle"
:variant="plan.highlight ? 'soft' : 'outline'"
:class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-(--ui-primary) lg:border-(--ui-border)': plan.highlight }]"
:class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-primary lg:border-default': plan.highlight }]"
:features="plan.features"
:button="plan.button"
/>
@@ -58,12 +58,12 @@ useSeoMeta({
variant="naked"
:billing-period="page.pricing.figma.billing_period"
:billing-cycle="page.pricing.figma.billing_cycle"
class="lg:rounded-none border lg:border-y-0 border-(--ui-border)"
class="lg:rounded-none border lg:border-y-0 border-default"
>
<template #features>
<li v-for="(feature, index) in page.pricing.figma.features" :key="index" class="flex items-center gap-2 min-w-0">
<UIcon name="i-lucide-circle-check" class="size-5 text-(--ui-primary) shrink-0" />
<MDC :value="feature" unwrap="p" class="text-sm truncate text-(--ui-text-toned)" :cache-key="`pro-pricing-figma-feature-${index}`" />
<UIcon name="i-lucide-circle-check" class="size-5 text-primary shrink-0" />
<MDC :value="feature" unwrap="p" class="text-sm truncate text-toned" :cache-key="`pro-pricing-figma-feature-${index}`" />
</li>
</template>
</UPricingPlan>
@@ -73,7 +73,7 @@ useSeoMeta({
<UPageSection
id="testimonials"
v-bind="page.testimonials"
class="border-y border-(--ui-border)"
class="border-y border-default"
>
<UPageMarquee pause-on-hover :ui="{ root: '[--duration:40s]' }">
<img
@@ -110,7 +110,7 @@ useSeoMeta({
class="scroll-mt-(--ui-header-height)"
:ui="{ container: 'relative' }"
>
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<UPageAccordion
multiple
:items="(page.faq.items as any[])"

10
docs/app/pages/pro/templates.vue
View File

@@ -20,7 +20,7 @@ useSeoMeta({
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<template #title>
<MDC :value="page.hero.title" unwrap="p" cache-key="pro-templates-hero-title" />
@@ -38,10 +38,10 @@ useSeoMeta({
:links="template.links"
:features="template.features"
orientation="horizontal"
class="lg:border-t border-(--ui-border)"
class="lg:border-t border-default"
:ui="{
title: 'lg:text-4xl',
wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
wrapper: 'lg:py-16 lg:border-r border-default order-last lg:pr-16',
container: 'lg:py-0',
links: 'gap-x-3'
}"
@@ -50,12 +50,12 @@ useSeoMeta({
<MDC :value="template.description" unwrap="p" :cache-key="`pro-templates-${index}-description`" />
</template>
<div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
<div class="lg:border-x border-default h-full flex items-center lg:bg-muted/20">
<Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-sm lg:rounded-none"
class="w-full h-auto border lg:border-y lg:border-x-0 border-default rounded-sm lg:rounded-none"
:alt="`Template ${index} thumbnail`"
width="656"
height="369"

10
docs/app/pages/showcase.vue
View File

@@ -29,19 +29,19 @@ defineOgImageComponent('Docs', {
}"
>
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
</template>
<LazyStarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="border-l border-t border-(--ui-border)">
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center divide-y divide-x divide-(--ui-border)">
<div class="border-l border-t border-default">
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center divide-y divide-x divide-default">
<li
v-for="item in page.items"
:key="item.name"
class="group relative flex items-center justify-center flex-1 size-full p-2 last:border-r last:border-b border-(--ui-border) overflow-hidden"
class="group relative flex items-center justify-center flex-1 size-full p-2 last:border-r last:border-b border-default overflow-hidden"
>
<NuxtLink class="inset-0 absolute" :to="item.url" target="_blank">
<span class="sr-only">Go to {{ item.name }}</span>

6
docs/app/pages/team.vue
View File

@@ -41,7 +41,7 @@ const icons = {
:ui="{ title: 'text-balance', container: 'relative' }"
>
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
</template>
<LazyStarsBg />
@@ -58,7 +58,7 @@ const icons = {
container: 'gap-y-4 lg:p-8',
leading: 'flex justify-center',
title: 'text-center',
description: 'text-center text-(--ui-text-muted)'
description: 'text-center text-muted'
}"
variant="subtle"
>
@@ -126,7 +126,7 @@ const icons = {
container: 'gap-y-2',
leading: 'flex justify-center',
title: 'text-center',
description: 'text-center text-(--ui-text-muted)'
description: 'text-center text-muted'
}"
>
<template #leading>