@weasel-js/labkit 0.8.0 → 1.0.1

package/src/theme/Interstellar.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useEffect, useState } from 'react';
+import type { TokenName } from '@weasel-js/theme';
+import { useTheme } from '@weasel-js/theme/react';
 import {
   CheckboxRow,
   ColorRow,
@@ -17,7 +18,7 @@ const meta: Meta = {
       description: {
         component:
           'The interstellar theme: deep-space cosmic gradient + starscape backdrop, glass surfaces, Oswald display type, purple accent. ' +
-          'Tokens live in `src/theme/tokens.less` (defaults) and `src/theme/interstellar.less` (explicit `.lk-theme-interstellar` overrides).',
+          'Authored as DTCG in `src/theme/interstellar.tokens.json` and loaded with `loadDTCG`; it extends the built-in weasel theme, overriding values rather than adding tokens.',
       },
     },
   },
@@ -34,58 +35,40 @@ interface Swatch {
 }
 
 const SURFACE_TOKENS: Swatch[] = [
-  { name: 'bg', cssVar: '--lk-bg' },
-  { name: 'bg-elevated', cssVar: '--lk-bg-elevated' },
-  { name: 'bg-canvas', cssVar: '--lk-bg-canvas' },
-  { name: 'border', cssVar: '--lk-border' },
-  { name: 'divider', cssVar: '--lk-divider' },
+  { name: 'bg', cssVar: '--wzl-surface' },
+  { name: 'bg-elevated', cssVar: '--wzl-surface-raised' },
+  { name: 'bg-canvas', cssVar: '--wzl-surface-sunken' },
+  { name: 'border', cssVar: '--wzl-border' },
+  { name: 'divider', cssVar: '--wzl-line-subtle' },
 ];
 
 const TEXT_TOKENS: Swatch[] = [
-  { name: 'text', cssVar: '--lk-text' },
-  { name: 'text-muted', cssVar: '--lk-text-muted' },
-  { name: 'text-disabled', cssVar: '--lk-text-disabled' },
+  { name: 'text', cssVar: '--wzl-fg' },
+  { name: 'text-muted', cssVar: '--wzl-fg-muted' },
+  { name: 'text-disabled', cssVar: '--wzl-fg-subtle' },
 ];
 
 const ACCENT_TOKENS: Swatch[] = [
-  { name: 'accent', cssVar: '--lk-accent' },
-  { name: 'accent-hover', cssVar: '--lk-accent-hover' },
-  { name: 'focus-ring', cssVar: '--lk-focus-ring' },
+  { name: 'accent', cssVar: '--wzl-accent' },
+  { name: 'accent-hover', cssVar: '--wzl-accent-hover' },
+  { name: 'focus-ring', cssVar: '--wzl-focus-ring' },
 ];
 
 const PALETTE_TOKENS: Swatch[] = [
-  { name: 'green', cssVar: '--lk-swatch-green' },
-  { name: 'pink', cssVar: '--lk-swatch-pink' },
-  { name: 'cyan', cssVar: '--lk-swatch-cyan' },
-  { name: 'gold', cssVar: '--lk-swatch-gold' },
-  { name: 'amber', cssVar: '--lk-swatch-amber' },
-  { name: 'violet', cssVar: '--lk-swatch-violet' },
-  { name: 'mint', cssVar: '--lk-swatch-mint' },
-  { name: 'sky', cssVar: '--lk-swatch-sky' },
-  { name: 'orange', cssVar: '--lk-swatch-orange' },
-  { name: 'magenta', cssVar: '--lk-swatch-magenta' },
+  { name: 'green', cssVar: '--wzl-swatch-green' },
+  { name: 'pink', cssVar: '--wzl-swatch-pink' },
+  { name: 'cyan', cssVar: '--wzl-swatch-cyan' },
+  { name: 'gold', cssVar: '--wzl-swatch-gold' },
+  { name: 'amber', cssVar: '--wzl-swatch-amber' },
+  { name: 'violet', cssVar: '--wzl-swatch-violet' },
+  { name: 'mint', cssVar: '--wzl-swatch-mint' },
+  { name: 'sky', cssVar: '--wzl-swatch-sky' },
+  { name: 'orange', cssVar: '--wzl-swatch-orange' },
+  { name: 'magenta', cssVar: '--wzl-swatch-magenta' },
 ];
 
