@discourser/design-system 0.9.3 → 0.9.4

package/src/preset/colors/m3-neutral.ts

@@ -0,0 +1,89 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+import { material3Language } from '../../languages/material3.language';
+
+const m3 = material3Language.colors.neutral;
+
+export const neutral = defineSemanticTokens.colors({
+  '1': { value: { base: m3[99], _dark: m3[10] } },
+  '2': { value: { base: m3[95], _dark: m3[20] } },
+  '3': { value: { base: m3[90], _dark: m3[20] } },
+  '4': { value: { base: m3[80], _dark: m3[30] } },
+  '5': { value: { base: m3[70], _dark: m3[30] } },
+  '6': { value: { base: m3[60], _dark: m3[40] } },
+  '7': { value: { base: m3[50], _dark: m3[50] } },
+  '8': { value: { base: m3[40], _dark: m3[60] } },
+  '9': { value: { base: m3[40], _dark: m3[60] } },
+  '10': { value: { base: m3[30], _dark: m3[70] } },
+  '11': { value: { base: m3[30], _dark: m3[80] } },
+  '12': { value: { base: m3[10], _dark: m3[90] } },
+
+  // Alpha variants
+  a1: { value: { base: '#00000003', _dark: '#ffffff05' } },
+  a2: { value: { base: '#00000006', _dark: '#ffffff09' } },
+  a3: { value: { base: '#0000000f', _dark: '#ffffff12' } },
+  a4: { value: { base: '#00000017', _dark: '#ffffff1b' } },
+  a5: { value: { base: '#0000001f', _dark: '#ffffff22' } },
+  a6: { value: { base: '#00000026', _dark: '#ffffff2c' } },
+  a7: { value: { base: '#00000031', _dark: '#ffffff3b' } },
+  a8: { value: { base: '#00000044', _dark: '#ffffff55' } },
+  a9: { value: { base: '#00000072', _dark: '#ffffff64' } },
+  a10: { value: { base: '#0000007c', _dark: '#ffffff72' } },
+  a11: { value: { base: '#0000009b', _dark: '#ffffffaf' } },
+  a12: { value: { base: '#000000df', _dark: '#ffffffed' } },
+
+  // Semantic variants
+  solid: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.black}', _dark: '{colors.white}' } },
+      hover: { value: { base: '{colors.neutral.12}', _dark: '{colors.neutral.12}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.white}', _dark: '{colors.black}' } }
+    },
+  },
+  subtle: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.neutral.a3}', _dark: '{colors.neutral.a3}' } },
+      hover: { value: { base: '{colors.neutral.a4}', _dark: '{colors.neutral.a4}' } },
+      active: { value: { base: '{colors.neutral.a5}', _dark: '{colors.neutral.a5}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.neutral.12}', _dark: '{colors.neutral.12}' } }
+    },
+  },
+  surface: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.white}', _dark: '{colors.neutral.1}' } },
+      hover: { value: { base: '{colors.neutral.2}', _dark: '{colors.neutral.2}' } },
+      active: { value: { base: '{colors.neutral.3}', _dark: '{colors.neutral.3}' } },
+    },
+    border: {
+      DEFAULT: { value: { base: '{colors.neutral.6}', _dark: '{colors.neutral.6}' } },
+      hover: { value: { base: '{colors.neutral.7}', _dark: '{colors.neutral.7}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.neutral.12}', _dark: '{colors.neutral.12}' } }
+    },
+  },
+  outline: {
+    bg: {
+      hover: { value: { base: '{colors.neutral.a2}', _dark: '{colors.neutral.a2}' } },
+      active: { value: { base: '{colors.neutral.a3}', _dark: '{colors.neutral.a3}' } },
+    },
+    border: {
+      DEFAULT: { value: { base: '{colors.neutral.6}', _dark: '{colors.neutral.6}' } }
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.neutral.12}', _dark: '{colors.neutral.12}' } }
+    },
+  },
+  plain: {
+    bg: {
+      hover: { value: { base: '{colors.neutral.a3}', _dark: '{colors.neutral.a3}' } },
+      active: { value: { base: '{colors.neutral.a4}', _dark: '{colors.neutral.a4}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.neutral.12}', _dark: '{colors.neutral.12}' } }
+    },
+  },
+});

package/src/preset/colors/m3-primary.ts

