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

package/src/recipes/select.ts

@@ -0,0 +1,114 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const selectSlotRecipe = defineSlotRecipe({
+  className: 'select',
+  jsx: ['MpSelect', 'mp-select'],
+  slots: ['root', 'control', 'clear', 'arrow'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      _isFullWidth: {
+        width: 'full'
+      }
+    },
+    control: {
+      minWidth: '22',
+      fontWeight: 'regular',
+      lineHeight: 'md',
+      color: 'var(--mp-select--color)',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      outline: '0',
+      borderWidth: '1px',
+      borderRadius: 'sm',
+      paddingLeft: '3',
+      paddingRight: 'var(--mp-select--padding-right)',
+      appearance: 'none',
+      transition: 'all 250ms',
+      backgroundColor: 'white',
+      borderColor: 'gray.100',
+      _hover: {
+        borderColor: 'gray.400'
+      },
+      _focus: {
+        borderColor: 'blue.500',
+        boxShadow: 'outer',
+        _hover: {
+          borderColor: 'blue.500'
+        },
+        _invalid: {
+          borderColor: 'red.400'
+        }
+      },
+      _disabled: {
+        color: 'gray.400',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.100',
+        cursor: 'not-allowed'
+      },
+      _invalid: {
+        borderColor: 'red.400'
+      },
+      _isFullWidth: {
+        width: 'full'
+      }
+    },
+    clear: {
+      position: 'absolute!',
+      color: 'gray.600',
+      border: 'none',
+      top: '9px',
+      right: '40px',
+      width: '5',
+      height: '5',
+      minWidth: '5',
+      padding: '0',
+      transition: 'all 250ms!',
+      visibility: 'hidden',
+      opacity: '0',
+      _groupHover: {
+        visibility: 'var(--mp-select--visibility)',
+        opacity: 'var(--mp-select--opacity)'
+      }
+    },
+    arrow: {
+      position: 'absolute!',
+      display: 'inline-flex',
+      alignItems: 'center',
+      width: '6',
+      height: '6',
+      right: '2',
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        control: {
+          height: '7.5',
+          fontSize: 'sm',
+          borderRadius: 'sm',
+          paddingY: '1'
+        }
+      },
+      md: {
+        control: {
+          height: '9.5',
+          fontSize: 'md',
+          borderRadius: 'md',
+          paddingY: '2'
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+export { selectSlotRecipe }

package/src/recipes/shared.ts

@@ -0,0 +1,19 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sharedSlotRecipe = defineSlotRecipe({
+  className: 'shared',
+  jsx: ['MpCheckbox', 'mp-checkbox', 'MpRadio', 'mp-radio'],
+  slots: ['hidden'],
+  base: {
+    hidden: {
+      clip: 'rect(0px, 0px, 0px, 0px)',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      position: 'absolute'
+    }
+  }
+})
+
+export { sharedSlotRecipe }

package/src/recipes/spinner.ts

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const spinnerRecipe = defineRecipe({
+  className: 'spinner',
+  jsx: ['MpSpinner', 'mp-spinner'],
+  base: {
+    display: 'inline-flex',
+    animation: '0.45s linear 0s infinite normal none running spin'
+  },
+  variants: {
+    size: {
+      sm: {
+        width: '5',
+        height: '5'
+      },
+      md: {
+        width: '6',
+        height: '6'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+})

package/src/recipes/table.ts

@@ -0,0 +1,113 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const tableRecipe = defineRecipe({
+  className: 'table',
+  jsx: ['MpTable', 'mp-table'],
+  base: {
+    position: 'relative',
+    width: 'full',
+    display: 'table',
+    borderCollapse: 'collapse',
+    borderSpacing: '0px',
+    whiteSpace: 'nowrap',
+    '&[data-table-hoverable=true]': {
+      '& tr': {
+        _hover: {
+          '& > td': {
+            backgroundColor: 'gray.50'
+          }
+        }
+      }
+    },
+    '& > thead': {
+      width: 'full',
+      backgroundColor: 'gray.25',
+      '&[data-table-head-fixed=true]': {
+        position: 'sticky',
+        zIndex: 'sticky',
+        top: '0',
+        boxShadow: '0px 2px var(--mp-colors-gray-100)'
+      }
+    },
+    '& > tbody': {
+      width: 'full'
+    },
+    '& > tr': {
+      width: 'full',
+      boxSizing: 'border-box',
+      whiteSpace: 'nowrap'
+    },
+    '& th, & td': {
+      cursor: 'default',
+      paddingLeft: '2',
+      paddingRight: '4',
+      paddingY: '2',
+      height: '12',
+      textStyle: 'label.md',
+      textAlign: 'left',
+      borderBottom: 'sm',
+      borderStyle: 'solid',
+      borderColor: 'gray.100',
+      transition: 'background linear 120ms'
+    },
+    '& th': {
+      fontWeight: 'semiBold',
+      backgroundColor: 'gray.25'
+    },
+    '& td': {
+      fontWeight: 'regular',
+      backgroundColor: 'white'
+    },
+    '& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]': {
+      position: 'sticky',
+      zIndex: 'docked',
+      left: '0',
+      right: '0'
+    }
+  }
+})
+
+const tableContainerRecipe = defineRecipe({
+  className: 'table-container',
+  jsx: ['MpTableContainer', 'mp-table-container'],
+  base: {
+    position: 'relative',
+    overflow: 'auto',
+    '&[data-table-has-left-shadow=true]': {
+      _before: {
+        boxShadow: 'inset 10px 0 8px -8px rgba(5, 5, 5, 0.08)'
+      }
+    },
+    '&[data-table-has-right-shadow=true]': {
+      _after: {
+        boxShadow: 'inset -10px 0 8px -8px rgba(5, 5, 5, 0.08)'
+      }
+    },
+    _before: {
+      content: '""',
+      position: 'absolute',
+      zIndex: 'docked',
+      boxShadow: 'none',
+      transition: 'box-shadow 300ms',
+      insetInlineStart: 0,
+      width: '30px',
+      top: 0,
+      bottom: 0,
+      pointerEvents: 'none'
+    },
+    _after: {
+      content: '""',
+      position: 'absolute',
+      zIndex: 'docked',
+      boxShadow: 'none',
+      transition: 'box-shadow linear 300ms',
+      insetInlineEnd: 0,
+      width: '30px',
+      top: 0,
+      bottom: 0,
+      pointerEvents: 'none'
+    }
+  }
+})
+
+export { tableRecipe, tableContainerRecipe }

package/src/recipes/tabs.ts

@@ -0,0 +1,204 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const tabListRecipe = defineRecipe({
+  className: 'tab-list',
+  jsx: ['MpTabList', 'mp-tab-list'],
+  base: {
+    display: 'flex',
+    overflow: 'auto',
+    gap: '1.5rem',
+    fontSize: 'md',
+    color: 'gray.600',
+    marginBottom: 6,
+    padding: 0.5,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    maxWidth: 'full'
+  }
+})
+
+const tabRecipe = defineRecipe({
+  className: 'tab',
+  jsx: ['MpTab', 'mp-tab'],
+  base: {
+    display: 'flex',
+    cursor: 'pointer',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'all 0.2s',
+    position: 'relative',
+    mb: '1px',
+    pt: '3',
+    pb: '4',
+    px: '1',
+    color: 'gray.600',
+    _hover: {
+      color: 'dark'
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    },
+    _focus: {
+      shadow: '0 0 0 2px #E0EEFF',
+      borderRadius: 'sm'
+    }
+  },
+  variants: {
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    isSelected: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variantColor: 'blue',
+      isSelected: true,
+      css: {
+        color: 'blue.400',
+        _hover: {
+          color: 'blue.500'
+        }
+      }
+    },
+    {
+      variantColor: 'green',
+      isSelected: true,
+      css: {
+        color: 'green.400',
+        _hover: {
+          color: 'green.500'
+        }
+      }
+    },
+    {
+      variantColor: 'orange',
+      isSelected: true,
+      css: {
+        color: 'orange.400',
+        _hover: {
+          color: 'orange.500'
+        }
+      }
+    },
+    {
+      variantColor: 'red',
+      isSelected: true,
+      css: {
+        color: 'red.400',
+        _hover: {
+          color: 'red.500'
+        }
+      }
+    },
+    {
+      variantColor: 'gray',
+      isSelected: true,
+      css: {
+        color: 'gray.400',
+        _hover: {
+          color: 'gray.500'
+        }
+      }
+    }
+  ],
+
+  defaultVariants: {
+    variantColor: 'blue',
+    isSelected: false
+  }
+})
+
+const selectedBorderRecipe = defineRecipe({
+  className: 'selected-border',
+  jsx: ['MpSelectedBorder', 'mp-selected-border'],
+  base: {
+    position: 'absolute',
+    bottom: '-2px',
+    width: 'calc(100% - 8px)',
+    height: '0.5'
+  },
+  variants: {
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    isSelected: {
+      false: {
+        background: 'transparent',
+        _groupHover: {
+          background: 'gray.400'
+        }
+      },
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variantColor: 'blue',
+      isSelected: true,
+      css: {
+        background: 'blue.400',
+        _groupHover: {
+          background: 'blue.500'
+        }
+      }
+    },
+    {
+      variantColor: 'green',
+      isSelected: true,
+      css: {
+        background: 'green.400',
+        _groupHover: {
+          background: 'green.500'
+        }
+      }
+    },
+    {
+      variantColor: 'orange',
+      isSelected: true,
+      css: {
+        background: 'orange.400',
+        _groupHover: {
+          background: 'orange.500'
+        }
+      }
+    },
+    {
+      variantColor: 'red',
+      isSelected: true,
+      css: {
+        background: 'red.400',
+        _groupHover: {
+          background: 'red.500'
+        }
+      }
+    },
+    {
+      variantColor: 'gray',
+      isSelected: true,
+      css: {
+        background: 'gray.400',
+        _groupHover: {
+          background: 'gray.500'
+        }
+      }
+    }
+  ],
+
+  defaultVariants: {
+    variantColor: 'blue',
+    isSelected: false
+  }
+})
+
+export { tabListRecipe, tabRecipe, selectedBorderRecipe }

package/src/recipes/tag.ts

@@ -0,0 +1,105 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const tagSlotRecipe = defineSlotRecipe({
+  className: 'tag',
+  jsx: ['MpTag', 'mp-tag'],
+  slots: ['root', 'close'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      userSelect: 'auto',
+      outline: '0px solid transparent',
+      borderWidth: '1px',
+      borderColor: 'transparent',
+      borderRadius: 'sm',
+      transition: 'all 250ms',
+      textAlign: 'left',
+      fontSize: 'md',
+      fontWeight: 'regular',
+      lineHeight: 'md',
+      letterSpacing: 'normal',
+      paddingX: '2',
+      whiteSpace: 'normal',
+      overflowWrap: 'anywhere',
+      cursor: 'var(--mp-tag--cursor)'
+    },
+    close: {
+      position: 'absolute!',
+      color: 'gray.600',
+      border: 'none',
+      right: '0',
+      width: '5',
+      height: '5',
+      minWidth: '5',
+      paddingTop: '1',
+      padding: '0',
+      transition: 'all 250ms!',
+      visibility: 'hidden',
+      opacity: '0',
+      _groupHover: {
+        visibility: 'visible',
+        opacity: '1'
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          paddingY: '0'
+        }
+      },
+      md: {
+        root: {
+          paddingY: '1'
+        }
+      }
+    },
+    variant: {
+      gray: {
+        root: {
+          color: 'gray.600',
+          background: 'gray.50'
+        }
+      },
+      red: {
+        root: {
+          color: 'red.400',
+          backgroundColor: 'red.50'
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: 'gray',
+      css: {
+        close: {
+          background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)'
+        }
+      }
+    },
+    {
+      variant: 'red',
+      css: {
+        close: {
+          background: 'linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)'
+        }
+      }
+    },
+    {
+      size: 'sm',
+      css: {
+        close: { paddingTop: '0' }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'gray'
+  }
+})
+
+export { tagSlotRecipe }

package/src/recipes/text.ts

@@ -0,0 +1,56 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const textRecipe = defineRecipe({
+  className: 'text',
+  jsx: ['MpText', 'mp-text'],
+  base: {
+    color: 'var(--mp-text-color)',
+    fontVariantNumeric: 'lining-nums tabular-nums',
+    '&[data-text-strike=true]': {
+      textDecoration: 'line-through'
+    },
+    '&[data-text-link=true]': {
+      textDecoration: 'underline'
+    }
+  },
+  variants: {
+    size: {
+      h1: {
+        textStyle: 'h1'
+      },
+      h2: {
+        textStyle: 'h2'
+      },
+      h3: {
+        textStyle: 'h3'
+      },
+      body: {
+        textStyle: 'body.md'
+      },
+      'body-small': {
+        textStyle: 'body.sm'
+      },
+      label: {
+        textStyle: 'label.md'
+      },
+      'label-small': {
+        textStyle: 'label.sm'
+      },
+      overline: {
+        textStyle: 'overline'
+      }
+    },
+    weight: {
+      regular: {
+        fontWeight: 'regular'
+      },
+      semiBold: {
+        fontWeight: 'semiBold'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'label',
+    weight: 'regular'
+  }
+})

package/src/recipes/textarea.ts

@@ -0,0 +1,60 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const textareaRecipe = defineRecipe({
+  className: 'textarea',
+  jsx: ['MpTextarea', 'mp-textarea'],
+  base: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    outline: '0',
+    borderWidth: '1px',
+    borderColor: 'gray.100',
+    borderRadius: 'md',
+    color: 'dark',
+    backgroundColor: 'white',
+    appearance: 'none',
+    transition: 'all 250ms',
+    minWidth: '65',
+    minHeight: '20',
+    fontSize: 'md',
+    fontWeight: 'regular',
+    lineHeight: 'md',
+    paddingX: '3',
+    paddingTop: '2',
+    paddingBottom: '5',
+    resize: 'both',
+    _hover: {
+      borderColor: 'gray.400'
+    },
+    _focus: {
+      borderColor: 'blue.500',
+      boxShadow: 'outer',
+      _hover: {
+        borderColor: 'blue.500'
+      }
+    },
+    _disabled: {
+      color: 'gray.400',
+      backgroundColor: 'gray.50',
+      borderColor: 'gray.100',
+      cursor: 'not-allowed'
+    },
+    _invalid: {
+      borderColor: 'red.400'
+    },
+    _readOnly: {
+      boxShadow: 'none',
+      userSelect: 'all'
+    }
+  },
+  variants: {
+    isFullWidth: {
+      true: {
+        width: '100%'
+      }
+    }
+  }
+})
+
+export { textareaRecipe }