@happyvertical/smrt-messages 0.55.16 → 0.55.17

package/dist/svelte/components/ReplyForm.svelte

@@ -60,7 +60,7 @@ export interface Props {
   }
 </script>
 
-<div class="reply-form">
+<div class="reply-form" data-smrt-component="ReplyForm">
   <div class="reply-header">
     {replyAll ? 'Reply All' : 'Reply'} to {originalMessage.senderName || originalMessage.senderAddress}
   </div>
@@ -96,51 +96,53 @@ export interface Props {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .reply-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);
   }
 
   .reply-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);
   }
 
   .quoted-original {
-    padding: var(--smrt-spacing-2, 8px);
-    border-left: 3px solid var(--smrt-color-outline-variant, #cac4d0);
-    background: var(--smrt-color-surface-variant, #e7e0ec);
-    border-radius: 0 var(--smrt-radius-sm, 8px) var(--smrt-radius-sm, 8px) 0;
+    padding: var(--smrt-spacing-2);
+    border-left: 3px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-variant);
+    border-radius: 0 var(--smrt-radius-sm) var(--smrt-radius-sm) 0;
     max-height: 200px;
     overflow-y: auto;
   }
 
   .quoted-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);
   }
 
   /*
@@ -150,6 +152,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>

package/dist/svelte/components/SendStatusBadge.svelte

@@ -13,54 +13,57 @@ export interface Props {
   const statusConfig = $derived.by(() => {
     switch (status) {
       case 'draft':
-        return { label: 'Draft', color: 'var(--smrt-color-outline, #79747e)', icon: '✎' };
+        return { label: 'Draft', color: 'var(--smrt-color-outline)', icon: '✎' };
       case 'pending':
-        return { label: 'Pending', color: 'var(--smrt-color-tertiary, #7d5260)', icon: '◷' };
+        return { label: 'Pending', color: 'var(--smrt-color-tertiary)', icon: '◷' };
       case 'sending':
-        return { label: 'Sending', color: 'var(--smrt-color-primary, #6750a4)', icon: '↑' };
+        return { label: 'Sending', color: 'var(--smrt-color-primary)', icon: '↑' };
       case 'sent':
-        return { label: 'Sent', color: 'var(--smrt-color-success, #006d3b)', icon: '✓' };
+        return { label: 'Sent', color: 'var(--smrt-color-success)', icon: '✓' };
       case 'failed':
-        return { label: 'Failed', color: 'var(--smrt-color-error, #ba1a1a)', icon: '✕' };
+        return { label: 'Failed', color: 'var(--smrt-color-error)', icon: '✕' };
       case 'scheduled':
-        return { label: 'Scheduled', color: 'var(--smrt-color-secondary, #625b71)', icon: '⏰' };
+        return { label: 'Scheduled', color: 'var(--smrt-color-secondary)', icon: '⏰' };
       default:
-        return { label: status, color: 'var(--smrt-color-outline, #79747e)', icon: '?' };
+        return { label: status, color: 'var(--smrt-color-outline)', icon: '?' };
     }
   });
 </script>
 
 <span
   class="send-status-badge {size}"
-  style="--badge-color: {statusConfig.color}"
+  style="--smrt-send-status-badge-color: {statusConfig.color}" data-smrt-component="SendStatusBadge"
 >
   <span class="icon">{statusConfig.icon}</span>
   <span class="label">{statusConfig.label}</span>
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .send-status-badge {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-sm, 8px);
-    border: 1px solid var(--badge-color);
-    color: var(--badge-color);
+    gap: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-sm);
+    border: 1px solid var(--smrt-send-status-badge-color);
+    color: var(--smrt-send-status-badge-color);
     font-family: var(--smrt-font-family, system-ui);
     white-space: nowrap;
   }
 
   .sm {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    font-size: var(--smrt-typography-label-small-size, 11px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    font-size: var(--smrt-typography-label-small-size);
   }
 
   .md {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-3, 12px);
-    font-size: var(--smrt-typography-label-large-size, 13px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+    font-size: var(--smrt-typography-label-large-size);
   }
 
   .icon {
     font-size: inherit;
   }
+}
 </style>

package/dist/svelte/components/ThreadView.svelte

@@ -98,7 +98,7 @@ const _sortedMessages = $derived(
 );
 </script>
 
-<div class="thread-view" role="list" aria-label={t(M['messages.thread_view.conversation_thread'])}>
+<div class="thread-view" role="list" aria-label={t(M['messages.thread_view.conversation_thread'])} data-smrt-component="ThreadView">
   {#each _sortedMessages as message, i (message.id)}
     <div
       class="thread-message"
@@ -169,6 +169,8 @@ const _sortedMessages = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .thread-view {
     display: flex;
     flex-direction: column;
@@ -180,13 +182,13 @@ const _sortedMessages = $derived(
   }
 
   .thread-message--active {
-    box-shadow: -3px 0 0 0 var(--smrt-color-primary, #005ac1);
+    box-shadow: -3px 0 0 0 var(--smrt-color-primary);
   }
 
   .thread-connector {
     width: 2px;
     height: 1rem;
-    background: var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-outline-variant);
     margin-left: 1.5rem;
   }
 
@@ -208,14 +210,14 @@ const _sortedMessages = $derived(
     border: none;
     background: none;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     z-index: 1;
     padding: 0.25rem;
     border-radius: var(--smrt-radius-small, 0.25rem);
   }
 
   .message-wrapper :global(.collapse-btn):hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .thread-message :global(.collapsed-header) {
@@ -224,16 +226,16 @@ const _sortedMessages = $derived(
     gap: 0.75rem;
     width: 100%;
     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);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
     text-align: left;
     color: inherit;
     font: inherit;
   }
 
   .thread-message :global(.collapsed-header):hover {
-    background: color-mix(in srgb, var(--smrt-color-surface-variant, #e1e2ec) 92%, var(--smrt-color-shadow, #000));
+    background: color-mix(in srgb, var(--smrt-color-surface-variant) 92%, var(--smrt-color-shadow));
   }
 
   .collapsed-sender {
@@ -245,7 +247,7 @@ const _sortedMessages = $derived(
   .collapsed-preview {
     flex: 1;
     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;
@@ -254,6 +256,7 @@ const _sortedMessages = $derived(
   .collapsed-date {
     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);
   }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-messages",
-  "version": "0.55.16",
+  "version": "0.55.17",
   "smrtJsdoc": "strict",
   "description": "Unified multi-channel messaging with STI-based hierarchies",
   "type": "module",
@@ -62,12 +62,12 @@
     "@happyvertical/files": "^0.103.4",
     "@happyvertical/logger": "^0.103.4",
     "@happyvertical/messages": "^0.103.4",
-    "@happyvertical/smrt-core": "0.55.16",
-    "@happyvertical/smrt-types": "0.55.16",
-    "@happyvertical/smrt-secrets": "0.55.16",
-    "@happyvertical/smrt-tenancy": "0.55.16",
-    "@happyvertical/smrt-ui": "0.55.16",
-    "@happyvertical/smrt-users": "0.55.16",
+    "@happyvertical/smrt-core": "0.55.17",
+    "@happyvertical/smrt-types": "0.55.17",
+    "@happyvertical/smrt-secrets": "0.55.17",
+    "@happyvertical/smrt-tenancy": "0.55.17",
+    "@happyvertical/smrt-ui": "0.55.17",
+    "@happyvertical/smrt-users": "0.55.17",
     "@happyvertical/sql": "^0.103.4",
     "@happyvertical/utils": "^0.103.4"
   },
@@ -84,8 +84,8 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-ledgers": "0.55.16",
-    "@happyvertical/smrt-vitest": "0.55.16",
+    "@happyvertical/smrt-ledgers": "0.55.17",
+    "@happyvertical/smrt-vitest": "0.55.17",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/node": "24.13.6",