@@ -0,0 +1,107 @@
+/**
+ * Material 3 Primary Color → Park UI Radix Scale
+ *
+ * Mapping Strategy:
+ * - Radix 1-12 represents light → dark in light mode
+ * - M3 tonal palette 100 → 0 (white to black)
+ *
+ * Radix Scale Semantics:
+ * 1-2: App background
+ * 3-4: Subtle backgrounds
+ * 5-6: UI element backgrounds
+ * 7-8: Borders and separators
+ * 9: Solid backgrounds (primary action color)
+ * 10: Hovered solid backgrounds
+ * 11: Low-contrast text
+ * 12: High-contrast text
+ */
+
+import { defineSemanticTokens } from '@pandacss/dev';
+import { material3Language } from '../../languages/material3.language';
+
+const m3 = material3Language.colors.primary;
+
+export const primary = defineSemanticTokens.colors({
+  // Base scale mapping M3 tonal to Radix
+  '1': { value: { base: m3[99], _dark: m3[10] } },
+  '2': { value: { base: m3[95], _dark: m3[20] } },
+  '3': { value: { base: m3[90], _dark: m3[30] } },
+  '4': { value: { base: m3[80], _dark: m3[30] } },
+  '5': { value: { base: m3[70], _dark: m3[40] } },
+  '6': { value: { base: m3[60], _dark: m3[40] } },
+  '7': { value: { base: m3[50], _dark: m3[50] } },
+  '8': { value: { base: m3[40], _dark: m3[60] } },
+  '9': { value: { base: m3[40], _dark: m3[80] } },  // Primary action color
+  '10': { value: { base: m3[30], _dark: m3[70] } }, // Hover state
+  '11': { value: { base: m3[30], _dark: m3[90] } }, // Low-contrast text
+  '12': { value: { base: m3[10], _dark: m3[95] } }, // High-contrast text
+
+  // Alpha variants (for overlays/transparency)
+  a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
+  a2: { value: { base: `${m3[40]}10`, _dark: `${m3[80]}10` } },
+  a3: { value: { base: `${m3[40]}18`, _dark: `${m3[80]}18` } },
+  a4: { value: { base: `${m3[40]}24`, _dark: `${m3[80]}24` } },
+  a5: { value: { base: `${m3[40]}32`, _dark: `${m3[80]}32` } },
+  a6: { value: { base: `${m3[40]}48`, _dark: `${m3[80]}48` } },
+  a7: { value: { base: `${m3[40]}64`, _dark: `${m3[80]}64` } },
+  a8: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } },
+  a9: { value: { base: `${m3[40]}96`, _dark: `${m3[80]}96` } },
+  a10: { value: { base: `${m3[40]}AA`, _dark: `${m3[80]}AA` } },
+  a11: { value: { base: `${m3[40]}CC`, _dark: `${m3[80]}CC` } },
+  a12: { value: { base: `${m3[40]}EE`, _dark: `${m3[80]}EE` } },
+
+  // Semantic variants (Park UI component styling)
+  solid: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.primary.9}', _dark: '{colors.primary.9}' } },
+      hover: { value: { base: '{colors.primary.10}', _dark: '{colors.primary.10}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.white}', _dark: '{colors.primary.1}' } }
+    },
+  },
+  subtle: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
+      hover: { value: { base: '{colors.primary.a4}', _dark: '{colors.primary.a4}' } },
+      active: { value: { base: '{colors.primary.a5}', _dark: '{colors.primary.a5}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
+    },
+  },
+  surface: {
+    bg: {
+      DEFAULT: { value: { base: '{colors.primary.a2}', _dark: '{colors.primary.a2}' } },
+      active: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
+    },
+    border: {
+      DEFAULT: { value: { base: '{colors.primary.a6}', _dark: '{colors.primary.a6}' } },
+      hover: { value: { base: '{colors.primary.a7}', _dark: '{colors.primary.a7}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
+    },
+  },
+  outline: {
+    bg: {
+      hover: { value: { base: '{colors.primary.a2}', _dark: '{colors.primary.a2}' } },
+      active: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
+    },
+    border: {
+      DEFAULT: { value: { base: '{colors.primary.a7}', _dark: '{colors.primary.a7}' } }
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
+    },
+  },
+  plain: {
+    bg: {
+      hover: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
+      active: { value: { base: '{colors.primary.a4}', _dark: '{colors.primary.a4}' } },
+    },
+    fg: {
+      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
+    },
+  },
+});

