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

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 }

package/src/recipes/checkbox.ts

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const checkboxSlotRecipe = defineSlotRecipe({
+  className: 'checkbox',
+  jsx: ['MpCheckbox', 'mp-checkbox'],
+  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-checkbox__control': {
+          marginTop: '1'
+        }
+      },
+      '& .mp-shared__hidden': {
+        '&:focus + .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      },
+      _hover: {
+        '& .mp-checkbox__control': {
+          borderColor: 'gray.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        '& .mp-checkbox__control': {
+          borderColor: 'gray.100 !important',
+          background: 'gray.50 !important',
+          boxShadow: 'none !important'
+        }
+      },
+      _invalid: {
+        '& .mp-checkbox__control': {
+          borderColor: 'red.400',
+          background: 'white'
+        }
+      },
+      _checked: {
+        '& .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-checkbox__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      },
+      _indeterminate: {
+        '& .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-checkbox__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: 'md',
+      background: 'white'
+    },
+    label: {
+      background: 'transparent'
+    }
+  }
+})
+
+export { checkboxSlotRecipe }

package/src/recipes/divider.ts

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const dividerRecipe = defineRecipe({
+  className: 'divider',
+  jsx: ['MpDivider', 'mp-divider'],
+  base: {
+    border: 0,
+    opacity: 0.6,
+    color: 'rgb(208, 214, 221)'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottom: '0.0625rem solid',
+        height: 'auto',
+        marginY: 2
+      },
+      vertical: {
+        borderLeft: '0.0625rem solid',
+        height: 'auto',
+        marginX: 2
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+})
+
+export { dividerRecipe }

package/src/recipes/dropzone.ts

@@ -0,0 +1,161 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const dropzoneSlotRecipe = defineSlotRecipe({
+  className: 'dropzone',
+  jsx: ['MpDropzone', 'mp-dropzone'],
+  slots: [
+    'root',
+    'wrapper',
+    'box',
+    'logoBox',
+    'productBox',
+    'avatarBox',
+    'overlayWrapper',
+    'overlay',
+    'preview',
+    'overlayPreview',
+    'clearButton'
+  ],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      height: 'full'
+    },
+    wrapper: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: 'full',
+      height: 'inherit',
+      minHeight: 'inherit',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      borderStyle: 'dashed',
+      background: 'white',
+      outline: 'none',
+      transition: 'all 250ms',
+      _hover: {
+        borderColor: 'gray.400',
+        '& [data-overlay-preview=true]': {
+          display: 'flex'
+        }
+      },
+      _focusVisible: {
+        boxShadow: 'focus',
+        borderColor: 'blue.400',
+        _hover: {
+          borderColor: 'blue.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        background: 'gray.50!'
+      },
+      _invalid: {
+        borderColor: 'red.400',
+        backgroundColor: 'red.50!',
+        _hover: {
+          borderColor: 'red.400!'
+        }
+      }
+    },
+    box: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2'
+    },
+    logoBox: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2',
+      width: 'full',
+      height: 'full',
+      borderRadius: 'inherit',
+      cursor: 'pointer'
+    },
+    productBox: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2',
+      width: 'full',
+      height: 'full',
+      borderRadius: 'inherit',
+      cursor: 'pointer'
+    },
+    avatarBox: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 'full',
+      height: 'full',
+      borderRadius: 'inherit',
+      cursor: 'pointer'
+    },
+    overlayWrapper: {
+      width: 'full',
+      height: 'inherit',
+      minHeight: 'inherit',
+      borderRadius: 'inherit'
+    },
+    overlay: {
+      position: 'absolute',
+      zIndex: '1',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2',
+      width: 'full',
+      height: 'full',
+      top: '0',
+      right: '0',
+      backdropFilter: 'blur(12px)',
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderColor: 'blue.400',
+      borderStyle: 'dashed'
+    },
+    preview: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 'full',
+      borderRadius: 'inherit'
+    },
+    overlayPreview: {
+      display: 'none',
+      cursor: 'pointer',
+      position: 'absolute',
+      zIndex: '1',
+      width: 'full',
+      height: 'full',
+      background: 'overlay',
+      backdropFilter: 'blur(12px)',
+      borderRadius: 'inherit',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '2'
+    },
+    clearButton: {
+      cursor: 'pointer',
+      position: 'absolute',
+      zIndex: '2',
+      background: 'white',
+      border: '2px solid white',
+      borderRadius: 'full',
+    }
+  }
+})
+
+export { dropzoneSlotRecipe }

