@reddb-io/ui 0.3.4 → 0.3.6

package/src/lib/renderers/HypertableRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Activity, BarChart3, LineChart, X } from 'lucide-svelte'
+  import Activity from '@lucide/svelte/icons/activity'
+  import BarChart3 from '@lucide/svelte/icons/bar-chart-3'
+  import LineChart from '@lucide/svelte/icons/line-chart'
+  import X from '@lucide/svelte/icons/x'
   import {
     ALL_METRICS,
     bucketGeometry,
@@ -101,7 +104,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors',
-            chartMode === 'rate' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            chartMode === 'rate' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (chartMode = 'rate')}
           aria-pressed={chartMode === 'rate'}
@@ -113,7 +116,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2',
-            chartMode === 'line' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            chartMode === 'line' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (chartMode = 'line')}
           aria-pressed={chartMode === 'line'}
@@ -209,7 +212,7 @@
       {:else if lineGeom}
         <svg
           viewBox={`0 0 ${lineGeom.width} ${lineGeom.height}`}
-          class="block w-full h-[180px] text-accent"
+          class="block w-full h-[180px] text-primary-text"
           aria-label="Timeseries chart"
         >
           <path d={lineGeom.path} fill="none" stroke="currentColor" stroke-width="1.5" />
@@ -237,7 +240,7 @@
               {#if series.metricNameColumn}
                 <td class="px-2 py-1 text-fg-2">{String(p.raw[series.metricNameColumn] ?? '')}</td>
               {/if}
-              <td class="px-2 py-1 text-right text-accent">{p.v}</td>
+              <td class="px-2 py-1 text-right text-primary-text">{p.v}</td>
               <td class="px-2 py-1 text-fg-2">{logPayload(p)}</td>
             </tr>
           {/each}

package/src/lib/renderers/KvRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Braces, ListTree, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import ListTree from '@lucide/svelte/icons/list-tree'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import { buildTree, extractKv, formatValue, materializeKvJson, type KvNode } from './kv-render'
 
   interface Props {
@@ -44,7 +47,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors',
-            viewMode === 'tree' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'tree' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (viewMode = 'tree')}
           aria-pressed={viewMode === 'tree'}
@@ -56,7 +59,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2',
-            viewMode === 'json' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'json' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (viewMode = 'json')}
           aria-pressed={viewMode === 'json'}
@@ -130,7 +133,7 @@
     <button
       type="button"
       class="w-full text-left px-2 py-0.5 hover:bg-bg-1/60"
-      class:text-accent={selected === node}
+      class:text-primary-text={selected === node}
       style:padding-left={`${8 + depth * 12}px`}
       onclick={() => (selected = node)}
     >

package/src/lib/renderers/QueueRenderer.svelte

@@ -2,7 +2,14 @@
   import type { QueryResult } from '#reddb'
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
-  import { Braces, ClipboardList, Loader2, Plus, Radio, Search, Send, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import ClipboardList from '@lucide/svelte/icons/clipboard-list'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import Plus from '@lucide/svelte/icons/plus'
+  import Radio from '@lucide/svelte/icons/radio'
+  import Search from '@lucide/svelte/icons/search'
+  import Send from '@lucide/svelte/icons/send'
+  import X from '@lucide/svelte/icons/x'
   import {
     extractQueueEvents,
     extractQueueMessages,
@@ -91,7 +98,7 @@
     <div class="inline-flex border border-line-2 rounded overflow-hidden">
       <button
         type="button"
-        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'events' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'events' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'events')}
         aria-pressed={mode === 'events'}
       >
@@ -100,7 +107,7 @@
       </button>
       <button
         type="button"
-        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'messages' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'messages' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'messages')}
         aria-pressed={mode === 'messages'}
       >
@@ -109,7 +116,7 @@
       </button>
       <button
         type="button"
-        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'commands' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'commands' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'commands')}
         aria-pressed={mode === 'commands'}
       >
@@ -118,7 +125,7 @@
       </button>
       <button
         type="button"
-        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'json' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'json' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'json')}
         aria-pressed={mode === 'json'}
       >
@@ -131,7 +138,7 @@
       type="button"
       onclick={() => (composerOpen = !composerOpen)}
       disabled={!collection}
