@discourser/design-system 0.9.3 → 0.9.4

package/src/preset/recipes/tabs.ts

@@ -0,0 +1,177 @@
+import { tabsAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const tabs = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  className: 'tabs',
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'start',
+      _horizontal: {
+        flexDirection: 'column',
+        gap: '2',
+      },
+      _vertical: {
+        flexDirection: 'row',
+        gap: '4',
+      },
+    },
+    list: {
+      display: 'flex',
+      position: 'relative',
+      isolation: 'isolate',
+      _horizontal: {
+        flexDirection: 'row',
+      },
+      _vertical: {
+        flexDirection: 'column',
+      },
+    },
+    trigger: {
+      alignItems: 'center',
+      cursor: 'pointer',
+      display: 'flex',
+      fontWeight: 'semibold',
+      outline: '0',
+      position: 'relative',
+      _focusVisible: {
+        zIndex: 1,
+        focusVisibleRing: 'outside',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    content: {
+      focusVisibleRing: 'inside',
+
+      _horizontal: {
+        width: '100%',
+      },
+      _vertical: {
+        height: '100%',
+      },
+    },
+    indicator: {
+      width: 'var(--width)',
+      height: 'var(--height)',
+      zIndex: -1,
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        list: { gap: '1' },
+        trigger: { h: '8', minW: '8', textStyle: 'xs', px: '3', gap: '2' },
+      },
+      sm: {
+        list: { gap: '1' },
+        trigger: { h: '9', minW: '9', textStyle: 'sm', px: '3.5', gap: '2' },
+      },
+      md: {
+        list: { gap: '1' },
+        trigger: { h: '10', minW: '10', textStyle: 'sm', px: '4', gap: '2' },
+      },
+      lg: {
+        list: { gap: '1' },
+        trigger: { h: '11', minW: '11', textStyle: 'md', px: '4.5', gap: '2' },
+      },
+    },
+    variant: {
+      line: {
+        root: {
+          alignItems: 'stretch',
+        },
+        list: {
+          _horizontal: {
+            borderBottomWidth: 'thin',
+          },
+          _vertical: {
+            borderStartWidth: 'thin',
+          },
+        },
+        indicator: {
+          background: 'colorPalette.solid.bg',
+          _horizontal: {
+            bottom: '0',
+            height: 'xxs',
+            transform: 'translateY(1px)',
+          },
+          _vertical: {
+            left: '0',
+            width: 'xxs',
+            transform: 'translateX(-1px)',
+          },
+        },
+        trigger: {
+          color: 'fg.muted',
+          _selected: {
+            color: 'colorPalette.plain.fg',
+          },
+        },
+      },
+      subtle: {
+        trigger: {
+          color: 'fg.muted',
+          _selected: {
+            color: 'colorPalette.subtle.fg',
+          },
+        },
+        indicator: {
+          bg: 'colorPalette.subtle.bg',
+          color: 'colorPalette.subtle.fg',
+          borderRadius: 'l2',
+        },
+      },
+      enclosed: {
+        list: {
+          bg: {
+            _light: 'gray.2',
+            _dark: 'gray.1',
+          },
+          boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+          boxShadowColor: 'border',
+          borderRadius: 'l3',
+          p: '1',
+        },
+        trigger: {
+          color: 'fg.muted',
+          _selected: {
+            color: 'colorPalette.surface.fg',
+          },
+        },
+        indicator: {
+          borderRadius: 'l2',
+          boxShadow: {
+            _light: 'xs',
+            _dark: 'none',
+          },
+          bg: {
+            _light: 'white',
+            _dark: 'gray.2',
+          },
+        },
+      },
+    },
+    fitted: {
+      true: {
+        root: {
+          alignItems: 'stretch',
+        },
+        trigger: {
+          flex: 1,
+          textAlign: 'center',
+          justifyContent: 'center',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'line',
+  },
+})

package/src/preset/recipes/textarea.ts

@@ -0,0 +1,82 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const textarea = defineRecipe({
+  className: 'textarea',
+  base: {
+    appearance: 'none',
+    borderRadius: 'l2',
+    minWidth: '0',
+    outline: '0',
+    position: 'relative',
+    transition: 'colors',
+    transitionProperty: 'box-shadow, border-color',
+    width: '100%',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'surface',
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: 'thin',
+        borderColor: 'gray.outline.border',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'error',
+          focusRingColor: 'error',
+        },
+      },
+      surface: {
+        bg: 'gray.surface.bg',
+        borderWidth: 'thin',
+        borderColor: 'gray.surface.border',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'error',
+          focusRingColor: 'error',
+        },
+      },
+      subtle: {
+        borderWidth: 'thin',
+        borderColor: 'transparent',
+        bg: 'gray.subtle.bg',
+        color: 'gray.subtle.fg',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'error',
+          focusRingColor: 'error',
+        },
+      },
+      flushed: {
+        borderBottomWidth: 'thin',
+        borderBottomColor: 'gray.outline.border',
+        borderRadius: '0',
+        color: 'fg.default',
+        px: '0',
+        _invalid: {
+          borderColor: 'error',
+        },
+        _focus: {
+          borderColor: 'colorPalette.solid.bg',
+          boxShadowColor: 'colorPalette.solid.bg',
+          boxShadow: '0 1px 0 0 var(--shadow-color)',
+          _invalid: {
+            borderColor: 'error',
+            boxShadowColor: 'error',
+          },
+        },
+      },
+    },
+    size: {
+      xs: { textStyle: 'sm', px: '2', py: 'sm', scrollPaddingBottom: 'sm' },
+      sm: { textStyle: 'sm', px: '2.5', py: 'sm', scrollPaddingBottom: 'sm' },
+      md: { textStyle: 'md', px: '3', py: 'sm', scrollPaddingBottom: 'sm' },
+      lg: { textStyle: 'md', px: '3.5', py: 'sm', scrollPaddingBottom: 'sm' },
+      xl: { textStyle: 'lg', px: '4', py: 'sm', scrollPaddingBottom: 'sm' },
+    },
+  },
+})

