@saas-ui/react 2.11.2 → 3.0.0-alpha.0

package/src/theme/recipes/chakra/toast.ts

@@ -0,0 +1,96 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { toastAnatomy } from '@chakra-ui/react/anatomy'
+
+export const toastSlotRecipe = defineSlotRecipe({
+  slots: toastAnatomy.keys(),
+  className: 'chakra-toast',
+  base: {
+    root: {
+      width: 'full',
+      display: 'flex',
+      alignItems: 'flex-start',
+      position: 'relative',
+      gap: '3',
+      py: '4',
+      ps: '4',
+      pe: '6',
+      borderRadius: 'l2',
+      translate: 'var(--x) var(--y)',
+      scale: 'var(--scale)',
+      zIndex: 'var(--z-index)',
+      height: 'var(--height)',
+      opacity: 'var(--opacity)',
+      willChange: 'translate, opacity, scale',
+      transition:
+        'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',
+      transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
+      _closed: {
+        transition: 'translate 400ms, scale 400ms, opacity 200ms',
+        transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',
+      },
+      bg: 'bg.panel',
+      color: 'fg',
+      boxShadow: 'xl',
+      '--toast-trigger-bg': 'colors.bg.muted',
+      '&[data-type=warning]': {
+        bg: 'orange.solid',
+        color: 'orange.contrast',
+        '--toast-trigger-bg': '{white/10}',
+        '--toast-border-color': '{white/40}',
+      },
+      '&[data-type=success]': {
+        bg: 'green.solid',
+        color: 'green.contrast',
+        '--toast-trigger-bg': '{white/10}',
+        '--toast-border-color': '{white/40}',
+      },
+      '&[data-type=error]': {
+        bg: 'red.solid',
+        color: 'red.contrast',
+        '--toast-trigger-bg': '{white/10}',
+        '--toast-border-color': '{white/40}',
+      },
+    },
+    title: {
+      fontWeight: 'medium',
+      textStyle: 'sm',
+      marginEnd: '2',
+    },
+    description: {
+      display: 'inline',
+      textStyle: 'sm',
+      opacity: '0.8',
+    },
+    indicator: {
+      flexShrink: '0',
+      boxSize: '5',
+    },
+    actionTrigger: {
+      textStyle: 'sm',
+      fontWeight: 'medium',
+      height: '8',
+      px: '3',
+      borderRadius: 'l2',
+      alignSelf: 'center',
+      borderWidth: '1px',
+      borderColor: 'var(--toast-border-color, inherit)',
+      transition: 'background 200ms',
+      _hover: {
+        bg: 'var(--toast-trigger-bg)',
+      },
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '1',
+      insetEnd: '1',
+      padding: '1',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: '{currentColor/60}',
+      borderRadius: 'l2',
+      textStyle: 'md',
+      transition: 'background 200ms',
+    },
+  },
+})

package/src/theme/recipes/chakra/tooltip.ts

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { tooltipAnatomy } from '@chakra-ui/react/anatomy'
+
+export const tooltipSlotRecipe = defineSlotRecipe({
+  slots: tooltipAnatomy.keys(),
+  className: 'chakra-tooltip',
+  base: {
+    content: {
+      '--tooltip-bg': 'colors.bg.inverted',
+      bg: 'var(--tooltip-bg)',
+      color: 'fg.inverted',
+      px: '2.5',
+      py: '1',
+      borderRadius: 'l2',
+      fontWeight: 'medium',
+      textStyle: 'xs',
+      boxShadow: 'md',
+      maxW: 'xs',
+      zIndex: 'tooltip',
+      transformOrigin: 'var(--transform-origin)',
+      _open: {
+        animationStyle: 'scale-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'scale-fade-out',
+        animationDuration: 'fast',
+      },
+    },
+    arrow: {
+      '--arrow-size': 'sizes.2',
+      '--arrow-background': 'var(--tooltip-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '1px',
+      borderInlineStartWidth: '1px',
+      borderColor: 'var(--tooltip-bg)',
+    },
+  },
+})

