@happyvertical/smrt-messages 0.55.15 → 0.55.17

package/dist/svelte/components/EmailAccountManager.svelte

@@ -172,7 +172,7 @@ function getProviderLabel(type: string): string {
 }
 </script>
 
-<div class="email-account-manager">
+<div class="email-account-manager" data-smrt-component="EmailAccountManager">
   <div class="section-header-row">
     <div class="section-description">
       {t(M['messages.email_account_manager.section_description'])}
@@ -367,6 +367,8 @@ function getProviderLabel(type: string): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .email-account-manager {
     display: flex;
     flex-direction: column;
@@ -382,7 +384,7 @@ function getProviderLabel(type: string): string {
 
   .section-description {
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /*
@@ -392,14 +394,14 @@ function getProviderLabel(type: string): string {
    * keeps its place in the header row (issue #1589).
    */
   .section-header-row :global(.add-btn) {
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     flex-shrink: 0;
   }
 
   .entry-form {
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border: 1px solid var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-md);
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -409,13 +411,13 @@ function getProviderLabel(type: string): string {
   .form-title {
     font-size: var(--smrt-typography-title-small-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .form-section-label {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.05em);
     padding-top: 0.25rem;
@@ -436,7 +438,7 @@ function getProviderLabel(type: string): string {
   .form-label {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /*
@@ -458,12 +460,12 @@ function getProviderLabel(type: string): string {
     gap: 0.5rem;
     cursor: pointer;
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
   }
 
   .checkbox-label input[type="checkbox"] {
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   .form-actions {
@@ -481,17 +483,17 @@ function getProviderLabel(type: string): string {
    */
   .form-actions :global(.cancel-btn),
   .form-actions :global(.save-btn) {
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
   }
 
   .form-actions :global(.cancel-btn) {
-    border-color: var(--smrt-color-outline-variant, #c2c7cf);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-color: var(--smrt-color-outline-variant);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .test-result {
     padding: 0.5rem 0.75rem;
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     display: flex;
     align-items: center;
@@ -499,13 +501,13 @@ function getProviderLabel(type: string): string {
   }
 
   .test-result.success {
-    background: var(--smrt-color-success-container, #dcfce7);
-    color: var(--smrt-color-success, #16a34a);
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-success);
   }
 
   .test-result.failure {
-    background: var(--smrt-color-error-container, #fce4ec);
-    color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
   }
 
   /*
@@ -532,25 +534,25 @@ function getProviderLabel(type: string): string {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md);
     padding: 0.75rem 1rem;
     cursor: pointer;
     transition: background 150ms ease, border-color 150ms ease;
   }
 
   .entry-card:hover {
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .entry-card.mail-account:hover {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
   }
 
   .entry-card.editing {
-    border-color: var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .entry-card.inactive {
@@ -576,10 +578,10 @@ function getProviderLabel(type: string): string {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     font-family: var(--smrt-font-family-mono, monospace);
-    background: var(--smrt-color-surface, #fefbff);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     padding: 0.25rem 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     flex-shrink: 0;
     min-width: 2rem;
     text-align: center;
@@ -590,8 +592,8 @@ function getProviderLabel(type: string): string {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
-    background: var(--smrt-color-primary-container, #d8e2ff);
-    color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-primary);
     border-color: transparent;
     min-width: 3rem;
   }
@@ -614,25 +616,25 @@ function getProviderLabel(type: string): string {
 
   .entry-description {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .host-tag {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-family: var(--smrt-font-family-mono, monospace);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface, #fefbff);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface);
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     flex-shrink: 0;
   }
 
   .inactive-tag {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container-high);
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
   }
 
@@ -645,40 +647,41 @@ function getProviderLabel(type: string): string {
    */
   .entry-actions :global(.test-btn) {
     padding: 0.25rem 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
+    border-radius: var(--smrt-radius-sm);
+    border: 1px solid var(--smrt-color-outline-variant);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
   }
 
   .entry-actions :global(.test-btn):hover:not(:disabled) {
-    border-color: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
+    color: var(--smrt-color-primary);
   }
 
   .entry-actions :global(.delete-btn) {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: 1;
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     border: 1px solid transparent;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     flex-shrink: 0;
   }
 
   .entry-actions :global(.delete-btn):hover {
-    background: var(--smrt-color-error-container, #fce4ec);
-    color: var(--smrt-color-error, #ba1a1a);
-    border-color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
 
   .placeholder {
     padding: 2rem;
     text-align: center;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border-radius: var(--smrt-radius-md, 8px);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-md);
   }
+}
 </style>

package/dist/svelte/components/EmailFilterManager.svelte

@@ -165,7 +165,7 @@ function getPatternPlaceholder(type: string): string {
 }
 </script>
 
-<div class="email-filter-manager">
+<div class="email-filter-manager" data-smrt-component="EmailFilterManager">
   <div class="section-toggle">
     <Button
       variant={activeSection === 'whitelist' ? 'primary' : 'ghost'}
@@ -408,6 +408,8 @@ function getPatternPlaceholder(type: string): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .email-filter-manager {
     display: flex;
     flex-direction: column;
@@ -417,9 +419,9 @@ function getPatternPlaceholder(type: string): string {
   .section-toggle {
     display: flex;
     gap: 0.25rem;
-    background: var(--smrt-color-surface-container, #f0f1f9);
+    background: var(--smrt-color-surface-container);
     padding: 0.25rem;
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
   }
 
   /*
@@ -433,15 +435,15 @@ function getPatternPlaceholder(type: string): string {
     display: flex;
     align-items: center;
     gap: 0.375rem;
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     font-size: var(--smrt-typography-label-large-size, 0.8125rem);
   }
 
   .count {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    background: var(--smrt-color-outline-variant, #c2c7cf);
+    background: var(--smrt-color-outline-variant);
     padding: 0.0625rem 0.375rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .section-content {
@@ -459,7 +461,7 @@ function getPatternPlaceholder(type: string): string {
 
   .section-description {
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /*
@@ -468,14 +470,14 @@ function getPatternPlaceholder(type: string): string {
    * :global(.add-btn)` only re-asserts radius and flex-shrink (issue #1589).
    */
   .section-header-row :global(.add-btn) {
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     flex-shrink: 0;
   }
 
   .entry-form {
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border: 1px solid var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-md);
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -485,7 +487,7 @@ function getPatternPlaceholder(type: string): string {
   .form-title {
     font-size: var(--smrt-typography-title-small-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .form-row {
@@ -503,7 +505,7 @@ function getPatternPlaceholder(type: string): string {
   .form-label {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .optional {
@@ -530,12 +532,12 @@ function getPatternPlaceholder(type: string): string {
     gap: 0.5rem;
     cursor: pointer;
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
   }
 
   .checkbox-label input[type="checkbox"] {
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   .form-actions {
@@ -553,12 +555,12 @@ function getPatternPlaceholder(type: string): string {
    */
   .form-actions :global(.cancel-btn),
   .form-actions :global(.save-btn) {
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
   }
 
   .form-actions :global(.cancel-btn) {
-    border-color: var(--smrt-color-outline-variant, #c2c7cf);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-color: var(--smrt-color-outline-variant);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .entries-list {
@@ -571,23 +573,23 @@ function getPatternPlaceholder(type: string): string {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md);
     padding: 0.75rem 1rem;
     transition: background 150ms ease, border-color 150ms ease;
   }
 
   .entry-card:hover {
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .entry-card.allow:hover {
-    border-color: var(--smrt-color-success, #16a34a);
+    border-color: var(--smrt-color-success);
   }
 
   .entry-card.block:hover {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .entry-main {
@@ -602,10 +604,10 @@ function getPatternPlaceholder(type: string): string {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     font-family: var(--smrt-font-family-mono, monospace);
-    background: var(--smrt-color-surface, #fefbff);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     padding: 0.25rem 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     flex-shrink: 0;
     min-width: 2rem;
     text-align: center;
@@ -629,24 +631,24 @@ function getPatternPlaceholder(type: string): string {
 
   .entry-description {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .category-tag {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-tertiary, #6b5778);
-    background: var(--smrt-color-tertiary-container, #f2daff);
+    color: var(--smrt-color-tertiary);
+    background: var(--smrt-color-tertiary-container);
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
   }
 
   .auto-archive-tag {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-warning, #ca8a04);
-    background: var(--smrt-color-warning-container, #fef9c3);
+    color: var(--smrt-color-warning);
+    background: var(--smrt-color-warning-container);
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
   }
 
@@ -660,25 +662,25 @@ function getPatternPlaceholder(type: string): string {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: 1;
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     border: 1px solid transparent;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     flex-shrink: 0;
   }
 
   .entry-card :global(.delete-btn):hover {
-    background: var(--smrt-color-error-container, #fce4ec);
-    color: var(--smrt-color-error, #ba1a1a);
-    border-color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
 
   .placeholder {
     padding: 2rem;
     text-align: center;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-container, #f0f1f9);
-    border-radius: var(--smrt-radius-md, 8px);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-md);
   }
 
   .filter-error {
@@ -687,9 +689,9 @@ function getPatternPlaceholder(type: string): string {
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border-radius: var(--smrt-radius-md, 8px);
-    background: var(--smrt-color-error-container, #fce4ec);
-    color: var(--smrt-color-error, #ba1a1a);
+    border-radius: var(--smrt-radius-md);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
   }
 
@@ -706,4 +708,5 @@ function getPatternPlaceholder(type: string): string {
     color: inherit;
     padding: 0 0.25rem;
   }
+}
 </style>

package/dist/svelte/components/FolderNav.svelte

@@ -50,7 +50,7 @@ function getFolderIcon(specialUse?: string): string {
 }
 </script>
 
-<nav class="folder-nav" aria-label={t(M['messages.folder_nav.folders'])}>
+<nav class="folder-nav" aria-label={t(M['messages.folder_nav.folders'])} data-smrt-component="FolderNav">
   {#if _systemFolders.length > 0}
     <ul class="folder-list" role="list">
       {#each _systemFolders as folder (folder.id)}
@@ -100,6 +100,8 @@ function getFolderIcon(specialUse?: string): string {
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .folder-nav {
     display: flex;
     flex-direction: column;
@@ -128,23 +130,23 @@ function getFolderIcon(specialUse?: string): string {
     border: none;
     background: none;
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     border-radius: var(--smrt-radius-small, 0.25rem);
     transition: background var(--smrt-duration-short2, 150ms);
     text-align: left;
   }
 
   .folder-list :global(.folder-item):hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .folder-list :global(.folder-item--active) {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
+    background: var(--smrt-color-secondary-container);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .folder-list :global(.folder-item):focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -167,16 +169,17 @@ function getFolderIcon(specialUse?: string): string {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #fff);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
     padding: 0 0.25rem;
   }
 
   .divider {
     border: none;
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 1px solid var(--smrt-color-outline-variant);
     margin: 0.25rem 0.75rem;
   }
+}
 </style>

package/dist/svelte/components/ForwardForm.svelte

@@ -63,7 +63,7 @@ export interface Props {
   }
 </script>
 
-<div class="forward-form">
+<div class="forward-form" data-smrt-component="ForwardForm">
   <div class="forward-header">{t(M['messages.forward_form.header'])}</div>
 
   <RecipientInput
@@ -103,50 +103,52 @@ export interface Props {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .forward-form {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-3, 12px);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
-    border-radius: var(--smrt-radius-md, 12px);
-    background: var(--smrt-color-surface, #fffbfe);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-3);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md);
+    background: var(--smrt-color-surface);
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .forward-header {
-    font-size: var(--smrt-typography-title-small-size, 13px);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-size: var(--smrt-typography-title-small-size);
+    color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .forwarded-original {
-    padding: var(--smrt-spacing-2, 8px);
-    background: var(--smrt-color-surface-variant, #e7e0ec);
-    border-radius: var(--smrt-radius-sm, 8px);
+    padding: var(--smrt-spacing-2);
+    background: var(--smrt-color-surface-variant);
+    border-radius: var(--smrt-radius-sm);
     max-height: 300px;
     overflow-y: auto;
   }
 
   .forwarded-text {
     margin: 0;
-    font-size: var(--smrt-typography-body-small-size, 12px);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-size: var(--smrt-typography-body-small-size);
+    color: var(--smrt-color-on-surface-variant);
     white-space: pre-wrap;
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .send-error {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-sm, 8px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
-    font-size: var(--smrt-typography-body-small-size, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-sm);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+    font-size: var(--smrt-typography-body-small-size);
   }
 
   .actions {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   /*
@@ -156,6 +158,7 @@ export interface Props {
    * issue #1589.
    */
   .actions :global(.btn-text) {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>