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

package/src/recipes/progress.ts

@@ -0,0 +1,76 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const progressSlotRecipe = defineSlotRecipe({
+  className: 'progress',
+  jsx: ['MpProgress', 'mp-progress'],
+  slots: ['root', 'linear', 'circularBase', 'circularTrack'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      borderRadius: '100px',
+      background: 'gray.100',
+      transition: 'all 250ms linear'
+    },
+    linear: {
+      transition: 'all 250ms linear',
+      height: 'full',
+      borderRadius: '100px',
+      background: 'var(--mp-progress-color)',
+      width: 'var(--mp-progress-width)'
+    },
+    circularBase: {
+      width: 'full',
+      height: 'full',
+      borderRadius: 'full',
+      background:
+        'conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)'
+    },
+    circularTrack: {
+      width: 'calc(100% - 6px)',
+      height: 'calc(100% - 6px)',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      backgroundColor: 'white',
+      borderRadius: 'full'
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        linear: {
+          height: '3'
+        }
+      },
+      sm: {
+        linear: {
+          height: '2'
+        }
+      }
+    },
+    variant: {
+      linear: {
+        root: {
+          borderRadius: '100px'
+        }
+      },
+      circular: {
+        root: {
+          borderRadius: 'full',
+          width: '22px',
+          height: '22px',
+          background: 'transparent',
+          alignSelf: 'start'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'linear',
+    size: 'md'
+  }
+})
+
+export { progressSlotRecipe }

package/src/recipes/radio.ts

@@ -0,0 +1,103 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const radioSlotRecipe = defineSlotRecipe({
+  className: 'radio',
+  jsx: ['MpRadio', 'mp-radio'],
+  slots: ['root', 'control', 'label'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2',
+      cursor: 'pointer',
+      outline: 'none',
+      '&[data-has-description=true]': {
+        alignItems: 'flex-start',
+        '& .mp-radio__control': {
+          marginTop: '1'
+        }
+      },
+      '& .mp-shared__hidden': {
+        '&:focus + .mp-radio__control': {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      },
+      _hover: {
+        '& .mp-radio__control': {
+          borderColor: 'gray.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        '& .mp-radio__control': {
+          borderColor: 'gray.100 !important',
+          background: 'gray.50 !important',
+          boxShadow: 'none !important',
+
+          '& div': {
+            background: 'gray.400'
+          }
+        }
+      },
+      _invalid: {
+        '& .mp-radio__control': {
+          borderColor: 'red.400',
+          background: 'white'
+        }
+      },
+      _checked: {
+        '& .mp-radio__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-radio__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      },
+      _indeterminate: {
+        '& .mp-radio__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-radio__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      }
+    },
+    control: {
+      flex: 'none',
+      transitionDuration: '250ms',
+      transitionProperty: 'background, border-color, box-shadow',
+      transitionTimingFunction: 'linear',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '18px',
+      height: '18px',
+      borderWidth: '2px',
+      borderColor: 'gray.100',
+      borderRadius: 'full',
+      background: 'white',
+
+      '& div': {
+        width: '2.5',
+        height: '2.5',
+        background: 'white',
+        borderRadius: 'full'
+      }
+    },
+    label: {
+      background: 'transparent'
+    }
+  }
+})
+
+export { radioSlotRecipe }

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 }