chore(app): use new utilities

benjamincanac · benjamincanac · commit aba61e44b9a6 · 2025-04-25T12:03:44.000+02:00
diff --git a/src/App.vue b/src/App.vue
@@ -120,8 +120,8 @@ if (cookie.value !== 'accepted') {
           v-model:open="open"
           collapsible
           resizable
-          class="bg-(--ui-bg-elevated)/25"
-          :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
+          class="bg-elevated/25"
+          :ui="{ footer: 'lg:border-t lg:border-default' }"
         >
           <template #header="{ collapsed }">
             <TeamsMenu :collapsed="collapsed" />
@@ -130,7 +130,7 @@ if (cookie.value !== 'accepted') {
           <template #default="{ collapsed }">
             <UDashboardSearchButton
               :collapsed="collapsed"
-              class="bg-transparent ring-(--ui-border)"
+              class="bg-transparent ring-default"
             />
 
             <UNavigationMenu
diff --git a/src/components/NotificationsSlideover.vue b/src/components/NotificationsSlideover.vue
@@ -18,7 +18,7 @@ const { data: notifications } = useFetch('https://dashboard-template.nuxt.dev/ap
         v-for="notification in notifications"
         :key="notification.id"
         :to="`/inbox?id=${notification.id}`"
-        class="px-3 py-2.5 rounded-md hover:bg-(--ui-bg-elevated)/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
+        class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
       >
         <UChip
           color="error"
@@ -34,16 +34,16 @@ const { data: notifications } = useFetch('https://dashboard-template.nuxt.dev/ap
 
         <div class="text-sm flex-1">
           <p class="flex items-center justify-between">
-            <span class="text-(--ui-text-highlighted) font-medium">{{ notification.sender.name }}</span>
+            <span class="text-highlighted font-medium">{{ notification.sender.name }}</span>
 
             <time
               :datetime="notification.date"
-              class="text-(--ui-text-muted) text-xs"
+              class="text-muted text-xs"
               v-text="formatTimeAgo(new Date(notification.date))"
             />
           </p>
 
-          <p class="text-(--ui-text-dimmed)">
+          <p class="text-dimmed">
             {{ notification.body }}
           </p>
         </div>
diff --git a/src/components/TeamsMenu.vue b/src/components/TeamsMenu.vue
@@ -58,10 +58,10 @@ const items = computed(() => {
       variant="ghost"
       block
       :square="collapsed"
-      class="data-[state=open]:bg-(--ui-bg-elevated)"
+      class="data-[state=open]:bg-elevated"
       :class="[!collapsed && 'py-2']"
       :ui="{
-        trailingIcon: 'text-(--ui-text-dimmed)'
+        trailingIcon: 'text-dimmed'
       }"
     />
   </UDropdownMenu>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
@@ -95,9 +95,9 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
       variant="ghost"
       block
       :square="collapsed"
-      class="data-[state=open]:bg-(--ui-bg-elevated)"
+      class="data-[state=open]:bg-elevated"
       :ui="{
-        trailingIcon: 'text-(--ui-text-dimmed)'
+        trailingIcon: 'text-dimmed'
       }"
     />
   </UDropdownMenu>
diff --git a/src/components/home/HomeChart.vue b/src/components/home/HomeChart.vue
@@ -64,10 +64,10 @@ const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amo
   <UCard ref="cardRef" :ui="{ body: '!px-0 !pt-0 !pb-3' }">
     <template #header>
       <div>
-        <p class="text-xs text-(--ui-text-muted) uppercase mb-1.5">
+        <p class="text-xs text-muted uppercase mb-1.5">
           Revenue
         </p>
-        <p class="text-3xl text-(--ui-text-highlighted) font-semibold">
+        <p class="text-3xl text-highlighted font-semibold">
           {{ formatNumber(total) }}
         </p>
       </div>
diff --git a/src/components/home/HomeDateRangePicker.vue b/src/components/home/HomeDateRangePicker.vue
@@ -84,7 +84,7 @@ const selectRange = (range: { days?: number, months?: number, years?: number })
       color="neutral"
       variant="ghost"
       icon="i-lucide-calendar"
-      class="data-[state=open]:bg-(--ui-bg-elevated) group"
+      class="data-[state=open]:bg-elevated group"
     >
       <span class="truncate">
         <template v-if="selected.start">
@@ -101,12 +101,12 @@ const selectRange = (range: { days?: number, months?: number, years?: number })
       </span>
 
       <template #trailing>
-        <UIcon name="i-lucide-chevron-down" class="shrink-0 text-(--ui-text-dimmed) size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" />
+        <UIcon name="i-lucide-chevron-down" class="shrink-0 text-dimmed size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" />
       </template>
     </UButton>
 
     <template #content>
-      <div class="flex items-stretch sm:divide-x divide-(--ui-border)">
+      <div class="flex items-stretch sm:divide-x divide-default">
         <div class="hidden sm:flex flex-col justify-center">
           <UButton
             v-for="(range, index) in ranges"
@@ -115,7 +115,7 @@ const selectRange = (range: { days?: number, months?: number, years?: number })
             color="neutral"
             variant="ghost"
             class="rounded-none px-4"
-            :class="[isRangeSelected(range) ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
+            :class="[isRangeSelected(range) ? 'bg-elevated' : 'hover:bg-elevated/50']"
             truncate
             @click="selectRange(range)"
           />
diff --git a/src/components/home/HomePeriodSelect.vue b/src/components/home/HomePeriodSelect.vue
@@ -44,7 +44,7 @@ watch(periods, () => {
     v-model="model"
     :items="periods"
     variant="ghost"
-    class="data-[state=open]:bg-(--ui-bg-elevated)"
+    class="data-[state=open]:bg-elevated"
     :ui="{ value: 'capitalize', itemLabel: 'capitalize', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
   />
 </template>
diff --git a/src/components/home/HomeSales.vue b/src/components/home/HomeSales.vue
@@ -103,10 +103,10 @@ const columns: TableColumn<Sale>[] = [
     class="shrink-0"
     :ui="{
       base: 'table-fixed border-separate border-spacing-0',
-      thead: '[&>tr]:bg-(--ui-bg-elevated)/50 [&>tr]:after:content-none',
+      thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
       tbody: '[&>tr]:last:[&>td]:border-b-0',
-      th: 'first:rounded-l-[calc(var(--ui-radius)*2)] last:rounded-r-[calc(var(--ui-radius)*2)] border-y border-(--ui-border) first:border-l last:border-r',
-      td: 'border-b border-(--ui-border)'
+      th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+      td: 'border-b border-default'
     }"
   />
 </template>
diff --git a/src/components/home/HomeStats.vue b/src/components/home/HomeStats.vue
@@ -75,13 +75,14 @@ watch([() => props.period, () => props.range], () => {
       variant="subtle"
       :ui="{
         container: 'gap-y-1.5',
-        leading: 'p-2.5 rounded-full bg-(--ui-primary)/10 ring ring-inset ring-(--ui-primary)/25',
-        title: 'font-normal text-(--ui-text-muted) text-xs uppercase'
+        wrapper: 'items-start',
+        leading: 'p-2.5 rounded-full bg-primary/10 ring ring-inset ring-primary/25',
+        title: 'font-normal text-muted text-xs uppercase'
       }"
-      class="lg:rounded-none first:rounded-l-[calc(var(--ui-radius)*2)] last:rounded-r-[calc(var(--ui-radius)*2)] hover:z-1"
+      class="lg:rounded-none first:rounded-l-lg last:rounded-r-lg hover:z-1"
     >
       <div class="flex items-center gap-2">
-        <span class="text-2xl font-semibold text-(--ui-text-highlighted)">
+        <span class="text-2xl font-semibold text-highlighted">
           {{ stat.value }}
         </span>
 
diff --git a/src/components/inbox/InboxList.vue b/src/components/inbox/InboxList.vue
@@ -44,7 +44,7 @@ defineShortcuts({
 </script>
 
 <template>
-  <div class="overflow-y-auto divide-y divide-(--ui-border)">
+  <div class="overflow-y-auto divide-y divide-default">
     <div
       v-for="(mail, index) in mails"
       :key="index"
@@ -53,8 +53,8 @@ defineShortcuts({
       <div
         class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
         :class="[
-          mail.unread ? 'text-(--ui-text-highlighted)' : 'text-(--ui-text-toned)',
-          selectedMail && selectedMail.id === mail.id ? 'border-(--ui-primary) bg-(--ui-primary)/10' : 'border-(--ui-bg) hover:border-(--ui-primary) hover:bg-(--ui-primary)/5'
+          mail.unread ? 'text-highlighted' : 'text-toned',
+          selectedMail && selectedMail.id === mail.id ? 'border-primary bg-primary/10' : 'border-(--ui-bg) hover:border-primary hover:bg-primary/5'
         ]"
         @click="selectedMail = mail"
       >
@@ -70,7 +70,7 @@ defineShortcuts({
         <p class="truncate" :class="[mail.unread && 'font-semibold']">
           {{ mail.subject }}
         </p>
-        <p class="text-(--ui-text-dimmed) line-clamp-1">
+        <p class="text-dimmed line-clamp-1">
           {{ mail.body }}
         </p>
       </div>
diff --git a/src/components/inbox/InboxMail.vue b/src/components/inbox/InboxMail.vue
@@ -82,7 +82,7 @@ function onSubmit() {
       </template>
     </UDashboardNavbar>
 
-    <div class="flex flex-col sm:flex-row justify-between gap-1 p-4 sm:px-6 border-b border-(--ui-border)">
+    <div class="flex flex-col sm:flex-row justify-between gap-1 p-4 sm:px-6 border-b border-default">
       <div class="flex items-start gap-4 sm:my-1.5">
         <UAvatar
           v-bind="mail.from.avatar"
@@ -91,16 +91,16 @@ function onSubmit() {
         />
 
         <div class="min-w-0">
-          <p class="font-semibold text-(--ui-text-highlighted)">
+          <p class="font-semibold text-highlighted">
             {{ mail.from.name }}
           </p>
-          <p class="text-(--ui-text-muted)">
+          <p class="text-muted">
             {{ mail.from.email }}
           </p>
         </div>
       </div>
 
-      <p class="max-sm:pl-16 text-(--ui-text-muted) text-sm sm:mt-2">
+      <p class="max-sm:pl-16 text-muted text-sm sm:mt-2">
         {{ format(new Date(mail.date), 'dd MMM HH:mm') }}
       </p>
     </div>
@@ -112,7 +112,7 @@ function onSubmit() {
     </div>
 
     <div class="pb-4 px-4 sm:px-6 shrink-0">
-      <UCard variant="subtle" class="mt-auto" :ui="{ header: 'flex items-center gap-1.5 text-(--ui-text-dimmed)' }">
+      <UCard variant="subtle" class="mt-auto" :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }">
         <template #header>
           <UIcon name="i-lucide-reply" class="size-5" />
 
diff --git a/src/components/settings/SettingsMembersList.vue b/src/components/settings/SettingsMembersList.vue
@@ -16,7 +16,7 @@ const items = [{
 </script>
 
 <template>
-  <ul role="list" class="divide-y divide-(--ui-border)">
+  <ul role="list" class="divide-y divide-default">
     <li
       v-for="(member, index) in members"
       :key="index"
@@ -29,10 +29,10 @@ const items = [{
         />
 
         <div class="text-sm min-w-0">
-          <p class="text-(--ui-text-highlighted) font-medium truncate">
+          <p class="text-highlighted font-medium truncate">
             {{ member.name }}
           </p>
-          <p class="text-(--ui-text-muted) truncate">
+          <p class="text-muted truncate">
             {{ member.username }}
           </p>
         </div>
diff --git a/src/pages/customers.vue b/src/pages/customers.vue
@@ -102,7 +102,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.name}`)
         ])
       ])
@@ -293,15 +293,15 @@ const pagination = ref({
         :loading="isFetching"
         :ui="{
           base: 'table-fixed border-separate border-spacing-0',
-          thead: '[&>tr]:bg-(--ui-bg-elevated)/50 [&>tr]:after:content-none',
+          thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
           tbody: '[&>tr]:last:[&>td]:border-b-0',
-          th: 'py-1 first:rounded-l-[calc(var(--ui-radius)*2)] last:rounded-r-[calc(var(--ui-radius)*2)] border-y border-(--ui-border) first:border-l last:border-r',
-          td: 'border-b border-(--ui-border)'
+          th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+          td: 'border-b border-default'
         }"
       />
 
-      <div class="flex items-center justify-between gap-3 border-t border-(--ui-border) pt-4 mt-auto">
-        <div class="text-sm text-(--ui-text-muted)">
+      <div class="flex items-center justify-between gap-3 border-t border-default pt-4 mt-auto">
+        <div class="text-sm text-muted">
           {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
           {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
         </div>
diff --git a/src/pages/inbox.vue b/src/pages/inbox.vue
@@ -79,7 +79,7 @@ const isMobile = breakpoints.smaller('lg')
 
   <InboxMail v-if="selectedMail" :mail="selectedMail" @close="selectedMail = null" />
   <div v-else class="hidden lg:flex flex-1 items-center justify-center">
-    <UIcon name="i-lucide-inbox" class="size-32 text-(--ui-text-dimmed)" />
+    <UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
   </div>
 
   <USlideover v-if="isMobile" v-model:open="isMailPanelOpen">
diff --git a/src/pages/settings/members.vue b/src/pages/settings/members.vue
@@ -30,7 +30,7 @@ const filteredMembers = computed(() => {
       />
     </UPageCard>
 
-    <UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', header: 'p-4 mb-0 border-b border-(--ui-border)' }">
+    <UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', header: 'p-4 mb-0 border-b border-default' }">
       <template #header>
         <UInput
           v-model="q"
diff --git a/src/pages/settings/notifications.vue b/src/pages/settings/notifications.vue
@@ -54,7 +54,7 @@ async function onChange() {
       class="mb-4"
     />
 
-    <UPageCard variant="subtle" :ui="{ container: 'divide-y divide-(--ui-border)' }">
+    <UPageCard variant="subtle" :ui="{ container: 'divide-y divide-default' }">
       <UFormField
         v-for="field in section.fields"
         :key="field.name"
diff --git a/src/pages/settings/security.vue b/src/pages/settings/security.vue
@@ -61,7 +61,7 @@ const validate = (state: Partial<PasswordSchema>): FormError[] => {
   <UPageCard
     title="Account"
     description="No longer want to use our service? You can delete your account here. This action is not reversible. All information related to this account will be deleted permanently."
-    class="bg-gradient-to-tl from-(--ui-error)/10 from-5% to-(--ui-bg)"
+    class="bg-gradient-to-tl from-error/10 from-5% to-default"
   >
     <template #footer>
       <UButton label="Delete account" color="error" />