package/src/preset/index.ts

@@ -0,0 +1,189 @@
+import type { Preset } from '@pandacss/dev';
+import { activeLanguage, transformToPandaTheme } from '../languages';
+import { colors as m3Colors } from './colors';
+import { m3SemanticTokens } from './semantic-tokens';
+
+// Park UI recipes - Core
+import { button as parkButton } from './recipes/button';
+import { input as parkInput } from './recipes/input';
+import { inputAddon } from './recipes/input-addon';
+import { inputGroup } from './recipes/input-group';
+import { field as parkField } from './recipes/field';
+import { group } from './recipes/group';
+import { spinner } from './recipes/spinner';
+import { absoluteCenter } from './recipes/absolute-center';
+
+// Park UI recipes - Layout & Containers
+import { card as parkCard } from './recipes/card';
+import { accordion } from './recipes/accordion';
+import { drawer } from './recipes/drawer';
+import { tabs } from './recipes/tabs';
+
+// Park UI recipes - Form Elements
+import { switchRecipe } from './recipes/switch';
+import { checkbox } from './recipes/checkbox';
+import { radioGroup } from './recipes/radio-group';
+import { select } from './recipes/select';
+import { textarea } from './recipes/textarea';
+import { slider } from './recipes/slider';
+
+// Park UI recipes - Feedback & Status
+import { avatar } from './recipes/avatar';
+import { badge } from './recipes/badge';
+import { progress } from './recipes/progress';
+import { skeleton } from './recipes/skeleton';
+import { toast } from './recipes/toast';
+
+// Park UI recipes - Overlays
+import { dialog } from './recipes/dialog';
+import { popover } from './recipes/popover';
+import { tooltip } from './recipes/tooltip';
+
+// Park UI recipes - Typography
+import { heading } from './recipes/heading';
+// Park UI theme extensions
+import { layerStyles } from './layer-styles';
+import { textStyles as parkTextStyles } from './text-styles';
+import { shadows as parkShadows } from './shadows';
+
+const theme = transformToPandaTheme(activeLanguage);
+
+export const discourserPandaPreset: Preset = {
+  name: 'discourser-design-system-preset',
+
+  theme: {
+    extend: {
+      // Add M3 tokens to Panda preset (colors, fonts, spacing, etc.)
+      tokens: {
+        colors: theme.tokens.colors,
+        fonts: theme.tokens.fonts,
+        fontSizes: theme.tokens.fontSizes,
+        lineHeights: theme.tokens.lineHeights,
+        fontWeights: theme.tokens.fontWeights,
+        letterSpacings: theme.tokens.letterSpacings,
+        spacing: theme.tokens.spacing,
+        radii: theme.tokens.radii,
+        shadows: theme.tokens.shadows,
+        durations: theme.tokens.durations,
+        easings: theme.tokens.easings,
+        borderWidths: theme.tokens.borderWidths,
+      },
+
+      // Park UI layer styles for common UI patterns (disabled, etc.)
+      layerStyles,
+
+      // Combined text styles: M3 + Park UI
+      textStyles: {
+        ...theme.textStyles,
+        ...parkTextStyles,
+      },
+
+      // Semantic tokens: M3 colors + Park UI aliases + shadows + radii
+      semanticTokens: {
+        colors: {
+          // M3-to-Radix color bridges
+          ...m3Colors,
+
+          // Park UI-style aliases for component compatibility
+          fg: {
+            default: {
+              value: { base: '{colors.gray.12}', _dark: '{colors.gray.12}' },
+            },
+            muted: {
+              value: { base: '{colors.gray.11}', _dark: '{colors.gray.11}' },
+            },
+            subtle: {
+              value: { base: '{colors.gray.10}', _dark: '{colors.gray.10}' },
+            },
+          },
+          canvas: {
+            value: { base: '{colors.gray.1}', _dark: '{colors.gray.1}' },
+          },
+          border: {
+            default: {
+              value: { base: '{colors.gray.6}', _dark: '{colors.gray.6}' },
+            },
+            muted: {
+              value: { base: '{colors.gray.4}', _dark: '{colors.gray.4}' },
+            },
+          },
+
+          // M3 semantic tokens (surface, onSurface, etc.)
+          ...m3SemanticTokens,
+
+          // Base colors
+          white: { value: '#FFFFFF' },
+          black: { value: '#000000' },
+        },
+
+        // Park UI shadow tokens
+        shadows: parkShadows,
+
+        // Park UI radii tokens (l1, l2, l3 for consistent border radius)
+        radii: {
+          l1: { value: '0.125rem' }, // 2px (xs)
+          l2: { value: '0.375rem' }, // 6px (sm)
+          l3: { value: '0.5rem' }, // 8px (md)
+        },
+      },
+
+      // Recipes: Park UI components (simple recipes)
+      recipes: {
+        // Core
+        button: parkButton,
+        input: parkInput,
+        inputAddon,
+        group,
+        spinner,
+        absoluteCenter,
+        // Typography
+        heading,
+        // Feedback & Status
+        badge,
+        skeleton,
+        textarea,
+      },
+      slotRecipes: {
+        // Core
+        field: parkField,
+        inputGroup,
+        // Layout & Containers
+        card: parkCard,
+        accordion,
+        drawer,
+        tabs,
+        // Form Elements
+        switchComponent: switchRecipe,
+        checkbox,
+        radioGroup,
+        select,
+        slider,
+        // Feedback & Status
+        avatar,
+        progress,
+        toast,
+        // Overlays
+        dialog,
+        popover,
+        tooltip,
+      },
+    },
+  },
+
+  conditions: {
+    light: '[data-theme=light] &, .light &',
+    dark: '[data-theme=dark] &, .dark &',
+  },
+
+  globalCss: {
+    html: {
+      colorScheme: 'light dark',
+      bg: 'canvas',
+      color: 'fg.default',
+    },
+    body: {
+      fontFamily: 'body',
+      textStyle: 'bodyMedium',
+    },
+  },
+};

