@happyvertical/smrt-messages 0.55.15 → 0.55.17

package/dist/svelte/components/MailboxDemo.svelte

@@ -52,9 +52,9 @@ function open(message: MessageData) {
   wasRead = true;
 }
 </script>
-<p>{t(M['messages.mailbox_demo.disclaimer'])}</p>
+<p data-smrt-component="MailboxDemo">{t(M['messages.mailbox_demo.disclaimer'])}</p>
 <Button onclick={() => { composing = true; sentSubject = null; }}>{t(M['messages.mailbox_demo.compose'])}</Button>
-{#if sentSubject !== null}<p role="status">{t(M['messages.mailbox_demo.sent'], { subject: sentSubject })}</p>{/if}
+{#if sentSubject !== null}<p role="status" data-smrt-component="MailboxDemo">{t(M['messages.mailbox_demo.sent'], { subject: sentSubject })}</p>{/if}
 {#if composing}
   <ComposeForm {accounts} onsend={send} ondiscard={() => (composing = false)} />
 {:else if selected}

package/dist/svelte/components/MessageCard.svelte

@@ -104,7 +104,7 @@ const _slackMeta = $derived.by(() => {
   class:message-card--unread={!message.isRead}
   class:message-card--compact={compact}
   role="row"
-  aria-selected={selected}
+  aria-selected={selected} data-smrt-component="MessageCard"
 >
   {#if onselect}
     <div class="select-col">
@@ -188,23 +188,25 @@ const _slackMeta = $derived.by(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-card {
     display: flex;
     align-items: stretch;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .message-card:hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .message-card--selected {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
+    background: var(--smrt-color-secondary-container);
   }
 
   .message-card--unread {
-    background: var(--smrt-color-surface, #fefbff);
+    background: var(--smrt-color-surface);
   }
 
   .select-col {
@@ -229,7 +231,7 @@ const _slackMeta = $derived.by(() => {
   }
 
   .message-content:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -249,7 +251,7 @@ const _slackMeta = $derived.by(() => {
 
   .sender-name {
     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);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -261,8 +263,8 @@ const _slackMeta = $derived.by(() => {
 
   .account-label {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-variant);
     padding: 0.125rem 0.375rem;
     border-radius: var(--smrt-radius-small, 0.25rem);
     white-space: nowrap;
@@ -277,7 +279,7 @@ const _slackMeta = $derived.by(() => {
 
   .date {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
   }
 
@@ -290,7 +292,7 @@ const _slackMeta = $derived.by(() => {
 
   .subject {
     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);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -309,7 +311,7 @@ const _slackMeta = $derived.by(() => {
 
   .preview {
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -318,7 +320,7 @@ const _slackMeta = $derived.by(() => {
   .meta-inline {
     flex-shrink: 0;
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /*
@@ -335,7 +337,7 @@ const _slackMeta = $derived.by(() => {
     border: none;
     background: none;
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     opacity: 0.5;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
@@ -351,4 +353,5 @@ const _slackMeta = $derived.by(() => {
   .message-card--compact .preview-row {
     display: none;
   }
+}
 </style>

package/dist/svelte/components/MessageDetail.svelte

@@ -90,7 +90,7 @@ const _displayBody = $derived.by(() => {
 });
 </script>
 
-<article class="message-detail">
+<article class="message-detail" data-smrt-component="MessageDetail">
   <Card padding="lg">
     <header class="detail-header">
       <div class="header-top">
@@ -190,6 +190,8 @@ const _displayBody = $derived.by(() => {
 </article>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-detail {
     max-width: 100%;
   }
@@ -199,7 +201,7 @@ const _displayBody = $derived.by(() => {
     flex-direction: column;
     gap: 0.75rem;
     padding-bottom: 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .header-top {
@@ -211,7 +213,7 @@ const _displayBody = $derived.by(() => {
   .subject {
     margin: 0;
     font: var(--smrt-typography-title-large-font, 600 1.375rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .meta-grid {
@@ -229,12 +231,12 @@ const _displayBody = $derived.by(() => {
   .meta-label {
     flex-shrink: 0;
     width: 4rem;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .meta-value {
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -244,7 +246,7 @@ const _displayBody = $derived.by(() => {
     gap: 1rem;
     padding: 0.75rem 0;
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .type-detail {
@@ -257,7 +259,7 @@ const _displayBody = $derived.by(() => {
 
   .body-text {
     font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     white-space: pre-wrap;
     word-break: break-word;
     margin: 0;
@@ -266,13 +268,13 @@ const _displayBody = $derived.by(() => {
 
   .attachments {
     padding-top: 0.75rem;
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 1px solid var(--smrt-color-outline-variant);
   }
 
   .attachments-label {
     margin: 0 0 0.5rem;
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .attachments-list {
@@ -285,7 +287,7 @@ const _displayBody = $derived.by(() => {
     display: flex;
     gap: 0.5rem;
     padding-top: 1rem;
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 1px solid var(--smrt-color-outline-variant);
   }
 
   /*
@@ -298,24 +300,25 @@ const _displayBody = $derived.by(() => {
    */
   .actions :global(.action-btn) {
     padding: 0.5rem 1rem;
-    border: 1px solid var(--smrt-color-outline, #72787e);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .actions :global(.action-btn):hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .actions :global(.action-btn--danger) {
-    color: var(--smrt-color-error, #ba1a1a);
-    border-color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
 
   .actions :global(.action-btn--danger):hover {
-    background: var(--smrt-color-error-container, #ffdad6);
+    background: var(--smrt-color-error-container);
   }
+}
 </style>

package/dist/svelte/components/MessageFilters.svelte

@@ -89,7 +89,7 @@ const _hasActiveFilters = $derived(
 );
 </script>
 
-<div class="message-filters" role="search" aria-label={t(M['messages.message_filters.filters_label'])}>
+<div class="message-filters" role="search" aria-label={t(M['messages.message_filters.filters_label'])} data-smrt-component="MessageFilters">
   <div class="search-row">
     <Input
       type="search"
@@ -162,13 +162,15 @@ const _hasActiveFilters = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-filters {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.75rem;
-    background: var(--smrt-color-surface, #fefbff);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
   }
 
@@ -223,7 +225,7 @@ const _hasActiveFilters = $derived(
     align-items: center;
     gap: 0.25rem;
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     cursor: pointer;
   }
 
@@ -238,7 +240,8 @@ const _hasActiveFilters = $derived(
     border: none;
     background: none;
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     text-decoration: underline;
   }
+}
 </style>

package/dist/svelte/components/MessageList.svelte

@@ -60,7 +60,7 @@ function getAccount(accountId: string): AccountData | undefined {
 }
 </script>
 
-<div class="message-list" role="grid" aria-label={t(M['messages.message_list.messages_label'])}>
+<div class="message-list" role="grid" aria-label={t(M['messages.message_list.messages_label'])} data-smrt-component="MessageList">
   {#if loading}
     <div class="loading" role="status" aria-live="polite">
       <p>{t(M['messages.message_list.loading'])}</p>
@@ -91,24 +91,27 @@ function getAccount(accountId: string): AccountData | undefined {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-list {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
-    background: var(--smrt-color-surface, #fefbff);
+    background: var(--smrt-color-surface);
   }
 
   .loading,
   .empty {
     text-align: center;
     padding: var(--smrt-spacing-3xl, 3rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .loading p,
   .empty p {
     font: var(--smrt-typography-body-large-font, 1.125rem / 1.5 sans-serif);
   }
+}
 </style>

package/dist/svelte/components/MessageStatusIndicator.svelte

@@ -29,7 +29,7 @@ const {
 }: Props = $props();
 </script>
 
-<span class="status-indicators" role="group" aria-label={t(M['messages.message_status_indicator.status'])}>
+<span class="status-indicators" role="group" aria-label={t(M['messages.message_status_indicator.status'])} data-smrt-component="MessageStatusIndicator">
   {#if !isRead}
     <span class="indicator unread" title={t(M['messages.message_status_indicator.unread'])} aria-label={t(M['messages.message_status_indicator.unread'])}>
       <span class="dot"></span>
@@ -50,6 +50,8 @@ const {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .status-indicators {
     display: inline-flex;
     align-items: center;
@@ -65,23 +67,24 @@ const {
   .unread .dot {
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary, #005ac1);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary);
   }
 
   .flagged {
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
   }
 
   .attachment {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .answered {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .draft {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/svelte/components/MessageToolbar.svelte

@@ -35,7 +35,7 @@ const {
 }: Props = $props();
 </script>
 
-<div class="toolbar" role="toolbar" aria-label={t(M['messages.message_toolbar.actions_label'])}>
+<div class="toolbar" role="toolbar" aria-label={t(M['messages.message_toolbar.actions_label'])} data-smrt-component="MessageToolbar">
   <div class="selection-info">
     {#if selectedCount > 0}
       <span class="count">{t(M['messages.message_toolbar.count_selected'], { selectedCount, totalCount })}</span>
@@ -79,12 +79,14 @@ const {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 0.75rem;
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
     border-radius: var(--smrt-radius-small, 0.25rem);
     gap: 1rem;
     flex-wrap: wrap;
@@ -98,7 +100,7 @@ const {
 
   .count {
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /*
@@ -114,7 +116,7 @@ const {
     border: none;
     background: none;
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     text-decoration: underline;
     padding: 0;
   }
@@ -127,19 +129,20 @@ const {
 
   .actions :global(.action-btn) {
     padding: 0.25rem 0.625rem;
-    border: 1px solid var(--smrt-color-outline, #72787e);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
   }
 
   .actions :global(.action-btn):hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .actions :global(.action-btn--danger) {
-    color: var(--smrt-color-error, #ba1a1a);
-    border-color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/svelte/components/MessageTypeBadge.svelte

@@ -49,6 +49,8 @@ const _variant = $derived.by(() => {
 </Badge>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .type-badge {
     display: inline-flex;
     align-items: center;
@@ -58,4 +60,5 @@ const _variant = $derived.by(() => {
   .type-icon {
     font-size: 0.85em;
   }
+}
 </style>

package/dist/svelte/components/MessagingSettingsPanel.svelte

@@ -239,7 +239,7 @@ async function saveRoute() {
 }
 </script>
 
-<div class="messaging-settings">
+<div class="messaging-settings" data-smrt-component="MessagingSettingsPanel">
   <section>
     <header>
       <div><h3>{t(M['messages.messaging_settings.accounts_title'])}</h3><p>{t(M['messages.messaging_settings.accounts_description'])}</p></div>
@@ -389,19 +389,22 @@ async function saveRoute() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .messaging-settings { display: grid; gap: 1.5rem; }
   section { display: grid; gap: 0.75rem; }
   header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
   h3, h4, p { margin: 0; }
-  header p, small, .secret-note, .empty { color: var(--smrt-color-on-surface-variant, #64748b); }
+  header p, small, .secret-note, .empty { color: var(--smrt-color-on-surface-variant); }
   .items { display: grid; gap: 0.5rem; }
-  :global(.item) { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem; text-align: left; background: var(--smrt-color-surface, #fff); color: inherit; border: 1px solid var(--smrt-color-outline-variant, #e2e8f0); border-radius: 0.5rem; }
+  :global(.item) { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem; text-align: left; background: var(--smrt-color-surface); color: inherit; border: 1px solid var(--smrt-color-outline-variant); border-radius: 0.5rem; }
   :global(.item:not(:disabled)) { cursor: pointer; }
   :global(.item span:first-child) { display: grid; gap: 0.2rem; }
-  .ok { color: var(--smrt-color-success, #15803d); }
-  :global(.editor) { display: grid; gap: 0.65rem; padding: 1rem; border: 1px solid var(--smrt-color-outline-variant, #e2e8f0); border-radius: 0.5rem; background: var(--smrt-color-surface-container-low, #f8fafc); }
+  .ok { color: var(--smrt-color-success); }
+  :global(.editor) { display: grid; gap: 0.65rem; padding: 1rem; border: 1px solid var(--smrt-color-outline-variant); border-radius: 0.5rem; background: var(--smrt-color-surface-container-low); }
   label { font-weight: var(--smrt-typography-weight-semibold, 600); }
   .checkbox { display: flex; align-items: center; gap: 0.5rem; }
   .actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
-  .error { color: var(--smrt-color-error, #b91c1c); }
+  .error { color: var(--smrt-color-error); }
+}
 </style>

package/dist/svelte/components/RecipientInput.svelte

@@ -62,7 +62,7 @@ export interface Props {
   }
 </script>
 
-<div class="recipient-input">
+<div class="recipient-input" data-smrt-component="RecipientInput">
   <label class="label" for={inputId}>{label}</label>
   <div class="chips-container">
     {#each recipients as recipient, i}
@@ -89,26 +89,28 @@ export interface Props {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .recipient-input {
     display: flex;
     align-items: flex-start;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-1, 4px) 0;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-1) 0;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .label {
     font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-label-large-size, 14px);
-    color: var(--smrt-color-on-surface-variant, #49454f);
-    padding-top: var(--smrt-spacing-2, 8px);
+    font-size: var(--smrt-typography-label-large-size);
+    color: var(--smrt-color-on-surface-variant);
+    padding-top: var(--smrt-spacing-2);
     min-width: 32px;
   }
 
   .chips-container {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     flex: 1;
     align-items: center;
   }
@@ -116,18 +118,18 @@ export interface Props {
   .chip {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-sm, 8px);
-    background: var(--smrt-color-secondary-container, #e8def8);
-    color: var(--smrt-color-on-secondary-container, #1d192b);
-    font-size: var(--smrt-typography-label-large-size, 13px);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-1) var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-sm);
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+    font-size: var(--smrt-typography-label-large-size);
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .chip.invalid {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   /*
@@ -140,8 +142,8 @@ export interface Props {
   .chips-container :global(.chip-remove) {
     background: none;
     border: none;
-    padding: 0 var(--smrt-spacing-1, 4px);
-    font-size: var(--smrt-typography-label-large-size, 14px);
+    padding: 0 var(--smrt-spacing-1);
+    font-size: var(--smrt-typography-label-large-size);
     color: inherit;
     opacity: 0.7;
   }
@@ -164,14 +166,15 @@ export interface Props {
     outline: none;
     box-shadow: none;
     font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-body-medium-size, 14px);
-    padding: var(--smrt-spacing-1, 4px) 0;
+    font-size: var(--smrt-typography-body-medium-size);
+    padding: var(--smrt-spacing-1) 0;
     background: transparent;
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .chips-container :global(.recipient-field):focus {
     border: none;
     box-shadow: none;
   }
+}
 </style>