@discourser/design-system 0.13.0 → 0.14.0

package/src/preset/recipes/radio-group.ts

@@ -17,8 +17,6 @@ export const radioGroup = defineSlotRecipe({
       flexShrink: 0,
       justifyContent: 'center',
       verticalAlign: 'top',
-      boxShadow: 'inset 0 0 0 1px var(--shadow-color)',
-      boxShadowColor: 'gray.surface.border',
       _after: {
         content: '""',
         display: 'block',
@@ -28,14 +26,6 @@ export const radioGroup = defineSlotRecipe({
       _focusVisible: {
         focusVisibleRing: 'outside',
       },
-      _checked: {
-        bg: 'colorPalette.solid.bg',
-        color: 'colorPalette.solid.fg',
-        boxShadowColor: 'colorPalette.solid.bg',
-        _after: {
-          background: 'colorPalette.solid.fg',
-        },
-      },
     },
     item: {
       alignItems: 'center',
@@ -63,7 +53,18 @@ export const radioGroup = defineSlotRecipe({
   variants: {
     variant: {
       solid: {
-        itemControl: {},
+        itemControl: {
+          boxShadow: 'inset 0 0 0 1px var(--shadow-color)',
+          boxShadowColor: 'gray.surface.border',
+          _checked: {
+            bg: 'colorPalette.solid.bg',
+            color: 'colorPalette.solid.fg',
+            boxShadowColor: 'colorPalette.solid.bg',
+            _after: {
+              background: 'colorPalette.solid.fg',
+            },
+          },
+        },
       },
     },
     size: {

package/src/preset/semantic-tokens.ts

@@ -39,22 +39,22 @@ export const m3SemanticTokens = defineSemanticTokens.colors({
     container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } },
   },
 
-  // M3 Secondary
-  secondary: {
+  // 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 } },
   },
-  onSecondary: {
+  onM3Secondary: {
     DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
     container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } },
   },
 
-  // M3 Tertiary
-  tertiary: {
+  // 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 } },
   },
-  onTertiary: {
+  onM3Tertiary: {
     DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
     container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } },
   },

package/src/preset/shadows.ts

@@ -1,45 +1,31 @@
 import { defineSemanticTokens } from '@pandacss/dev';
 
 /**
- * Shadow semantic tokens from Park UI
- * Adjusted to use 'base' instead of '_light' and neutral.a* instead of black.a*
+ * Shadow semantic tokens - chained to M3 base elevation tokens
+ *
+ * Three-layer architecture:
+ * 1. Base tokens (level0-5): M3 elevation values defined in transform.ts
+ * 2. Semantic tokens (xs-2xl): Reference base tokens for consistency
+ * 3. Components: Use semantic tokens for flexibility
  */
 export const shadows = defineSemanticTokens.shadows({
   xs: {
-    value: {
-      base: '0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}',
-      _dark: '0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level1}',
   },
   sm: {
-    value: {
-      base: '0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}',
-      _dark: '0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level2}',
   },
   md: {
-    value: {
-      base: '0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}',
-      _dark: '0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level3}',
   },
   lg: {
-    value: {
-      base: '0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}',
-      _dark: '0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level4}',
   },
   xl: {
-    value: {
-      base: '0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}',
-      _dark: '0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level5}',
   },
   '2xl': {
-    value: {
-      base: '0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}',
-      _dark: '0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}',
-    },
+    value: '{shadows.level5}',
   },
   inset: {
     value: {

package/src/stories/foundations/Colors.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { ColorSwatch, TonalSwatch, SemanticSwatch } from './components/ColorSwatch';
 import { material3Language } from '../../languages/material3.language';
 

package/src/stories/foundations/Elevation.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { ElevationGrid } from './components/ElevationCard';
 import { material3Language } from '../../languages/material3.language';
 
@@ -8,6 +8,35 @@ import { material3Language } from '../../languages/material3.language';
 
 Elevation in Material Design 3 creates depth and hierarchy through the use of shadows. The Discourser Design System provides 6 elevation levels, from no elevation to the highest prominence.
 
+## Token Architecture
+
+The elevation system uses a **three-layer architecture** for flexibility and consistency:
+
+### Layer 1: Base Tokens (Material 3 Values)
+The foundation layer contains actual M3 elevation values:
+- `level0` through `level5` — Registered via `transform.ts`
+- Contains raw shadow CSS values from Material Design 3 spec
+- **Do not use directly in components**
+
+### Layer 2: Semantic Tokens (Design Intent)
+The middle layer maps design intent to base tokens:
+- `xs`, `sm`, `md`, `lg`, `xl`, `2xl` — Defined in `src/preset/shadows.ts`
+- Each semantic token references a base token (e.g., `sm` → `{shadows.level2}`)
+- Provides meaningful names that express elevation purpose
+
+### Layer 3: Component Usage
+Components use semantic tokens for flexibility:
+```tsx
+// ✅ Use semantic tokens in components
+boxShadow: 'sm'
+boxShadow: 'md'
+
+// ❌ Don't use base tokens directly
+boxShadow: 'level2'
+```
+
+This architecture allows the design language to be swapped by changing which base tokens the semantic layer references, without touching component code.
+
 ## Elevation Scale
 
 <ElevationGrid elevations={material3Language.elevation.levels} />
@@ -76,10 +105,10 @@ Use elevation changes to indicate interactivity:
 import { css } from 'styled-system/css';
 
 const interactiveCardStyle = css({
-  boxShadow: 'level1',
+  boxShadow: 'xs',
   transition: 'box-shadow 200ms',
   _hover: {
-    boxShadow: 'level2'
+    boxShadow: 'sm'
   }
 });
 ```
@@ -202,7 +231,7 @@ Elevation works differently in dark themes:
 import { css } from 'styled-system/css';
 
 const cardStyle = css({
-  boxShadow: 'level1',
+  boxShadow: 'xs',
   borderRadius: 'medium',
   padding: 'lg'
 });
@@ -214,14 +243,14 @@ const cardStyle = css({
 import { css } from 'styled-system/css';
 
 const elevatedButtonStyle = css({
-  boxShadow: 'level2',
+  boxShadow: 'sm',
   transition: 'all',
   transitionDuration: 'fast',
   _hover: {
-    boxShadow: 'level3'
+    boxShadow: 'md'
   },
   _active: {
-    boxShadow: 'level1'
+    boxShadow: 'xs'
   }
 });
 ```
@@ -236,7 +265,7 @@ const modalStyle = css({
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  boxShadow: 'level3',
+  boxShadow: 'md',
   borderRadius: 'large',
   backgroundColor: 'surface',
   padding: 'xl'

package/src/stories/foundations/Spacing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { SpacingBox } from './components/SpacingBox';
 import { material3Language } from '../../languages/material3.language';
 

package/src/stories/foundations/Typography.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { TypeSpecimen } from './components/TypeSpecimen';
 import { material3Language } from '../../languages/material3.language';