@meistrari/tela-build 1.25.3 → 1.27.0

package/components/tela/badge/badge.vue

@@ -20,15 +20,15 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
     <component
         :is="tag"
         :class="cn(
-            'inline-block px-[5px] rounded-[5px] select-none',
-            variant === 'outline' && 'border-[0.5px] ring-border-strong',
+            'inline-block px-[5px] py-[3px] rounded-[5px] select-none',
+            variant === 'outline' && 'border-[0.5px] border-border',
             variant === 'filled' && 'bg-lowered',
             props.class,
         )"
     >
         <span
             :class="cn(
-                'flex items-center gap-[4px] text-[9px] whitespace-nowrap font-580 leading-[16px] tracking-[0.04rem] uppercase',
+                'flex items-center gap-[4px] text-[9px] whitespace-nowrap font-580 leading-[10px] tracking-0.2px uppercase',
                 variant === 'outline' && 'text-tertiary',
                 variant === 'filled' && 'text-secondary tracking-normal',
                 textClass,

package/components/tela/button/button.vue

@@ -100,7 +100,7 @@ const iconSize = computed(() => {
     <component
         :is="tag"
         :to="to"
-        :class="resolvedStyle" transition ease-in-out duration-40 flex items-center justify-center gap-6px
+        :class="resolvedStyle" ease-out duration-40 flex items-center justify-center gap-6px
         :disabled="disabled"
         :cursor="disabled ? 'not-allowed' : 'pointer'"
         :target="target"

package/components/tela/icon/custom.vue

@@ -354,5 +354,11 @@ const colorValue = computed(() => {
         <template v-if="name === 'timeline-start'">
             <circle cx="4.5" cy="4.5" r="4" fill="white" stroke="currentColor" />
         </template>
+
+        <template v-if="name === 'level-right'">
+            <g transform="translate(3.3, 0.2)">
+                <path d="M0.805054 0.805054L3.34137 3.34137C4.54019 4.54019 4.60421 6.46316 3.4878 7.73906L0.805054 10.8051" stroke="currentColor" stroke-width="1.61015" stroke-linecap="round" />
+            </g>
+        </template>
     </svg>
 </template>

package/components/tela/icon-button/icon-button.vue

@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 const style = computed(() => {
-    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em transition ease'
+    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em ease-out duration-40'
     const size = ({
         '3xs': 'text-6px p-1',
         '2xs': 'text-8px p-4px', // 16px
@@ -40,7 +40,7 @@ const style = computed(() => {
 
     const color = ({
         primary: 'bg-#01292F !text-white hover:bg-#153A40 b-#011D21 hover:b-#123137',
-        secondary: 'bg-transparent text-icon hover:bg-gray-100 hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
+        secondary: 'bg-transparent text-icon-tertiary hover:bg-muted hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
     } as Record<typeof props.color, string>)[props.color]
 
     const disabled = props.disabled && 'cursor-not-allowed !bg-#ECF0F2 !text-#617275 !b-0'

package/components/tela/menubar/menubar-item.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <MenubarItem
         v-bind="forwarded"
         :class="cn(
-            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 text-body-14-medium font-460 outline-none focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
             inset && 'pl-8',
             props.class,
         )"

package/components/tela/menubar/menubar-trigger.vue

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         v-bind="forwardedProps"
         :class="
             cn(
-                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-gray-200 data-[state=open]:bg-gray-200',
+                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-lowered data-[state=open]:bg-lowered',
                 props.class,
             )
         "

package/components/tela/sidebar/sidebar-content.vue

@@ -0,0 +1,10 @@
+<template>
+    <div
+        flex flex-col h-full overflow-y-auto no-scrollbar
+        class="[mask-image:linear-gradient(to_bottom,transparent,black_20px,black_calc(100%_-_20px),transparent)]"
+    >
+        <nav flex flex-col items-center gap-14px h-full px-10px pt-12px mb-48px>
+            <slot />
+        </nav>
+    </div>
+</template>

package/components/tela/sidebar/sidebar-footer.vue

@@ -0,0 +1,5 @@
+<template>
+    <footer flex flex-col items-center justify-center gap-22px pb-24px>
+        <slot />
+    </footer>
+</template>

package/components/tela/sidebar/sidebar-header.vue

@@ -0,0 +1,5 @@
+<template>
+    <header sticky top-0 z-10 flex flex-col items-center justify-center gap-24px pt-24px pb-12px>
+        <slot />
+    </header>
+</template>

package/components/tela/sidebar/sidebar-item.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+    icon: string
+    label: string
+    to?: string
+    onClick?: () => void
+    isActive: boolean
+}>()
+
+const iconName = computed(() => props.isActive ? `${props.icon}-fill` : props.icon)
+</script>
+
+<template>
+    <component
+        :is="to ? NuxtLink : 'button'"
+        :to="to"
+        :type="!to ? 'button' : undefined"
+        class="group"
+        flex="~ col" items-center justify-center gap-2px outline-none
+        :data-active="isActive"
+        v-bind="!to && onClick ? { onClick } : {}"
+    >
+        <div relative size-40px flex items-center justify-center rounded-10px>
+            <TelaIcon
+                :name="iconName"
+                size="20px"
+                relative z-1
+                :color="isActive ? 'icon' : 'icon-tertiary duration-150 ease-out group-hover:icon group-focus-within:icon'"
+            />
+            <div
+                :class="cn(
+                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent',
+                    isActive ? 'bg-neutral-200 group-focus-within:border-strong' : 'bg scale-10 opacity-0 duration-150 ease-out origin-center group-hover:border-strong group-hover:scale-100 group-hover:opacity-100 group-focus-within:border-strong group-focus-within:scale-100 group-focus-within:opacity-100',
+                )"
+            />
+        </div>
+        <p
+            :class="cn(
+                'text-[11px] leading-[12px] -tracking-0.2px',
+                isActive ? 'text-primary font-550' : 'font-460 text-tertiary duration-150 ease-out group-hover:text-primary group-focus-within:text-primary',
+            )"
+        >
+            {{ label }}
+        </p>
+    </component>
+</template>

package/components/tela/sidebar/sidebar-logo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+defineProps<{
+    src?: string
+    alt: string
+    to?: string
+}>()
+</script>
+
+<template>
+    <component
+        :is="to ? NuxtLink : 'div'"
+        :to="to"
+        class="rounded-12px overflow-hidden outline-none focus-within:ring-0.5px focus-within:ring-border-strong"
+    >
+        <img v-if="src" :src="src" :alt="alt" w-40px h-40px object-cover>
+        <TelaInitials v-else-if="alt" size="md" :word="alt" />
+        <div v-else w-40px h-40px bg-black />
+    </component>
+</template>

package/components/tela/sidebar/sidebar-user.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+    image?: string
+    name: string
+    email: string
+    actions: {
+        label: string
+        icon: string
+        color: 'positive' | 'caution' | 'negative'
+        onClick: () => void
+    }[]
+}>()
+</script>
+
+<template>
+    <TelaDropdownMenuRoot>
+        <TelaDropdownMenuTrigger as-child>
+            <button
+                :class="cn('group', image ? 'ring-transparent focus-within:ring-border-strong' : 'ring-border-strong focus-within:ring-border-accent')"
+                rounded-full overflow-hidden ring-0.5px
+            >
+                <img v-if="image" :src="image" :alt="name" w-32px h-32px object-cover>
+                <div v-else w-32px h-32px bg />
+            </button>
+        </TelaDropdownMenuTrigger>
+        <TelaDropdownMenuContent align="start" side="top" class="min-w-200px!">
+            <div px-12px py-8px>
+                <h5 heading-h5-semibold text-primary mb-2px>
+                    {{ name }}
+                </h5>
+                <p body-12-regular text-secondary>
+                    {{ email }}
+                </p>
+            </div>
+            <TelaDropdownMenuSeparator />
+            <TelaDropdownMenuItem
+                v-for="action in actions"
+                :key="action.label"
+                :icon="action.icon"
+                :color="action.color"
+                @click="action.onClick"
+            >
+                {{ action.label }}
+            </TelaDropdownMenuItem>
+        </TelaDropdownMenuContent>
+    </TelaDropdownMenuRoot>
+</template>

package/components/tela/sidebar/sidebar.mdx

@@ -0,0 +1,175 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SidebarStories from './sidebar.stories.ts';
+
+<Meta of={SidebarStories} />
+
+# TelaSidebar
+
+A composable sidebar navigation system built from focused sub-components. Fixed 80px wide and full-height, designed for icon-based navigation with labels.
+
+## Examples
+
+### Full Sidebar
+
+```vue
+<TelaSidebar>
+    <TelaSidebarHeader>
+        <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+    </TelaSidebarHeader>
+
+    <TelaSidebarContent>
+        <TelaSidebarItem
+            v-for="item in items"
+            :key="item.label"
+            :icon="item.icon"
+            :label="item.label"
+            :to="item.path"
+            :is-active="isItemActive(item)"
+            :on-click="item.onClick"
+        />
+    </TelaSidebarContent>
+
+    <TelaSidebarFooter>
+        <TelaSidebarItem
+            icon="i-ph-bell"
+            label="Activity"
+            :is-active="route.path === '/activity'"
+        />
+        <TelaSidebarUser
+            :image="user.image"
+            :name="user.name"
+            :email="user.email"
+            :actions="[
+                { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+            ]"
+        />
+    </TelaSidebarFooter>
+</TelaSidebar>
+```
+
+<Canvas of={SidebarStories.Default} />
+
+### Activity Active
+
+<Canvas of={SidebarStories.ActivityActive} />
+
+### No Active Item
+
+<Canvas of={SidebarStories.NoActiveItem} />
+
+### Individual Item States
+
+<Canvas of={SidebarStories.SingleItem} />
+
+## Components
+
+### `<TelaSidebar>`
+
+Root wrapper. Renders as an `<aside>` with fixed 80px width, full height, and a right border. Place `TelaSidebarHeader`, `TelaSidebarContent`, and `TelaSidebarFooter` as direct children.
+
+### `<TelaSidebarHeader>`
+
+Top section of the sidebar. Stacks children vertically with 24px gap and vertical padding. Use for logos or workspace switchers.
+
+### `<TelaSidebarLogo>`
+
+Displays a logo or fallback inside the header. When `src` is provided, renders an image. When only `alt` is provided, falls back to `TelaInitials`. If neither is set, renders a placeholder div.
+
+```typescript
+interface TelaSidebarLogoProps {
+    src?: string  // Image source URL or path — when provided, renders an <img>
+    alt: string   // Accessible alt text — used as the word for TelaInitials fallback
+    to?: string   // Optional link — wraps the content in a NuxtLink when provided
+}
+```
+
+### `<TelaSidebarContent>`
+
+Middle section that grows to fill available space. Scrollable with hidden scrollbar and a fade mask at the top and bottom edges for a smooth overflow effect. Place nav items directly as children — they stack vertically with 14px gap.
+
+### `<TelaSidebarItem>`
+
+An individual navigation item with an icon and label. Renders as a `NuxtLink` when `to` is provided, otherwise as a `<button>`.
+
+```typescript
+interface TelaSidebarItemProps {
+    icon: string          // Iconify class (e.g. "i-ph-house")
+    label: string         // Text label shown below the icon
+    isActive: boolean     // Highlights the item as the current route
+    to?: string           // Route path — renders as a link
+    onClick?: () => void  // Click handler when not using `to`
+}
+```
+
+<ArgTypes of={SidebarStories} />
+
+### `<TelaSidebarFooter>`
+
+Bottom section of the sidebar. Always contains `TelaSidebarUser` for account controls. Optionally add secondary `TelaSidebarItem` actions (e.g. activity, notifications) above it.
+
+Default — user only:
+
+```vue
+<TelaSidebarFooter>
+    <TelaSidebarUser
+        :avatar-url="user.avatarUrl"
+        :username="user.name"
+        :email="user.email"
+        :options="[
+            { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+        ]"
+    />
+</TelaSidebarFooter>
+```
+
+With secondary actions:
+
+```vue
+<TelaSidebarFooter>
+    <TelaSidebarItem
+        icon="i-ph-bell"
+        label="Activity"
+        :is-active="route.path === '/activity'"
+        to="/activity"
+    />
+    <TelaSidebarUser
+        :avatar-url="user.avatarUrl"
+        :username="user.name"
+        :email="user.email"
+        :options="[
+            { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+        ]"
+    />
+</TelaSidebarFooter>
+```
+
+### `<TelaSidebarUser>`
+
+User account button in the footer. Clicking opens a dropdown menu with the user's name, email, and configurable action items.
+
+```typescript
+interface TelaSidebarUserProps {
+    image?: string  // Optional — falls back to a placeholder if not provided
+    name: string
+    email: string
+    actions: {
+        label: string
+        icon: string
+        color: 'positive' | 'caution' | 'negative'
+        onClick: () => void
+    }[]
+}
+```
+
+Example:
+
+```vue
+<TelaSidebarUser
+    image="https://example.com/avatar.jpg"
+    name="Jane Doe"
+    email="jane@example.com"
+    :actions="[
+        { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+    ]"
+/>
+```

package/components/tela/sidebar/sidebar.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaSidebar from './sidebar.vue'
+import TelaSidebarHeader from './sidebar-header.vue'
+import TelaSidebarContent from './sidebar-content.vue'
+import TelaSidebarLogo from './sidebar-logo.vue'
+import TelaSidebarItem from './sidebar-item.vue'
+import TelaSidebarFooter from './sidebar-footer.vue'
+import TelaSidebarUser from './sidebar-user.vue'
+
+const meta: Meta<typeof TelaSidebar> = {
+    title: 'Patterns/Sidebar',
+    component: TelaSidebar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'A composable sidebar navigation system built from focused sub-components. Fixed 80px wide and full-height, designed for icon-based navigation with labels. Compose `TelaSidebarHeader`, `TelaSidebarContent`, and `TelaSidebarFooter` inside the root `TelaSidebar` to build the full layout.',
+            },
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TelaSidebar>
+
+const navItems = [
+    { icon: 'i-ph-house', label: 'Home', path: '/' },
+    { icon: 'i-ph-graph', label: 'Workflows', path: '/workflows' },
+    { icon: 'i-ph-database', label: 'Data', path: '/data' },
+    { icon: 'i-ph-gear', label: 'Settings', path: '/settings' },
+]
+
+const userActions = [
+    { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative' as const, onClick: () => {} },
+]
+
+const components = {
+    TelaSidebar,
+    TelaSidebarHeader,
+    TelaSidebarLogo,
+    TelaSidebarContent,
+    TelaSidebarItem,
+    TelaSidebarFooter,
+    TelaSidebarUser,
+}
+
+export const Default: Story = {
+    render: () => ({
+        components,
+        setup() {
+            const items = navItems
+            const activePath = '/workflows'
+            const isItemActive = (item: { path: string }) => activePath === item.path
+            return { items, isItemActive, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="isItemActive(item)"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const NoActiveItem: Story = {
+    render: () => ({
+        components,
+        setup() {
+            return { items: navItems, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="false"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const ActivityActive: Story = {
+    render: () => ({
+        components,
+        setup() {
+            return { items: navItems, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="false"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="true"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const SingleItem: Story = {
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                story: 'Individual `TelaSidebarItem` in active and inactive states.',
+            },
+        },
+    },
+    render: () => ({
+        components: { TelaSidebarItem },
+        template: `
+            <div style="display: flex; gap: 24px; align-items: center;">
+                <TelaSidebarItem icon="i-ph-house" label="Home" :is-active="false" />
+                <TelaSidebarItem icon="i-ph-graph" label="Workflows" :is-active="true" />
+                <TelaSidebarItem icon="i-ph-bell" label="Activity" :is-active="false" />
+            </div>
+        `,
+    }),
+}

package/components/tela/sidebar/sidebar.vue

@@ -0,0 +1,5 @@
+<template>
+    <aside flex flex-col items-center w-80px h-screen bg border-r-0.5px border>
+        <slot />
+    </aside>
+</template>

package/components/tela/star-button.vue

@@ -32,7 +32,7 @@ watch(() => props.modelValue, (newValue, oldValue) => {
             :icon="modelValue ? 'i-ph-star-fill' : 'i-ph-star-light'"
             color="secondary"
             :size="size"
-            :class="cn(props.class)"
+            :class="cn(modelValue && 'hover:bg-amber-100!', props.class)"
             :icon-class="cn('relative z-1', modelValue ? 'text-amber-400!' : 'text-neutral-400!')"
             @click.stop.prevent="emit('update:modelValue', !modelValue)"
         />

package/components/tela/transparent-input.vue

@@ -23,6 +23,16 @@ const initialValue = ref(props.modelValue)
 
 const isEditing = ref(!props.displayIcon)
 
+const autowidthOptions = computed(() => ({
+    comfortZone: props.displayIcon ? '2px' : '0px',
+}))
+
+function recalcAutowidth() {
+    nextTick(() => {
+        inputRef.value?.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+}
+
 function onFocus() {
     if (props.modelValue === props.defaultValue) {
         emit('update:modelValue', '')
@@ -83,6 +93,9 @@ function handleClickOutside(event: Event) {
 
 onMounted(() => {
     document.addEventListener('mousedown', handleClickOutside)
+    void document.fonts?.ready?.then(() => {
+        recalcAutowidth()
+    })
 })
 
 onUnmounted(() => {
@@ -93,26 +106,24 @@ onUnmounted(() => {
 <template>
     <div
         ref="containerRef"
-        flex relative
+        flex relative min-w-0
         :class="cn('group', containerClass, { 'font-580 text-18px': !disableDefaultStyling })"
         outline-none
         text="textcolor"
         items-center
-        cursor-text
         @click="onStartEditing"
     >
         <input
             ref="inputRef"
-            :key="modelValue"
-            v-autowidth="{
-                maxWidth: '420px',
-            }"
+            v-autowidth="autowidthOptions"
+            w-fit
+            shrink-0
+            max-w-full
             p-0
             transition
             :value="modelValue"
             :placeholder="placeholder"
             :disabled="disabled || (displayIcon && !isEditing)"
-            truncate
             bg-transparent
             :class="[
                 { 'font-580 text-18px': !disableDefaultStyling },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.25.3",
+  "version": "1.27.0",
   "type": "module",
   "files": [
     "app.config.ts",

package/types/custom-icon.ts

@@ -1 +1 @@
-export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start'
+export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start' | 'level-right'

package/unocss.config.ts

@@ -1,8 +1,19 @@
 import transformerDirectives from '@unocss/transformer-directives'
 import { defineConfig, toEscapedSelector } from 'unocss'
+import type { Extractor } from 'unocss'
 import { DT } from './utils/design-tokens'
 
+/* Enables fill variants for Phosphor icons used as a dynamic suffix (e.g. `${icon}-fill`)
+* in components, which UnoCSS can't detect through static scanning */
+const phosphorFillExtractor: Extractor = {
+    name: 'phosphor-fill-icons',
+    extract: ({ code }) => new Set(
+        [...code.matchAll(/['"`](i-ph-[\w-]+)['"`]/g)].map(([, icon]) => `${icon}-fill`),
+    ),
+}
+
 export default defineConfig({
+    extractors: [phosphorFillExtractor],
     theme: {
         ...DT,
         animation: {

package/utils/design-tokens.ts

@@ -304,11 +304,11 @@ export const DT = {
             warning: BASE_COLORS.amber[200],
         },
         text: {
-            primary: BASE_COLORS.gray[800],
-            secondary: BASE_COLORS.gray[500],
-            tertiary: BASE_COLORS.gray[400],
-            subtle: BASE_COLORS.gray[300],
-            contrast: BASE_COLORS.gray[900],
+            primary: BASE_COLORS.neutral[800],
+            secondary: BASE_COLORS.neutral[500],
+            tertiary: BASE_COLORS.neutral[400],
+            subtle: BASE_COLORS.neutral[300],
+            contrast: BASE_COLORS.neutral[900],
             success: BASE_COLORS.green[600],
             error: BASE_COLORS.red[600],
             warning: BASE_COLORS.amber[600],