@happyvertical/smrt-svelte 0.55.16 → 0.55.18

package/dist/components/forms/DateRangeInput.svelte

@@ -450,7 +450,7 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
   class="smrt-daterange"
   class:listening={isRecording}
   class:parsing={isParsing}
-  data-smrt-field-owner={fieldOwnerToken}
+  data-smrt-field-owner={fieldOwnerToken} data-smrt-component="DateRangeInput"
 >
   {#if label}
     <FieldLabel for={primaryControlId} {label} {required} />
@@ -567,10 +567,12 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-daterange {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .range-wrapper {
@@ -579,88 +581,88 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
   }
 
   .range-wrapper.smrt-mode {
-    border: 1px solid var(--smrt-color-tertiary, #6b5778);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-tertiary-container, #f3e5f5);
+    border: 1px solid var(--smrt-color-tertiary);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-tertiary-container);
   }
 
   .range-wrapper.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .voice-input-wrapper {
     display: flex;
     align-items: center;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    gap: var(--smrt-spacing-2);
   }
 
   .voice-display {
     flex: 1;
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-large-size, 1rem);
   }
 
   .date-value {
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .range-separator {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .placeholder {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-style: italic;
   }
 
   .date-inputs {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-3, 12px);
+    gap: var(--smrt-spacing-3);
   }
 
   .date-field {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .field-label {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     font-weight: var(--smrt-typography-body-small-weight, 500);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: 0.025em;
   }
 
   .range-arrow {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-title-medium-size, 1.25rem);
-    padding-bottom: var(--smrt-spacing-2, 8px);
+    padding-bottom: var(--smrt-spacing-2);
   }
 
   .smrt-input {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .smrt-input:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
@@ -672,7 +674,7 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
     justify-content: center;
     background: transparent;
     border: none;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
@@ -680,12 +682,12 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
   }
 
   .mic-btn:hover {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    color: var(--smrt-color-on-surface, #374151);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
   }
 
   .mic-btn.active {
-    background: var(--smrt-color-primary, #22c55e);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
   }
 
@@ -711,48 +713,49 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
   }
 
   .smrt-daterange.listening .range-wrapper.smrt-mode {
-    border-color: var(--smrt-color-success, #22c55e);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+    border-color: var(--smrt-color-success);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     animation: pulse-green 1.5s var(--smrt-easing-standard, ease-in-out) infinite;
   }
 
   .smrt-daterange.parsing .range-wrapper.smrt-mode {
-    border-color: var(--smrt-color-warning, #f59e0b);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-warning, #f59e0b) 20%, transparent);
+    border-color: var(--smrt-color-warning);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-warning) 20%, transparent);
   }
 
   @keyframes pulse-green {
     0%, 100% {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     }
     50% {
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success, #22c55e) 15%, transparent);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success) 15%, transparent);
     }
   }
 
   .listening-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-primary, #22c55e);
+    color: var(--smrt-color-primary);
   }
 
   .parsing-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-secondary, #f59e0b);
+    color: var(--smrt-color-secondary);
   }
 
   .error-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
   }
 
   @media (max-width: 600px) {
     .date-inputs {
       flex-direction: column;
-      gap: var(--smrt-spacing-2, 8px);
+      gap: var(--smrt-spacing-2);
     }
 
     .range-arrow {
       display: none;
     }
   }
+}
 </style>

package/dist/components/forms/DateTimeInput.svelte

@@ -349,7 +349,7 @@ function handleNativeChange(e: Event) {
 }
 </script>
 
-<div class="smrt-datetime" class:listening={isHolding} class:parsing={isParsing}>
+<div class="smrt-datetime" class:listening={isHolding} class:parsing={isParsing} data-smrt-component="DateTimeInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -450,12 +450,14 @@ function handleNativeChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-datetime {
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     position: relative;
   }
 