package/src/theme/recipes.ts

@@ -0,0 +1,46 @@
+import { buttonRecipe } from '#components/button/button.recipe.ts'
+import { commandRecipe } from '#components/command/command.recipe.ts'
+import { iconBadgeRecipe } from '#components/icon-badge/icon-badge.recipe.ts'
+
+import { badgeRecipe } from './recipes/chakra/badge'
+import { checkmarkRecipe } from './recipes/chakra/checkmark'
+import { codeRecipe } from './recipes/chakra/code'
+import { containerRecipe } from './recipes/chakra/container'
+import { headingRecipe } from './recipes/chakra/heading'
+import { iconRecipe } from './recipes/chakra/icon'
+import { inputRecipe } from './recipes/chakra/input'
+import { inputAddonRecipe } from './recipes/chakra/input-addon'
+import { kbdRecipe } from './recipes/chakra/kbd'
+import { linkRecipe } from './recipes/chakra/link'
+import { markRecipe } from './recipes/chakra/mark'
+import { radiomarkRecipe } from './recipes/chakra/radiomark'
+import { separatorRecipe } from './recipes/chakra/separator'
+import { skeletonRecipe } from './recipes/chakra/skeleton'
+import { skipNavLinkRecipe } from './recipes/chakra/skip-nav-link'
+import { spinnerRecipe } from './recipes/chakra/spinner'
+import { textareaRecipe } from './recipes/chakra/textarea'
+
+export const recipes = {
+  // Chakra UI Recipes
+  badge: badgeRecipe,
+  button: buttonRecipe,
+  code: codeRecipe,
+  container: containerRecipe,
+  heading: headingRecipe,
+  input: inputRecipe,
+  inputAddon: inputAddonRecipe,
+  kbd: kbdRecipe,
+  link: linkRecipe,
+  mark: markRecipe,
+  separator: separatorRecipe,
+  skeleton: skeletonRecipe,
+  skipNavLink: skipNavLinkRecipe,
+  spinner: spinnerRecipe,
+  textarea: textareaRecipe,
+  icon: iconRecipe,
+  checkmark: checkmarkRecipe,
+  radiomark: radiomarkRecipe,
+  // Saas UI
+  command: commandRecipe,
+  iconBadge: iconBadgeRecipe,
+}

package/src/theme/semantic-tokens/colors.ts

