@vmz/ui 0.3.7 → 0.3.9

package/src/components/AppShell.vmz

@@ -1,23 +1,29 @@
 <template>
     <div data-vmz-ui="app-shell" class="vmz-ui-app-shell">
-        <header data-vmz-shell="header" class="vmz-ui-app-shell__header">
+        <header data-vmz-shell="header" :onKeyDown="onHeaderKeyDown" class="vmz-ui-app-shell__header">
             <div class="vmz-ui-app-shell__header-inner">
-                <a :href="homeHref" class="vmz-ui-app-shell__brand">
+                <a v-if="brand" :href="homeHref" class="vmz-ui-app-shell__brand">
                     {{ brand }}
                 </a>
-                <nav :aria-label="navLabel" class="vmz-ui-app-shell__nav">
-                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" class="vmz-ui-app-shell__nav-item">
+                <nav :id="navId" :aria-label="navLabel" :data-open="menuOpen ? 'true' : null" class="vmz-ui-app-shell__nav">
+                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" @click="closeMenu" class="vmz-ui-app-shell__nav-item">
                         {{ item.title }}
                     </a>
                 </nav>
                 <div class="vmz-ui-app-shell__actions">
                     <slot name="actions" />
                 </div>
+                <button type="button" :aria-label="menuLabel ? menuLabel : navLabel" :aria-expanded="menuOpen ? 'true' : 'false'" :aria-controls="navId" @click="toggleMenu" class="vmz-ui-app-shell__menu">
+                    <Icon :name="menuOpen ? 'action.close' : 'action.menu'" size="md" decorative />
+                </button>
             </div>
         </header>
         <main data-vmz-shell="main" class="vmz-ui-app-shell__main">
             <slot />
         </main>
+        <footer v-if="footer" data-vmz-shell="footer" class="vmz-ui-app-shell__footer">
+            {{ footer }}
+        </footer>
     </div>
 </template>
 <style>
@@ -26,26 +32,25 @@
     flex-direction: column;
     min-height: 100%;
     color: var(--vmz-text-ink);
-    background: transparent;
+    background: var(--vmz-surface-page);
+    font-family: var(--vmz-font-sans);
 }
 
 .vmz-ui-app-shell__header {
     position: sticky;
     top: 0;
     z-index: 30;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    background: color-mix(in srgb, var(--vmz-surface-paper) 88%, transparent);
-    backdrop-filter: saturate(180%) blur(0.5rem);
-    -webkit-backdrop-filter: saturate(180%) blur(0.5rem);
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
 }
 
 .vmz-ui-app-shell__header-inner {
-    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
-    min-height: 3.5rem;
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - (var(--vmz-layout-gutter, 1rem) * 2)));
+    height: var(--vmz-layout-header-height, 4rem);
     margin: 0 auto;
     display: flex;
     align-items: center;
-    gap: 1.5rem;
+    gap: var(--vmz-space-6, 2rem);
 }
 
 .vmz-ui-app-shell__brand {
@@ -53,7 +58,8 @@
     color: var(--vmz-text-ink);
     font-family: var(--vmz-font-sans);
     font-size: 1.0625rem;
-    font-weight: 650;
+    font-weight: 600;
+    line-height: 1.25;
     letter-spacing: -0.01em;
     text-decoration: none;
     border-radius: var(--vmz-radius-sm, 4px);
@@ -70,91 +76,133 @@
 }
 
 .vmz-ui-app-shell__nav {
-    display: flex;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-    gap: 0.125rem;
+    flex: 0 1 auto;
     min-width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-5, 1.5rem);
 }
 
 .vmz-ui-app-shell__nav-item {
     position: relative;
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--vmz-radius-sm, 4px);
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    border-bottom: 2px solid transparent;
     color: var(--vmz-text-steel);
-    font: inherit;
     font-size: 0.875rem;
     font-weight: 500;
-    line-height: 1.4286;
+    line-height: 1;
     text-decoration: none;
     white-space: nowrap;
     outline: none;
     transition:
         color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+        border-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-app-shell__nav-item:hover {
-    color: var(--vmz-text-ink);
-    background: var(--vmz-surface-mist, #fafafa);
-}
-
-.vmz-ui-app-shell__nav-item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    color: var(--vmz-action-primary-background);
 }
 
