@happyvertical/smrt-chat 0.55.16 → 0.55.18

package/dist/svelte/components/layout/RoomHeader.svelte

@@ -54,7 +54,7 @@ const roomTypeLabel = $derived.by(() => {
 });
 </script>
 
-<header class="room-header" aria-label={t(M['chat.room_header.room_label'], { name: room.name })}>
+<header class="room-header" aria-label={t(M['chat.room_header.room_label'], { name: room.name })} data-smrt-component="RoomHeader">
   <div class="room-header__info">
     <div class="room-header__title-row">
       {#if room.roomType !== 'dm'}
@@ -118,14 +118,16 @@ const roomTypeLabel = $derived.by(() => {
 </header>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .room-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 0.75rem 1rem;
-    background: var(--smrt-color-surface, #fefbff);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     min-height: 3.5rem;
   }
 
@@ -147,14 +149,14 @@ const roomTypeLabel = $derived.by(() => {
     flex-shrink: 0;
     font-size: var(--smrt-typography-title-medium-size, 1.125rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .room-header__avatar {
     flex-shrink: 0;
     width: 1.75rem;
     height: 1.75rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     object-fit: cover;
   }
 
@@ -162,9 +164,9 @@ const roomTypeLabel = $derived.by(() => {
     flex-shrink: 0;
     width: 1.75rem;
     height: 1.75rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary-container, #d6e3ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -174,7 +176,7 @@ const roomTypeLabel = $derived.by(() => {
   .room-header__name {
     margin: 0;
     font: var(--smrt-typography-title-medium-font, 600 1rem / 1.5 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -183,16 +185,16 @@ const roomTypeLabel = $derived.by(() => {
   .room-header__type-badge {
     flex-shrink: 0;
     padding: 0.125rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
   }
 
   .room-header__topic {
     margin: 0;
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 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;
@@ -212,12 +214,12 @@ const roomTypeLabel = $derived.by(() => {
     padding: 0.375rem 0.5rem;
     background: none;
     border-radius: var(--smrt-radius-medium, 0.5rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .room-header__actions :global(.header-btn:hover) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .header-btn__icon {
@@ -227,7 +229,7 @@ const roomTypeLabel = $derived.by(() => {
 
   .header-btn__count {
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -235,4 +237,5 @@ const roomTypeLabel = $derived.by(() => {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/layout/RoomList.svelte

@@ -69,7 +69,7 @@ function formatTimestamp(date?: string | Date | null): string {
 }
 </script>
 
-<nav class="room-list" aria-label={t(M['chat.room_list.rooms_label'])}>
+<nav class="room-list" aria-label={t(M['chat.room_list.rooms_label'])} data-smrt-component="RoomList">
   {#if oncreateroom}
     <div class="room-list__header">
       <Button
@@ -245,6 +245,8 @@ function formatTimestamp(date?: string | Date | null): string {
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .room-list {
     display: flex;
     flex-direction: column;
@@ -259,16 +261,16 @@ function formatTimestamp(date?: string | Date | null): string {
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
   .room-list__header :global(.create-room-btn) {
     padding: 0.5rem 0.75rem;
-    border: 1px dashed var(--smrt-color-outline, #74777f);
+    border: 1px dashed var(--smrt-color-outline);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     background: transparent;
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .room-list__header :global(.create-room-btn:hover) {
-    background: var(--smrt-color-primary-container, #d6e3ff);
+    background: var(--smrt-color-primary-container);
   }
 
   .room-group {
@@ -285,13 +287,13 @@ function formatTimestamp(date?: string | Date | null): string {
     background: none;
     cursor: pointer;
     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);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
   }
 
   .room-group__header:hover {
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .room-group__chevron {
@@ -309,7 +311,7 @@ function formatTimestamp(date?: string | Date | null): string {
   }
 
   .room-group__count {
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
   }
 
@@ -329,18 +331,18 @@ function formatTimestamp(date?: string | Date | null): string {
     background: none;
     cursor: pointer;
     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);
     text-align: left;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .room-item:hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .room-item--active {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
+    background: var(--smrt-color-secondary-container);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
@@ -349,7 +351,7 @@ function formatTimestamp(date?: string | Date | null): string {
   }
 
   .room-item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -357,7 +359,7 @@ function formatTimestamp(date?: string | Date | null): string {
     flex-shrink: 0;
     width: 1.25rem;
     text-align: center;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
@@ -372,7 +374,7 @@ function formatTimestamp(date?: string | Date | null): string {
     flex-shrink: 0;
     width: 2rem;
     height: 2rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     object-fit: cover;
   }
 
@@ -380,9 +382,9 @@ function formatTimestamp(date?: string | Date | null): string {
     flex-shrink: 0;
     width: 2rem;
     height: 2rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary-container, #d6e3ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -406,7 +408,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   .room-item__preview {
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 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;
@@ -422,7 +424,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   .room-item__time {
     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);
   }
 
   .unread-badge {
@@ -432,9 +434,9 @@ function formatTimestamp(date?: string | Date | null): 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;
   }
@@ -447,7 +449,7 @@ function formatTimestamp(date?: string | Date | null): string {
     gap: 0.5rem;
     padding: 2rem 1rem;
     text-align: center;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .room-list__empty p {
@@ -458,7 +460,7 @@ function formatTimestamp(date?: string | Date | null): string {
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
   .room-list__empty :global(.create-link) {
     background: none;
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
     text-decoration: underline;
   }
@@ -477,4 +479,5 @@ function formatTimestamp(date?: string | Date | null): string {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/messages/MessageInput.svelte

@@ -60,7 +60,7 @@ function handleInput(event: Event) {
 }
 </script>
 
-<div class="message-input" class:disabled>
+<div class="message-input" class:disabled data-smrt-component="MessageInput">
   {#if replyTo}
     <div class="message-input__reply">
       <div class="message-input__reply-body">
@@ -115,11 +115,13 @@ function handleInput(event: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-input {
     display: flex;
     flex-direction: column;
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    background: var(--smrt-color-surface, #ffffff);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
   }
 
   .message-input.disabled {
@@ -132,29 +134,29 @@ function handleInput(event: Event) {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.375rem);
     padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    background: var(--smrt-color-surface-container-low);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .message-input__reply-body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     min-width: 0;
-    border-left: 2px solid var(--smrt-color-primary, #005ac1);
+    border-left: 2px solid var(--smrt-color-primary);
     padding-left: var(--smrt-spacing-2, 0.375rem);
   }
 
   .message-input__reply-name {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .message-input__reply-text {
     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);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -170,13 +172,13 @@ function handleInput(event: Event) {
     border: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     flex-shrink: 0;
   }
 
   .message-input__reply-close:hover {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .message-input__bar {
@@ -205,21 +207,22 @@ function handleInput(event: Event) {
     height: 36px;
     padding: 0;
     border: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     cursor: pointer;
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .message-input__send:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--smrt-color-primary, #005ac1) 85%, var(--smrt-color-shadow, #000));
+    background: color-mix(in srgb, var(--smrt-color-primary) 85%, var(--smrt-color-shadow));
   }
 
   .message-input__send:disabled {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
-    color: var(--smrt-color-outline, #74777f);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-outline);
     cursor: default;
   }
+}
 </style>

package/dist/svelte/components/messages/MessageItem.svelte

@@ -110,7 +110,7 @@ function handleEscape(event: KeyboardEvent) {
 />
 
 {#if message.messageType === 'system' || message.messageType === 'action'}
-  <div class="message-item message-item--system">
+  <div class="message-item message-item--system" data-smrt-component="MessageItem">
     <MessageBubble content={message.content} own={false} variant="system" />
   </div>
 {:else}
@@ -121,7 +121,7 @@ function handleEscape(event: KeyboardEvent) {
     aria-label={t(M['chat.message_item.message_from'], { name: message.senderName })}
     onmouseenter={() => showActions = true}
     onmouseleave={() => { showActions = false; showReactionPicker = false; }}
-    onfocusout={handleFocusOut}
+    onfocusout={handleFocusOut} data-smrt-component="MessageItem"
   >
     {#if !isOwn}
       <div class="message-item__avatar">
@@ -279,6 +279,8 @@ function handleEscape(event: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-item {
     display: flex;
     align-items: flex-start;
@@ -316,18 +318,18 @@ function handleEscape(event: KeyboardEvent) {
   .message-item__sender {
     font-size: var(--smrt-typography-body-small-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);
     padding-left: var(--smrt-spacing-1, 0.25rem);
   }
 
   .message-item__reply-preview {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
-    border-left: 2px solid var(--smrt-color-primary, #005ac1);
+    border-left: 2px solid var(--smrt-color-primary);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     max-width: 100%;
     overflow: hidden;
@@ -335,11 +337,11 @@ function handleEscape(event: KeyboardEvent) {
 
   .message-item__reply-name {
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .message-item__reply-text {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -350,7 +352,7 @@ function handleEscape(event: KeyboardEvent) {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.375rem);
     padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
     border-radius: var(--smrt-radius-small, 0.25rem);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
@@ -358,11 +360,11 @@ function handleEscape(event: KeyboardEvent) {
 
   .message-item__tool-name {
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .message-item__tool-status {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     border-radius: var(--smrt-radius-small, 0.25rem);
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     text-transform: uppercase;
@@ -370,31 +372,31 @@ function handleEscape(event: KeyboardEvent) {
   }
 
   .message-item__tool-status.pending {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .message-item__tool-status.running {
-    background: var(--smrt-color-primary-container, #e3f2fd);
-    color: var(--smrt-color-on-primary-container, #1565c0);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .message-item__tool-status.success {
-    background: var(--smrt-color-success-container, #e8f5e9);
-    color: var(--smrt-color-on-success-container, #2e7d32);
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-on-success-container);
   }
 
   .message-item__tool-status.error {
-    background: var(--smrt-color-error-container, #ffebee);
-    color: var(--smrt-color-on-error-container, #c62828);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   .message-item__tool-duration {
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .message-item__tool-error {
-    color: var(--smrt-color-on-error-container, #c62828);
+    color: var(--smrt-color-on-error-container);
   }
 
   .message-item__reactions {
@@ -405,22 +407,22 @@ function handleEscape(event: KeyboardEvent) {
 
   /* :global() pierces into each Button's rendered <button> (see #1589). */
   .message-item__reactions :global(.message-item__reaction) {
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface, #ffffff);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .message-item__reactions :global(.message-item__reaction:hover) {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .message-item__reactions :global(.message-item__reaction--active) {
-    border-color: var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-primary-container, #d6e3ff);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   .message-item__reaction-emoji {
@@ -430,7 +432,7 @@ function handleEscape(event: KeyboardEvent) {
 
   .message-item__reaction-count {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .message-item__meta {
@@ -442,12 +444,12 @@ function handleEscape(event: KeyboardEvent) {
 
   .message-item__time {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .message-item__edited {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     font-style: italic;
   }
 
@@ -459,10 +461,10 @@ function handleEscape(event: KeyboardEvent) {
     position: absolute;
     top: 0;
     right: var(--smrt-spacing-4, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface-variant);
     opacity: 0;
     transition: opacity var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
@@ -482,7 +484,7 @@ function handleEscape(event: KeyboardEvent) {
 
   .message-item :global(.message-item__more-btn:focus-visible) {
     opacity: 1;
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 1px;
   }
 
@@ -495,14 +497,14 @@ function handleEscape(event: KeyboardEvent) {
   .message-item__actions {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     position: absolute;
     top: 0;
     right: var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    padding: var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12));
     z-index: 1;
   }
@@ -519,12 +521,12 @@ function handleEscape(event: KeyboardEvent) {
     padding: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .message-item__actions :global(.message-item__action-btn:hover) {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .message-item__picker-popover {
@@ -551,4 +553,5 @@ function handleEscape(event: KeyboardEvent) {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/messages/MessageList.svelte

@@ -68,7 +68,7 @@ function handleScroll(event: Event) {
   bind:this={scrollContainer}
   onscroll={handleScroll}
   role="log"
-  aria-label={t(M['chat.message_list.messages_label'])}
+  aria-label={t(M['chat.message_list.messages_label'])} data-smrt-component="MessageList"
 >
   {#if messages.length === 0}
     <div class="message-list__empty">
@@ -92,6 +92,8 @@ function handleScroll(event: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .message-list {
     display: flex;
     flex-direction: column;
@@ -107,7 +109,7 @@ function handleScroll(event: Event) {
     align-items: center;
     justify-content: center;
     flex: 1;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
   }
 
@@ -121,9 +123,10 @@ function handleScroll(event: Event) {
   .message-list__date-label {
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-full);
     white-space: nowrap;
   }
+}
 </style>