package/src/recipes/form-control.ts

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const formControlSlotRecipe = defineSlotRecipe({
+  className: 'form-control',
+  jsx: ['MpFormControl', 'mp-form-control'],
+  slots: ['root', 'label', 'required', 'helpText', 'errorMessage'],
+  base: {
+    root: {},
+    label: {
+      fontSize: 'md',
+      fontWeight: 'semiBold',
+      marginBottom: '1',
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      display: 'flex'
+    },
+    required: {
+      color: 'red.400',
+      marginLeft: '1'
+    },
+    helpText: {
+      color: 'gray.600',
+      fontSize: 'sm',
+      marginTop: '1'
+    },
+    errorMessage: {
+      color: 'red.400',
+      fontSize: 'sm',
+      marginTop: '1',
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      display: 'flex'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { formControlSlotRecipe }

package/src/recipes/icon.ts

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const iconRecipe = defineRecipe({
+  className: 'icon',
+  jsx: ['MpIcon', 'mp-icon'],
+  base: {
+    color: 'var(--mp-icon-color)',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    backfaceVisibility: 'hidden',
+    flexShrink: 0,
+    '&:not(:root)': {
+      overflow: 'hidden'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        width: '5',
+        height: '5'
+      },
+      md: {
+        width: '6',
+        height: '6'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})

package/src/recipes/index.ts

@@ -0,0 +1,83 @@
+import { tagSlotRecipe } from './tag'
+import { avatarSlotRecipe, avatarGroupSlotRecipe } from './avatar'
+import { buttonRecipe, buttonGroupRecipe } from './button'
+import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from './input'
+import { selectSlotRecipe } from './select'
+import { textRecipe } from './text'
+import { iconRecipe } from './icon'
+import { spinnerRecipe } from './spinner'
+import { accordion } from './accordion'
+import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from './popover'
+import { badgeRecipe } from './badge'
+import { textareaRecipe } from './textarea'
+import { tooltipRecipe } from './tooltip'
+import { tabListRecipe, tabRecipe, selectedBorderRecipe } from './tabs'
+import { checkboxSlotRecipe } from './checkbox'
+import { radioSlotRecipe } from './radio'
+import { sharedSlotRecipe } from './shared'
+import { toggleSlotRecipe } from './toggle'
+import { tableRecipe, tableContainerRecipe } from './table'
+import { progressSlotRecipe } from './progress'
+import { formControlSlotRecipe } from './form-control'
+import { inputTagSlotRecipe } from './input-tag'
+import { dividerRecipe } from './divider'
+import { modalSlotRecipe } from './modal'
+import { uploadSlotRecipe, uploadListSlotRecipe } from './upload'
+import { dropzoneSlotRecipe } from './dropzone'
+
+import {
+  bannerSlotRecipe,
+  bannerTitleRecipe,
+  bannerDescriptionRecipe,
+  bannerIconSlotRecipe,
+  bannerLinkRecipe,
+  bannerCloseButtonRecipe
+} from './banner'
+
+export const recipes = {
+  buttonRecipe,
+  buttonGroupRecipe,
+  textRecipe,
+  iconRecipe,
+  spinnerRecipe,
+  popoverContentRecipe,
+  popoverListRecipe,
+  popoverListItemRecipe,
+  badgeRecipe,
+  textareaRecipe,
+  tooltipRecipe,
+  tabListRecipe,
+  tabRecipe,
+  selectedBorderRecipe,
+  tableRecipe,
+  tableContainerRecipe,
+  dividerRecipe,
+  bannerTitleRecipe,
+  bannerDescriptionRecipe,
+  bannerLinkRecipe,
+  bannerCloseButtonRecipe
+}
+
+export const slotRecipes = {
+  accordion,
+  checkboxSlotRecipe,
+  radioSlotRecipe,
+  sharedSlotRecipe,
+  progressSlotRecipe,
+  toggleSlotRecipe,
+  tagSlotRecipe,
+  inputSlotRecipe,
+  inputGroupSlotRecipe,
+  inputAddonSlotRecipe,
+  avatarSlotRecipe,
+  avatarGroupSlotRecipe,
+  selectSlotRecipe,
+  formControlSlotRecipe,
+  inputTagSlotRecipe,
+  modalSlotRecipe,
+  uploadSlotRecipe,
+  uploadListSlotRecipe,
+  dropzoneSlotRecipe,
+  bannerSlotRecipe,
+  bannerIconSlotRecipe
+}