@happyvertical/smrt-svelte 0.55.16 → 0.55.18

package/dist/components/forms/FormMicButton.svelte

@@ -65,7 +65,7 @@ function handleKeydown(e: KeyboardEvent) {
     onkeydown={handleKeydown}
     role="button"
     tabindex="0"
-    aria-label={isListening ? 'Stop listening' : 'Click to speak'}
+    aria-label={isListening ? 'Stop listening' : 'Click to speak'} data-smrt-component="FormMicButton"
   >
     {#if isExtracting}
       <svg
@@ -102,12 +102,14 @@ function handleKeydown(e: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .form-mic-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
     vertical-align: middle;
@@ -115,16 +117,16 @@ function handleKeydown(e: KeyboardEvent) {
   }
 
   .form-mic-icon:hover {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .form-mic-icon.listening {
-    color: var(--smrt-color-primary, #22c55e);
+    color: var(--smrt-color-primary);
     animation: pulse 1.5s ease-in-out infinite;
   }
 
   .form-mic-icon.extracting {
-    color: var(--smrt-color-primary, #22c55e);
+    color: var(--smrt-color-primary);
   }
 
   .tooltip {
@@ -134,8 +136,8 @@ function handleKeydown(e: KeyboardEvent) {
     transform: translateX(-50%);
     margin-top: 0.5rem;
     padding: 0.5rem 0.75rem;
-    background: var(--smrt-color-inverse-surface, var(--smrt-color-on-surface, #1f2937));
-    color: var(--smrt-color-inverse-on-surface, #fff);
+    background: var(--smrt-color-inverse-surface, var(--smrt-color-on-surface));
+    color: var(--smrt-color-inverse-on-surface);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-normal, 400);
     border-radius: 0.375rem;
@@ -179,4 +181,5 @@ function handleKeydown(e: KeyboardEvent) {
       animation: none;
     }
   }
+}
 </style>

package/dist/components/forms/FormScope.svelte

@@ -189,14 +189,17 @@ useWebMcpTool(
 );
 </script>
 
-<div class="smrt-form-scope" data-smrt-form-scope={formId} bind:this={scope}>
+<div class="smrt-form-scope" data-smrt-form-scope={formId} bind:this={scope} data-smrt-component="FormScope">
   {@render children()}
   <StagedControlReview {registry} {formId} {formElement} summary={stagedReview} />
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* Layout-neutral: the wrapped content lays out exactly as before. */
   .smrt-form-scope {
     display: contents;
   }
+}
 </style>

package/dist/components/forms/MeasurementInput.svelte

@@ -441,7 +441,7 @@ function handleUnitChange(e: Event) {
 }
 </script>
 
-<div class="smrt-measurement" data-smrt-field-owner={fieldOwnerToken}>
+<div class="smrt-measurement" data-smrt-field-owner={fieldOwnerToken} data-smrt-component="MeasurementInput">
   {#if label}
     <FieldLabel for={name} {label} {required} />
   {/if}
@@ -497,31 +497,33 @@ function handleUnitChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-measurement {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .input-wrapper.smrt-mode {
-    border: 1px solid var(--smrt-color-tertiary, #6b5778);
-    border-radius: var(--smrt-radius-small, 6px);
-    padding: var(--smrt-spacing-1, 2px);
-    background: var(--smrt-color-tertiary-container, #f3e5f5);
+    border: 1px solid var(--smrt-color-tertiary);
+    border-radius: var(--smrt-radius-small);
+    padding: var(--smrt-spacing-1);
+    background: var(--smrt-color-tertiary-container);
   }
 
   .smrt-input {
     flex: 1;
-    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);
     min-width: 0;
   }
@@ -533,8 +535,8 @@ function handleUnitChange(e: Event) {
 
   .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);
   }
 
   .input-wrapper.smrt-mode .smrt-input:focus {
@@ -542,12 +544,12 @@ function handleUnitChange(e: Event) {
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   /* Hide spinner buttons */
@@ -563,11 +565,11 @@ function handleUnitChange(e: Event) {
   }
 
   .unit-select {
-    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-medium-size, 0.875rem);
-    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);
     cursor: pointer;
     min-width: 100px;
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
@@ -580,8 +582,8 @@ function handleUnitChange(e: Event) {
 
   .unit-select: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);
   }
 
   .unit-select.smrt-mode:focus {
@@ -595,7 +597,8 @@ function handleUnitChange(e: Event) {
 
   .validation-error {
     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/MoneyInput.svelte

@@ -308,7 +308,7 @@ function handleBlur() {
 }
 </script>
 
-<div class="smrt-money">
+<div class="smrt-money" data-smrt-component="MoneyInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -353,10 +353,12 @@ function handleBlur() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-money {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
@@ -368,7 +370,7 @@ function handleBlur() {
   .currency-code {
     position: absolute;
     right: 12px;
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     text-transform: uppercase;
     pointer-events: none;
@@ -376,42 +378,43 @@ function handleBlur() {
 
   .smrt-input {
     flex: 1;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-12, 48px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-12) 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);
     text-align: right;
   }
 
   .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;
   }
 
   .smrt-input.smrt-mode {
-    border-color: var(--smrt-color-tertiary, #6b5778);
+    border-color: var(--smrt-color-tertiary);
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-input.invalid:focus {
     border-color: var(--smrt-color-error);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   .validation-error {
     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/NumberInput.svelte

@@ -233,7 +233,7 @@ function handleInput(e: Event) {
 }
 </script>
 
-<div class="smrt-number">
+<div class="smrt-number" data-smrt-component="NumberInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -272,12 +272,14 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-number {
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
@@ -290,36 +292,36 @@ function handleInput(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:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-input.smrt-mode {
-    border-color: var(--smrt-color-tertiary, #6b5778);
+    border-color: var(--smrt-color-tertiary);
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-input.invalid:focus {
     border-color: var(--smrt-color-error);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   /* Hide spinner buttons */
@@ -336,7 +338,8 @@ function handleInput(e: Event) {
 
   .validation-error {
     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/PhoneInput.svelte

@@ -298,7 +298,7 @@ function handleInput(e: Event) {
 }
 </script>
 
-<div class="smrt-phone" class:listening={isHolding}>
+<div class="smrt-phone" class:listening={isHolding} data-smrt-component="PhoneInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -391,10 +391,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-phone {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     position: relative;
   }
 
@@ -405,42 +407,42 @@ function handleInput(e: Event) {
 
   .smrt-input {
     flex: 1;
-    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-phone.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;
   }
 
   @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);
     }
   }
 
@@ -462,19 +464,19 @@ function handleInput(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 0.2s;
   }
 
   .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);
   }
 
@@ -484,12 +486,12 @@ function handleInput(e: Event) {
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-input.invalid:focus {
-    border-color: var(--smrt-color-error, #ba1a1a);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    border-color: var(--smrt-color-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   .smrt-input.processing {
@@ -502,17 +504,17 @@ function handleInput(e: Event) {
   .listening-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     color: var(--smrt-color-on-surface-variant);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .listening-dot {
     width: 8px;
     height: 8px;
     background: var(--smrt-color-success);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: pulse-dot 1s ease-in-out infinite;
   }
 
@@ -536,19 +538,19 @@ function handleInput(e: Event) {
   .processing-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-on-surface-variant);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .downloading-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     color: var(--smrt-color-tertiary);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .processing-spinner {
@@ -556,7 +558,7 @@ function handleInput(e: Event) {
     height: 12px;
     border: 2px solid var(--smrt-color-outline-variant);
     border-top-color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -568,13 +570,14 @@ function handleInput(e: Event) {
 
   .error-message {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #f97316);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .validation-error {
     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/SearchInput.svelte

@@ -132,7 +132,7 @@ const sizeClasses = {
 <div
   class="search-input {sizeClasses[size]}"
   class:search-input--disabled={disabled}
-  class:search-input--loading={loading}
+  class:search-input--loading={loading} data-smrt-component="SearchInput"
 >
   <span class="search-input__icon" aria-hidden="true">
     {#if loading}
@@ -213,20 +213,22 @@ const sizeClasses = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .search-input {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
-    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-md, 0.5rem);
     transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .search-input:focus-within {
-    background: var(--smrt-color-surface, #ffffff);
-    border-color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-surface);
+    border-color: var(--smrt-color-primary);
     box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
   }
 
@@ -240,7 +242,7 @@ const sizeClasses = {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .search-input__spinner {
@@ -259,12 +261,12 @@ const sizeClasses = {
     border: none;
     background: transparent;
     font-family: inherit;
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     outline: none;
   }
 
   .search-input__field::placeholder {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* Hide default search clear button */
@@ -280,19 +282,19 @@ const sizeClasses = {
     padding: 0;
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .search-input__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);
   }
 
   .search-input__clear:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
 
@@ -355,4 +357,5 @@ const sizeClasses = {
     height: 32px;
     margin-right: var(--smrt-spacing-3, 0.75rem);
   }
+}
 </style>