@happyvertical/smrt-assets 0.55.11 → 0.55.18

package/dist/svelte/AssetDetail.svelte

@@ -309,6 +309,8 @@ function formatDate(date: Date | string | undefined): string {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* Body — negative margin cancels Modal's .modal__body padding so the section
      dividers stay full-bleed (Modal owns the dialog shell + scroll container). */
   .detail__body {
@@ -317,7 +319,7 @@ function formatDate(date: Date | string | undefined): string {
 
   .detail__section {
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .detail__section:last-child {
@@ -327,7 +329,7 @@ function formatDate(date: Date | string | undefined): string {
   .section-heading {
     margin: 0 0 var(--smrt-spacing-3, 0.75rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.05em);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
@@ -337,7 +339,7 @@ function formatDate(date: Date | string | undefined): string {
   .detail__preview {
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .preview-image {
@@ -372,7 +374,7 @@ function formatDate(date: Date | string | undefined): string {
   }
 
   .preview-document__link {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-medium, 500);
     text-decoration: none;
   }
@@ -383,7 +385,7 @@ function formatDate(date: Date | string | undefined): string {
 
   .preview-generic__mime {
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* Form */
@@ -402,14 +404,14 @@ function formatDate(date: Date | string | undefined): string {
   .form-label {
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .label-warning {
     font-weight: var(--smrt-typography-weight-normal, 400);
     font-size: var(--smrt-typography-label-small-size, 0.7rem);
-    color: var(--smrt-color-error, #dc2626);
-    margin-left: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-left: var(--smrt-spacing-1);
   }
 
   /* Metadata */
@@ -422,7 +424,7 @@ function formatDate(date: Date | string | undefined): string {
   .metadata-item {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .metadata-label {
@@ -430,12 +432,12 @@ function formatDate(date: Date | string | undefined): string {
     font-weight: var(--smrt-typography-weight-semibold, 600);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .metadata-value {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     word-break: break-word;
   }
 
@@ -450,25 +452,25 @@ function formatDate(date: Date | string | undefined): string {
      bespoke bordered-surface look (vs. the transparent ghost variant), so the
      overrides reach the child-rendered <button> through :global() scoping. */
   .quick-actions :global(.quick-btn) {
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     height: 32px;
     padding: 0 var(--smrt-spacing-3, 0.75rem);
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface, #111827);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .quick-actions :global(.quick-btn:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     box-shadow: var(--smrt-elevation-1);
   }
 
   .copy-feedback {
     margin-top: var(--smrt-spacing-2, 0.5rem);
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
-    color: var(--smrt-color-success, #22c55e);
+    color: var(--smrt-color-success);
     font-weight: var(--smrt-typography-weight-medium, 500);
     animation: fadeIn 150ms ease;
   }
@@ -499,4 +501,5 @@ function formatDate(date: Date | string | undefined): string {
     display: flex;
     gap: var(--smrt-spacing-2, 0.5rem);
   }
+}
 </style>

package/dist/svelte/AssetGrid.svelte

@@ -79,7 +79,7 @@ function getAltText(asset: PersistedAsset): string {
 }
 </script>
 
-<div class="asset-grid" class:asset-grid--loading={loading}>
+<div class="asset-grid" class:asset-grid--loading={loading} data-smrt-component="AssetGrid">
   {#if loading}
     <div class="asset-grid__loading">
       <span class="spinner"></span>
@@ -165,6 +165,8 @@ function getAltText(asset: PersistedAsset): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-grid {
     padding: var(--smrt-spacing-4, 1rem);
   }
@@ -185,8 +187,8 @@ function getAltText(asset: PersistedAsset): string {
     position: relative;
     display: flex;
     flex-direction: column;
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
     cursor: pointer;
@@ -215,14 +217,14 @@ function getAltText(asset: PersistedAsset): string {
   }
 
   .asset-card__open:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     /* Inset so the card's `overflow: hidden` doesn't clip the focus ring. */
     outline-offset: -2px;
   }
 
   .asset-card--selected {
-    border-color: var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-primary-container, #dbeafe);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   /* Checkbox */
@@ -244,7 +246,7 @@ function getAltText(asset: PersistedAsset): string {
     width: 18px;
     height: 18px;
     cursor: pointer;
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   /* Thumbnail */
@@ -253,7 +255,7 @@ function getAltText(asset: PersistedAsset): string {
     align-items: center;
     justify-content: center;
     height: 140px;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     overflow: hidden;
   }
 
@@ -276,7 +278,7 @@ function getAltText(asset: PersistedAsset): string {
     display: block;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -286,13 +288,13 @@ function getAltText(asset: PersistedAsset): string {
     display: flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .asset-card__type {
     font-size: var(--smrt-typography-label-small-size, 0.7rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
   }
@@ -302,7 +304,7 @@ function getAltText(asset: PersistedAsset): string {
     position: absolute;
     top: var(--smrt-spacing-2, 0.5rem);
     right: var(--smrt-spacing-2, 0.5rem);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.65rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     border-radius: var(--smrt-radius-small, 0.25rem);
@@ -313,8 +315,8 @@ function getAltText(asset: PersistedAsset): string {
   }
 
   .asset-card__badge--warning {
-    background: var(--smrt-color-error-container, #fef2f2);
-    color: var(--smrt-color-on-error-container, #991b1b);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   /* Loading */
@@ -324,15 +326,15 @@ function getAltText(asset: PersistedAsset): string {
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-8, 2rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -356,4 +358,5 @@ function getAltText(asset: PersistedAsset): string {
       height: 100px;
     }
   }
+}
 </style>

package/dist/svelte/AssetList.svelte

@@ -106,7 +106,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 }
 </script>
 
-<div class="asset-list" class:asset-list--loading={loading}>
+<div class="asset-list" class:asset-list--loading={loading} data-smrt-component="AssetList">
   <table class="list-table">
     <thead class="list-table__head">
       <tr>
@@ -221,6 +221,8 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-list {
     overflow-x: auto;
   }
@@ -234,15 +236,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .list-table__head {
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
   }
 
   .list-table__head tr {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .list-table__head th {
@@ -250,20 +252,21 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     text-align: left;
     font-weight: var(--smrt-typography-weight-semibold, 600);
     white-space: nowrap;
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .list-table__row {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     transition: background 150ms ease;
   }
 
   .list-table__row:hover {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
   }
 
-  .list-table__row--selected {
-    background: var(--smrt-color-primary-container, #dbeafe) !important;
+  /* Doubled class: ties :hover above on specificity and wins by source order. */
+  .list-table__row.list-table__row--selected {
+    background: var(--smrt-color-primary-container);
   }
 
   .list-table__row td {
@@ -280,7 +283,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     width: 16px;
     height: 16px;
     cursor: pointer;
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   .col-thumb {
@@ -300,11 +303,11 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     justify-content: center;
     width: 40px;
     height: 40px;
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
     border-radius: var(--smrt-radius-small, 0.25rem);
     font-size: var(--smrt-typography-label-small-size, 0.6rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .col-name {
@@ -340,7 +343,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
   .row-desc {
     display: block;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -349,19 +352,19 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 
   .type-badge {
     display: inline-block;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.65rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
     text-transform: uppercase;
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
     border-radius: var(--smrt-radius-small, 0.25rem);
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
   }
 
   .col-date {
     white-space: nowrap;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .col-status {
@@ -373,20 +376,20 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     display: inline-block;
     width: 8px;
     height: 8px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-outline, #9ca3af);
-    margin-right: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-outline);
+    margin-right: var(--smrt-spacing-1);
     vertical-align: middle;
   }
 
   .status-dot--active {
-    background: var(--smrt-color-success, #22c55e);
+    background: var(--smrt-color-success);
   }
 
   /* Sort — renders via <Button class="sort-btn"> (issue #1589). Overrides reset
      it to an inline header-text button and reach the child <button> via :global(). */
   .list-table__head :global(.sort-btn) {
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     padding: 0;
     border: none;
     background: transparent;
@@ -396,7 +399,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
   }
 
   .list-table__head :global(.sort-btn:hover) {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .sort-indicator {
@@ -411,15 +414,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-8, 2rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -432,4 +435,5 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
       animation: none;
     }
   }
+}
 </style>

package/dist/svelte/AssetManager.svelte

@@ -251,7 +251,7 @@ function handleManagerDrop(event: DragEvent) {
   onpaste={handlePaste}
   ondragover={handleManagerDragOver}
   ondragleave={handleManagerDragLeave}
-  ondrop={handleManagerDrop}
+  ondrop={handleManagerDrop} data-smrt-component="AssetManager"
 >
   {#if actionError}
     <p class="asset-manager__error" role="alert" aria-live="assertive">
@@ -349,12 +349,14 @@ function handleManagerDrop(event: DragEvent) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-manager__error {
     margin: 0 0 var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-medium, 0.5rem);
-    background: var(--smrt-color-error-container, #fde8e6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
   }
 
@@ -364,15 +366,15 @@ function handleManagerDrop(event: DragEvent) {
     flex-direction: column;
     height: 100%;
     min-height: 400px;
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-large, 0.75rem);
     overflow: hidden;
     font-family: var(--smrt-font-family, inherit);
   }
 
   .asset-manager--drag-over {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
   }
 
   .asset-manager__content {
@@ -388,7 +390,7 @@ function handleManagerDrop(event: DragEvent) {
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
-    border: 2px dashed var(--smrt-color-primary, #005ac1);
+    border: 2px dashed var(--smrt-color-primary);
     border-radius: var(--smrt-radius-large, 0.75rem);
     z-index: 10;
     pointer-events: none;
@@ -399,7 +401,7 @@ function handleManagerDrop(event: DragEvent) {
     flex-direction: column;
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
@@ -407,4 +409,5 @@ function handleManagerDrop(event: DragEvent) {
     margin: 0;
     font-size: var(--smrt-typography-body-large-size, 1.1rem);
   }
+}
 </style>

package/dist/svelte/AssetToolbar.svelte

@@ -99,7 +99,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
 ];
 </script>
 
-<div class="asset-toolbar">
+<div class="asset-toolbar" data-smrt-component="AssetToolbar">
   <div class="asset-toolbar__left">
     <!-- Search -->
     <div class="asset-toolbar__search">
@@ -195,14 +195,16 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface, #ffffff);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     flex-wrap: wrap;
   }
 
@@ -230,14 +232,14 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     min-width: 180px;
     max-width: 320px;
     height: 36px;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     transition: border-color 150ms ease;
   }
 
   .asset-toolbar__search:focus-within {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
     box-shadow: 0 0 0 2px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
   }
 
@@ -245,7 +247,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     display: flex;
     align-items: center;
     padding-left: var(--smrt-spacing-2, 0.5rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* The search field renders via <Input class="search-field"> (issue #1589). It
@@ -261,7 +263,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
     font-family: inherit;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     outline: none;
     min-width: 0;
   }
@@ -272,7 +274,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
   }
 
   .asset-toolbar__search :global(.search-field::placeholder) {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .asset-toolbar__search :global(.search-field::-webkit-search-cancel-button) {
@@ -289,13 +291,13 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     padding: 0;
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-full);
   }
 
   .asset-toolbar__search :global(.search-clear:hover) {
-    color: var(--smrt-color-on-surface, #111827);
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface);
+    background: var(--smrt-color-surface-container);
   }
 
   /* Selects render via <Select class="asset-toolbar__select"> (issue #1589). The
@@ -306,19 +308,19 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     width: auto;
     height: 36px;
     padding: 0 var(--smrt-spacing-8, 2rem) 0 var(--smrt-spacing-3, 0.75rem);
-    background-color: var(--smrt-color-surface-container-low, #f9fafb);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background-color: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     font-family: inherit;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     cursor: pointer;
   }
 
   /* View Toggle */
   .view-toggle {
     display: flex;
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
   }
@@ -336,7 +338,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
   }
 
   .view-toggle :global(.view-toggle__btn:not(:last-child)) {
-    border-right: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-right: 1px solid var(--smrt-color-outline-variant);
   }
 
   /* Upload Button — renders via <Button variant="primary" class="upload-btn">
@@ -369,4 +371,5 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
       justify-content: space-between;
     }
   }
+}
 </style>