package/src/preset/recipes/toast.ts

@@ -0,0 +1,51 @@
+import { toastAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const toast = defineSlotRecipe({
+  className: 'toast',
+  slots: toastAnatomy.keys(),
+  base: {
+    root: {
+      alignItems: 'start',
+      background: 'gray.surface.bg',
+      borderRadius: 'l3',
+      boxShadow: 'lg',
+      display: 'flex',
+      gap: '4',
+      height: 'var(--height)',
+      minWidth: 'sm',
+      opacity: 'var(--opacity)',
+      overflowWrap: 'anywhere',
+      p: '4',
+      position: 'relative',
+      scale: 'var(--scale)',
+      transitionDuration: 'slow',
+      transitionProperty: 'translate, scale, opacity, height',
+      transitionTimingFunction: 'default',
+      translate: 'var(--x) var(--y)',
+      width: 'full',
+      willChange: 'translate, opacity, scale',
+      zIndex: 'var(--z-index)',
+    },
+    title: {
+      color: 'fg.default',
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    actionTrigger: {
+      color: 'colorPalette.plain.fg',
+      cursor: 'pointer',
+      fontWeight: 'semibold',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '2',
+      insetEnd: '2',
+    },
+  },
+})

package/src/preset/recipes/tooltip.ts

@@ -0,0 +1,38 @@
+import { tooltipAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const tooltip = defineSlotRecipe({
+  className: 'tooltip',
+  slots: tooltipAnatomy.keys(),
+  base: {
+    content: {
+      '--tooltip-bg': 'colors.gray.solid.bg',
+      bg: 'var(--tooltip-bg)',
+      color: 'gray.solid.fg',
+      borderRadius: 'l2',
+      boxShadow: 'sm',
+      fontWeight: 'semibold',
+      px: '2',
+      py: '1.5',
+      textStyle: 'xs',
+      maxWidth: 'xs',
+      _open: {
+        animationStyle: 'scale-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'scale-fade-out',
+        animationDuration: 'faster',
+      },
+    },
+    arrow: {
+      '--arrow-size': 'sizes.2',
+      '--arrow-background': 'var(--tooltip-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: 'thin',
+      borderInlineStartWidth: 'thin',
+      borderColor: 'var(--tooltip-bg)',
+    },
+  },
+})

package/src/preset/semantic-tokens.ts

@@ -0,0 +1,75 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+import { material3Language } from '../languages/material3.language';
+
+const semantic = material3Language.semantic;
+const semanticDark = 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.)
+ */
+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 } },
+    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 } },
+    },
+  },
+  onSurface: {
+    DEFAULT: { value: { base: semantic.onSurface, _dark: semanticDark.onSurface } },
+    variant: { value: { base: semantic.onSurfaceVariant, _dark: semanticDark.onSurfaceVariant } },
+  },
+
+  // M3 Primary tokens (for explicit M3 usage)
+  m3Primary: {
+    DEFAULT: { value: { base: semantic.primary, _dark: semanticDark.primary } },
+    container: { value: { base: semantic.primaryContainer, _dark: semanticDark.primaryContainer } },
+  },
+  onM3Primary: {
+    DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
+    container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } },
+  },
+
+  // M3 Secondary
+  secondary: {
+    DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
+    container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } },
+  },
+  onSecondary: {
+    DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
+    container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } },
+  },
+
+  // M3 Tertiary
+  tertiary: {
+    DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
+    container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } },
+  },
+  onTertiary: {
+    DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
+    container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } },
+  },
+
+  // M3 Outline
+  outline: {
+    DEFAULT: { value: { base: semantic.outline, _dark: semanticDark.outline } },
+    variant: { value: { base: semantic.outlineVariant, _dark: semanticDark.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 } },
+
+  // Scrim/Shadow
+  scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } },
+});

package/src/preset/shadows.ts

@@ -0,0 +1,50 @@
+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*
+ */
+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}',
+    },
+  },
+  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}',
+    },
+  },
+  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}',
+    },
+  },
+  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}',
+    },
+  },
+  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}',
+    },
+  },
+  '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}',
+    },
+  },
+  inset: {
+    value: {
+      base: 'inset 8px 0 12px -8px {colors.neutral.a4}',
+      _dark: 'inset 8px 0 12px -8px {colors.neutral.a6}',
+    },
+  },
+});

