@happyvertical/smrt-svelte 0.55.16 → 0.55.17

package/dist/components/forms/AddressInput.svelte

@@ -395,7 +395,7 @@ function handleCountryChange(e: Event) {
 }
 </script>
 
-  <div class="smrt-address" data-smrt-field-owner={fieldOwnerToken}>
+  <div class="smrt-address" data-smrt-field-owner={fieldOwnerToken} data-smrt-component="AddressInput">
   {#if label}
     <FieldLabel for={primaryFieldId} {label} {required} />
   {/if}
@@ -517,36 +517,38 @@ function handleCountryChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-address {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .address-fields {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-3, 12px);
-    padding: var(--smrt-spacing-4, 16px);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-radius: var(--smrt-radius-medium, 8px);
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
   }
 
   .address-fields.smrt-mode {
-    border-color: var(--smrt-color-tertiary, #6b5778);
-    background: var(--smrt-color-tertiary-container, #f3e5f5);
+    border-color: var(--smrt-color-tertiary);
+    background: var(--smrt-color-tertiary-container);
   }
 
   .field-row {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .field-row-group {
     display: flex;
-    gap: var(--smrt-spacing-3, 12px);
+    gap: var(--smrt-spacing-3);
   }
 
   .full-width {
@@ -564,33 +566,33 @@ function handleCountryChange(e: Event) {
   .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;
   }
 
   .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;
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-select {
@@ -599,8 +601,8 @@ function handleCountryChange(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);
   }
 
   @media (max-width: 600px) {
@@ -608,4 +610,5 @@ function handleCountryChange(e: Event) {
       flex-direction: column;
     }
   }
+}
 </style>

package/dist/components/forms/CheckboxInput.svelte

@@ -110,7 +110,7 @@ function handleChange(e: Event) {
 }
 </script>
 
-<div class="smrt-checkbox-field" class:disabled class:smrt-mode={isSmrt}>
+<div class="smrt-checkbox-field" class:disabled class:smrt-mode={isSmrt} data-smrt-component="CheckboxInput">
   <div class="container" use:ripple>
     <input
       type="checkbox"
@@ -140,11 +140,13 @@ function handleChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-checkbox-field {
     display: inline-flex;
     min-width: 0;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     cursor: pointer;
     vertical-align: middle;
     user-select: none;
@@ -157,7 +159,7 @@ function handleChange(e: Event) {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     margin: -10px; /* Offset the 40x40 container to align 18x18 checkbox */
   }
 
@@ -175,7 +177,7 @@ function handleChange(e: Event) {
     width: 18px;
     height: 18px;
     border: 2px solid var(--smrt-color-on-surface-variant);
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -226,7 +228,7 @@ function handleChange(e: Event) {
     left: 0;
     right: 0;
     bottom: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     pointer-events: none;
     transition: opacity var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
   }
@@ -235,4 +237,5 @@ function handleChange(e: Event) {
     background-color: var(--smrt-color-on-surface);
     opacity: 0.08;
   }
+}
 </style>

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>