@@ -469,47 +471,47 @@ function handleNativeChange(e: Event) {
     box-sizing: border-box;
     min-width: 0;
     width: 100%;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .smrt-input:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .smrt-input.smrt-mode {
-    padding-right: var(--smrt-spacing-11, 44px);
+    padding-right: var(--smrt-spacing-11);
     cursor: pointer;
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-datetime.listening .smrt-input {
-    border-color: var(--smrt-color-success, #22c55e);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+    border-color: var(--smrt-color-success);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     animation: pulse-green 1.5s var(--smrt-easing-standard, ease-in-out) infinite;
   }
 
   .smrt-datetime.parsing .smrt-input {
-    border-color: var(--smrt-color-warning, #f59e0b);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-warning, #f59e0b) 20%, transparent);
+    border-color: var(--smrt-color-warning);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-warning) 20%, transparent);
   }
 
   @keyframes pulse-green {
     0%, 100% {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     }
     50% {
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success, #22c55e) 15%, transparent);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success) 15%, transparent);
     }
   }
 
@@ -525,19 +527,19 @@ function handleNativeChange(e: Event) {
     justify-content: center;
     background: transparent;
     border: none;
-    border-radius: var(--smrt-radius-sm, 4px);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    border-radius: var(--smrt-radius-sm);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .mic-btn:hover {
     background: var(--smrt-color-surface-container);
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .mic-btn.active {
-    background: var(--smrt-color-primary, #22c55e);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
   }
 
@@ -564,19 +566,20 @@ function handleNativeChange(e: Event) {
 
   .listening-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-primary, #22c55e);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-primary);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .parsing-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-secondary, #f59e0b);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-secondary);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .error-indicator {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/forms/FileUpload.svelte

@@ -249,7 +249,7 @@ function formatFileSize(bytes: number): string {
 }
 </script>
 
-<div class="file-upload" class:disabled>
+<div class="file-upload" class:disabled data-smrt-component="FileUpload">
   <div
     class="drop-zone"
     class:dragging={isDragging}
@@ -323,6 +323,8 @@ function formatFileSize(bytes: number): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .file-upload {
     position: relative;
     display: flex;
@@ -356,52 +358,52 @@ function formatFileSize(bytes: number): string {
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-8, 2rem) var(--smrt-spacing-6, 1.5rem);
-    border: 2px dashed var(--smrt-color-outline, #79747e);
+    border: 2px dashed var(--smrt-color-outline);
     border-radius: var(--smrt-radius-lg, 1rem);
-    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    background: var(--smrt-color-surface-container-low);
     cursor: pointer;
     transition: all 200ms;
     text-align: center;
   }
 
   .drop-zone:hover {
-    border-color: var(--smrt-color-primary, #6750a4);
-    background: var(--smrt-color-surface-container, #f3edf7);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-surface-container);
   }
 
   .drop-zone:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #6750a4);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
 
   .drop-zone.dragging {
-    border-color: var(--smrt-color-primary, #6750a4);
-    background: var(--smrt-color-primary-container, #eaddff);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
     border-style: solid;
   }
 
   .drop-zone__icon {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .drop-zone__label {
     margin: 0;
     font: var(--smrt-typography-body-large-font);
-    color: var(--smrt-color-on-surface, #1d1b20);
+    color: var(--smrt-color-on-surface);
   }
 
   .drop-zone__hint {
     margin: 0;
     font: var(--smrt-typography-body-small-font);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .file-upload__error {
     margin: 0;
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    background: var(--smrt-color-error-container, #f9dedc);
-    color: var(--smrt-color-on-error-container, #410e0b);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
     border-radius: var(--smrt-radius-sm, 0.25rem);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
   }
@@ -410,7 +412,7 @@ function formatFileSize(bytes: number): string {
     list-style: none;
     margin: 0;
     padding: 0;
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-md, 0.5rem);
     overflow: hidden;
   }
@@ -420,7 +422,7 @@ function formatFileSize(bytes: number): string {
     align-items: center;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .file-list__item:last-child {
@@ -430,7 +432,7 @@ function formatFileSize(bytes: number): string {
   .file-list__name {
     flex: 1;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #1d1b20);
+    color: var(--smrt-color-on-surface);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -438,7 +440,7 @@ function formatFileSize(bytes: number): string {
 
   .file-list__size {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
   }
 
@@ -450,15 +452,16 @@ function formatFileSize(bytes: number): string {
     height: 28px;
     padding: 0;
     border: none;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: background-color 200ms;
   }
 
   .file-list__remove:hover {
-    background: var(--smrt-color-error-container, #f9dedc);
-    color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/components/forms/Form.svelte

@@ -1529,7 +1529,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   onsubmit={handleSubmit}
   {method}
   {action}
-  use:applyEnhance={enhance}
+  use:applyEnhance={enhance} data-smrt-component="Form"
 >
   <!--
     Screen-reader status region (L1 #1420): announces async STT / field-
@@ -1642,16 +1642,18 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
 </form>
 
 {#if isFormListening && spokenText}
-  <div class="spoken-toaster">
+  <div class="spoken-toaster" data-smrt-component="Form">
     <strong>{t(M['ui.form.you_said'])}</strong> {spokenText}
   </div>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-form {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
   }
 
   /* Visually-hidden live region (L1 #1420) — announced to screen readers only. */
@@ -1670,23 +1672,23 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   .form-controls {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
     flex-wrap: wrap;
   }
 
   .mode-toggle {
     display: flex;
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    padding: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container-high);
+    padding: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-md);
   }
 
   .mode-btn {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-4);
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    border-radius: var(--smrt-radius-md, 8px);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-md);
     cursor: pointer;
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -1694,24 +1696,24 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .mode-btn:hover {
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .mode-btn.active {
-    background: var(--smrt-color-surface, #fff);
-    color: var(--smrt-color-primary, #3b82f6);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
   }
 
   .form-listen-btn {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-5, 20px);
-    border: 2px solid var(--smrt-color-primary, #3b82f6);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-5);
+    border: 2px solid var(--smrt-color-primary);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     cursor: pointer;
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -1719,20 +1721,20 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .form-listen-btn:hover {
-    background: var(--smrt-color-primary-container, #eff6ff);
+    background: var(--smrt-color-primary-container);
   }
 
   .form-listen-btn.listening {
-    background: var(--smrt-color-primary, #22c55e);
-    border-color: var(--smrt-color-primary, #22c55e);
-    color: var(--smrt-color-on-primary, #fff);
+    background: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     animation: pulse-btn 1.5s var(--smrt-easing-standard, ease-in-out) infinite;
   }
 
   .form-listen-btn.extracting {
-    background: var(--smrt-color-secondary, #f59e0b);
-    border-color: var(--smrt-color-secondary, #f59e0b);
-    color: var(--smrt-color-on-secondary, #fff);
+    background: var(--smrt-color-secondary);
+    border-color: var(--smrt-color-secondary);
+    color: var(--smrt-color-on-secondary);
   }
 
   .form-listen-btn:disabled {
@@ -1769,12 +1771,12 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
     bottom: 0;
     left: 0;
     right: 0;
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-6, 24px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-6);
     /* 90%-opacity primary. The old `--smrt-color-primary-rgb` channel token
        was never emitted (issue #1431); color-mix derives the alpha from the
        emitted `--smrt-color-primary` token instead. */
-    background: color-mix(in srgb, var(--smrt-color-primary, #166534) 90%, transparent);
-    color: var(--smrt-color-on-primary, #fff);
+    background: color-mix(in srgb, var(--smrt-color-primary) 90%, transparent);
+    color: var(--smrt-color-on-primary);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     box-shadow: 0 -2px 12px color-mix(in srgb, var(--smrt-color-shadow) 15%, transparent);
     z-index: var(--smrt-z-index-toast, 1500);
@@ -1784,7 +1786,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .spoken-toaster strong {
-    color: var(--smrt-color-on-primary-container, #bbf7d0);
+    color: var(--smrt-color-on-primary-container);
   }
 
   @keyframes slideUp {
@@ -1799,10 +1801,10 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .extract-error {
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
     background: var(--smrt-color-error-container);
     border: 1px solid var(--smrt-color-error);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     color: var(--smrt-color-error);
   }
@@ -1810,6 +1812,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   .form-fields {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
   }
+}
 </style>