-      class={['inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed', composerOpen ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2'].join(' ')}
+      class={['inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed', composerOpen ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2'].join(' ')}
       aria-pressed={composerOpen}
       title={collection ? 'Insert a queue message' : 'Open this as a collection to insert messages'}
     >
@@ -207,7 +214,7 @@
               <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
                 <td class="px-2 py-1 text-fg-2">{fmtTs(event.ts)}</td>
                 <td class="px-2 py-1 text-fg-0">{event.collection}</td>
-                <td class="px-2 py-1"><span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-accent">{event.op}</span></td>
+                <td class="px-2 py-1"><span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-primary-text">{event.op}</span></td>
                 <td class="px-2 py-1 text-fg-1">{event.entityId}</td>
                 <td class="px-2 py-1 text-right text-fg-3">{event.lsn ?? '-'}</td>
                 <td class="px-2 py-1 text-fg-2 truncate max-w-[520px]">{display(event.after)}</td>
@@ -247,7 +254,7 @@
               class={['w-full text-left px-3 py-2 border-b border-line-1/60 hover:bg-bg-1/50 cursor-pointer', selected === msg ? 'bg-bg-1 text-fg-0' : 'text-fg-2'].join(' ')}
             >
               <div class="flex items-center gap-2">
-                <span class="text-accent">{msg.id}</span>
+                <span class="text-primary-text">{msg.id}</span>
                 <span class="rounded border border-line-1 px-1 py-0.5 text-[10px] text-fg-3">{msg.state}</span>
                 {#if msg.consumer}<span class="ml-auto text-fg-3">{msg.consumer}</span>{/if}
               </div>

package/src/lib/renderers/StatsRenderer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Gauge, List, Table2 } from 'lucide-svelte'
+  import Gauge from '@lucide/svelte/icons/gauge'
+  import List from '@lucide/svelte/icons/list'
+  import Table2 from '@lucide/svelte/icons/table-2'
   import { extractStats, formatMetric } from './stats-render'
 
   interface Props {
@@ -30,7 +32,7 @@
       <div class="inline-flex border border-line-2 rounded overflow-hidden">
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'kpi' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'kpi' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'kpi')}
           aria-pressed={mode === 'kpi'}
         >
@@ -39,7 +41,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'gauge' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'gauge' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'gauge')}
           aria-pressed={mode === 'gauge'}
         >
@@ -48,7 +50,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'table' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'table' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'table')}
           aria-pressed={mode === 'table'}
         >
