@discourser/design-system 0.20.0 → 0.21.0

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, m3SemanticTokens } 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,7 +131,7 @@ export const discourserPandaPreset = definePreset({
             value: { base: '{colors.gray.6}', _dark: '{colors.gray.6}' },
           },
 
-          // M3 semantic tokens (surface, onSurface, etc.)
+          // DEPRECATED: m3-prefixed aliases (still needed by discourser.ai)
           ...m3SemanticTokens,
 
           // Base colors

package/src/preset/recipes/breadcrumb.ts

@@ -102,6 +102,28 @@ export const breadcrumb = defineSlotRecipe({
     },
   },
 
+  compoundVariants: [
+    {
+      variant: 'discourser',
+      css: {
+        link: {
+          '&[data-disabled]': {
+            color: 'fg.subtle',
+            opacity: 0.45,
+            pointerEvents: 'none',
+            cursor: 'default',
+            _hover: { color: 'fg.subtle' },
+          },
+        },
+        item: {
+          '&[data-disabled]': {
+            opacity: 0.45,
+          },
+        },
+      },
+    },
+  ],
+
   defaultVariants: {
     variant: 'plain',
     size: 'md',

package/src/preset/semantic-tokens.ts

@@ -1,79 +1,190 @@
 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 },
+    },
+  },
+
+  // 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 } },
 
-  // M3 Outline
+  // 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 } },
+});
+
+/**
+ * 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 const m3SemanticTokens = defineSemanticTokens.colors({
+  m3Primary: {
+    DEFAULT: { value: { base: s.primary, _dark: d.primary } },
+    container: {
+      value: { base: s.primaryContainer, _dark: d.primaryContainer },
+    },
+  },
+  onM3Primary: {
+    DEFAULT: { value: { base: s.onPrimary, _dark: d.onPrimary } },
+    container: {
+      value: { base: s.onPrimaryContainer, _dark: d.onPrimaryContainer },
+    },
+  },
+  m3Secondary: {
+    DEFAULT: { value: { base: s.secondary, _dark: d.secondary } },
+    container: {
+      value: { base: s.secondaryContainer, _dark: d.secondaryContainer },
+    },
+  },
+  onM3Secondary: {
+    DEFAULT: { value: { base: s.onSecondary, _dark: d.onSecondary } },
+    container: {
+      value: { base: s.onSecondaryContainer, _dark: d.onSecondaryContainer },
+    },
+  },
+  m3Tertiary: {
+    DEFAULT: { value: { base: s.tertiary, _dark: d.tertiary } },
+    container: {
+      value: { base: s.tertiaryContainer, _dark: d.tertiaryContainer },
+    },
+  },
+  onM3Tertiary: {
+    DEFAULT: { value: { base: s.onTertiary, _dark: d.onTertiary } },
+    container: {
+      value: { base: s.onTertiaryContainer, _dark: d.onTertiaryContainer },
+    },
+  },
+});