@discourser/design-system 0.20.1 → 0.21.0

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

@@ -1,77 +1,51 @@
 /**
- * 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 declare const m3SemanticTokens: {
-    surface: {
+export declare const semanticColorTokens: {
+    primary: {
         DEFAULT: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
-        dim: {
+        container: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
-        bright: {
+    };
+    onPrimary: {
+        DEFAULT: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
         container: {
-            DEFAULT: {
-                value: {
-                    base: string;
-                    _dark: string;
-                };
-            };
-            low: {
-                value: {
-                    base: string;
-                    _dark: string;
-                };
-            };
-            lowest: {
-                value: {
-                    base: string;
-                    _dark: string;
-                };
-            };
-            high: {
-                value: {
-                    base: string;
-                    _dark: string;
-                };
-            };
-            highest: {
-                value: {
-                    base: string;
-                    _dark: string;
-                };
+            value: {
+                base: string;
+                _dark: string;
             };
         };
     };
-    onSurface: {
+    secondary: {
         DEFAULT: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
-        variant: {
+        container: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
     };
-    m3Primary: {
+    onSecondary: {
         DEFAULT: {
             value: {
                 base: string;
@@ -85,7 +59,7 @@ export declare const m3SemanticTokens: {
             };
         };
     };
-    onM3Primary: {
+    tertiary: {
         DEFAULT: {
             value: {
                 base: string;
@@ -99,7 +73,7 @@ export declare const m3SemanticTokens: {
             };
         };
     };
-    m3Secondary: {
+    onTertiary: {
         DEFAULT: {
             value: {
                 base: string;
@@ -113,7 +87,7 @@ export declare const m3SemanticTokens: {
             };
         };
     };
-    onM3Secondary: {
+    error: {
         DEFAULT: {
             value: {
                 base: string;
@@ -127,7 +101,7 @@ export declare const m3SemanticTokens: {
             };
         };
     };
-    m3Tertiary: {
+    onError: {
         DEFAULT: {
             value: {
                 base: string;
@@ -141,20 +115,90 @@ export declare const m3SemanticTokens: {
             };
         };
     };
-    onM3Tertiary: {
+    surface: {
         DEFAULT: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
+        dim: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        bright: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
         container: {
+            DEFAULT: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            low: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            lowest: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            high: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            highest: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+        };
+    };
+    onSurface: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        variant: {
             value: {
                 base: string;
                 _dark: string;
             };
         };
     };
+    surfaceVariant: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    background: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    onBackground: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
     outline: {
         DEFAULT: {
             value: {
@@ -205,5 +249,102 @@ export declare const m3SemanticTokens: {
             _dark: string;
         };
     };
+    shadow: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+};
+/**
+ * DEPRECATED: m3-prefixed aliases — will be removed after discourser.ai token update session.
+ * Semantic tokens cannot reference other semantic tokens in Panda CSS, so these
+ * duplicate the hex values directly from the language contract.
+ */
+export declare const m3SemanticTokens: {
+    m3Primary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onM3Primary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    m3Secondary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onM3Secondary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    m3Tertiary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onM3Tertiary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
 };
 //# sourceMappingURL=semantic-tokens.d.ts.map

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;AAEH;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.20.1",
+  "version": "0.21.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';