-/* Current section: ink emphasis plus a hairline marker, no brand fill. */
 .vmz-ui-app-shell__nav-item[data-active="true"] {
-    color: var(--vmz-text-ink);
-    font-weight: 600;
+    color: var(--vmz-action-primary-background);
+    border-bottom-color: var(--vmz-action-primary-background);
 }
 
-.vmz-ui-app-shell__nav-item[data-active="true"]::after {
-    content: "";
-    position: absolute;
-    inset: auto 0.75rem 0;
-    height: 2px;
-    border-radius: var(--vmz-radius-pill, 999px);
-    background: var(--vmz-action-primary-background);
+.vmz-ui-app-shell__nav-item:focus-visible {
+    border-radius: var(--vmz-radius-sm, 4px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-app-shell__actions {
     flex: none;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2, 0.5rem);
     margin-left: auto;
 }
 
+.vmz-ui-app-shell__menu {
+    display: none;
+}
+
 .vmz-ui-app-shell__main {
     flex: 1;
-    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+    box-sizing: border-box;
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - (var(--vmz-layout-gutter, 1rem) * 2)));
     margin: 0 auto;
-    padding: 1.75rem 0 3rem;
+    padding: var(--vmz-space-6, 2rem) 0 var(--vmz-space-8, 4rem);
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--vmz-space-6, 2rem);
+}
+
+.vmz-ui-app-shell__footer {
+    border-top: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+    padding: var(--vmz-space-6, 2rem) var(--vmz-space-5, 1.5rem);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-align: center;
 }
 
 @media (max-width: 720px) {
     .vmz-ui-app-shell__header-inner {
-        flex-wrap: wrap;
-        gap: 0.5rem 0.75rem;
-        padding: 0.625rem 0;
+        height: var(--vmz-layout-header-height-compact, 3.5rem);
+        gap: var(--vmz-space-3, 0.75rem);
     }
     .vmz-ui-app-shell__nav {
-        order: 3;
-        flex-basis: 100%;
-        overflow-x: auto;
-        flex-wrap: nowrap;
-        padding-bottom: 0.125rem;
-        scrollbar-width: none;
-    }
-    .vmz-ui-app-shell__nav::-webkit-scrollbar {
         display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+        padding: var(--vmz-space-2, 0.5rem) var(--vmz-layout-gutter, 1rem) var(--vmz-space-4, 1rem);
+        border-bottom: 1px solid var(--vmz-line-subtle);
+        background: var(--vmz-surface-paper);
+        box-shadow: var(--vmz-shadow-popup);
+    }
+    .vmz-ui-app-shell__nav[data-open="true"] {
+        display: flex;
+    }
+    .vmz-ui-app-shell__nav-item {
+        height: 2.5rem;
+        padding: 0 var(--vmz-space-1, 0.25rem);
+        border-bottom: 0;
+    }
+    .vmz-ui-app-shell__menu {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--vmz-radius-md, 6px);
+        background: transparent;
+        color: var(--vmz-text-ink);
+        cursor: pointer;
+        outline: none;
+        transition: background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    }
+    .vmz-ui-app-shell__menu:hover {
+        background: var(--vmz-surface-mist);
+    }
+    .vmz-ui-app-shell__menu:focus-visible {
+        box-shadow: 0 0 0 3px var(--vmz-focus-ring);
     }
     .vmz-ui-app-shell__main {
-        padding-top: 1.25rem;
+        padding: var(--vmz-space-5, 1.5rem) 0 var(--vmz-space-7, 3rem);
+        gap: var(--vmz-space-5, 1.5rem);
     }
 }
 </style>
@@ -165,16 +213,33 @@
  * go into the named `actions` slot. Parent supplies copy; no private theme.
  */
 export default class AppShell {
-    public brand: string = "VMZ";
+    public brand: string = "";
     public homeHref: string = "/";
-    public navLabel: string = "Primary";
+    public navLabel: string = "";
+    public menuLabel: string = "";
     /** Id of the nav item representing the current page, for `aria-current` + marker. */
     public activeId: string = "";
+    public navId: string = "vmz-ui-app-shell-nav";
+    /** Optional footer copy; the footer band only renders when supplied. */
+    public footer: string = "";
     /** @type {{ id: string, title: string, href: string }[]} */
     public nav: {
         id: string;
         title: string;
         href: string;
     }[] = [];
+    menuOpen = false;
+
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+
+    closeMenu() {
+        if (this.menuOpen) this.menuOpen = false;
+    }
+
+    onHeaderKeyDown(e) {
+        if (e && e.key === "Escape") this.closeMenu();
+    }
 }
 </script>

