@happyvertical/smrt-chat 0.55.16 → 0.55.17

package/dist/svelte/components/assistant/captions/SpokenCaptions.svelte

@@ -35,7 +35,7 @@ const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
 </script>
 
 {#snippet surface()}
-  <section class="spoken-captions" aria-label={speakerLabel}>
+  <section class="spoken-captions" aria-label={speakerLabel} data-smrt-component="SpokenCaptions">
     <p class="speaker"><span aria-hidden="true">◈</span> {speakerLabel}</p>
     <div class="caption-lines" aria-live={announce ? 'polite' : 'off'} aria-atomic="false">
       {#each visibleLines as line (line.id)}
@@ -57,9 +57,12 @@ const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
 {/if}
 
 <style>
-  .spoken-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .7rem .9rem; border: 2px solid var(--smrt-color-outline, #533b72); background: var(--smrt-color-inverse-surface, #221c2c); color: var(--smrt-color-inverse-on-surface, #fff7ff); border-radius: 1rem; box-shadow: var(--smrt-elevation-4, 0 .35rem 1.2rem color-mix(in srgb, var(--smrt-color-shadow, black) 28%, transparent)); }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .spoken-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .7rem .9rem; border: 2px solid var(--smrt-color-outline); background: var(--smrt-color-inverse-surface); color: var(--smrt-color-inverse-on-surface); border-radius: 1rem; box-shadow: var(--smrt-elevation-4, 0 .35rem 1.2rem color-mix(in srgb, var(--smrt-color-shadow, black) 28%, transparent)); }
   .speaker { margin: 0 0 .3rem; font-weight: var(--smrt-typography-weight-bold, 700); font-size: var(--smrt-typography-label-medium-size, .8rem); }
   .caption-lines p, .interim { margin: .18rem 0 0; }
   .interim { opacity: .8; }
   @media (prefers-reduced-motion: reduce) { .spoken-captions { scroll-behavior: auto; } }
+}
 </style>

package/dist/svelte/components/dialogs/RoomCreateDialog.svelte

@@ -181,6 +181,8 @@ $effect(() => {
 </Modal>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
   :global(.dialog__form) {
     display: flex;
@@ -211,16 +213,16 @@ $effect(() => {
 
   .field__label {
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .field__required {
-    color: var(--smrt-color-error, #b3261e);
+    color: var(--smrt-color-error);
   }
 
   .field__hint {
     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);
     text-align: right;
   }
 
@@ -235,7 +237,7 @@ $effect(() => {
     align-items: flex-start;
     gap: 0.75rem;
     padding: 0.75rem;
-    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);
     cursor: pointer;
     transition: border-color var(--smrt-duration-short2, 150ms),
@@ -243,17 +245,17 @@ $effect(() => {
   }
 
   .type-option:hover {
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
   }
 
   .type-option--selected {
-    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);
   }
 
   .type-option__radio {
     margin-top: 0.125rem;
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   .type-option__content {
@@ -264,13 +266,13 @@ $effect(() => {
 
   .type-option__label {
     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);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .type-option__description {
     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);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -278,4 +280,5 @@ $effect(() => {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/dialogs/SearchMessages.svelte

@@ -113,7 +113,7 @@ $effect(() => {
   <div
     class="search-panel"
     role="search"
-    aria-label={t(M['chat.search_messages.search'])}
+    aria-label={t(M['chat.search_messages.search'])} data-smrt-component="SearchMessages"
   >
     <div class="search-panel__header">
       <h2 class="search-panel__title">{t(M['chat.search_messages.title'])}</h2>
@@ -221,13 +221,15 @@ $effect(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .search-panel {
     display: flex;
     flex-direction: column;
     width: 320px;
     height: 100%;
-    background: var(--smrt-color-surface, #fefbff);
-    border-left: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface);
+    border-left: 1px solid var(--smrt-color-outline-variant);
     overflow: hidden;
   }
 
@@ -236,13 +238,13 @@ $effect(() => {
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .search-panel__title {
     margin: 0;
     font: var(--smrt-typography-title-small-font, 600 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
@@ -252,12 +254,12 @@ $effect(() => {
     padding: 0;
     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);
   }
 
   .search-panel__header :global(.close-btn:hover) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .close-btn__icon {
@@ -268,7 +270,7 @@ $effect(() => {
   /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
   :global(.search-form) {
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .search-input-wrap {
@@ -276,22 +278,22 @@ $effect(() => {
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline, #74777f);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-large, 1rem);
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
     transition: border-color var(--smrt-duration-short2, 150ms);
   }
 
   .search-input-wrap:focus-within {
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 1px var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 1px var(--smrt-color-primary);
   }
 
   .search-icon {
     flex-shrink: 0;
     width: 1.125rem;
     height: 1.125rem;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* The Input primitive sits inside the bordered .search-input-wrap, which owns
@@ -305,7 +307,7 @@ $effect(() => {
     background: transparent;
     box-shadow: 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);
   }
 
   :global(.search-input:focus) {
@@ -321,13 +323,13 @@ $effect(() => {
     height: 1.25rem;
     padding: 0;
     background: none;
-    border-radius: var(--smrt-radius-full, 9999px);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-radius: var(--smrt-radius-full);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .search-input-wrap :global(.clear-btn:hover) {
     background: none;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .clear-btn__icon {
@@ -356,7 +358,7 @@ $effect(() => {
     margin: 0;
     padding: 0.375rem 1rem;
     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: 0.05em;
   }
@@ -375,11 +377,11 @@ $effect(() => {
   }
 
   .result-item:hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .result-item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -392,16 +394,16 @@ $effect(() => {
   .result-item__avatar {
     width: 1.25rem;
     height: 1.25rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     object-fit: cover;
   }
 
   .result-item__avatar-placeholder {
     width: 1.25rem;
     height: 1.25rem;
-    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;
@@ -410,19 +412,19 @@ $effect(() => {
 
   .result-item__sender {
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .result-item__date {
     margin-left: auto;
     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);
   }
 
   .result-item__content {
     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;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -431,9 +433,9 @@ $effect(() => {
   }
 
   .result-item__content :global(.highlight) {
-    background: var(--smrt-color-tertiary-container, #c2f0dd);
-    color: var(--smrt-color-on-tertiary-container, #002114);
-    border-radius: var(--smrt-radius-sm, 4px);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
+    border-radius: var(--smrt-radius-sm);
     padding: 0 0.125rem;
   }
 
@@ -450,13 +452,13 @@ $effect(() => {
   .search-empty__text {
     margin: 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);
   }
 
   .search-empty__hint {
     margin: 0;
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -469,4 +471,5 @@ $effect(() => {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/helper/HelperControlPanel.svelte

@@ -338,7 +338,7 @@ async function customSaved(offering: HelperOffering) {
 }
 </script>
 
-<section class="helper-panel" aria-busy={loading || saving} aria-labelledby="helper-panel-title">
+<section class="helper-panel" aria-busy={loading || saving} aria-labelledby="helper-panel-title" data-smrt-component="HelperControlPanel">
   <h2 id="helper-panel-title">{t(M['chat.helper.title'])}</h2>
   {#if message}<p class="message" role={messageIsError ? 'alert' : 'status'} aria-live={messageIsError ? 'assertive' : 'polite'}>{message}</p>{/if}
   {#if snapshot?.recovery}<p class="message" role="status">{snapshot.recovery.message}</p>{/if}
@@ -387,6 +387,8 @@ async function customSaved(offering: HelperOffering) {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .helper-panel { display: grid; gap: var(--smrt-spacing-4); max-width: 42rem; padding: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
   fieldset { display: grid; gap: var(--smrt-spacing-3); border: 0; margin: 0; padding: 0; }
   label { display: grid; gap: var(--smrt-spacing-1); font: var(--smrt-typography-label-large-font); }
@@ -398,4 +400,5 @@ async function customSaved(offering: HelperOffering) {
   .setup-actions, .actions { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-2); }
   .custom-setup { display: grid; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); }
   .message { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

package/dist/svelte/components/layout/ChatLayout.svelte

@@ -58,10 +58,10 @@ function handlePointerUp() {
 }
 </script>
 
-<div class="chat-layout" class:chat-layout--resizing={isResizing}>
+<div class="chat-layout" class:chat-layout--resizing={isResizing} data-smrt-component="ChatLayout">
   <aside
     class="chat-layout__sidebar"
-    style:width="{sidebarWidth}px"
+    style:--smrt-chat-layout-sidebar-width="{sidebarWidth}px"
     aria-label={t(M['chat.chat_layout.rooms_label'])}
   >
     <RoomList
@@ -92,13 +92,15 @@ function handlePointerUp() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chat-layout {
     display: flex;
     height: 100%;
     width: 100%;
     overflow: hidden;
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .chat-layout--resizing {
@@ -108,10 +110,11 @@ function handlePointerUp() {
 
   .chat-layout__sidebar {
     flex-shrink: 0;
+    width: var(--smrt-chat-layout-sidebar-width);
     display: flex;
     flex-direction: column;
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    border-right: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface-container);
+    border-right: 1px solid var(--smrt-color-outline-variant);
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -128,12 +131,12 @@ function handlePointerUp() {
 
   .chat-layout__resize-handle:hover,
   .chat-layout__resize-handle:active {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     opacity: 0.4;
   }
 
   .chat-layout__resize-handle:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -151,14 +154,15 @@ function handlePointerUp() {
     }
 
     .chat-layout__sidebar {
-      width: 100% !important;
+      width: 100%;
       max-height: 14rem;
       border-right: 0;
-      border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+      border-bottom: 1px solid var(--smrt-color-outline-variant);
     }
 
     .chat-layout__resize-handle {
       display: none;
     }
   }
+}
 </style>

package/dist/svelte/components/layout/MemberList.svelte

@@ -36,13 +36,13 @@ function getStatusColor(status: string): string {
     // "online" reconciled to the success token (was --smrt-color-tertiary)
     // so it matches UserPresence and stays semantically green (T2 #1391).
     case 'online':
-      return 'var(--smrt-color-success, #1e8e3e)';
+      return 'var(--smrt-color-success)';
     case 'away':
-      return 'var(--smrt-color-warning, #f9ab00)';
+      return 'var(--smrt-color-warning)';
     case 'dnd':
-      return 'var(--smrt-color-error, #b3261e)';
+      return 'var(--smrt-color-error)';
     default:
-      return 'var(--smrt-color-outline, #74777f)';
+      return 'var(--smrt-color-outline)';
   }
 }
 
@@ -71,7 +71,7 @@ function getRoleBadgeLabel(role: string): string {
 }
 </script>
 
-<aside class="member-list" aria-label={t(M['chat.member_list.room_members'])}>
+<aside class="member-list" aria-label={t(M['chat.member_list.room_members'])} data-smrt-component="MemberList">
   <div class="member-list__header">
     <h2 class="member-list__title">Members</h2>
     <span class="member-list__count">{participants.length}</span>
@@ -209,13 +209,15 @@ function getRoleBadgeLabel(role: string): string {
 </aside>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .member-list {
     display: flex;
     flex-direction: column;
     width: 240px;
     height: 100%;
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    border-left: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface-container);
+    border-left: 1px solid var(--smrt-color-outline-variant);
     overflow: hidden;
   }
 
@@ -224,18 +226,18 @@ function getRoleBadgeLabel(role: string): string {
     align-items: center;
     gap: 0.375rem;
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .member-list__title {
     margin: 0;
     font: var(--smrt-typography-title-small-font, 600 0.875rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .member-list__count {
     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);
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
@@ -246,12 +248,12 @@ function getRoleBadgeLabel(role: string): string {
     padding: 0;
     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);
   }
 
   .member-list__header :global(.close-btn:hover) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .close-btn__icon {
@@ -276,13 +278,13 @@ function getRoleBadgeLabel(role: string): string {
     margin: 0;
     padding: 0.375rem 1rem;
     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: 0.05em;
   }
 
   .member-group__count {
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .member-group__list {
@@ -311,16 +313,16 @@ function getRoleBadgeLabel(role: string): string {
   .member-item__avatar {
     width: 2rem;
     height: 2rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     object-fit: cover;
   }
 
   .member-item__avatar-placeholder {
     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;
@@ -333,8 +335,8 @@ function getRoleBadgeLabel(role: string): string {
     right: 0;
     width: 0.625rem;
     height: 0.625rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    border: 2px solid var(--smrt-color-surface-container, #f0f0f4);
+    border-radius: var(--smrt-radius-full);
+    border: 2px solid var(--smrt-color-surface-container);
   }
 
   .member-item__info {
@@ -347,7 +349,7 @@ function getRoleBadgeLabel(role: string): string {
 
   .member-item__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;
@@ -356,25 +358,25 @@ function getRoleBadgeLabel(role: string): string {
   .role-badge {
     flex-shrink: 0;
     padding: 0.0625rem 0.375rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
   }
 
   .role-badge--owner {
-    background: var(--smrt-color-tertiary-container, #c2f0dd);
-    color: var(--smrt-color-on-tertiary-container, #002114);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
   }
 
   .role-badge--admin {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
-    color: var(--smrt-color-on-secondary-container, #101c2b);
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
   }
 
   .member-list__empty {
     text-align: center;
     padding: 2rem 1rem;
     margin: 0;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
   }
 
@@ -383,4 +385,5 @@ function getRoleBadgeLabel(role: string): string {
       transition: none;
     }
   }
+}
 </style>