@@ -111,7 +113,7 @@
             {#each metrics as metric, i (`${metric.key}-${i}`)}
               <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
                 <td class="px-2 py-1 text-fg-0">{metric.label}</td>
-                <td class="px-2 py-1 text-right text-accent">{metric.value.toLocaleString()}</td>
+                <td class="px-2 py-1 text-right text-primary-text">{metric.value.toLocaleString()}</td>
                 <td class="px-2 py-1 text-fg-3">{metric.unit || '-'}</td>
               </tr>
             {/each}

package/src/lib/renderers/TableRenderer.svelte

@@ -3,7 +3,12 @@
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
   import { pendingChanges } from '$lib/pending-changes.svelte'
-  import { Columns3, Filter, Loader2, Play, RotateCw, X } from 'lucide-svelte'
+  import Columns3 from '@lucide/svelte/icons/columns-3'
+  import Filter from '@lucide/svelte/icons/filter'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import Play from '@lucide/svelte/icons/play'
+  import RotateCw from '@lucide/svelte/icons/rotate-cw'
+  import X from '@lucide/svelte/icons/x'
   import {
     formatCell,
     identityKind,
@@ -191,7 +196,7 @@
           class={[
             'inline-flex items-center gap-1.5 h-6 px-2 rounded border transition-colors cursor-pointer',
             selectOpen
-              ? 'border-accent/40 bg-accent/10 text-accent'
+              ? 'border-accent/40 bg-accent/10 text-primary-text'
               : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
           ].join(' ')}
         >
@@ -229,14 +234,14 @@
         class={[
           'inline-flex items-center gap-1.5 h-6 px-2 rounded border transition-colors cursor-pointer',
           filtersOpen
-            ? 'border-accent/40 bg-accent/10 text-accent'
+            ? 'border-accent/40 bg-accent/10 text-primary-text'
             : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
         ].join(' ')}
       >
         <Filter class="size-3" />
         <span>filters</span>
         {#if activeFilterCount > 0}
-          <span class="text-[9px] px-1 rounded bg-accent text-white">{activeFilterCount}</span>
+          <span class="text-[9px] px-1 rounded bg-primary text-on-primary">{activeFilterCount}</span>
         {/if}
       </button>
       {#if activeFilterCount > 0}
@@ -297,7 +302,7 @@
             <label
               class={[
                 'inline-flex h-5 items-center gap-1 rounded border px-1.5 cursor-pointer',
-                selectedColumns[col] ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1',
+                selectedColumns[col] ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1',
               ].join(' ')}
             >
               <input
@@ -339,7 +344,7 @@
               >
                 <span class={kind || sys ? 'font-semibold' : ''}>{c}</span>
                 {#if kind === 'rid'}
-                  <span class="ml-1 text-[9px] px-1 py-0.5 rounded bg-accent text-white uppercase tracking-wider font-semibold" title="System-assigned row id — reddb's canonical address">sys</span>
+                  <span class="ml-1 text-[9px] px-1 py-0.5 rounded bg-primary text-on-primary uppercase tracking-wider font-semibold" title="System-assigned row id — reddb's canonical address">sys</span>
                 {:else if sys}
                   <span class="ml-1 text-[9px] px-1 py-0.5 rounded border border-line-2 text-fg-3 uppercase tracking-wider" title="Reserved system field — written by reddb">sys</span>
                 {:else if kind === 'id'}
@@ -392,7 +397,7 @@
                   class={[
                     'px-2 py-1 max-w-[260px] truncate align-top',
                     kind === 'rid'
-                      ? 'bg-accent/5 text-accent font-semibold'
+                      ? 'bg-accent/5 text-primary-text font-semibold'
                       : sys
                         ? 'bg-bg-1 text-fg-2 font-mono'
                         : kind === 'id'

package/src/lib/renderers/VectorRenderer.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import type { QueryResult, RedClient } from '#reddb'
-  import { Braces, Gauge, ListFilter, LoaderCircle, Play, Rows3, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import Gauge from '@lucide/svelte/icons/gauge'
+  import ListFilter from '@lucide/svelte/icons/list-filter'
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle'
+  import Play from '@lucide/svelte/icons/play'
+  import Rows3 from '@lucide/svelte/icons/rows-3'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import {
     buildVectorSearchQuery,
     compactValue,
@@ -96,7 +103,7 @@
       <div class="inline-flex shrink-0 overflow-hidden rounded border border-line-2">
         <button
           type="button"
-          class={['inline-flex h-7 items-center gap-1 px-2 transition-colors', surface === 'browse' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex h-7 items-center gap-1 px-2 transition-colors', surface === 'browse' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => { surface = 'browse'; selected = null }}
           aria-pressed={surface === 'browse'}
         >
@@ -105,7 +112,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2 transition-colors', surface === 'search' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2 transition-colors', surface === 'search' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => { surface = 'search'; selected = null }}
           aria-pressed={surface === 'search'}
         >
@@ -171,7 +178,7 @@
             'inline-flex h-7 items-center gap-1 rounded border px-2 transition-colors',
             searching
               ? 'border-line-1 bg-bg-2 text-fg-3'
-              : 'border-accent/40 bg-accent text-white hover:bg-accent/90',
+              : 'border-accent/40 bg-primary text-on-primary hover:bg-accent/90',
           ].join(' ')}
           disabled={searching}
           onclick={() => void runSearch()}
@@ -238,7 +245,7 @@
       <div class="inline-flex border border-line-2 rounded overflow-hidden">
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'metadata' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'metadata' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'metadata')}
           aria-pressed={mode === 'metadata'}
         >
@@ -247,7 +254,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'vector' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'vector' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'vector')}
           aria-pressed={mode === 'vector'}
         >
@@ -256,7 +263,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'scalar' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'scalar' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'scalar')}
           aria-pressed={mode === 'scalar'}
         >
@@ -300,7 +307,7 @@
             ].join(' ')}
           >
             <div class="flex items-baseline gap-2">