package/src/components/Autocomplete.vmz

@@ -3,15 +3,25 @@
         <label v-if="label" :for="controlId" class="vmz-ui-autocomplete__label">
             {{ label }}
         </label>
-        <input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :value="value" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
-        <ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
-            <li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" tabindex="-1" class="vmz-ui-autocomplete__option">
-                {{ opt.label }}
-            </li>
-        </ul>
-        <p v-if="showEmpty" data-vmz-autocomplete="empty" class="vmz-ui-autocomplete__empty">
-            {{ emptyText }}
-        </p>
+        <div class="vmz-ui-autocomplete__field">
+            <div class="vmz-ui-autocomplete__control-wrap">
+                <Icon name="action.search" size="md" decorative class="vmz-ui-autocomplete__search-icon" />
+                <input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :value="value" :placeholder="placeholder" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
+            </div>
+            <div v-if="listOpen || (showEmpty && emptyText)" class="vmz-ui-autocomplete__panel">
+                <ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
+                    <li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" :aria-selected="opt.value === value ? 'true' : 'false'" tabindex="-1" :class='"vmz-ui-autocomplete__option" + (opt.value === value ? " is-on" : "")'>
+                        <span class="vmz-ui-autocomplete__option-label">
+                            {{ opt.label }}
+                        </span>
+                        <Icon v-if="opt.value === value" name="action.check" size="md" decorative class="vmz-ui-autocomplete__option-check" />
+                    </li>
+                </ul>
+                <p v-if="showEmpty && emptyText" data-vmz-autocomplete="empty" class="vmz-ui-autocomplete__empty">
+                    {{ emptyText }}
+                </p>
+            </div>
+        </div>
         <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">
             {{ description }}
         </p>
@@ -25,55 +35,142 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
+    gap: var(--vmz-space-2);
+    width: 100%;
     max-width: 28rem;
 }
 
