@mekari/pixel3-theme 0.0.1-alpha.0 → 0.0.1

package/src/conditions.ts

@@ -0,0 +1,22 @@
+export const conditions = {
+  extend: {
+    disabled: '&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])',
+    invalid: '&:is(:invalid, [aria-invalid=true], [data-invalid])',
+    checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
+    indeterminate:
+      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
+    closed: '&:is([data-state=closed])',
+    open: '&:is([open], [data-state=open])',
+    hidden: '&:is([hidden])',
+    collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
+    loading: '& > [data-loading=true], &:is([data-loading], [aria-busy=true])',
+    hasIcon: '&[data-has-icon=true]',
+    active: '&[data-active=true], [data-active]',
+    highlight: '&[data-highlight=true], [data-highlight]',
+    hasBorder: '&[data-has-border=true]',
+    hasBackground: '&[data-has-background=true]',
+    isFullWidth: '&[data-is-full-width=true]',
+    placementLeft: '&[data-placement=left]',
+    placementRight: '&[data-placement=right]'
+  }
+}

package/src/global-css.ts

@@ -0,0 +1,23 @@
+import { defineGlobalStyles } from '@pandacss/dev'
+
+export const globalCss = defineGlobalStyles({
+  html: {
+    MozOsxFontSmoothing: 'grayscale',
+    textRendering: 'optimizeLegibility',
+    WebkitFontSmoothing: 'antialiased',
+    WebkitTextSizeAdjust: '100%'
+  },
+  body: {
+    background: 'var(--mp-colors-white)',
+    color: 'var(--mp-colors-dark)',
+    fontFamily: 'var(--mp-fonts-body)',
+    fontSize: '14px',
+    _dark: {
+      colorScheme: 'dark'
+    }
+  },
+  '*, *::before, *::after': {
+    borderStyle: 'solid',
+    boxSizing: 'border-box'
+  }
+})

package/src/index.ts

@@ -0,0 +1,26 @@
+import { definePreset } from '@pandacss/dev'
+import type { Preset } from '@pandacss/types'
+import { conditions } from './conditions'
+import { globalCss } from './global-css'
+import { tokens } from './tokens'
+import { textStyles } from './text-styles'
+import { keyframes } from './keyframes'
+import { recipes, slotRecipes } from './recipes'
+import { breakpoints } from './breakpoints'
+
+const preset: Preset = definePreset({
+  theme: {
+    extend: {
+      breakpoints,
+      keyframes,
+      textStyles,
+      tokens,
+      recipes,
+      slotRecipes
+    }
+  },
+  conditions,
+  globalCss
+})
+
+export default preset

package/src/keyframes.ts

@@ -0,0 +1,15 @@
+import { defineKeyframes } from '@pandacss/dev'
+
+export const keyframes = defineKeyframes({
+  'fade-in': {
+    from: { opacity: '0' },
+    to: { opacity: '1' }
+  },
+  'fade-out': {
+    from: { opacity: '1' },
+    to: { opacity: '0' }
+  },
+  spin: {
+    '100%': { transform: 'rotate(1turn)' }
+  }
+})

package/src/recipes/accordion.ts

