@discourser/design-system 0.15.1 → 0.18.0

package/src/preset/recipes/navigation-menu.ts

@@ -0,0 +1,97 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const navigationMenu = defineSlotRecipe({
+  className: 'navigation-menu',
+  slots: [
+    'root',
+    'section',
+    'sectionTrigger',
+    'sectionIcon',
+    'sectionTitle',
+    'sectionIndicator',
+    'sectionContent',
+    'itemList',
+    'item',
+    'itemLink',
+  ],
+  base: {
+    // ── Token mappings verified against Figma MCP output (node 38:4046) ──
+    // Figma file: GaHmFfmvO4loUzuZS4TgEz
+    root: {
+      bg: 'surface.dim', // Figma: #f5f1eb warm sage sidebar bg
+      width: 'full',
+      py: '2',
+    },
+    section: {
+      borderBottom: 'none',
+    },
+    sectionTrigger: {
+      // Layout-only props — no conflicts with accordion recipe here
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: 'full',
+      cursor: 'pointer',
+      // NOTE: fontSize, fontWeight, borderRadius, p, bg, color are applied via
+      // css={{}} on Accordion.ItemTrigger in the component (utilities layer > recipes layer).
+      // See ScenarioCard.tsx for the same pattern.
+      _hover: {
+        bg: 'surface.container.high',
+      },
+    },
+    sectionIcon: {
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '6', // 24px container
+      height: '6',
+      color: 'primary.50', // olive green icons — Figma: #518500
+      fontSize: '20px', // icon SVGs use width/height: 1em → sets 20×20px
+    },
+    sectionTitle: {
+      flex: 1,
+      textAlign: 'start',
+      // Font styles inherited from trigger's css={{}} utility overrides
+    },
+    sectionIndicator: {
+      // color set via css={{}} on Accordion.ItemIndicator (utilities > recipes)
+      _open: {
+        rotate: '180deg',
+      },
+    },
+    sectionContent: {
+      overflow: 'hidden',
+      borderRadius: '0', // override accordion's default border-radius
+    },
+    itemList: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.5',
+      pt: '1',
+      pb: '2',
+    },
+    item: {},
+    itemLink: {
+      display: 'block',
+      py: '2', // Figma: 5px top/bottom
+      pl: '8', // Figma: 30px left indent → spacing.8 = 32px
+      pr: '2', // Figma: 5px right padding
+      borderRadius: 'l3', // Figma: 8px
+      textDecoration: 'none',
+      fontSize: 'md', // Figma: 16px
+      fontWeight: 'norma', // Figma: Inter Medium 500
+      lineHeight: '1',
+      color: 'onSurface', // Figma: #363636
+      cursor: 'pointer',
+      _hover: {
+        bg: 'surface.container.high', // Figma: #ebe7e1
+      },
+      // Figma active state: surface.container.low (NOT primary.container)
+      '&[data-active="true"]': {
+        bg: 'surface.container.low', // Figma: #f3f4e9 → surfaceContainerLow
+        color: 'onSurface',
+      },
+    },
+  },
+});

package/src/preset/recipes/scenario-settings.ts