-/**
- * Resolves a CSS custom property's computed value off `document.documentElement`
- * so swatch cards can display the actual color alongside the var name.
- * Returns null until the first effect runs.
- */
-function useResolvedVars(vars: readonly string[]): Record<string, string> {
-  const key = vars.join('|');
-  const [resolved, setResolved] = useState<Record<string, string>>({});
-  useEffect(() => {
-    const root = document.querySelector('.lk-theme-interstellar') ?? document.documentElement;
-    const cs = window.getComputedStyle(root);
-    const out: Record<string, string> = {};
-    for (const v of key.split('|')) out[v] = cs.getPropertyValue(v).trim();
-    setResolved(out);
-  }, [key]);
-  return resolved;
-}
-
 function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: string }) {
-  const resolved = useResolvedVars(tokens.map((t) => t.cssVar));
+  const { resolved } = useTheme();
   return (
     <div>
       <h3 className="lk-theme-doc__heading">{title}</h3>
@@ -96,7 +79,7 @@ function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: strin
             <div className="lk-theme-doc__swatch-meta">
               <div className="lk-theme-doc__swatch-name">{t.name}</div>
               <code className="lk-theme-doc__swatch-var">{t.cssVar}</code>
-              <code className="lk-theme-doc__swatch-value">{resolved[t.cssVar] ?? '…'}</code>
+              <code className="lk-theme-doc__swatch-value">{resolved[t.cssVar as TokenName]}</code>
             </div>
           </div>
         ))}