@@ -0,0 +1,403 @@
+import { defineSemanticTokens } from '@chakra-ui/react'
+
+export const semanticColors = defineSemanticTokens.colors({
+  presence: {
+    online: {
+      value: { _light: '{colors.green.500}', _dark: '{colors.green.500}' },
+    },
+    offline: {
+      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' },
+    },
+    busy: {
+      value: { _light: '{colors.orange.500}', _dark: '{colors.orange.500}' },
+    },
+    dnd: {
+      value: { _light: '{colors.red.500}', _dark: '{colors.red.500}' },
+    },
+    away: {
+      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' },
+    },
+  },
+  sidebar: {
+    bg: {
+      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
+    },
+    fg: {
+      value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
+    },
+    border: {
+      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
+    },
+    accent: {
+      bg: {
+        value: { _light: '{colors.gray.200/40}', _dark: '{colors.gray.900}' },
+      },
+      fg: {
+        value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
+      },
+    },
+  },
+  bg: {
+    DEFAULT: {
+      value: { _light: '{colors.white}', _dark: '{colors.black}' },
+    },
+    muted: {
+      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
+    },
+    inverted: {
+      value: { _light: '{colors.black}', _dark: '{colors.white}' },
+    },
+    panel: {
+      value: { _light: '{colors.white}', _dark: '{colors.gray.950}' },
+    },
+    error: {
+      value: { _light: '{colors.red.50}', _dark: '{colors.red.950}' },
+    },
+    warning: {
+      value: { _light: '{colors.orange.50}', _dark: '{colors.orange.950}' },
+    },
+    success: {
+      value: { _light: '{colors.green.50}', _dark: '{colors.green.950}' },
+    },
+    info: {
+      value: { _light: '{colors.blue.50}', _dark: '{colors.blue.950}' },
+    },
+  },
+  fg: {
+    DEFAULT: {
+      value: { _light: '{colors.black}', _dark: '{colors.gray.50}' },
+    },
+    subtle: {
+      value: { _light: '{colors.gray.600}', _dark: '{colors.gray.400}' },
+    },
+    muted: {
+      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' },
+    },
+    inverted: {
+      value: { _light: '{colors.gray.50}', _dark: '{colors.black}' },
+    },
+    error: {
+      value: { _light: '{colors.red.500}', _dark: '{colors.red.400}' },
+    },
+    warning: {
+      value: { _light: '{colors.orange.600}', _dark: '{colors.orange.300}' },
+    },
+    success: {
+      value: { _light: '{colors.green.600}', _dark: '{colors.green.300}' },
+    },
+    info: {
+      value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' },
+    },
+  },
+  border: {
+    DEFAULT: {
+      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
+    },
+    subtle: {
+      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
+    },
+    muted: {
+      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
+    },
+    inverted: {
+      value: { _light: '{colors.gray.800}', _dark: '{colors.gray.200}' },
+    },
+    error: {
+      value: { _light: '{colors.red.500}', _dark: '{colors.red.400}' },
+    },
+    warning: {
+      value: { _light: '{colors.orange.500}', _dark: '{colors.orange.400}' },
+    },
+    success: {
+      value: { _light: '{colors.green.500}', _dark: '{colors.green.400}' },
+    },
+    info: {
+      value: { _light: '{colors.blue.500}', _dark: '{colors.blue.400}' },
+    },
+  },
+  focusRing: {
+    value: { _light: '{colors.blue.600/50}', _dark: '{colors.blue.500/50}' },
+  },
+
+  accent: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.purple.700}', _dark: '{colors.purple.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.purple.50}', _dark: '{colors.purple.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.purple.100}', _dark: '{colors.purple.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.purple.200}', _dark: '{colors.purple.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.purple.600}', _dark: '{colors.purple.600}' },
+    },
+  },
+
+  neutral: {
+    contrast: {
+      value: { _light: '{colors.white}', _dark: '{colors.black}' },
+    },
+    fg: {
+      value: { _light: '{colors.gray.800}', _dark: '{colors.gray.200}' },
+    },
+    muted: {
+      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
+    },
+    subtle: {
+      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
+    },
+    solid: {
+      value: { _light: '{colors.gray.900}', _dark: '{colors.white}' },
+    },
+  },
+
+  gray: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
+    },
+    muted: {
+      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
+    },
+    subtle: {
+      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
+    },
+    solid: {
+      value: { _light: '{colors.gray.500}', _dark: '{colors.gray.500}' },
+    },
+  },
+
+  red: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.red.700}', _dark: '{colors.red.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.red.50}', _dark: '{colors.red.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.red.100}', _dark: '{colors.red.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.red.200}', _dark: '{colors.red.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.red.600}', _dark: '{colors.red.600}' },
+    },
+  },
+
+  orange: {
+    contrast: {
+      value: { _light: 'white', _dark: 'black' },
+    },
+    fg: {
+      value: { _light: '{colors.orange.700}', _dark: '{colors.orange.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.orange.50}', _dark: '{colors.orange.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.orange.100}', _dark: '{colors.orange.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.orange.200}', _dark: '{colors.orange.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.orange.600}', _dark: '{colors.orange.500}' },
+    },
+  },
+
+  green: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.green.700}', _dark: '{colors.green.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.green.50}', _dark: '{colors.green.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.green.100}', _dark: '{colors.green.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.green.200}', _dark: '{colors.green.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.green.600}', _dark: '{colors.green.600}' },
+    },
+  },
+
+  blue: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.blue.700}', _dark: '{colors.blue.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.blue.50}', _dark: '{colors.blue.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.blue.100}', _dark: '{colors.blue.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.blue.200}', _dark: '{colors.blue.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.blue.600}', _dark: '{colors.blue.600}' },
+    },
+  },
+
+  yellow: {
+    contrast: {
+      value: { _light: 'black', _dark: 'black' },
+    },
+    fg: {
+      value: { _light: '{colors.yellow.700}', _dark: '{colors.yellow.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.yellow.50}', _dark: '{colors.yellow.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.yellow.100}', _dark: '{colors.yellow.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.yellow.200}', _dark: '{colors.yellow.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.yellow.300}', _dark: '{colors.yellow.300}' },
+    },
+  },
+
+  teal: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.teal.700}', _dark: '{colors.teal.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.teal.50}', _dark: '{colors.teal.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.teal.100}', _dark: '{colors.teal.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.teal.200}', _dark: '{colors.teal.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.teal.600}', _dark: '{colors.teal.600}' },
+    },
+  },
+
+  indigo: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.indigo.700}', _dark: '{colors.indigo.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.indigo.50}', _dark: '{colors.indigo.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.indigo.100}', _dark: '{colors.indigo.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.indigo.200}', _dark: '{colors.indigo.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.indigo.600}', _dark: '{colors.indigo.600}' },
+    },
+  },
+
+  purple: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.purple.700}', _dark: '{colors.purple.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.purple.50}', _dark: '{colors.purple.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.purple.100}', _dark: '{colors.purple.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.purple.200}', _dark: '{colors.purple.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.purple.600}', _dark: '{colors.purple.600}' },
+    },
+  },
+
+  pink: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.pink.700}', _dark: '{colors.pink.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.pink.50}', _dark: '{colors.pink.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.pink.100}', _dark: '{colors.pink.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.pink.200}', _dark: '{colors.pink.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.pink.600}', _dark: '{colors.pink.600}' },
+    },
+  },
+
+  cyan: {
+    contrast: {
+      value: { _light: 'white', _dark: 'white' },
+    },
+    fg: {
+      value: { _light: '{colors.cyan.700}', _dark: '{colors.cyan.300}' },
+    },
+    muted: {
+      value: { _light: '{colors.cyan.50}', _dark: '{colors.cyan.950}' },
+    },
+    subtle: {
+      value: { _light: '{colors.cyan.100}', _dark: '{colors.cyan.900}' },
+    },
+    emphasized: {
+      value: { _light: '{colors.cyan.200}', _dark: '{colors.cyan.800}' },
+    },
+    solid: {
+      value: { _light: '{colors.cyan.600}', _dark: '{colors.cyan.600}' },
+    },
+  },
+})