package/src/preset/layer-styles.ts

@@ -0,0 +1,14 @@
+import { defineLayerStyles } from '@pandacss/dev';
+
+/**
+ * Layer styles from Park UI
+ * These provide reusable style combinations for common UI patterns
+ */
+export const layerStyles = defineLayerStyles({
+  disabled: {
+    value: {
+      cursor: 'not-allowed',
+      opacity: '0.5',
+    },
+  },
+});

package/src/preset/recipes/absolute-center.ts

@@ -0,0 +1,37 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const absoluteCenter = defineRecipe({
+  className: 'absolute-center',
+  base: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  defaultVariants: {
+    axis: 'both',
+  },
+  variants: {
+    axis: {
+      horizontal: {
+        insetStart: '50%',
+        translate: '-50%',
+        _rtl: {
+          translate: '50%',
+        },
+      },
+      vertical: {
+        top: '50%',
+        translate: '0 -50%',
+      },
+      both: {
+        insetStart: '50%',
+        top: '50%',
+        translate: '-50% -50%',
+        _rtl: {
+          translate: '50% -50%',
+        },
+      },
+    },
+  },
+})

package/src/preset/recipes/accordion.ts

@@ -0,0 +1,92 @@
+import { accordionAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const accordion = defineSlotRecipe({
+  className: 'accordion',
+  slots: accordionAnatomy.extendWith('itemBody').keys(),
+  base: {
+    root: {
+      width: 'full',
+      '--accordion-radius': 'radii.l2',
+    },
+    item: {
+      overflowAnchor: 'none',
+    },
+    itemTrigger: {
+      alignItems: 'center',
+      borderRadius: 'var(--accordion-radius)',
+      color: 'fg.default',
+      cursor: 'pointer',
+      display: 'flex',
+      fontWeight: 'semibold',
+      gap: '3',
+      justifyContent: 'space-between',
+      textAlign: 'start',
+      textStyle: 'lg',
+      width: 'full',
+      _focusVisible: {
+        outlineWidth: 'medium',
+        outlineStyle: 'solid',
+        outlineColor: 'colorPalette.focusRing',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    itemIndicator: {
+      transition: 'rotate 0.2s',
+      transformOrigin: 'center',
+      color: 'fg.subtle',
+      _open: {
+        rotate: '180deg',
+      },
+      _icon: {
+        width: '1.2em',
+        height: '1.2em',
+      },
+    },
+    itemBody: {
+      pb: 'calc(var(--accordion-padding-y) * 2)',
+      color: 'fg.muted',
+    },
+    itemContent: {
+      overflow: 'hidden',
+      borderRadius: 'var(--accordion-radius)',
+      _open: {
+        animationName: 'expand-height, fade-in',
+        animationDuration: 'normal',
+      },
+      _closed: {
+        animationName: 'collapse-height, fade-out',
+        animationDuration: 'normal',
+        display: 'none',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          borderBottomWidth: '1px',
+        },
+      },
+      plain: {},
+    },
+    size: {
+      md: {
+        root: {
+          '--accordion-padding-x': 'spacing.4',
+          '--accordion-padding-y': 'spacing.3',
+        },
+        itemTrigger: {
+          textStyle: 'md',
+          py: 'var(--accordion-padding-y)',
+        },
+      },
+    },
+  },
+})

package/src/preset/recipes/avatar.ts

@@ -0,0 +1,152 @@
+import { avatarAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const avatar = defineSlotRecipe({
+  className: 'avatar',
+  slots: avatarAnatomy.keys(),
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'medium',
+      position: 'relative',
+      verticalAlign: 'top',
+      flexShrink: '0',
+      userSelect: 'none',
+      width: 'var(--avatar-size)',
+      height: 'var(--avatar-size)',
+      fontSize: 'var(--avatar-font-size)',
+      borderRadius: 'var(--avatar-radius)',
+    },
+    fallback: {
+      lineHeight: '1',
+      textTransform: 'uppercase',
+      fontWeight: 'medium',
+      fontSize: 'var(--avatar-font-size)',
+      borderRadius: 'var(--avatar-radius)',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      borderRadius: 'var(--avatar-radius)',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    shape: 'full',
+    variant: 'subtle',
+  },
+  variants: {
+    size: {
+      full: {
+        root: {
+          '--avatar-size': '100%',
+          '--avatar-font-size': '100%',
+        },
+      },
+      '2xs': {
+        root: {
+          '--avatar-font-size': 'fontSizes.2xs',
+          '--avatar-size': 'sizes.6',
+        },
+        fallback: {
+          _icon: { width: '3', height: '3' },
+        },
+      },
+      xs: {
+        root: {
+          '--avatar-font-size': 'fontSizes.xs',
+          '--avatar-size': 'sizes.8',
+        },
+        fallback: {
+          _icon: { width: '4', height: '4' },
+        },
+      },
+      sm: {
+        root: {
+          '--avatar-font-size': 'fontSizes.sm',
+          '--avatar-size': 'sizes.9',
+        },
+        fallback: {
+          _icon: { width: '4.5', height: '4.5' },
+        },
+      },
+      md: {
+        root: {
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.10',
+        },
+        fallback: {
+          _icon: { width: '5', height: '5' },
+        },
+      },
+      lg: {
+        root: {
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.11',
+        },
+        fallback: {
+          _icon: { width: '5.5', height: '5.5' },
+        },
+      },
+      xl: {
+        root: {
+          '--avatar-font-size': 'fontSizes.lg',
+          '--avatar-size': 'sizes.12',
+        },
+        fallback: {
+          _icon: { width: '6', height: '6' },
+        },
+      },
+      '2xl': {
+        root: {
+          '--avatar-font-size': 'fontSizes.xl',
+          '--avatar-size': 'sizes.16',
+        },
+        fallback: {
+          _icon: { width: '8', height: '8' },
+        },
+      },
+    },
+    variant: {
+      solid: {
+        root: {
+          bg: 'colorPalette.solid.bg',
+          color: 'colorPalette.solid.fg',
+        },
+      },
+      surface: {
+        root: {
+          bg: 'colorPalette.surface.bg',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.surface.border',
+          color: 'colorPalette.surface.fg',
+        },
+      },
+      subtle: {
+        root: {
+          bg: 'colorPalette.subtle.bg',
+          color: 'colorPalette.subtle.fg',
+        },
+      },
+      outline: {
+        root: {
+          borderWidth: '1px',
+          borderColor: 'colorPalette.outline.border',
+          color: 'colorPalette.outline.fg',
+        },
+      },
+    },
+    shape: {
+      square: {},
+      rounded: {
+        root: { '--avatar-radius': 'radii.l3' },
+      },
+      full: {
+        root: { '--avatar-radius': 'radii.full' },
+      },
+    },
+  },
+})