@@ -0,0 +1,57 @@
+// import { accordionAnatomy } from "@ark-ui/anatomy";
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const accordion = defineSlotRecipe({
+  className: 'accordion',
+  slots: ['root', 'item', 'trigger', 'content'],
+  base: {
+    root: {
+      divideY: '1px',
+      width: 'full'
+    },
+    trigger: {
+      alignItems: 'center',
+      color: 'fg.default',
+      cursor: 'pointer',
+      display: 'flex',
+      fontWeight: 'normal',
+      justifyContent: 'space-between',
+      textStyle: 'lg',
+      width: 'full',
+      fontSize: 'lg'
+    },
+    content: {
+      color: 'fg.muted',
+      display: 'grid',
+      gridTemplateRows: '0fr',
+      transitionProperty: 'grid-template-rows, padding-bottom',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'default',
+      _open: {
+        gridTemplateRows: '1fr'
+      },
+      '& > div': {
+        overflow: 'hidden'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  },
+  variants: {
+    size: {
+      md: {
+        trigger: {
+          py: '4'
+        },
+        content: {
+          pb: '6',
+          pr: '8',
+          _closed: {
+            pb: '0'
+          }
+        }
+      }
+    }
+  }
+})

package/src/recipes/avatar.ts

@@ -0,0 +1,179 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const avatarSlotRecipe = defineSlotRecipe({
+  className: 'avatar',
+  jsx: ['MpAvatar', 'mp-avatar'],
+  slots: ['root', 'fallback', 'image', 'icon'],
+  base: {
+    root: {
+      color: 'white',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'top',
+      flexShrink: '0',
+      fontWeight: 'semiBold',
+      textTransform: 'uppercase',
+      userSelect: 'none',
+      backgroundColor: 'var(--mp-avatar--background-color)',
+      borderColor: 'var(--mp-avatar--border-color)',
+      marginLeft: 'var(--mp-avatar--margin-left)',
+      cursor: 'var(--mp-avatar--cursor)',
+      _hasBorder: {
+        borderWidth: '0.125rem'
+      }
+    },
+    fallback: {
+      width: '100%',
+      height: '100%',
+      visibility: 'var(--mp-avatar--visibility)',
+      display: 'var(--mp-avatar--display)'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    }
+  },
+  variants: {
+    variant: {
+      square: {
+        root: { borderRadius: 'md' },
+        image: { borderRadius: 'md' }
+      },
+      circle: {
+        root: { borderRadius: 'full' },
+        image: { borderRadius: 'full' }
+      }
+    },
+    variantColor: {
+      gray: {
+        root: { backgroundColor: 'gray.50' }
+      },
+      sky: {
+        root: { backgroundColor: 'sky.400' }
+      },
+      teal: {
+        root: { backgroundColor: 'teal.400' }
+      },
+      violet: {
+        root: { backgroundColor: 'violet.400' }
+      },
+      amber: {
+        root: { backgroundColor: 'amber.400' }
+      },
+      rose: {
+        root: { backgroundColor: 'rose.400' }
+      },
+      stone: {
+        root: { backgroundColor: 'stone.400' }
+      },
+      lime: {
+        root: { backgroundColor: 'lime.400' }
+      },
+      pink: {
+        root: { backgroundColor: 'pink.400' }
+      }
+    },
+    size: {
+      sm: {
+        root: { width: '6', height: '6', fontSize: 'xs' },
+        icon: { width: '4!', height: '4!' }
+      },
+      md: {
+        root: { width: '8', height: '8', fontSize: 'sm' },
+        icon: { width: '5!', height: '5!' }
+      },
+      lg: {
+        root: { width: '12', height: '12', fontSize: 'lg' },
+        icon: { width: '8!', height: '8!' }
+      },
+      xl: {
+        root: { width: '20', height: '20', fontSize: '2xl' },
+        icon: { width: '16!', height: '16!' }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'sm' },
+        image: { borderRadius: 'sm' }
+      }
+    },
+    {
+      size: 'lg',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'lg' },
+        image: { borderRadius: 'lg' }
+      }
+    },
+    {
+      size: 'xl',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'xl' },
+        image: { borderRadius: 'xl' }
+      }
+    },
+    {
+      variantColor: 'gray',
+      css: {
+        root: { color: 'gray.600' }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'circle'
+  }
+})
+
+const avatarGroupSlotRecipe = defineSlotRecipe({
+  className: 'avatar-group',
+  jsx: ['MpAvatarGroup', 'mp-avatar-group'],
+  slots: ['root', 'excess'],
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      zIndex: '0'
+    },
+    excess: {
+      marginLeft: '2',
+      color: 'blue.400',
+      backgroundColor: 'blue.50',
+      fontWeight: 'semiBold',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'full',
+      userSelect: 'none',
+      cursor: 'var(--mp-avatar-group--cursor)'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        excess: { width: '6', height: '6', fontSize: 'xs' }
+      },
+      md: {
+        excess: { width: '8', height: '8', fontSize: 'sm' }
+      },
+      lg: {
+        excess: { width: '12', height: '12', fontSize: 'lg' }
+      },
+      xl: {
+        excess: { width: '20', height: '20', fontSize: '2xl' }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { avatarSlotRecipe, avatarGroupSlotRecipe }

package/src/recipes/badge.ts

@@ -0,0 +1,166 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const badgeRecipe = defineRecipe({
+  className: 'badge',
+  jsx: ['MpBadge', 'mp-badge'],
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: '999px'
+  },
+
+  variants: {
+    variant: {
+      solid: {
+        color: 'white'
+      },
+      subtle: {}
+    },
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    size: {
+      sm: {
+        fontSize: 'xs',
+        fontWeight: 'semibold',
+        lineHeight: '1sm',
+        letterSpacing: 'normal',
+        height: '4'
+      },
+      md: {
+        fontSize: 'md',
+        fontWeight: 'regular',
+        lineHeight: 'md',
+        letterSpacing: 'normal',
+        height: '5'
+      }
+    }
+  },
+
+  compoundVariants: [
+    // Size
+    {
+      variant: 'solid',
+      size: 'md',
+      css: {
+        paddingX: '1.5',
+        paddingY: '0.5'
+      }
+    },
+    {
+      variant: 'solid',
+      size: 'sm',
+      css: {
+        paddingX: '1',
+        paddingY: '0.5'
+      }
+    },
+    {
+      variant: 'subtle',
+      size: 'md',
+      css: {
+        paddingX: '2',
+        paddingY: '0'
+      }
+    },
+    {
+      variant: 'subtle',
+      size: 'sm',
+      css: {
+        paddingX: '1',
+        paddingY: '0'
+      }
+    },
+
+    // Solid
+    {
+      variant: 'solid',
+      variantColor: 'blue',
+      css: {
+        backgroundColor: 'sky.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'green',
+      css: {
+        backgroundColor: 'teal.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'orange',
+      css: {
+        backgroundColor: 'amber.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'red',
+      css: {
+        backgroundColor: 'rose.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'gray',
+      css: {
+        backgroundColor: 'stone.400'
+      }
+    },
+
+    // Subtle
+    {
+      variant: ['subtle'],
+      variantColor: 'blue',
+      css: {
+        backgroundColor: 'blue.50',
+        color: 'blue.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'green',
+      css: {
+        backgroundColor: 'green.50',
+        color: 'green.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'orange',
+      css: {
+        backgroundColor: 'orange.50',
+        color: 'orange.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'red',
+      css: {
+        backgroundColor: 'red.50',
+        color: 'red.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'gray',
+      css: {
+        backgroundColor: 'gray.50',
+        color: 'black'
+      }
+    }
+  ],
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    variantColor: 'blue'
+  }
+})
+
+export { badgeRecipe }

package/src/recipes/button.ts

@@ -0,0 +1,224 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const buttonRecipe = defineRecipe({
+  className: 'button',
+  jsx: ['MpButton', 'mp-button'],
+  base: {
+    position: 'relative',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'start',
+    gap: '2',
+    borderWidth: '1px',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    appearance: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    transitionDuration: '250ms',
+    transitionProperty: 'background, border-color, color, box-shadow',
+    transitionTimingFunction: 'linear',
+    _loading: {
+      cursor: 'wait',
+      position: 'absolute',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: 'full',
+      height: 'full'
+    }
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: 'white',
+        background: 'blue.400',
+        borderColor: 'blue.400',
+        _hover: {
+          background: 'blue.500',
+          borderColor: 'blue.500'
+        },
+        _active: {
+          background: 'blue.700',
+          borderColor: 'blue.700'
+        },
+        _loading: {
+          background: 'blue.400'
+        }
+      },
+      secondary: {
+        color: 'blue.400',
+        background: 'white',
+        borderColor: 'gray.100',
+        _hover: {
+          background: 'gray.50',
+          borderColor: 'gray.100'
+        },
+        _active: {
+          background: 'blue.50',
+          borderColor: 'blue.50'
+        },
+        _loading: {
+          background: 'white'
+        }
+      },
+      ghost: {
+        color: 'gray.600',
+        background: 'white',
+        borderColor: 'white',
+        _hover: {
+          background: 'gray.50',
+          borderColor: 'gray.50'
+        },
+        _active: {
+          background: 'gray.100',
+          borderColor: 'gray.100'
+        },
+        _loading: {
+          background: 'white'
+        }
+      },
+      danger: {
+        color: 'white',
+        background: 'red.400',
+        borderColor: 'red.400',
+        _hover: {
+          background: 'red.500',
+          borderColor: 'red.500'
+        },
+        _active: {
+          background: 'red.700',
+          borderColor: 'red.700'
+        },
+        _focusVisible: {
+          borderColor: 'red.400',
+          boxShadow: '0 0 0 3px #FDECEE'
+        },
+        _loading: {
+          background: 'red.400'
+        }
+      },
+      textLink: {
+        color: 'blue.400',
+        background: 'white',
+        borderColor: 'white',
+        _hover: {
+          color: 'blue.500'
+        },
+        _active: {
+          color: 'blue.700'
+        },
+        _disabled: {
+          cursor: 'not-allowed',
+          color: 'gray.400'
+        },
+        _loading: {
+          background: 'white'
+        }
+      }
+    },
+    size: {
+      sm: {
+        paddingX: '2',
+        paddingY: '1',
+        borderRadius: 'sm',
+        textStyle: 'label.md',
+        fontWeight: 'regular',
+        _loading: {
+          borderRadius: 'sm'
+        },
+        _hasIcon: {
+          padding: '1 !important'
+        }
+      },
+      md: {
+        paddingX: '4',
+        paddingY: '2',
+        borderRadius: 'md',
+        textStyle: 'label.md',
+        fontWeight: 'semiBold',
+        _loading: {
+          borderRadius: 'md'
+        },
+        _hasIcon: {
+          padding: '2 !important'
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ['textLink'],
+      css: {
+        paddingX: '0',
+        paddingY: '0',
+        borderRadius: 'sm',
+        _focusVisible: {
+          borderColor: 'white',
+          boxShadow: 'focus'
+        }
+      }
+    },
+    {
+      variant: ['ghost', 'textLink'],
+      css: {
+        fontWeight: 'regular'
+      }
+    },
+    {
+      variant: ['primary', 'secondary', 'ghost'],
+      css: {
+        _focusVisible: {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      }
+    },
+    {
+      variant: ['primary', 'secondary', 'ghost', 'danger'],
+      css: {
+        _disabled: {
+          cursor: 'not-allowed',
+          color: 'gray.400',
+          background: 'gray.50',
+          borderColor: 'gray.50',
+          _hover: {
+            background: 'gray.50',
+            borderColor: 'gray.50'
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md'
+  }
+})
+
+const buttonGroupRecipe = defineRecipe({
+  className: 'pixel-button-group',
+  jsx: ['MpButtonGroup'],
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--mp-button-group-spacing)',
+    '&[data-split-button=true]': {
+      gap: '0',
+      '& > [data-pixel-component=MpButton]': {
+        _first: {
+          borderTopRightRadius: 'none !important',
+          borderBottomRightRadius: 'none !important',
+          borderRight: '0 !important'
+        },
+        _last: {
+          borderTopLeftRadius: 'none !important',
+          borderBottomLeftRadius: 'none !important'
+        }
+      }
+    }
+  }
+})
+
+export { buttonRecipe, buttonGroupRecipe }