@discourser/design-system 0.20.1 → 0.22.0

package/dist/{chunk-L5FO6K6L.cjs → chunk-IGCGVSG4.cjs}

@@ -353,45 +353,55 @@ var material3Language = {
 function transformToPandaTheme(language) {
   return {
     tokens: transformTokens(language),
-    semanticTokens: transformSemanticTokens(language),
+    semanticTokens: transformSemanticTokens(),
     textStyles: transformTextStyles(language)
   };
 }
 function transformTokens(language) {
   return {
-    colors: transformColorPalettes(language.colors),
+    colors: transformColorPalettes(
+      language.colors
+    ),
     fonts: {
       display: { value: language.typography.fonts.display },
       body: { value: language.typography.fonts.body },
       mono: { value: language.typography.fonts.mono }
     },
-    fontSizes: extractFontSizes(language.typography.scale),
-    lineHeights: extractLineHeights(language.typography.scale),
-    fontWeights: extractFontWeights(language.typography.scale),
-    letterSpacings: extractLetterSpacings(language.typography.scale),
-    spacing: objectToTokens(language.spacing),
-    radii: objectToTokens(language.shape.radii),
-    shadows: objectToTokens(language.elevation.levels),
-    durations: objectToTokens(language.motion.durations),
-    easings: objectToTokens(language.motion.easings),
-    borderWidths: objectToTokens(language.border.widths)
+    fontSizes: extractFontSizes(
+      language.typography.scale
+    ),
+    lineHeights: extractLineHeights(
+      language.typography.scale
+    ),
+    fontWeights: extractFontWeights(
+      language.typography.scale
+    ),
+    letterSpacings: extractLetterSpacings(
+      language.typography.scale
+    ),
+    spacing: objectToTokens(
+      language.spacing
+    ),
+    radii: objectToTokens(
+      language.shape.radii
+    ),
+    shadows: objectToTokens(
+      language.elevation.levels
+    ),
+    durations: objectToTokens(
+      language.motion.durations
+    ),
+    easings: objectToTokens(
+      language.motion.easings
+    ),
+    borderWidths: objectToTokens(
+      language.border.widths
+    )
   };
 }
-function transformSemanticTokens(language) {
-  const light = language.semantic;
-  const dark = language.semanticDark || light;
+function transformSemanticTokens(_language) {
   return {
-    colors: Object.fromEntries(
-      Object.entries(light).map(([key, lightValue]) => [
-        key,
-        {
-          value: {
-            base: lightValue,
-            _dark: dark[key] || lightValue
-          }
-        }
-      ])
-    )
+    colors: {}
   };
 }
 function transformTextStyles(language) {
@@ -416,10 +426,7 @@ function transformColorPalettes(palettes) {
     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 }])
       )
     ])
   );
@@ -451,10 +458,7 @@ function extractFontWeights(scale) {
     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) {
@@ -714,68 +718,124 @@ var colors = {
   // Map red to error for Park UI compatibility
   red: error
 };
-var semantic = material3Language.semantic;
-var semanticDark = material3Language.semanticDark;
-var m3SemanticTokens = dev.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 } },
+var s = material3Language.semantic;
+var d = material3Language.semanticDark;
+var semanticColorTokens = dev.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 } }
+  },
+  // 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 }
   },
-  // 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 } },
   // 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 } },
-  // Scrim/Shadow
-  scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } }
+  inverseSecondary: { value: { base: d.secondary, _dark: s.secondary } },
+  inverseTertiary: { value: { base: d.tertiary, _dark: s.tertiary } },
+  // Utility
+  scrim: { value: { base: s.scrim, _dark: d.scrim } },
+  shadow: { value: { base: s.shadow, _dark: d.shadow } }
 });
 var button = dev.defineRecipe({
   className: "button",
@@ -4311,8 +4371,19 @@ var discourserPandaPreset = dev.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
           ...colors,
+          primary: { ...colors.primary, ...semanticColorTokens.primary },
+          secondary: {
+            ...colors.secondary,
+            ...semanticColorTokens.secondary
+          },
+          tertiary: { ...colors.tertiary, ...semanticColorTokens.tertiary },
+          error: { ...colors.error, ...semanticColorTokens.error },
           // Park UI-style aliases for component compatibility
           fg: {
             default: {
@@ -4331,8 +4402,6 @@ var discourserPandaPreset = dev.definePreset({
           border: {
             value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
           },
-          // M3 semantic tokens (surface, onSurface, etc.)
-          ...m3SemanticTokens,
           // Base colors
           white: { value: "#FFFFFF" },
           black: { value: "#000000" }
@@ -4420,5 +4489,5 @@ var discourserPandaPreset = dev.definePreset({
 exports.discourserPandaPreset = discourserPandaPreset;
 exports.material3Language = material3Language;
 exports.transformToPandaTheme = transformToPandaTheme;
-//# sourceMappingURL=chunk-L5FO6K6L.cjs.map
-//# sourceMappingURL=chunk-L5FO6K6L.cjs.map
+//# sourceMappingURL=chunk-IGCGVSG4.cjs.map
+//# sourceMappingURL=chunk-IGCGVSG4.cjs.map