-              <span class="text-accent">{row.id}</span>
+              <span class="text-primary-text">{row.id}</span>
               <span class="text-fg-3">{row.dimension}d</span>
               {#if surface === 'search' && row.scalar !== null}<span class="ml-auto text-fg-1" title={scalarLabel(row)}>{row.scalar.toFixed(4)}</span>{/if}
             </div>
@@ -374,7 +381,7 @@
             <tbody>
               {#each filtered as row (row.id)}
                 <tr class="border-b border-line-1/60 hover:bg-bg-1/40 cursor-pointer" onclick={() => (selected = row)}>
-                  <td class="px-2 py-1 text-accent">{row.id}</td>
+                  <td class="px-2 py-1 text-primary-text">{row.id}</td>
                   <td class="px-2 py-1 text-right" title={scalarLabel(row)}>{row.scalar === null ? 'n/a' : row.scalar.toFixed(6)}</td>
                   <td class="px-2 py-1 text-right">{vectorMagnitude(row.vector).toFixed(6)}</td>
                 </tr>

package/src/lib/shadow-dom-spike/mount-shadow-dom-spike.ts

@@ -12,7 +12,7 @@ const shadowHostCss = `
 }
 
 :host,
-:host([data-theme='dark']) {
+:host([data-color-scheme='dark']) {
   --color-bg-0: #050607;
   --color-bg-1: #0d0f13;
   --color-bg-2: #181b21;
@@ -62,7 +62,8 @@ export type ShadowDomSpikeMount = {
 };
 
 export function mountShadowDomSpike(host: HTMLElement): ShadowDomSpikeMount {
-  host.setAttribute("data-theme", "dark");
+  host.setAttribute("data-theme", "application");
+  host.setAttribute("data-color-scheme", "dark");
 
   const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: "open" });
   shadowRoot.textContent = "";

package/src/lib/skins/skins.ts

@@ -10,8 +10,8 @@
 // shell over that pure core.
 //
 // Dark-only by design: every seed is a dark surface, and there is no
-// `light` / `system` branch. The default skin keeps reddb's signature
-// `#ff2056` accent.
+// `light` / `system` branch. The default skin restores the canonical DS
+// appearance rather than maintaining a second Brand palette.
 
 export interface SkinSeeds {
   /** Darkest surface — becomes `--color-bg-0`; every other surface ramps up from it. */
@@ -42,10 +42,8 @@ export interface Skin {
   typography: SkinTypography;
 }
 
-const FONT_SANS =
-  "'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif";
-const FONT_MONO =
-  "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace";
+const FONT_SANS = "var(--reddb-font-family-sans)";
+const FONT_MONO = "var(--reddb-font-family-mono)";
 
 /**
  * The registry. Two curated dark skins — the mechanism, not a buffet.
@@ -55,8 +53,12 @@ export const SKINS: readonly Skin[] = [
   {
     name: "reddb",
     label: "Reddb",
-    description: "The signature near-black with a surgical rose accent.",
-    colors: { bg: "#050607", accent: "#ff2056", fg: "#f7f8fa" },
+    description: "The canonical Design System application appearance.",
+    colors: {
+      bg: "var(--reddb-color-background)",
+      accent: "var(--reddb-color-primary)",
+      fg: "var(--reddb-color-foreground)",
+    },
     typography: { sans: FONT_SANS, mono: FONT_MONO },
   },
   {
@@ -146,14 +148,14 @@ export function skinToCssVars(skin: Skin): Record<string, string> {
     // Node roles — primary tracks the accent; replica/embedded stay legible
     // semantic hues that read on any dark surface.
     "--color-role-primary": accent,
-    "--color-role-replica": "#60a5fa",
-    "--color-role-embedded": "#4ade80",
+    "--color-role-replica": "var(--reddb-color-feedback-info-foreground)",
+    "--color-role-embedded": "var(--reddb-color-feedback-success-foreground)",
 
     // Semantic — dark-tuned, shared across skins.
-    "--color-ok": "#4ade80",
-    "--color-warn": "#fbbf24",
-    "--color-danger": "#ff5470",
-    "--color-info": "#60a5fa",
+    "--color-ok": "var(--reddb-color-feedback-success-foreground)",
+    "--color-warn": "var(--reddb-color-feedback-warning-foreground)",
+    "--color-danger": "var(--reddb-color-feedback-danger-foreground)",
+    "--color-info": "var(--reddb-color-feedback-info-foreground)",
 
     // Typography.
     "--font-sans": skin.typography.sans,
@@ -166,13 +168,40 @@ export function skinToCssVars(skin: Skin): Record<string, string> {
 /**
  * Apply a skin's derived custom properties to a DOM element as inline styles.
  * Inline styles win over the stylesheet's `:root` rules, so this overrides the
- * active theme tokens regardless of `data-theme`. The thin shell
+ * active theme tokens regardless of `data-color-scheme`. The thin shell
  * (`skins.svelte.ts`) wires this to mount + persistence.
  */
 export function applySkin(skin: Skin, target: HTMLElement) {
-  const vars = skinToCssVars(skin);
-  for (const [k, v] of Object.entries(vars)) target.style.setProperty(k, v);
-  // Skins are dark-only; pin data-theme so the shadcn semantic aliases that
-  // key off it stay consistent with the inline surface ramp.
-  target.dataset.theme = "dark";
+  const roles: Record<string, string> = {
+    background: "--color-bg-0",
+    "elevation-base-surface": "--color-bg-1",
+    muted: "--color-bg-2",
+    "elevation-raised-surface": "--color-bg-3",
+    foreground: "--color-fg-0",
+    "ink-muted": "--color-fg-2",
+    "border-subtle": "--color-line-1",
+    "control-edge": "--color-line-2",
+    "border-strong": "--color-line-3",
+    primary: "--color-accent",
+    "primary-text": "--color-accent",
+  };
+  // Returning to the canonical skin restores the DS cascade, including its
+  // Color Scheme. Remove only properties this skin mechanism owns.
+  for (const key of Object.keys(skinToCssVars(skin)))
+    target.style.removeProperty(key);
+  for (const role of Object.keys(roles))
+    target.style.removeProperty(`--reddb-color-${role}`);
+  if (skin.name !== DEFAULT_SKIN.name) {
+    const vars = skinToCssVars(skin);
+    for (const [key, value] of Object.entries(vars))
+      target.style.setProperty(key, value);
+    for (const [role, key] of Object.entries(roles)) {
+      target.style.setProperty(`--reddb-color-${role}`, vars[key]);
+    }
+  }
+  // Skins are dark-only; pin the dark Color Scheme so the shadcn semantic
+  // aliases and the DS roles that key off it stay consistent with the inline
+  // surface ramp.
+  target.dataset.theme = "application";
+  target.dataset.colorScheme = "dark";
 }

package/src/lib/theme.svelte.ts

@@ -1,5 +1,24 @@
+// red-ui's light/dark choice is the DS Color Scheme axis (DS ADR 0008):
+// `data-color-scheme` carries it, while `data-theme` names the DS Theme
+// direction, which for red-ui is always "application".
 export type Theme = "light" | "dark";
 
+export const DS_THEME = "application";
+
+/** Put red-ui's appearance on an element in the DS's attribute vocabulary. */
+export function applyAppearance(el: HTMLElement, scheme: Theme) {
+  el.dataset.theme = DS_THEME;
+  el.dataset.density ||= "compact";
+  el.dataset.colorScheme = scheme;
+}
+
+/** The Color Scheme an element (default: the document root) carries. */
+export function colorSchemeOf(el?: HTMLElement | null): Theme {
+  const target =
+    el ?? (typeof document !== "undefined" ? document.documentElement : null);
+  return target?.dataset.colorScheme === "dark" ? "dark" : "light";
+}
+
 const STORAGE_KEY = "red-ui-theme";
 const DEFAULT: Theme = "light";
 
@@ -14,7 +33,7 @@ function read(
   persist: boolean,
   initial?: Theme
 ): Theme {
-  const scoped = target?.dataset.theme;
+  const scoped = target?.dataset.colorScheme;
   if (scoped === "dark" || scoped === "light") return scoped;
   if (!persist) return initial ?? DEFAULT;
   if (typeof localStorage === "undefined") return initial ?? DEFAULT;
@@ -24,11 +43,11 @@ function read(
 
 function apply(t: Theme, target: HTMLElement | null) {
   if (target) {
-    target.dataset.theme = t;
+    applyAppearance(target, t);
     return;
   }
   if (typeof document !== "undefined")
-    document.documentElement.dataset.theme = t;
+    applyAppearance(document.documentElement, t);
 }
 
 function persist(t: Theme, enabled: boolean) {

package/vendor/ds/assets/fonts.css

@@ -0,0 +1,38 @@
+/* Published by @reddb-io/assets from reddb-io/brand Assets 2026.10. */
+/* DO NOT EDIT — regenerate with `pnpm --filter @reddb-io/assets build`. */
+/* The Brand's typefaces. Link this to make --reddb-font-family-* resolve */
+/* to the Brand's faces instead of falling through to the system stack. */
+
+@font-face {
+  font-family: "Space Grotesk";
+  src: url("./fonts/space-grotesk-variable.woff2") format("woff2-variations");
+  font-weight: 300 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("./fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Space Grotesk Fallback";
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
+  size-adjust: 109.51%;
+  ascent-override: 89.85%;
+  descent-override: 26.66%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "JetBrains Mono Fallback";
+  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine");
+  size-adjust: 99.98%;
+  ascent-override: 102.02%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}