package/src/preset/text-styles.ts

@@ -0,0 +1,21 @@
+import { defineTextStyles } from '@pandacss/dev';
+
+/**
+ * Text styles from Park UI
+ * These provide consistent typography sizing across components
+ */
+export const textStyles = defineTextStyles({
+  xs: { value: { fontSize: 'xs', lineHeight: '1.125rem' } },
+  sm: { value: { fontSize: 'sm', lineHeight: '1.25rem' } },
+  md: { value: { fontSize: 'md', lineHeight: '1.5rem' } },
+  lg: { value: { fontSize: 'lg', lineHeight: '1.75rem' } },
+  xl: { value: { fontSize: 'xl', lineHeight: '1.875rem' } },
+  '2xl': { value: { fontSize: '2xl', lineHeight: '2rem' } },
+  '3xl': { value: { fontSize: '3xl', lineHeight: '2.375rem' } },
+  '4xl': { value: { fontSize: '4xl', lineHeight: '2.75rem', letterSpacing: '-0.02em' } },
+  '5xl': { value: { fontSize: '5xl', lineHeight: '3.75rem', letterSpacing: '-0.02em' } },
+  '6xl': { value: { fontSize: '6xl', lineHeight: '4.5rem', letterSpacing: '-0.02em' } },
+  '7xl': { value: { fontSize: '7xl', lineHeight: '5.75rem', letterSpacing: '-0.02em' } },
+
+  label: { value: { fontSize: 'sm', lineHeight: '1.25rem', fontWeight: 'medium' } },
+});

package/src/recipes/button.recipe.ts

@@ -0,0 +1,120 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const buttonRecipe = defineRecipe({
+  className: 'button',
+  description: 'Material Design 3 button component',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 'sm',
+    fontFamily: 'body',
+    fontWeight: '500',
+    borderRadius: 'full',
+    cursor: 'pointer',
+    transition: 'all',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'standard',
+    outline: 'none',
+    border: 'none',
+    textDecoration: 'none',
+    _disabled: {
+      opacity: 0.38,
+      cursor: 'not-allowed',
+      pointerEvents: 'none'
+    },
+    _focusVisible: {
+      outline: '2px solid',
+      outlineColor: 'primary',
+      outlineOffset: '2px'
+    }
+  },
+  variants: {
+    variant: {
+      filled: {
+        bg: 'primary',
+        color: 'onPrimary',
+        _hover: {
+          opacity: 0.92,
+          shadow: 'level1'
+        },
+        _active: {
+          opacity: 0.88
+        }
+      },
+      outlined: {
+        bg: 'transparent',
+        color: 'primary',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'outline',
+        _hover: {
+          bg: 'primary',
+          bgOpacity: 0.08
+        },
+        _active: {
+          bg: 'primary',
+          bgOpacity: 0.12
+        }
+      },
+      text: {
+        bg: 'transparent',
+        color: 'primary',
+        _hover: {
+          bg: 'primary',
+          bgOpacity: 0.08
+        },
+        _active: {
+          bg: 'primary',
+          bgOpacity: 0.12
+        }
+      },
+      elevated: {
+        bg: 'surfaceContainerLow',
+        color: 'primary',
+        shadow: 'level1',
+        _hover: {
+          shadow: 'level2',
+          bg: 'surfaceContainerLow'
+        },
+        _active: {
+          shadow: 'level1'
+        }
+      },
+      tonal: {
+        bg: 'secondaryContainer',
+        color: 'onSecondaryContainer',
+        _hover: {
+          shadow: 'level1'
+        },
+        _active: {
+          shadow: 'none'
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: '32px',
+        px: 'md',
+        fontSize: 'labelMedium',
+        lineHeight: 'labelMedium'
+      },
+      md: {
+        height: '40px',
+        px: 'lg',
+        fontSize: 'labelLarge',
+        lineHeight: 'labelLarge'
+      },
+      lg: {
+        height: '48px',
+        px: 'xl',
+        fontSize: 'labelLarge',
+        lineHeight: 'labelLarge'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'filled',
+    size: 'md'
+  }
+});

package/src/recipes/card.recipe.ts

@@ -0,0 +1,50 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const cardRecipe = defineRecipe({
+  className: 'card',
+  description: 'Material Design 3 card component',
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: 'medium',
+    overflow: 'hidden',
+    transition: 'all',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'standard'
+  },
+  variants: {
+    variant: {
+      elevated: {
+        bg: 'surfaceContainerLow',
+        shadow: 'level1',
+        _hover: {
+          shadow: 'level2'
+        }
+      },
+      filled: {
+        bg: 'surfaceContainerHighest'
+      },
+      outlined: {
+        bg: 'surface',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'outlineVariant'
+      }
+    },
+    interactive: {
+      true: {
+        cursor: 'pointer',
+        _hover: {
+          opacity: 0.96
+        },
+        _active: {
+          opacity: 0.92
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'elevated',
+    interactive: false
+  }
+});