@@ -0,0 +1,182 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const scenarioSettings = defineSlotRecipe({
+  className: 'scenario-settings',
+  // ── Token mappings verified against Figma MCP output (node 38:4186) ──
+  // Figma file: GaHmFfmvO4loUzuZS4TgEz — "Discourser Queue Right Accordion"
+  slots: [
+    'root',
+    'section',
+    'sectionTrigger',
+    'triggerLabel',
+    'sectionIndicator',
+    'sectionContent',
+    // Info panels (sections 1-4): surfacevariant bg, explanation card, adjustments
+    'infoPanel',
+    'explanationCard',
+    'explanationTitle',
+    'explanationList',
+    'explanationItem',
+    'levelLabel',
+    'adjustmentsRow',
+    // Radio panels (sections 5-6): neutral.1 bg, radio group, badge
+    'radioPanel',
+    'radioPanelTitle',
+    'radioCurrentRow',
+    'radioCurrentLabel',
+    'currentlyBadge',
+  ],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      cursor: 'default',
+    },
+    section: {
+      // Remove the accordion's default borderBottom
+      borderBottom: 'none',
+      width: 'full',
+    },
+    sectionTrigger: {
+      // Layout — non-conflicting props only.
+      // fontSize, fontWeight, borderRadius, bg, color, py applied via css={{}} in component.
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '4',
+      width: 'full',
+      px: '5', // 20px — Figma spec
+      cursor: 'pointer',
+    },
+    triggerLabel: {
+      flex: 1,
+      textAlign: 'start',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+    sectionIndicator: {
+      // color applied via css={{}} on ItemIndicator
+      flexShrink: 0,
+      _open: {
+        rotate: '180deg',
+      },
+    },
+    sectionContent: {
+      overflow: 'hidden',
+      borderRadius: '0',
+      width: 'full',
+    },
+
+    // ── Info Panel (sections 1-4) ─────────────────────────────────────────────
+    // Figma: bg = surfacevariant (#E1E4D5) — closest token: surface.container.highest (#E2E3D8)
+    infoPanel: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '5', // 20px — Figma spec
+      p: '5', // 20px — Figma spec
+      bg: 'surface.container.highest',
+      width: 'full',
+    },
+
+    // Figma: bg = neutral/99 (#FDFCF5), border = surfacevariant, rounded-8, p-20
+    explanationCard: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4', // 16px
+      p: '5', // 20px
+      bg: 'neutral.1', // neutral[99] = #FDFCF5 ✓
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'surface.container.highest',
+      borderRadius: 'l3', // 8px
+    },
+
+    // Figma: Inter Medium 20px, --dark-surfacecontainerhigh (#282b24 ≈ onSurface)
+    explanationTitle: {
+      fontSize: 'lg',
+      fontWeight: 'semibold',
+      color: 'onSurface',
+      lineHeight: '1',
+    },
+
+    explanationList: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3', // 12px between items
+      listStyleType: 'disc',
+      pl: '5', // indent for disc markers
+    },
+
+    explanationItem: {
+      fontSize: 'sm', // 16px — Figma spec
+      lineHeight: '1.4',
+      color: 'fg.default',
+    },
+
+    // Figma: Inter Bold — the "Beginner:", "Intermediate:", "Advanced:" labels
+    levelLabel: {
+      fontWeight: 'bold',
+      color: 'fg.default',
+    },
+
+    adjustmentsRow: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 'full',
+    },
+
+    // ── Radio Panel (sections 5-6) ────────────────────────────────────────────
+    // Figma: bg = neutral/99 (#FDFCF5)
+    radioPanel: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6', // 24px
+      p: '5', // 20px
+      bg: 'neutral.1', // neutral[99] = #FDFCF5 ✓
+      width: 'full',
+    },
+
+    // Figma: Inter Medium 20px, #363636 ≈ onSurface
+    radioPanelTitle: {
+      fontSize: 'lg',
+      fontWeight: 'semibold',
+      color: 'onSurface',
+      lineHeight: '1',
+    },
+
+    radioCurrentRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2.5', // 10px — Figma spec
+      mt: '2.5', // space below panel title
+    },
+
+    // Figma: Inter SemiBold 18px, #363636
+    radioCurrentLabel: {
+      fontSize: 'md',
+      fontWeight: 'semibold',
+      color: 'onSurface',
+      whiteSpace: 'nowrap',
+    },
+
+    // Figma: bg = dark-primary (#B1D18A) = inversePrimary, fully rounded pill
+    // px-16, py-6, font: Geist/12px, color: #2c2a27 ≈ fg.default
+    currentlyBadge: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '1.5',
+      px: '4', // 16px
+      py: '1.5', // 6px
+      bg: 'inversePrimary', // #B1D18A light mode ✓
+      color: 'fg.default',
+      borderRadius: 'full',
+      fontSize: 'xs', // 12px
+      fontWeight: 'normal',
+      lineHeight: '1',
+      whiteSpace: 'nowrap',
+    },
+  },
+});

package/src/test/setup.ts

@@ -8,15 +8,18 @@ expect.extend(toHaveNoViolations);
 
 // Mock ResizeObserver — JSDOM does not implement it, but @zag-js/tabs requires
 // it to sync the active tab indicator rectangle position.
-Object.defineProperty(window, 'ResizeObserver', {
-  writable: true,
-  configurable: true,
-  value: class ResizeObserver {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  },
-});
+// Guard for Node.js environment (e.g. figma-codex tests with @vitest-environment node)
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    configurable: true,
+    value: class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  });
+}
 
 // Cleanup after each test
 afterEach(() => {