@@ -108,8 +91,8 @@ function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: strin
 function NebulaPreview() {
   return (
     <div>
-      <h3 className="lk-theme-doc__heading">Cosmic backdrop (`--lk-space-nebula`)</h3>
-      <div className="lk-theme-doc__nebula" style={{ background: 'var(--lk-space-nebula)' }} />
+      <h3 className="lk-theme-doc__heading">Cosmic backdrop (`--wzl-backdrop`)</h3>
+      <div className="lk-theme-doc__nebula" style={{ background: 'var(--wzl-backdrop)' }} />
       <p className="lk-theme-doc__note">
         Default: four radial gradients (purple, pink, blue, then a dark void base). Override per-Lab
         by passing <code>nebula={'{[colors]}'}</code> to the <code>&lt;Lab&gt;</code> component.
@@ -123,29 +106,29 @@ function TypographySample() {
     <div>
       <h3 className="lk-theme-doc__heading">Typography</h3>
       <div className="lk-theme-doc__type-stack">
-        <h1 style={{ font: '300 2.6rem/1 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+        <h1 style={{ font: '300 2.6rem/1 var(--wzl-font-display)', color: 'var(--wzl-fg)' }}>
           Heading display 300
         </h1>
-        <h2 style={{ font: '300 1.4rem/1.2 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+        <h2 style={{ font: '300 1.4rem/1.2 var(--wzl-font-display)', color: 'var(--wzl-fg)' }}>
           Heading 300
         </h2>
         <div
           style={{
-            font: '300 0.78rem/1 var(--lk-font-display)',
-            color: 'var(--lk-text-muted)',
+            font: '300 0.78rem/1 var(--wzl-font-display)',
+            color: 'var(--wzl-fg-muted)',
             textTransform: 'uppercase',
             letterSpacing: '0.05em',
           }}
         >
           Label uppercase 300
         </div>
-        <p style={{ font: '400 0.9rem/1.5 var(--lk-font)', color: 'var(--lk-text)' }}>
+        <p style={{ font: '400 0.9rem/1.5 var(--wzl-font-ui)', color: 'var(--wzl-fg)' }}>
           Body 400. Free-form prose at the default font size and line height.
         </p>
         <code
           style={{
-            font: '400 0.85rem/1 var(--lk-font-mono)',
-            color: 'var(--lk-text)',
+            font: '400 0.85rem/1 var(--wzl-font-mono)',
+            color: 'var(--wzl-fg)',
             background: 'rgba(0,0,0,0.35)',
             padding: '4px 8px',
             borderRadius: 3,
@@ -188,20 +171,21 @@ function LivePanelPreview() {
 export const Overview: Story = {
   render: () => (
     <div
-      className="lk-theme-interstellar lk-theme-doc"
+      className="lk-theme-doc"
       style={{
-        background: 'var(--lk-space-nebula)',
+        backgroundColor: 'var(--wzl-surface)',
+        backgroundImage: 'var(--wzl-backdrop)',
         padding: 32,
         minHeight: '100vh',
       }}
     >
-      <h1 style={{ font: '300 2.6rem/1 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+      <h1 style={{ font: '300 2.6rem/1 var(--wzl-font-display)', color: 'var(--wzl-fg)' }}>
         Interstellar
       </h1>
       <p
         style={{
-          font: '300 1.05rem/1.4 var(--lk-font-display)',
-          color: 'var(--lk-text-muted)',
+          font: '300 1.05rem/1.4 var(--wzl-font-display)',
+          color: 'var(--wzl-fg-muted)',
           maxWidth: 640,
           margin: '12px 0 32px',
         }}
@@ -225,9 +209,10 @@ export const Overview: Story = {
 export const Palette: Story = {
   render: () => (
     <div
-      className="lk-theme-interstellar lk-theme-doc"
+      className="lk-theme-doc"
       style={{
-        background: 'var(--lk-space-nebula)',
+        backgroundColor: 'var(--wzl-surface)',
+        backgroundImage: 'var(--wzl-backdrop)',
         padding: 32,
         minHeight: '100vh',
       }}

package/src/theme/base.less

@@ -1,5 +1,3 @@
-@import './tokens.less';
-
 // Self-hosted Oswald (variable font, wght axis 200–700) for the headline
 // typeface. Sourced from @weasel-js/theme; build:fonts copies it into dist/fonts.
 @font-face {
@@ -18,11 +16,11 @@
 
 // Resets and global element defaults.
 .lk-root {
-  font-family: var(--lk-font);
-  font-size: var(--lk-font-size);
-  font-weight: var(--lk-font-weight-light, 300);
-  color: var(--lk-text);
-  background: var(--lk-bg);
+  font-family: var(--wzl-font-ui);
+  font-size: var(--wzl-font-size);
+  font-weight: var(--wzl-font-weight-light);
+  color: var(--wzl-fg);
+  background: var(--wzl-surface);
   line-height: 1.4;
 
   *, *::before, *::after {
@@ -32,33 +30,33 @@
   button {
     font: inherit;
     color: inherit;
-    background: var(--lk-bg-elevated);
-    border: 1px solid var(--lk-border);
-    border-radius: var(--lk-radius);
-    height: var(--lk-control-height);
-    padding: 0 var(--lk-spacing-md);
+    background: var(--wzl-surface-raised);
+    border: 1px solid var(--wzl-border);
+    border-radius: var(--wzl-radius-md);
+    height: var(--wzl-control-h);
+    padding: 0 var(--wzl-space-md);
     cursor: pointer;
-    backdrop-filter: blur(var(--lk-glass-blur, 0));
-    -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+    backdrop-filter: blur(var(--wzl-glass-blur));
+    -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
 
     &:hover {
-      border-color: var(--lk-accent);
-      color: var(--lk-accent);
+      border-color: var(--wzl-accent);
+      color: var(--wzl-accent);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--lk-focus-ring);
+      outline: 2px solid var(--wzl-focus-ring);
       outline-offset: 1px;
     }
 
     &:disabled {
-      color: var(--lk-text-disabled);
+      color: var(--wzl-fg-subtle);
       cursor: not-allowed;
     }
   }
 
   input[type="range"] {
-    accent-color: var(--lk-accent);
+    accent-color: var(--wzl-accent);
   }
 }
 
@@ -67,7 +65,9 @@
 .lk-lab {
   position: relative;
   isolation: isolate;
-  background: var(--lk-space-nebula, var(--lk-bg));
+  background-color: var(--wzl-surface);
+  // Not the shorthand: `background: none` paints transparent, not the surface.
+  background-image: var(--wzl-backdrop);
   background-attachment: fixed;
 }
 
@@ -102,13 +102,13 @@
   background-repeat: no-repeat;
 }
 
-// Light theme opts out of the cosmic backdrop & starscape.
-.lk-theme-light.lk-lab {
-  background: var(--lk-bg);
+// The backdrop follows the token, but a starfield is structure, not a color —
+// it needs the mode.
+.lk-lab[data-wzl-mode='light'] {
   background-attachment: scroll;
 }
 
-.lk-theme-light.lk-lab::before {
+.lk-lab[data-wzl-mode='light']::before {
   display: none;
 }
 
@@ -116,8 +116,8 @@
 .lk-lab h1,
 .lk-lab h2,
 .lk-lab h3 {
-  font-family: var(--lk-font-display);
-  font-weight: var(--lk-font-weight-light, 300);
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
   letter-spacing: 0.01em;
   line-height: 1.2;
 }

package/src/theme/interstellar.test.ts

@@ -0,0 +1,30 @@
+import { resolveTheme } from '@weasel-js/theme';
+import { describe, expect, it } from 'vitest';
+import { interstellarTheme } from './interstellar';
+
+describe('interstellarTheme', () => {
+  it('extends weasel and resolves both modes', () => {
+    const dark = resolveTheme(interstellarTheme, 'dark');
+    const light = resolveTheme(interstellarTheme, 'light');
+
+    // Values carried over verbatim from the retired Less.
+    expect(dark['--wzl-surface']).toBe('#0a0a14');
+    expect(dark['--wzl-accent']).toBe('#b08adb');
+    expect(light['--wzl-surface']).toBe('#fafaf7');
+    expect(light['--wzl-accent']).toBe('#a86f3c');
+
+    // Inherited from weasel — interstellar overrides values, not the token set.
+    expect(dark['--wzl-space-md']).toBe('12px');
+    expect(dark['--wzl-swatch-cyan']).toBe('#00dfff');
+
+    // Deliberate divergences from the base.
+    expect(dark['--wzl-radius-md']).toBe('6px');
+    expect(dark['--wzl-font-weight-light']).toBe('300');
+    expect(dark['--wzl-glass-blur']).toBe('12px');
+  });
+
+  it('carries the cosmic backdrop in dark and drops it in light', () => {
+    expect(resolveTheme(interstellarTheme, 'dark')['--wzl-backdrop']).toContain('radial-gradient');
+    expect(resolveTheme(interstellarTheme, 'light')['--wzl-backdrop']).toBe('none');
+  });
+});

package/src/theme/interstellar.tokens.json

@@ -0,0 +1,57 @@
+{
+  "name": "interstellar",
+  "defaultMode": "dark",
+  "primitives": {
+    "dimension": {
+      "$type": "dimension",
+      "radius-md": { "$value": "6px" },
+      "glass-blur": { "$value": "12px" }
+    },
+    "fontWeight": {
+      "$type": "fontWeight",
+      "font-weight-light": { "$value": 300 },
+      "font-weight-medium": { "$value": 500 },
+      "font-weight-bold": { "$value": 700 }
+    }
+  },
+  "modes": {
+    "dark": {
+      "color": {
+        "$type": "color",
+        "surface": { "$value": "#0a0a14" },
+        "surface-raised": { "$value": "rgba(20, 20, 36, 0.55)" },
+        "surface-sunken": { "$value": "#02020a" },
+        "border": { "$value": "rgba(255, 255, 255, 0.14)" },
+        "line-subtle": { "$value": "rgba(255, 255, 255, 0.08)" },
+        "fg": { "$value": "#e8e8f0" },
+        "fg-muted": { "$value": "#a8a8c0" },
+        "fg-subtle": { "$value": "#5a5a78" },
+        "accent": { "$value": "#b08adb" },
+        "accent-hover": { "$value": "#c6a3ee" },
+        "focus-ring": { "$value": "rgba(176, 138, 219, 0.45)" }
+      },
+      "gradient": {
+        "$type": "gradient",
+        "backdrop": {
+          "$value": "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)"
+        }
+      }
+    },
+    "light": {
+      "color": {
+        "$type": "color",
+        "surface": { "$value": "#fafaf7" },
+        "surface-raised": { "$value": "#ffffff" },
+        "surface-sunken": { "$value": "#f0ebe2" },
+        "border": { "$value": "#c9bba5" },
+        "line-subtle": { "$value": "rgba(0, 0, 0, 0.08)" },
+        "fg": { "$value": "#2a2018" },
+        "fg-muted": { "$value": "#6b5c4a" },
+        "fg-subtle": { "$value": "#a89b85" },
+        "accent": { "$value": "#a86f3c" },
+        "accent-hover": { "$value": "#c2854f" },
+        "focus-ring": { "$value": "rgba(168, 111, 60, 0.35)" }
+      }
+    }
+  }
+}

package/src/theme/interstellar.ts

@@ -0,0 +1,9 @@
+import { loadDTCG, type Theme } from '@weasel-js/theme';
+import doc from './interstellar.tokens.json' with { type: 'json' };
+
+/**
+ * labkit's theme: a cosmic dark and a warm parchment light, extending the
+ * built-in weasel theme. Authored as DTCG and loaded at import time — the
+ * interchange path a theme exported from a design tool would take.
+ */
+export const interstellarTheme: Theme = loadDTCG(doc);

package/src/ui/layers/LayerStack.less

@@ -12,10 +12,10 @@
 
 .lk-layer-stack__title {
   margin: 0;
-  font-family: var(--lk-font-display);
-  font-weight: var(--lk-font-weight-light, 300);
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
   font-size: 1rem;
-  color: var(--lk-text);
+  color: var(--wzl-fg);
 }
 
 .lk-layer-stack__palette {
@@ -25,17 +25,17 @@
 
 .lk-layer-stack__add {
   background: transparent;
-  border: 1px dashed var(--lk-border);
-  border-radius: var(--lk-radius-sm, 6px);
+  border: 1px dashed var(--wzl-border);
+  border-radius: var(--wzl-radius-sm);
   padding: 2px 8px;
   font-size: 0.78rem;
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
   cursor: pointer;
 }
 
 .lk-layer-stack__add:hover {
-  background: var(--lk-bg-elevated);
-  color: var(--lk-text);
+  background: var(--wzl-surface-raised);
+  color: var(--wzl-fg);
 }
 
 .lk-layer-stack__list {
@@ -45,29 +45,29 @@
 
 .lk-layer-stack__drop-hint {
   height: 2px;
-  background: var(--lk-accent, #6cf);
+  background: var(--wzl-accent);
   border-radius: 1px;
 }
 
 .lk-layer-stack__empty {
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
   font-size: 0.85rem;
   padding: 8px;
   text-align: center;
 }
 
 .lk-layer-card {
-  background: var(--lk-bg-elevated);
-  border: 1px solid var(--lk-border);
-  border-radius: var(--lk-radius-md, 8px);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-md);
   overflow: hidden;
 }
 
 .lk-layer-card.has-accent {
-  // Re-bind --lk-accent inside the card so descendant controls (slider tracks
+  // Re-bind --wzl-accent inside the card so descendant controls (slider tracks
   // and thumbs, readouts, etc.) tint to the per-card accent instead of the
   // global theme accent. Mirrors EffectCard's behavior.
-  --lk-accent: var(--lk-layer-card-accent);
+  --wzl-accent: var(--lk-layer-card-accent);
   border-left: 3px solid var(--lk-layer-card-accent);
 }
 
@@ -87,7 +87,7 @@
 .lk-root .lk-layer-card__handle {
   background: transparent;
   border: 0;
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
   padding: 2px 4px;
   cursor: grab;
   display: inline-flex;
@@ -95,7 +95,7 @@
   justify-content: center;
   min-width: 22px;
   height: 22px;
-  border-radius: var(--lk-radius-sm, 6px);
+  border-radius: var(--wzl-radius-sm);
   font-weight: 600;
   font-size: 0.85rem;
 }
@@ -118,7 +118,7 @@
 .lk-layer-card__primary {
   background: transparent;
   border: 0;
-  color: var(--lk-text);
+  color: var(--wzl-fg);
   font: inherit;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -127,17 +127,17 @@
 .lk-root .lk-layer-card__remove {
   background: transparent;
   border: 0;
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
   font-size: 1rem;
   cursor: pointer;
   padding: 2px 6px;
 }
 
 .lk-layer-card__remove:hover {
-  color: var(--lk-text);
+  color: var(--wzl-fg);
 }
 
 .lk-layer-card__body {
   padding: 8px;
-  border-top: 1px solid var(--lk-border);
+  border-top: 1px solid var(--wzl-border);
 }

package/src/ui/properties/CurveField.less

@@ -20,7 +20,7 @@
   justify-content: space-between;
   font-variant-numeric: tabular-nums;
   font-size: 0.85rem;
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
 }
 
 .lk-curve-field__readout {
@@ -35,14 +35,14 @@
 
 .lk-curve-field__action {
   background: transparent;
-  border: 1px solid var(--lk-border);
-  border-radius: var(--lk-radius-sm, 6px);
-  color: var(--lk-text);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-sm);
+  color: var(--wzl-fg);
   padding: 4px 10px;
   font-size: 0.78rem;
   cursor: pointer;
 }
 
 .lk-curve-field__action:hover {
-  background: var(--lk-bg-elevated);
+  background: var(--wzl-surface-raised);
 }

package/src/ui/properties/EffectCard.tsx

@@ -26,7 +26,7 @@ export function Subpanel({ title, children, className }: SubpanelProps) {
 
 // ── EffectCard ───────────────────────────────────────────────────────
 // Draggable, collapsible card for stacked effect editors. Optional --lk-panel-accent
-// per-instance recolors the title bar, border-left, and (via re-binding --lk-accent
+// per-instance recolors the title bar, border-left, and (via re-binding --wzl-accent
 // inside the card) every descendant control that reads from the accent token.
 
 export interface EffectCardProps {
@@ -82,7 +82,7 @@ export function EffectCard({
   const stateClass = `${expanded ? 'is-expanded' : 'is-collapsed'}${dragging ? ' is-dragging' : ''}${accent ? ' has-accent' : ''}`;
   const cls = `lk-effect-card ${stateClass}${className ? ` ${className}` : ''}`;
   // Per-instance dynamic color → CSS custom property requires inline style.
-  // The card's CSS re-binds --lk-accent to --lk-panel-accent so descendants tint.
+  // The card's CSS re-binds --wzl-accent to --lk-panel-accent so descendants tint.
   const style = accent ? ({ '--lk-panel-accent': accent } as CSSProperties) : undefined;
 
   // When a toggle handler is supplied the header acts as a disclosure button:

package/src/ui/properties/PropertyGroup.less

@@ -1,7 +1,7 @@
 .lk-property-group {
   grid-column: 1 / -1;
-  background: var(--lk-bg-sunken, rgba(0, 0, 0, 0.18));
-  border-radius: var(--lk-radius-md, 8px);
+  background: var(--wzl-surface-sunken);
+  border-radius: var(--wzl-radius-md);
   padding: 10px 12px 12px;
 }
 
@@ -11,17 +11,17 @@
   align-items: center;
   gap: 10px;
   margin: 0 0 8px;
-  font-family: var(--lk-font-display);
-  font-weight: var(--lk-font-weight-light, 300);
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--lk-text-dim);
+  color: var(--wzl-fg-subtle);
 }
 
 .lk-property-group__title hr {
   border: 0;
-  border-top: 1px solid var(--lk-border);
+  border-top: 1px solid var(--wzl-border);
   margin: 0;
 }