+.vmz-ui-autocomplete__field {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
 .vmz-ui-autocomplete__label {
     font: inherit;
-    font-weight: 600;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-autocomplete__control-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.vmz-ui-autocomplete__search-icon {
+    position: absolute;
+    left: var(--vmz-density-control-padding-x);
+    z-index: 1;
+    color: var(--vmz-text-tertiary);
+    pointer-events: none;
 }
 
 .vmz-ui-autocomplete__control {
-    font: inherit;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--vmz-control-height);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    padding-left: calc(
+        var(--vmz-density-control-padding-x) + var(--vmz-space-4) + var(--vmz-space-1)
+    );
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: inherit;
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
     outline: none;
+    transition:
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-autocomplete__control::placeholder {
+    color: var(--vmz-text-tertiary);
+    opacity: 1;
 }
 
 .vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control {
     border-color: var(--vmz-status-danger-accent);
 }
 
+.vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control:hover:not(:disabled),
+.vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control:focus-visible {
+    border-color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-autocomplete__control:hover:not(:disabled):not(:focus-visible) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
 .vmz-ui-autocomplete__control:focus-visible {
+    border-color: var(--vmz-action-primary-background);
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-autocomplete__control:disabled {
-    opacity: 0.55;
+    opacity: 0.6;
+    color: var(--vmz-text-muted);
     cursor: not-allowed;
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-autocomplete__panel {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + var(--vmz-space-1));
+    left: 0;
+    right: 0;
+    padding: var(--vmz-space-1);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    box-shadow: var(--vmz-shadow-popup);
 }
 
 .vmz-ui-autocomplete__list {
     list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
+    padding: 0;
     max-height: 12rem;
     overflow: auto;
 }
 
 .vmz-ui-autocomplete__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vmz-space-2);
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
     margin: 0;
-    padding: 0.5rem 0.75rem;
-    cursor: pointer;
-    font-weight: 600;
+    padding: 0 var(--vmz-density-control-padding-x);
+    border-radius: var(--vmz-radius-md);
     color: var(--vmz-text-ink);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-autocomplete__option-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-autocomplete__option-check {
+    flex: 0 0 auto;
+    color: var(--vmz-action-primary-background);
 }
 
 .vmz-ui-autocomplete__option:hover,
@@ -82,22 +179,31 @@
     outline: none;
 }
 
+.vmz-ui-autocomplete__option.is-on {
+    background: var(--vmz-action-primary-soft);
+    color: var(--vmz-action-primary-active);
+}
+
 .vmz-ui-autocomplete__empty {
     margin: 0;
-    color: var(--vmz-text-steel);
-    font-size: 0.9em;
+    padding: var(--vmz-space-2) var(--vmz-density-control-padding-x);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875rem;
+    line-height: 1.5715;
 }
 
 .vmz-ui-autocomplete__description {
     margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    line-height: 1.5715;
 }
 
 .vmz-ui-autocomplete__error {
     margin: 0;
     color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
+    font-size: 0.875rem;
+    line-height: 1.5715;
 }
 </style>
 <script client>
@@ -111,6 +217,7 @@ export default class Autocomplete {
     public description: string = "";
     public error: string = "";
     public value: string = "";
+    public placeholder: string = "";
     public options: Array<{
         value: string;
         label: string;
@@ -118,7 +225,7 @@ export default class Autocomplete {
     public listOpen: boolean = false;
     public openAttr: string = "false";
     public showEmpty: boolean = false;
-    public emptyText: string = "No matches";
+    public emptyText: string = "";
     public disabled: boolean = false;
     public invalidAttr: string = "false";
     public controlId: string = "vmz-autocomplete";

package/src/components/Avatar.vmz

@@ -1,6 +1,6 @@
 <template>
     <span data-vmz-ui="avatar" :data-size="size" :aria-label="label" class="vmz-ui-avatar">
-        <img v-if="src" :src="src" alt />
+        <img v-if="src" :src="src" :alt="label" />
         <span v-if="!src">
             {{ text }}
         </span>
@@ -9,26 +9,34 @@
 <style>
 .vmz-ui-avatar {
     display: inline-flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    box-sizing: border-box;
+    width: var(--vmz-control-height);
+    height: var(--vmz-control-height);
     overflow: hidden;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--vmz-action-primary-background, #1677ff) 14%, white);
-    color: var(--vmz-action-primary-active, #0958d9);
-    font-weight: 650;
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-action-primary-soft);
+    color: var(--vmz-action-primary-active);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    user-select: none;
 }
+
 .vmz-ui-avatar[data-size="small"] {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(--vmz-control-height-sm);
+    height: var(--vmz-control-height-sm);
     font-size: 0.75rem;
 }
+
 .vmz-ui-avatar[data-size="large"] {
-    width: 2.75rem;
-    height: 2.75rem;
-    font-size: 1.1rem;
+    width: var(--vmz-control-height-lg);
+    height: var(--vmz-control-height-lg);
+    font-size: 1rem;
 }
+
 .vmz-ui-avatar img {
     width: 100%;
     height: 100%;

package/src/components/Badge.vmz

@@ -7,54 +7,46 @@
 .vmz-ui-badge {
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
-    padding: 0.125rem 0.5rem;
+    gap: var(--vmz-space-1);
+    max-width: 100%;
+    padding: 0 var(--vmz-space-2);
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-sm);
     font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    line-height: 1.2;
+    font-weight: 500;
+    line-height: 1.6667;
+    white-space: nowrap;
     background: var(--vmz-surface-mist);
-    color: var(--vmz-text-ink);
+    color: var(--vmz-text-steel);
 }
 
 .vmz-ui-badge[data-tone="brand"] {
-    border-color: color-mix(
-        in srgb,
-        var(--vmz-action-primary-background) 35%,
-        var(--vmz-line-default)
-    );
-    background: color-mix(
-        in srgb,
-        var(--vmz-action-primary-background) 12%,
-        var(--vmz-surface-paper)
-    );
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-soft);
     color: var(--vmz-action-primary-active);
 }
 
 .vmz-ui-badge[data-tone="info"] {
-    border-color: var(--vmz-status-info-accent);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, var(--vmz-surface-paper));
+    border-color: var(--vmz-status-info-border);
+    background: var(--vmz-status-info-background);
     color: var(--vmz-status-info-foreground);
 }
 
 .vmz-ui-badge[data-tone="success"] {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
+    border-color: var(--vmz-status-success-border);
+    background: var(--vmz-status-success-background);
     color: var(--vmz-status-success-foreground);
 }
 
 .vmz-ui-badge[data-tone="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
+    border-color: var(--vmz-status-warning-border);
+    background: var(--vmz-status-warning-background);
     color: var(--vmz-status-warning-foreground);
 }
 
 .vmz-ui-badge[data-tone="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
+    border-color: var(--vmz-status-danger-border);
+    background: var(--vmz-status-danger-background);
     color: var(--vmz-status-danger-foreground);
 }
 </style>