@discourser/design-system 0.11.0 → 0.13.0

package/src/recipes/button.recipe.ts

@@ -1,120 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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
-  }
-});

package/src/recipes/dialog.recipe.ts

@@ -1,130 +0,0 @@
-import { defineSlotRecipe } from '@pandacss/dev';
-
-export const dialogRecipe = defineSlotRecipe({
-  className: 'dialog',
-  description: 'Material Design 3 dialog component',
-  slots: ['backdrop', 'positioner', 'content', 'title', 'description', 'closeTrigger'],
-  base: {
-    backdrop: {
-      position: 'fixed',
-      inset: '0',
-      bg: 'scrim',
-      opacity: 0.4,
-      zIndex: 'modal',
-      animation: 'fadeIn',
-      _open: {
-        animation: 'fadeIn',
-      },
-      _closed: {
-        animation: 'fadeOut',
-      },
-    },
-    positioner: {
-      position: 'fixed',
-      inset: '0',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 'modal',
-      p: 'lg',
-    },
-    content: {
-      position: 'relative',
-      bg: 'surfaceContainerHigh',
-      color: 'onSurface',
-      borderRadius: 'extraLarge',
-      boxShadow: 'level3',
-      display: 'flex',
-      flexDirection: 'column',
-      maxWidth: '90vw',
-      maxHeight: '90vh',
-      overflow: 'hidden',
-      animation: 'scaleIn',
-      _open: {
-        animation: 'scaleIn',
-      },
-      _closed: {
-        animation: 'scaleOut',
-      },
-    },
-    title: {
-      fontFamily: 'headline',
-      fontSize: 'headlineSmall',
-      fontWeight: 'regular',
-      color: 'onSurface',
-      px: 'xl',
-      pt: 'xl',
-      pb: 'md',
-    },
-    description: {
-      fontFamily: 'body',
-      fontSize: 'bodyMedium',
-      color: 'onSurfaceVariant',
-      px: 'xl',
-      pb: 'xl',
-      flex: '1',
-      overflow: 'auto',
-    },
-    closeTrigger: {
-      position: 'absolute',
-      top: 'md',
-      right: 'md',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '40px',
-      height: '40px',
-      borderRadius: 'full',
-      cursor: 'pointer',
-      color: 'onSurfaceVariant',
-      bg: 'transparent',
-      border: 'none',
-      transition: 'all',
-      transitionDuration: 'fast',
-      _hover: {
-        bg: 'surfaceContainerHighest',
-      },
-      _focus: {
-        outline: 'none',
-        bg: 'surfaceContainerHighest',
-      },
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        content: {
-          width: '280px',
-          minHeight: '140px',
-        },
-      },
-      md: {
-        content: {
-          width: '560px',
-          minHeight: '200px',
-        },
-      },
-      lg: {
-        content: {
-          width: '800px',
-          minHeight: '300px',
-        },
-      },
-      fullscreen: {
-        content: {
-          width: '100vw',
-          height: '100vh',
-          maxWidth: '100vw',
-          maxHeight: '100vh',
-          borderRadius: 'none',
-        },
-        positioner: {
-          p: '0',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});

package/src/recipes/icon-button.recipe.ts

@@ -1,96 +0,0 @@
-import { defineRecipe } from '@pandacss/dev';
-
-export const iconButtonRecipe = defineRecipe({
-  className: 'icon-button',
-  description: 'Material Design 3 icon button component',
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 'full',
-    cursor: 'pointer',
-    transition: 'all',
-    transitionDuration: 'fast',
-    transitionTimingFunction: 'standard',
-    outline: 'none',
-    border: 'none',
-    p: '0',
-    _disabled: {
-      opacity: 0.38,
-      cursor: 'not-allowed',
-      pointerEvents: 'none'
-    },
-    _focusVisible: {
-      outline: '2px solid',
-      outlineColor: 'primary',
-      outlineOffset: '2px'
-    }
-  },
-  variants: {
-    variant: {
-      standard: {
-        bg: 'transparent',
-        color: 'onSurfaceVariant',
-        _hover: {
-          bg: 'onSurfaceVariant',
-          bgOpacity: 0.08
-        }
-      },
-      filled: {
-        bg: 'primary',
-        color: 'onPrimary',
-        _hover: {
-          opacity: 0.92
-        }
-      },
-      tonal: {
-        bg: 'secondaryContainer',
-        color: 'onSecondaryContainer',
-        _hover: {
-          opacity: 0.92
-        }
-      },
-      outlined: {
-        bg: 'transparent',
-        color: 'onSurfaceVariant',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'outline',
-        _hover: {
-          bg: 'onSurfaceVariant',
-          bgOpacity: 0.08
-        }
-      }
-    },
-    size: {
-      sm: {
-        width: '32px',
-        height: '32px',
-        '& svg': {
-          width: '18px',
-          height: '18px'
-        }
-      },
-      md: {
-        width: '40px',
-        height: '40px',
-        '& svg': {
-          width: '24px',
-          height: '24px'
-        }
-      },
-      lg: {
-        width: '48px',
-        height: '48px',
-        '& svg': {
-          width: '24px',
-          height: '24px'
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: 'standard',
-    size: 'md'
-  }
-});

package/src/recipes/index.ts

@@ -1,6 +0,0 @@
-export { buttonRecipe } from './button.recipe';
-export { cardRecipe } from './card.recipe';
-export { iconButtonRecipe } from './icon-button.recipe';
-export { inputRecipe } from './input.recipe';
-export { dialogRecipe } from './dialog.recipe';
-export { switchRecipe } from './switch.recipe';

package/src/recipes/input.recipe.ts

@@ -1,93 +0,0 @@
-import { defineRecipe } from '@pandacss/dev';
-
-export const inputRecipe = defineRecipe({
-  className: 'input',
-  description: 'Material Design 3 text field component',
-  base: {
-    width: '100%',
-    fontFamily: 'body',
-    fontSize: 'bodyLarge',
-    lineHeight: 'bodyLarge',
-    color: 'onSurface',
-    bg: 'transparent',
-    borderRadius: 'extraSmall',
-    px: 'md',
-    transition: 'all',
-    transitionDuration: 'fast',
-    outline: 'none',
-    _placeholder: {
-      color: 'onSurfaceVariant',
-      opacity: 0.6,
-    },
-    _focus: {
-      outline: 'none',
-    },
-    _disabled: {
-      opacity: 0.38,
-      cursor: 'not-allowed',
-    },
-  },
-  variants: {
-    variant: {
-      filled: {
-        bg: 'surfaceContainerHighest',
-        borderBottomWidth: '1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: 'onSurfaceVariant',
-        borderTopLeftRadius: 'extraSmall',
-        borderTopRightRadius: 'extraSmall',
-        borderBottomLeftRadius: '0',
-        borderBottomRightRadius: '0',
-        _hover: {
-          bg: 'surfaceContainerHigh',
-        },
-        _focus: {
-          borderBottomWidth: '2px',
-          borderBottomColor: 'primary',
-        },
-      },
-      outlined: {
-        bg: 'transparent',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'outline',
-        _hover: {
-          borderColor: 'onSurface',
-        },
-        _focus: {
-          borderWidth: '2px',
-          borderColor: 'primary',
-        },
-      },
-    },
-    size: {
-      sm: {
-        height: '40px',
-        fontSize: 'bodySmall',
-        lineHeight: 'bodySmall',
-      },
-      md: {
-        height: '56px',
-        fontSize: 'bodyLarge',
-        lineHeight: 'bodyLarge',
-      },
-    },
-    state: {
-      error: {
-        borderColor: 'error',
-        _focus: {
-          borderColor: 'error',
-        },
-      },
-      disabled: {
-        opacity: 0.38,
-        cursor: 'not-allowed',
-        pointerEvents: 'none',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'outlined',
-    size: 'md',
-  },
-});

package/src/recipes/switch.recipe.ts

@@ -1,117 +0,0 @@
-import { defineSlotRecipe } from '@pandacss/dev';
-
-export const switchRecipe = defineSlotRecipe({
-  className: 'switchControl',
-  description: 'Material Design 3 switch component',
-  slots: ['root', 'control', 'thumb', 'label'],
-  base: {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 'sm',
-      cursor: 'pointer',
-      userSelect: 'none',
-      _disabled: {
-        cursor: 'not-allowed',
-        opacity: 0.38,
-      },
-    },
-    control: {
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      width: '52px',
-      height: '32px',
-      borderRadius: 'full',
-      bg: 'surfaceContainerHighest',
-      border: '2px solid',
-      borderColor: 'outline',
-      transition: 'all',
-      transitionDuration: 'fast',
-      flexShrink: 0,
-      _checked: {
-        bg: 'primary',
-        borderColor: 'primary',
-      },
-      _disabled: {
-        bg: 'surfaceVariant',
-        borderColor: 'onSurface',
-        opacity: 0.12,
-      },
-    },
-    thumb: {
-      position: 'absolute',
-      left: '4px',
-      width: '16px',
-      height: '16px',
-      borderRadius: 'full',
-      bg: 'outline',
-      transition: 'all',
-      transitionDuration: 'fast',
-      _checked: {
-        left: '28px',
-        width: '24px',
-        height: '24px',
-        bg: 'onPrimary',
-      },
-      _disabled: {
-        bg: 'onSurface',
-        opacity: 0.38,
-      },
-    },
-    label: {
-      fontFamily: 'body',
-      fontSize: 'bodyMedium',
-      color: 'onSurface',
-      userSelect: 'none',
-      _disabled: {
-        opacity: 0.38,
-      },
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        control: {
-          width: '44px',
-          height: '24px',
-        },
-        thumb: {
-          width: '12px',
-          height: '12px',
-          left: '4px',
-          _checked: {
-            left: '24px',
-            width: '16px',
-            height: '16px',
-          },
-        },
-        label: {
-          fontSize: 'bodySmall',
-        },
-      },
-      md: {
-        control: {
-          width: '52px',
-          height: '32px',
-        },
-        thumb: {
-          width: '16px',
-          height: '16px',
-          left: '4px',
-          _checked: {
-            left: '28px',
-            width: '24px',
-            height: '24px',
-          },
-        },
-        label: {
-          fontSize: 'bodyMedium',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});