@brumaombra/ui-vintage 0.7.13 → 0.8.0

package/src/components/message-toast/MessageToast.vue

@@ -1,75 +1,247 @@
 <script setup lang="ts">
 import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';
-import { Button } from '../ui/button';
-import { closeMessageToast, messageToastState } from './message-toast-state';
+import { cn } from '../../lib/utils';
+import { closeMessageToast, messageToastState, pauseMessageToasts, resumeMessageToasts } from './message-toast-state';
+import type { MessageToastItem, MessageToastType } from './message-toast-state';
 
-// Current toast data
-const currentToast = computed(() => messageToastState.current);
+const VISIBLE_TOASTS = 3;
+const STACK_OFFSET_PX = 12;
+const STACK_GAP_PX = 10;
+const SWIPE_THRESHOLD_PX = 80;
 
-// Localized dismiss label resolved from bundled library messages
+const expanded = ref(false);
+const heights = reactive(new Map<number, number>());
+const swipe = reactive({ id: null as number | null, startX: 0, deltaX: 0 });
+const leaveDirection = reactive(new Map<number, number>());
+
+// Localized labels resolved from bundled library messages
 const closeAriaLabel = computed(() => getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close'));
+const regionAriaLabel = computed(() => getUiVintageRuntimeMessage('uiVintage.toast.region', 'Notifications'));
+
+// Resolve the icon for each toast type
+const getToastIcon = (toast: MessageToastItem) => {
+    if (toast.icon) return toast.icon;
+    if (toast.type === 'success') return CheckmarkCircle02Icon;
+    return toast.type === 'info' ? InformationCircleIcon : AlertCircleIcon;
+};
+
+// Resolve the tinted icon tile classes for each toast type
+const toneClasses: Record<MessageToastType, string> = {
+    success: 'border-green-200 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-400',
+    info: 'border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400',
+    warning: 'border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-400',
+    error: 'border-red-200 bg-red-50 text-red-600 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400'
+};
 
-// Determine toast type for styling and icon selection
-const toastType = computed(() => currentToast.value?.type ?? 'success');
+// Progress bar color for each toast type
+const progressClasses: Record<MessageToastType, string> = {
+    success: 'bg-green-500',
+    info: 'bg-blue-500',
+    warning: 'bg-amber-500',
+    error: 'bg-red-500'
+};
 
-// Resolved icon based on toast type
-const toastIcon = computed(() => {
-    if (toastType.value === 'success') return CheckmarkCircle02Icon;
-    return toastType.value === "info" ? InformationCircleIcon : AlertCircleIcon;
+const toasts = computed(() => messageToastState.toasts);
+const frontHeight = computed(() => (toasts.value[0] && heights.get(toasts.value[0].id)) || 0);
+
+// Height of the stack container so the hover area always matches what is visible
+const containerHeight = computed(() => {
+    const visible = toasts.value.slice(0, VISIBLE_TOASTS);
+    if (!visible.length) return 0;
+    if (expanded.value) {
+        return visible.reduce((total, toast) => total + (heights.get(toast.id) || 0), 0) + STACK_GAP_PX * (visible.length - 1);
+    }
+    return frontHeight.value + STACK_OFFSET_PX * (visible.length - 1);
 });
 
-// Resolved icon color classes based on toast type
-const toastIconClasses = computed(() => {
-    if (toastType.value === 'error') return 'text-red-600 dark:text-red-400';
-    if (toastType.value === 'warning') return 'text-amber-600 dark:text-amber-400';
-    if (toastType.value === 'info') return 'text-blue-600 dark:text-blue-400';
-    return 'text-green-600 dark:text-green-400';
+// Compute the stacked position of a toast from its index (0 = newest)
+const getToastStyle = (toast: MessageToastItem, index: number) => {
+    const isSwiping = swipe.id === toast.id;
+    let offset = 0;
+    let scale = 1;
+
+    // Expanded: toasts sit on top of each other with a gap
+    if (expanded.value) {
+        for (const previous of toasts.value.slice(0, index)) {
+            offset += (heights.get(previous.id) || 0) + STACK_GAP_PX;
+        }
+    } else {
+        // Collapsed: toasts peek out behind the front one
+        offset = index * STACK_OFFSET_PX;
+        scale = 1 - index * 0.05;
+    }
+
+    return {
+        '--uv-toast-leave-x': `${(leaveDirection.get(toast.id) ?? 1) * 110}%`,
+        zIndex: String(100 - index),
+        translate: `${isSwiping ? swipe.deltaX : 0}px ${-offset}px`,
+        scale: String(scale),
+        opacity: index >= VISIBLE_TOASTS ? '0' : isSwiping ? String(1 - Math.min(Math.abs(swipe.deltaX) / 240, 0.6)) : '1',
+        height: !expanded.value && index > 0 && frontHeight.value ? `${frontHeight.value}px` : undefined,
+        pointerEvents: index >= VISIBLE_TOASTS ? 'none' as const : undefined,
+        transition: isSwiping ? 'none' : undefined
+    };
+};
+
+// Measure toast content heights so the stack can lay itself out
+const resizeObserver = typeof ResizeObserver !== 'undefined'
+    ? new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            const id = Number((entry.target as HTMLElement).dataset.toastId);
+            heights.set(id, (entry.target as HTMLElement).offsetHeight);
+        }
+    })
+    : null;
+
+// Register toast content elements with the observer
+const observeToast = (element: unknown) => {
+    if (element instanceof HTMLElement && resizeObserver) {
+        heights.set(Number(element.dataset.toastId), element.offsetHeight);
+        resizeObserver.observe(element);
+    }
+};
+
+// Expand the stack and pause timers while the user interacts with it
+const handleEnter = () => {
+    expanded.value = true;
+    pauseMessageToasts();
+};
+
+// Collapse the stack and resume timers
+const handleLeave = () => {
+    expanded.value = false;
+    resumeMessageToasts();
+};
+
+// Begin a horizontal swipe gesture
+const handlePointerDown = (event: PointerEvent, toast: MessageToastItem) => {
+    if (!toast.dismissible || event.button !== 0 || (event.target as HTMLElement).closest('button')) return;
+    swipe.id = toast.id;
+    swipe.startX = event.clientX;
+    swipe.deltaX = 0;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+};
+
+// Follow the pointer while swiping
+const handlePointerMove = (event: PointerEvent) => {
+    if (swipe.id === null) return;
+    swipe.deltaX = event.clientX - swipe.startX;
+};
+
+// Dismiss the toast when swiped far enough, otherwise spring back
+const handlePointerUp = () => {
+    if (swipe.id === null) return;
+    const id = swipe.id;
+    const deltaX = swipe.deltaX;
+    swipe.id = null;
+    swipe.deltaX = 0;
+    if (Math.abs(deltaX) > SWIPE_THRESHOLD_PX) {
+        leaveDirection.set(id, Math.sign(deltaX));
+        closeMessageToast(id);
+    }
+};
+
+// Run a toast action and dismiss it
+const handleAction = async (toast: MessageToastItem) => {
+    closeMessageToast(toast.id);
+    await toast.action?.onClick();
+};
+
+// Forget measurements of removed toasts
+const handleAfterLeave = (element: Element) => {
+    const id = Number((element as HTMLElement).dataset.toastId);
+    heights.delete(id);
+    leaveDirection.delete(id);
+};
+
+// Reset the interaction state once the stack is empty (mouseleave never fires on a collapsed region)
+watch(() => toasts.value.length, (length) => {
+    if (length === 0 && expanded.value) {
+        handleLeave();
+    }
 });
 
-// Resolved aria-live politeness based on toast type
-const toastAriaLive = computed(() => {
-    if (toastType.value === 'error' || toastType.value === 'warning') return 'assertive';
-    return 'polite';
+// Stop observing on unmount
+onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
 });
 </script>
 
 <template>
-    <Transition name="toast">
-        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-60 rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-87.5 sm:min-w-62.5" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
-            <div class="flex items-center gap-4">
-                <!-- Leading type icon -->
-                <HugeiconsIcon :icon="toastIcon" class="size-5" :class="toastIconClasses" />
-
-                <!-- Message text -->
-                <p class="m-0 flex-1 text-sm font-normal leading-5">
-                    {{ currentToast?.message }}
-                </p>
-
-                <!-- Dismiss button -->
-                <Button variant="ghost" size="icon-sm" class="-me-1 h-auto min-h-0 w-auto p-0 opacity-70 hover:opacity-100" :aria-label="closeAriaLabel" @click="closeMessageToast">
-                    <HugeiconsIcon :icon="Cancel01Icon" class="size-4" />
-                </Button>
-            </div>
-        </div>
-    </Transition>
+    <section :aria-label="regionAriaLabel" class="pointer-events-none fixed inset-x-3 bottom-3 z-60 sm:inset-x-auto sm:right-6 sm:bottom-6 sm:w-[380px]">
+        <ol class="pointer-events-auto relative transition-[height] duration-300 ease-out-expo" :style="{ height: `${containerHeight}px` }" @mouseenter="handleEnter" @mouseleave="handleLeave" @focusin="handleEnter" @focusout="handleLeave">
+            <TransitionGroup name="uv-toast" @after-leave="handleAfterLeave">
+                <li v-for="(toast, index) in toasts" :key="toast.id" :data-toast-id="toast.id" :data-front="index === 0 ? '' : undefined" role="status" :aria-live="toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'" aria-atomic="true" class="uv-toast absolute inset-x-0 bottom-0 origin-bottom touch-pan-y select-none overflow-hidden rounded border border-border bg-card text-card-foreground shadow-elevated-lg" :style="getToastStyle(toast, index)" @pointerdown="handlePointerDown($event, toast)" @pointermove="handlePointerMove" @pointerup="handlePointerUp" @pointercancel="handlePointerUp">
+                    <!-- Measured content -->
+                    <div :ref="observeToast" :data-toast-id="toast.id" :class="cn('flex items-start gap-3 p-4 transition-opacity duration-200', !expanded && index > 0 && 'opacity-0')">
+                        <!-- Leading type icon -->
+                        <div :class="cn('flex size-8 shrink-0 items-center justify-center rounded border', toneClasses[toast.type])">
+                            <HugeiconsIcon :icon="getToastIcon(toast)" :stroke-width="1.8" class="size-4.5 animate-uv-pop [animation-delay:120ms]" />
+                        </div>
+
+                        <!-- Title and message -->
+                        <div class="min-w-0 flex-1 self-center">
+                            <p v-if="toast.title" class="m-0 text-sm font-semibold leading-5">
+                                {{ toast.title }}
+                            </p>
+                            <p :class="cn('m-0 text-sm leading-5 wrap-break-word', toast.title && 'text-xs text-muted-foreground sm:text-[13px]')">
+                                {{ toast.message }}
+                            </p>
+                        </div>
+
+                        <!-- Action button -->
+                        <button v-if="toast.action" type="button" class="shrink-0 self-center rounded border border-border bg-secondary px-2.5 py-1.5 text-xs font-semibold shadow-elevated-sm outline-none transition-[background-color,border-color,transform] duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-95" @click="handleAction(toast)">
+                            {{ toast.action.label }}
+                        </button>
+
+                        <!-- Dismiss button -->
+                        <button v-if="toast.dismissible" type="button" :aria-label="closeAriaLabel" class="group/close -me-1 -mt-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45" @click="closeMessageToast(toast.id)">
+                            <HugeiconsIcon :icon="Cancel01Icon" class="size-4 transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+                        </button>
+                    </div>
+
+                    <!-- Countdown bar -->
+                    <div v-if="toast.duration > 0" class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent">
+                        <div :class="cn('h-full origin-left opacity-60', progressClasses[toast.type])" :style="{ animation: `uv-toast-countdown ${toast.duration}ms linear forwards`, animationPlayState: messageToastState.paused ? 'paused' : 'running' }" />
+                    </div>
+                </li>
+            </TransitionGroup>
+        </ol>
+    </section>
 </template>
 
-<style scoped>
-.toast-enter-active,
-.toast-leave-active {
-    transition: all 0.3s ease-in-out;
+<style>
+.uv-toast {
+    transition:
+        translate 480ms var(--ease-spring),
+        scale 480ms var(--ease-spring),
+        opacity 250ms var(--ease-out-expo),
+        height 300ms var(--ease-out-expo),
+        transform 480ms var(--ease-spring);
+    will-change: translate, scale;
+}
+
+.uv-toast-enter-from {
+    opacity: 0 !important;
+    transform: translateY(110%) scale(0.92);
+}
+
+.uv-toast-leave-active {
+    transition:
+        transform 260ms var(--ease-snappy),
+        opacity 200ms var(--ease-snappy) !important;
 }
 
-.toast-enter-from {
-    transform: translateY(100%);
-    opacity: 0;
+.uv-toast-leave-to {
+    opacity: 0 !important;
+    transform: translateX(var(--uv-toast-leave-x, 110%));
 }
 
-.toast-leave-to {
-    transform: translateY(8px);
-    opacity: 0;
+@keyframes uv-toast-countdown {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
 }
 </style>

package/src/components/message-toast/index.ts

@@ -1,2 +1,2 @@
-export { closeMessageToast, messageToastState, showMessageToast } from './message-toast-state';
-export type { MessageToastType, ShowMessageToastOptions } from './message-toast-state';
+export { closeMessageToast, messageToastState, pauseMessageToasts, resumeMessageToasts, showMessageToast } from './message-toast-state';
+export type { MessageToastAction, MessageToastItem, MessageToastType, ShowMessageToastOptions } from './message-toast-state';

package/src/components/message-toast/message-toast-state.ts

@@ -1,11 +1,32 @@
-import { h, reactive, render } from 'vue';
+import { h, markRaw, reactive, render } from 'vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 export type MessageToastType = 'success' | 'info' | 'warning' | 'error';
 
+export interface MessageToastAction {
+    label: string;
+    onClick: () => void | Promise<void>;
+}
+
 export interface ShowMessageToastOptions {
     message: string;
     type?: MessageToastType;
     duration?: number;
+    title?: string;
+    icon?: HugeiconsIconDefinition | null;
+    action?: MessageToastAction | null;
+    dismissible?: boolean;
+}
+
+export interface MessageToastItem {
+    id: number;
+    message: string;
+    type: MessageToastType;
+    title: string;
+    icon: HugeiconsIconDefinition | null;
+    action: MessageToastAction | null;
+    dismissible: boolean;
+    duration: number;
 }
 
 interface MessageToastContent {
@@ -16,25 +37,40 @@ interface MessageToastContent {
 interface MessageToastState {
     current: MessageToastContent | null;
     isOpen: boolean;
+    toasts: MessageToastItem[];
+    paused: boolean;
+}
+
+interface ToastTimer {
+    handle: ReturnType<typeof setTimeout> | null;
+    remaining: number;
+    startedAt: number;
 }
 
-const TOAST_CLOSE_DURATION_MS = 300;
 const DEFAULT_TOAST_DURATION_MS = 5000;
+const MAX_TOASTS = 5;
 const MESSAGE_TOAST_ROOT_ID = 'ui-vintage-message-toast-root';
 
-let dismissTimer: ReturnType<typeof setTimeout> | null = null;
-let clearTimer: ReturnType<typeof setTimeout> | null = null;
+const toastTimers = new Map<number, ToastTimer>();
 let messageToastMountPromise: Promise<void> | null = null;
-let openFrame: number | null = null;
-let activeToastId = 0;
+let nextToastId = 0;
 
-// Shared message toast state
+// Shared message toast state (current/isOpen are kept for backward compatibility)
 export const messageToastState: MessageToastState = reactive({
     current: null,
-    isOpen: false
+    isOpen: false,
+    toasts: [],
+    paused: false
 });
 
-// Mount the toast once on demand
+// Keep the legacy single-toast fields in sync with the stack
+const syncLegacyState = () => {
+    const latest = messageToastState.toasts[0];
+    messageToastState.current = latest ? { message: latest.message, type: latest.type } : null;
+    messageToastState.isOpen = Boolean(latest);
+};
+
+// Mount the toaster once on demand
 const ensureMessageToastMounted = () => {
     // Skip mounting during SSR
     if (typeof document === 'undefined') {
@@ -42,8 +78,7 @@ const ensureMessageToastMounted = () => {
     }
 
     // Reuse the existing mount root
-    const existingRoot = document.getElementById(MESSAGE_TOAST_ROOT_ID);
-    if (existingRoot) {
+    if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
         return Promise.resolve();
     }
 
@@ -75,93 +110,84 @@ const ensureMessageToastMounted = () => {
     return messageToastMountPromise;
 };
 
-// Clear active timers before updating toast state
-const clearMessageToastTimers = () => {
-    // Clear any pending auto-dismiss timer
-    if (dismissTimer) {
-        clearTimeout(dismissTimer);
-        dismissTimer = null;
-    }
-
-    // Clear any pending clear timer from a previous toast
-    if (clearTimer) {
-        clearTimeout(clearTimer);
-        clearTimer = null;
-    }
-
-    // Clear any pending open frame from a previous toast
-    if (openFrame !== null && typeof cancelAnimationFrame !== 'undefined') {
-        cancelAnimationFrame(openFrame);
-        openFrame = null;
-    }
+// Start (or restart) the auto-dismiss countdown of a toast
+const startToastTimer = (id: number) => {
+    const timer = toastTimers.get(id);
+    if (!timer || timer.handle || messageToastState.paused) return;
+    timer.startedAt = Date.now();
+    timer.handle = setTimeout(() => closeMessageToast(id), timer.remaining);
 };
 
-// Clear the current toast after the leave transition
-const clearCurrentMessageToast = () => {
-    messageToastState.current = null;
+// Stop the countdown of a toast and remember how much time is left
+const stopToastTimer = (id: number) => {
+    const timer = toastTimers.get(id);
+    if (!timer?.handle) return;
+    clearTimeout(timer.handle);
+    timer.handle = null;
+    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
 };
 
-// Close the toast after the leave transition
-const scheduleCloseMessageToast = () => {
-    // Skip if there's no active toast
-    if (!messageToastState.current || !messageToastState.isOpen) {
-        return;
-    }
+// Pause every countdown (used while the toaster is hovered or focused)
+export const pauseMessageToasts = () => {
+    messageToastState.paused = true;
+    toastTimers.forEach((_, id) => stopToastTimer(id));
+};
 
-    // Start the close transition
-    messageToastState.isOpen = false;
-    clearTimer = setTimeout(() => {
-        clearTimer = null;
-        clearCurrentMessageToast();
-    }, TOAST_CLOSE_DURATION_MS);
+// Resume every countdown
+export const resumeMessageToasts = () => {
+    messageToastState.paused = false;
+    toastTimers.forEach((_, id) => startToastTimer(id));
 };
 
-// Dismiss the active toast
-export const closeMessageToast = () => {
-    clearMessageToastTimers();
-    scheduleCloseMessageToast();
+// Dismiss one toast by id, or every toast when no id is passed
+export const closeMessageToast = (id?: number) => {
+    const ids = id === undefined ? messageToastState.toasts.map(toast => toast.id) : [id];
+
+    // Clear timers and remove the toasts from the stack
+    for (const toastId of ids) {
+        stopToastTimer(toastId);
+        toastTimers.delete(toastId);
+    }
+    messageToastState.toasts = messageToastState.toasts.filter(toast => !ids.includes(toast.id));
+    syncLegacyState();
 };
 
-// Show a message toast and optionally auto-dismiss it
+// Show a message toast and optionally auto-dismiss it; returns the toast id
 export const showMessageToast = (options: ShowMessageToastOptions) => {
-    clearMessageToastTimers();
-    activeToastId += 1;
-    const toastId = activeToastId;
+    nextToastId += 1;
+    const id = nextToastId;
     const duration = options.duration ?? DEFAULT_TOAST_DURATION_MS;
 
-    // Update the toast state while keeping the shell closed until the renderer is mounted
-    messageToastState.current = {
+    // Build the toast item
+    const toast: MessageToastItem = {
+        id,
         message: options.message,
-        type: options.type ?? 'success'
+        type: options.type ?? 'success',
+        title: options.title ?? '',
+        icon: options.icon ? markRaw(options.icon) : null,
+        action: options.action ?? null,
+        dismissible: options.dismissible ?? true,
+        duration
     };
-    messageToastState.isOpen = false;
 
-    // Mount first so the initial visible transition can run after the component exists
+    // Expose the newest toast synchronously, as the single-toast API always did
+    messageToastState.current = { message: toast.message, type: toast.type };
+
+    // Mount first so the enter transition runs once the renderer exists
     void ensureMessageToastMounted().then(() => {
-        // Guard against a toast change during the async mount
-        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === 'undefined') {
-            return;
+        // Push the newest toast on top and trim the overflow
+        messageToastState.toasts = [toast, ...messageToastState.toasts];
+        for (const overflow of messageToastState.toasts.slice(MAX_TOASTS)) {
+            closeMessageToast(overflow.id);
         }
+        syncLegacyState();
 
-        // Use requestAnimationFrame to ensure the DOM updates before starting the open transition
-        openFrame = requestAnimationFrame(() => {
-            openFrame = null;
-
-            // Guard against a toast change before the frame
-            if (toastId !== activeToastId || !messageToastState.current) {
-                return;
-            }
-
-            // Start the open transition after the renderer is present
-            messageToastState.isOpen = true;
-
-            // Auto-dismiss the toast after the specified duration
-            if (duration > 0) {
-                dismissTimer = setTimeout(() => {
-                    dismissTimer = null;
-                    scheduleCloseMessageToast();
-                }, duration);
-            }
-        });
+        // Auto-dismiss the toast after the specified duration
+        if (duration > 0) {
+            toastTimers.set(id, { handle: null, remaining: duration, startedAt: Date.now() });
+            startToastTimer(id);
+        }
     });
+
+    return id;
 };

package/src/components/page-header/PageHeader.vue

@@ -27,7 +27,7 @@ const hasSlotContent = computed(() => {
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)';
+    const baseClasses = 'font-bold text-foreground';
 
     // Return classes based on size
     switch (size) {

package/src/components/progress-component/ProgressComponent.vue

@@ -19,12 +19,12 @@ const props = withDefaults(defineProps<{
         <!-- Header with icon and label -->
         <div class="flex items-center justify-between">
             <!-- Title of the progress bar -->
-            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+            <span class="text-sm font-semibold text-foreground">
                 {{ props.title }}
             </span>
 
             <!-- Current value / max -->
-            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+            <span class="text-sm font-semibold text-foreground">
                 {{ props.value }} / {{ props.max }}
             </span>
         </div>
@@ -35,12 +35,12 @@ const props = withDefaults(defineProps<{
         <!-- Bottom labels -->
         <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
             <!-- Bottom left label -->
-            <span v-if="props.bottomLeftLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
+            <span v-if="props.bottomLeftLabel" class="text-muted-foreground">
                 {{ props.bottomLeftLabel }}
             </span>
 
             <!-- Bottom right label -->
-            <span v-if="props.bottomRightLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
+            <span v-if="props.bottomRightLabel" class="text-muted-foreground">
                 {{ props.bottomRightLabel }}
             </span>
         </div>