package/src/theme/semantic-tokens/radii.ts

@@ -0,0 +1,7 @@
+import { defineSemanticTokens } from '@chakra-ui/react'
+
+export const semanticRadii = defineSemanticTokens.radii({
+  l1: { value: '{radii.xs}' },
+  l2: { value: '{radii.sm}' },
+  l3: { value: '{radii.md}' },
+})

package/src/theme/semantic-tokens/shadows.ts

@@ -0,0 +1,52 @@
+import { defineSemanticTokens } from '@chakra-ui/react'
+
+export const semanticShadows = defineSemanticTokens.shadows({
+  xs: {
+    value: {
+      base: '0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}',
+      _dark:
+        '0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}',
+    },
+  },
+  sm: {
+    value: {
+      base: '0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}',
+      _dark:
+        '0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
+    },
+  },
+  md: {
+    value: {
+      base: '0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
+      _dark:
+        '0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
+    },
+  },
+  lg: {
+    value: {
+      base: '0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
+      _dark:
+        '0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
+    },
+  },
+  xl: {
+    value: {
+      base: '0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
+      _dark:
+        '0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
+    },
+  },
+  '2xl': {
+    value: {
+      base: '0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
+      _dark:
+        '0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
+    },
+  },
+  inset: {
+    value: {
+      base: 'inset 0 0 0 1px {colors.blackAlpha.100}',
+      _dark: 'inset 0 0 0 1px {colors.whiteAlpha.100}',
+    },
+  },
+})