@discourser/design-system 0.20.1 → 0.22.0

package/dist/preset/semantic-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../src/preset/semantic-tokens.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE3B,CAAC"}
+{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../src/preset/semantic-tokens.ts"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {

package/src/__tests__/token-contract.test.ts

@@ -0,0 +1,168 @@
+/**
+ * Token Contract Tests
+ *
+ * Permanent regression guard. Prevents semantic-tokens.ts from drifting out of sync
+ * with material3.language.ts. Run in CI on every PR.
+ *
+ * If any test here fails, a semantic role is missing or broken. Fix the gap in
+ * semantic-tokens.ts — do not adjust these tests.
+ */
+
+import { describe, test, expect } from 'vitest';
+import { material3Language } from '../languages/material3.language';
+import { semanticColorTokens } from '../preset/semantic-tokens';
+import { discourserPandaPreset } from '../preset/index';
+
+// ---------------------------------------------------------------------------
+// Check 1: Coverage — every language semantic role is represented in the preset
+// ---------------------------------------------------------------------------
+
+describe('Semantic token coverage', () => {
+  const languageRoles = Object.keys(material3Language.semantic);
+  const presetKeys = flattenTokenKeys(semanticColorTokens);
+
+  test.each(languageRoles)(
+    '"%s" from language contract is represented in semanticColorTokens',
+    (role) => {
+      // Normalize: strip `.DEFAULT` suffix, remove all dots, lowercase.
+      // This lets `primaryContainer` match `primary.container`, etc.
+      const normalize = (k: string) =>
+        k
+          .toLowerCase()
+          .replace(/\.default$/i, '')
+          .replace(/\./g, '');
+      const normalizedRole = normalize(role);
+      const found = presetKeys.some((k) => normalize(k) === normalizedRole);
+      expect(found).toBe(true);
+    },
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Check 2: No undefined or empty values in any token definition
+// ---------------------------------------------------------------------------
+
+describe('Semantic token values', () => {
+  test('no token has an undefined or empty light value', () => {
+    walkTokens(semanticColorTokens, (_path, token) => {
+      if (
+        token.value &&
+        typeof token.value === 'object' &&
+        'base' in token.value
+      ) {
+        expect(token.value.base).toBeDefined();
+        expect(token.value.base).not.toBe('');
+        expect(token.value.base).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      }
+    });
+  });
+
+  test('no token has an undefined or empty dark value', () => {
+    walkTokens(semanticColorTokens, (_path, token) => {
+      if (
+        token.value &&
+        typeof token.value === 'object' &&
+        '_dark' in token.value
+      ) {
+        expect(token.value._dark).toBeDefined();
+        expect(token.value._dark).not.toBe('');
+        expect(token.value._dark).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      }
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Check 3: Language contract symmetry — semantic and semanticDark have identical keys
+// ---------------------------------------------------------------------------
+
+describe('Language contract symmetry', () => {
+  test('semanticDark has the same keys as semantic', () => {
+    const lightKeys = Object.keys(material3Language.semantic).sort();
+    const darkKeys = Object.keys(material3Language.semanticDark!).sort();
+    expect(darkKeys).toEqual(lightKeys);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Check 4: Preset assembly — Radix bridge keys AND semantic keys coexist after deep-merge
+// ---------------------------------------------------------------------------
+
+describe('Preset color assembly', () => {
+  const colors = discourserPandaPreset.theme?.extend?.semanticTokens
+    ?.colors as Record<string, Record<string, unknown>>;
+
+  test.each(['primary', 'secondary', 'tertiary', 'error'])(
+    '%s has both Radix bridge keys (1, 12) and semantic keys (DEFAULT, container)',
+    (palette) => {
+      expect(colors[palette]['1']).toBeDefined();
+      expect(colors[palette]['12']).toBeDefined();
+      expect(colors[palette]['DEFAULT']).toBeDefined();
+      expect(colors[palette]['container']).toBeDefined();
+    },
+  );
+
+  test('surface has full nested container structure', () => {
+    const surface = colors['surface'] as Record<string, unknown>;
+    expect(surface['DEFAULT']).toBeDefined();
+    expect(
+      (surface['container'] as Record<string, unknown>)?.['DEFAULT'],
+    ).toBeDefined();
+    expect(
+      (surface['container'] as Record<string, unknown>)?.['low'],
+    ).toBeDefined();
+    expect(
+      (surface['container'] as Record<string, unknown>)?.['highest'],
+    ).toBeDefined();
+  });
+
+  test('onSurface has variant subkey', () => {
+    const onSurface = colors['onSurface'] as Record<string, unknown>;
+    expect(onSurface['DEFAULT']).toBeDefined();
+    expect(onSurface['variant']).toBeDefined();
+  });
+
+  test('previously missing tokens are now present', () => {
+    expect(colors['background']).toBeDefined();
+    expect(colors['onBackground']).toBeDefined();
+    expect(colors['shadow']).toBeDefined();
+    expect(colors['surfaceVariant']).toBeDefined();
+    expect(
+      (colors['onError'] as Record<string, unknown>)?.['DEFAULT'],
+    ).toBeDefined();
+    expect(
+      (colors['error'] as Record<string, unknown>)?.['container'],
+    ).toBeDefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Flatten nested token object to dot-notation key array */
+function flattenTokenKeys(obj: Record<string, unknown>, prefix = ''): string[] {
+  return Object.entries(obj).flatMap(([key, val]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (val && typeof val === 'object' && !('value' in (val as object))) {
+      return flattenTokenKeys(val as Record<string, unknown>, fullKey);
+    }
+    return [fullKey];
+  });
+}
+
+/** Walk all leaf token nodes and call callback */
+function walkTokens(
+  obj: Record<string, unknown>,
+  callback: (path: string, token: { value: unknown }) => void,
+  prefix = '',
+) {
+  for (const [key, val] of Object.entries(obj)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (val && typeof val === 'object' && 'value' in (val as object)) {
+      callback(path, val as { value: unknown });
+    } else if (val && typeof val === 'object') {
+      walkTokens(val as Record<string, unknown>, callback, path);
+    }
+  }
+}

package/src/components/Icons/TrashIcon.tsx

@@ -0,0 +1,34 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type TrashIconProps = ComponentProps<typeof StyledSvg>;
+
+export const TrashIcon = (props: TrashIconProps) => (
+  <StyledSvg
+    viewBox="0 0 44 51"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M15.24 17.7998H17.8V38.2798H15.24V17.7998Z" fill="currentColor" />
+    <path
+      d="M20.3601 17.7998H22.9201V38.2798H20.3601V17.7998Z"
+      fill="currentColor"
+    />
+    <path d="M25.48 17.7998H28.04V38.2798H25.48V17.7998Z" fill="currentColor" />
+    <path d="M5 10.1201H38.28V12.6801H5V10.1201Z" fill="currentColor" />
+    <path
+      d="M28.04 10.12H25.48V8.84C25.48 8.072 24.968 7.56 24.2 7.56H19.08C18.312 7.56 17.8 8.072 17.8 8.84V10.12H15.24V8.84C15.24 6.664 16.904 5 19.08 5H24.2C26.376 5 28.04 6.664 28.04 8.84V10.12Z"
+      fill="currentColor"
+    />
+    <path
+      d="M29.3201 45.96H13.9601C11.9121 45.96 10.1201 44.296 9.86406 42.248L7.56006 11.528L10.1201 11.272L12.4241 41.992C12.4241 42.76 13.1921 43.4 13.9601 43.4H29.3201C30.0881 43.4 30.7281 42.76 30.8561 41.992L33.1601 11.272L35.7201 11.528L33.4161 42.248C33.1601 44.296 31.3681 45.96 29.3201 45.96Z"
+      fill="currentColor"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/index.ts

@@ -37,3 +37,4 @@ export {
 export { UserProfileIcon, type UserProfileIconProps } from './UserProfileIcon';
 export { PlayIcon, type PlayIconProps } from './PlayIcon';
 export { SpeechIcon, type SpeechIconProps } from './SpeechIcon';
+export { TrashIcon, type TrashIconProps } from './TrashIcon';

package/src/languages/transform.ts

@@ -1,4 +1,7 @@
-import type { DesignLanguageContract, TonalPalette, SemanticColors } from '../contracts/design-language.contract'
+import type {
+  DesignLanguageContract,
+  TonalPalette,
+} from '../contracts/design-language.contract';
 /**
  * Transforms a DesignLanguageContract into Panda CSS theme configuration
  */
@@ -6,47 +9,70 @@ export function transformToPandaTheme(language: DesignLanguageContract) {
   return {
     tokens: transformTokens(language),
     semanticTokens: transformSemanticTokens(language),
-    textStyles: transformTextStyles(language)
+    textStyles: transformTextStyles(language),
   };
 }
 
 function transformTokens(language: DesignLanguageContract) {
   return {
-    colors: transformColorPalettes(language.colors as unknown as Record<string, TonalPalette>),
+    colors: transformColorPalettes(
+      language.colors as unknown as Record<string, TonalPalette>,
+    ),
     fonts: {
       display: { value: language.typography.fonts.display },
       body: { value: language.typography.fonts.body },
-      mono: { value: language.typography.fonts.mono }
+      mono: { value: language.typography.fonts.mono },
     },
-    fontSizes: extractFontSizes(language.typography.scale as unknown as Record<string, { fontSize: string }>),
-    lineHeights: extractLineHeights(language.typography.scale as unknown as Record<string, { lineHeight: string }>),
-    fontWeights: extractFontWeights(language.typography.scale as unknown as Record<string, { fontWeight: string }>),
-    letterSpacings: extractLetterSpacings(language.typography.scale as unknown as Record<string, { letterSpacing: string }>),
-    spacing: objectToTokens(language.spacing as unknown as Record<string, string>),
-    radii: objectToTokens(language.shape.radii as unknown as Record<string, string>),
-    shadows: objectToTokens(language.elevation.levels as unknown as Record<string, string>),
-    durations: objectToTokens(language.motion.durations as unknown as Record<string, string>),
-    easings: objectToTokens(language.motion.easings as unknown as Record<string, string>),
-    borderWidths: objectToTokens(language.border.widths as unknown as Record<string, string>)
+    fontSizes: extractFontSizes(
+      language.typography.scale as unknown as Record<
+        string,
+        { fontSize: string }
+      >,
+    ),
+    lineHeights: extractLineHeights(
+      language.typography.scale as unknown as Record<
+        string,
+        { lineHeight: string }
+      >,
+    ),
+    fontWeights: extractFontWeights(
+      language.typography.scale as unknown as Record<
+        string,
+        { fontWeight: string }
+      >,
+    ),
+    letterSpacings: extractLetterSpacings(
+      language.typography.scale as unknown as Record<
+        string,
+        { letterSpacing: string }
+      >,
+    ),
+    spacing: objectToTokens(
+      language.spacing as unknown as Record<string, string>,
+    ),
+    radii: objectToTokens(
+      language.shape.radii as unknown as Record<string, string>,
+    ),
+    shadows: objectToTokens(
+      language.elevation.levels as unknown as Record<string, string>,
+    ),
+    durations: objectToTokens(
+      language.motion.durations as unknown as Record<string, string>,
+    ),
+    easings: objectToTokens(
+      language.motion.easings as unknown as Record<string, string>,
+    ),
+    borderWidths: objectToTokens(
+      language.border.widths as unknown as Record<string, string>,
+    ),
   };
 }
 
-function transformSemanticTokens(language: DesignLanguageContract) {
-  const light = language.semantic;
-  const dark = language.semanticDark || light; // Fallback to light if no dark
-
+function transformSemanticTokens(_language: DesignLanguageContract) {
+  // Semantic colors are now managed entirely by semantic-tokens.ts
+  // This prevents flat hex tokens from overwriting the nested semantic token structure
   return {
-    colors: Object.fromEntries(
-      Object.entries(light).map(([key, lightValue]) => [
-        key,
-        {
-          value: {
-            base: lightValue,
-            _dark: dark[key as keyof SemanticColors] || lightValue
-          }
-        }
-      ])
-    )
+    colors: {},
   };
 }
 
@@ -62,10 +88,10 @@ function transformTextStyles(language: DesignLanguageContract) {
           fontSize: style.fontSize,
           lineHeight: style.lineHeight,
           fontWeight: style.fontWeight,
-          letterSpacing: style.letterSpacing
-        }
-      }
-    ])
+          letterSpacing: style.letterSpacing,
+        },
+      },
+    ]),
   );
 }
 
@@ -74,18 +100,15 @@ function transformColorPalettes(palettes: Record<string, TonalPalette>) {
     Object.entries(palettes).map(([name, palette]) => [
       name,
       Object.fromEntries(
-        Object.entries(palette).map(([tone, value]) => [
-          tone,
-          { value }
-        ])
-      )
-    ])
+        Object.entries(palette).map(([tone, value]) => [tone, { value }]),
+      ),
+    ]),
   );
 }
 
 function objectToTokens<T extends Record<string, string>>(obj: T) {
   return Object.fromEntries(
-    Object.entries(obj).map(([key, value]) => [key, { value }])
+    Object.entries(obj).map(([key, value]) => [key, { value }]),
   );
 }
 
@@ -93,8 +116,8 @@ function extractFontSizes(scale: Record<string, { fontSize: string }>) {
   return Object.fromEntries(
     Object.entries(scale).map(([name, style]) => [
       name,
-      { value: style.fontSize }
-    ])
+      { value: style.fontSize },
+    ]),
   );
 }
 
@@ -102,29 +125,28 @@ function extractLineHeights(scale: Record<string, { lineHeight: string }>) {
   return Object.fromEntries(
     Object.entries(scale).map(([name, style]) => [
       name,
-      { value: style.lineHeight }
-    ])
+      { value: style.lineHeight },
+    ]),
   );
 }
 
 function extractFontWeights(scale: Record<string, { fontWeight: string }>) {
   const weights = new Map<string, string>();
-  Object.values(scale).forEach(style => {
+  Object.values(scale).forEach((style) => {
     weights.set(style.fontWeight, style.fontWeight);
   });
   return Object.fromEntries(
-    Array.from(weights.entries()).map(([key, value]) => [
-      key,
-      { value }
-    ])
+    Array.from(weights.entries()).map(([key, value]) => [key, { value }]),
   );
 }
 
-function extractLetterSpacings(scale: Record<string, { letterSpacing: string }>) {
+function extractLetterSpacings(
+  scale: Record<string, { letterSpacing: string }>,
+) {
   return Object.fromEntries(
     Object.entries(scale).map(([name, style]) => [
       name,
-      { value: style.letterSpacing }
-    ])
+      { value: style.letterSpacing },
+    ]),
   );
 }

package/src/preset/index.ts

@@ -1,7 +1,7 @@
 import { definePreset } from '@pandacss/dev';
 import { activeLanguage, transformToPandaTheme } from '../languages';
 import { colors as m3Colors } from './colors';
-import { m3SemanticTokens } from './semantic-tokens';
+import { semanticColorTokens } from './semantic-tokens';
 
 // Park UI recipes - Core
 import { button as parkButton } from './recipes/button';
@@ -97,8 +97,20 @@ export const discourserPandaPreset = definePreset({
       // Semantic tokens: M3 colors + Park UI aliases + shadows + radii
       semanticTokens: {
         colors: {
-          // M3-to-Radix color bridges
+          // Non-conflicting M3 semantic tokens land here first
+          // (onPrimary, onSecondary, surface, outline, etc.)
+          ...semanticColorTokens,
+
+          // M3-to-Radix color bridges — overwrite conflicting top-level keys,
+          // then re-merge the M3 semantic DEFAULT+container back in
           ...m3Colors,
+          primary: { ...m3Colors.primary, ...semanticColorTokens.primary },
+          secondary: {
+            ...m3Colors.secondary,
+            ...semanticColorTokens.secondary,
+          },
+          tertiary: { ...m3Colors.tertiary, ...semanticColorTokens.tertiary },
+          error: { ...m3Colors.error, ...semanticColorTokens.error },
 
           // Park UI-style aliases for component compatibility
           fg: {
@@ -119,9 +131,6 @@ export const discourserPandaPreset = definePreset({
             value: { base: '{colors.gray.6}', _dark: '{colors.gray.6}' },
           },
 
-          // M3 semantic tokens (surface, onSurface, etc.)
-          ...m3SemanticTokens,
-
           // Base colors
           white: { value: '#FFFFFF' },
           black: { value: '#000000' },

package/src/preset/semantic-tokens.ts

@@ -1,79 +1,146 @@
 import { defineSemanticTokens } from '@pandacss/dev';
 import { material3Language } from '../languages/material3.language';
 
-const semantic = material3Language.semantic;
-const semanticDark = material3Language.semanticDark!;
+/**
+ * MAINTENANCE CONTRACT:
+ * Every key in material3Language.semantic MUST have a corresponding entry here.
+ * src/__tests__/token-contract.test.ts enforces this automatically.
+ * When adding a new semantic role to material3.language.ts:
+ *   1. Add the token here in semanticColorTokens
+ *   2. Run pnpm test to confirm the contract test passes
+ *   3. Update Colors.mdx to add the swatch
+ *   4. Bump the minor version
+ */
+
+const s = material3Language.semantic;
+const d = material3Language.semanticDark!;
 
 /**
- * M3 Semantic Tokens - layered on top of Park UI
- *
- * These provide M3-style naming (surface, onSurface, etc.)
- * while Park UI components use their own naming (fg, canvas, etc.)
+ * Clean semantic color tokens — no m3 prefix.
+ * These are the authoritative names going forward.
  */
-export const m3SemanticTokens = defineSemanticTokens.colors({
-  // M3 Surface System
-  surface: {
-    DEFAULT: { value: { base: semantic.surface, _dark: semanticDark.surface } },
-    dim: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
-    bright: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
+export const semanticColorTokens = defineSemanticTokens.colors({
+  // Primary
+  primary: {
+    DEFAULT: { value: { base: s.primary, _dark: d.primary } },
     container: {
-      DEFAULT: { value: { base: semantic.surfaceContainer, _dark: semanticDark.surfaceContainer } },
-      low: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
-      lowest: { value: { base: semantic.surfaceContainerLowest, _dark: semanticDark.surfaceContainerLowest } },
-      high: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
-      highest: { value: { base: semantic.surfaceContainerHighest, _dark: semanticDark.surfaceContainerHighest } },
+      value: { base: s.primaryContainer, _dark: d.primaryContainer },
     },
   },
-  onSurface: {
-    DEFAULT: { value: { base: semantic.onSurface, _dark: semanticDark.onSurface } },
-    variant: { value: { base: semantic.onSurfaceVariant, _dark: semanticDark.onSurfaceVariant } },
+  onPrimary: {
+    DEFAULT: { value: { base: s.onPrimary, _dark: d.onPrimary } },
+    container: {
+      value: { base: s.onPrimaryContainer, _dark: d.onPrimaryContainer },
+    },
   },
 
-  // M3 Primary tokens (for explicit M3 usage)
-  m3Primary: {
-    DEFAULT: { value: { base: semantic.primary, _dark: semanticDark.primary } },
-    container: { value: { base: semantic.primaryContainer, _dark: semanticDark.primaryContainer } },
+  // Secondary
+  secondary: {
+    DEFAULT: { value: { base: s.secondary, _dark: d.secondary } },
+    container: {
+      value: { base: s.secondaryContainer, _dark: d.secondaryContainer },
+    },
   },
-  onM3Primary: {
-    DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
-    container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } },
+  onSecondary: {
+    DEFAULT: { value: { base: s.onSecondary, _dark: d.onSecondary } },
+    container: {
+      value: { base: s.onSecondaryContainer, _dark: d.onSecondaryContainer },
+    },
   },
 
-  // M3 Secondary (prefixed to avoid conflict with Park UI Radix-scale bridge)
-  m3Secondary: {
-    DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
-    container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } },
+  // Tertiary
+  tertiary: {
+    DEFAULT: { value: { base: s.tertiary, _dark: d.tertiary } },
+    container: {
+      value: { base: s.tertiaryContainer, _dark: d.tertiaryContainer },
+    },
   },
-  onM3Secondary: {
-    DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
-    container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } },
+  onTertiary: {
+    DEFAULT: { value: { base: s.onTertiary, _dark: d.onTertiary } },
+    container: {
+      value: { base: s.onTertiaryContainer, _dark: d.onTertiaryContainer },
+    },
   },
 
-  // M3 Tertiary (prefixed to avoid conflict with Park UI Radix-scale bridge)
-  m3Tertiary: {
-    DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
-    container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } },
+  // Error
+  error: {
+    DEFAULT: { value: { base: s.error, _dark: d.error } },
+    container: { value: { base: s.errorContainer, _dark: d.errorContainer } },
   },
-  onM3Tertiary: {
-    DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
-    container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } },
+  onError: {
+    DEFAULT: { value: { base: s.onError, _dark: d.onError } },
+    container: {
+      value: { base: s.onErrorContainer, _dark: d.onErrorContainer },
+    },
   },
 
-  // M3 Outline
+  // Surface system
+  surface: {
+    DEFAULT: { value: { base: s.surface, _dark: d.surface } },
+    dim: {
+      value: { base: s.surfaceContainerLow, _dark: d.surfaceContainerLow },
+    },
+    bright: {
+      value: { base: s.surfaceContainerHigh, _dark: d.surfaceContainerHigh },
+    },
+    container: {
+      DEFAULT: {
+        value: { base: s.surfaceContainer, _dark: d.surfaceContainer },
+      },
+      low: {
+        value: { base: s.surfaceContainerLow, _dark: d.surfaceContainerLow },
+      },
+      lowest: {
+        value: {
+          base: s.surfaceContainerLowest,
+          _dark: d.surfaceContainerLowest,
+        },
+      },
+      high: {
+        value: { base: s.surfaceContainerHigh, _dark: d.surfaceContainerHigh },
+      },
+      highest: {
+        value: {
+          base: s.surfaceContainerHighest,
+          _dark: d.surfaceContainerHighest,
+        },
+      },
+    },
+  },
+  onSurface: {
+    DEFAULT: { value: { base: s.onSurface, _dark: d.onSurface } },
+    variant: { value: { base: s.onSurfaceVariant, _dark: d.onSurfaceVariant } },
+  },
+  surfaceVariant: {
+    value: { base: s.surfaceVariant, _dark: d.surfaceVariant },
+  },
+
+  // Background
+  background: { value: { base: s.background, _dark: d.background } },
+  onBackground: { value: { base: s.onBackground, _dark: d.onBackground } },
+
+  // Outline
   outline: {
-    DEFAULT: { value: { base: semantic.outline, _dark: semanticDark.outline } },
-    variant: { value: { base: semantic.outlineVariant, _dark: semanticDark.outlineVariant } },
+    DEFAULT: { value: { base: s.outline, _dark: d.outline } },
+    variant: { value: { base: s.outlineVariant, _dark: d.outlineVariant } },
   },
 
-  // M3 Inverse
-  inverseSurface: { value: { base: semantic.inverseSurface, _dark: semanticDark.inverseSurface } },
-  inverseOnSurface: { value: { base: semantic.inverseOnSurface, _dark: semanticDark.inverseOnSurface } },
-  inversePrimary: { value: { base: semantic.inversePrimary, _dark: semanticDark.inversePrimary } },
+  // Inverse
+  inverseSurface: {
+    value: { base: s.inverseSurface, _dark: d.inverseSurface },
+  },
+  inverseOnSurface: {
+    value: { base: s.inverseOnSurface, _dark: d.inverseOnSurface },
+  },
+  inversePrimary: {
+    value: { base: s.inversePrimary, _dark: d.inversePrimary },
+  },
   // Not standard M3 tokens, but follow inversePrimary's pattern:
   // light mode = dark-palette value, dark mode = light-palette value.
-  inverseSecondary: { value: { base: semanticDark.secondary, _dark: semantic.secondary } },
-  inverseTertiary: { value: { base: semanticDark.tertiary, _dark: semantic.tertiary } },
+  inverseSecondary: { value: { base: d.secondary, _dark: s.secondary } },
+  inverseTertiary: { value: { base: d.tertiary, _dark: s.tertiary } },
 
-  // Scrim/Shadow
-  scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } },
-});
+  // Utility
+  scrim: { value: { base: s.scrim, _dark: d.scrim } },
+  shadow: { value: { base: s.shadow, _dark: d.shadow } },
+});