@mekari/pixel3-theme 0.0.1 → 0.0.2

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/index.ts

@@ -21,6 +21,18 @@ 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,
@@ -39,7 +51,11 @@ export const recipes = {
   selectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
-  dividerRecipe
+  dividerRecipe,
+  bannerTitleRecipe,
+  bannerDescriptionRecipe,
+  bannerLinkRecipe,
+  bannerCloseButtonRecipe
 }
 
 export const slotRecipes = {
@@ -57,5 +73,11 @@ export const slotRecipes = {
   avatarGroupSlotRecipe,
   selectSlotRecipe,
   formControlSlotRecipe,
-  inputTagSlotRecipe
+  inputTagSlotRecipe,
+  modalSlotRecipe,
+  uploadSlotRecipe,
+  uploadListSlotRecipe,
+  dropzoneSlotRecipe,
+  bannerSlotRecipe,
+  bannerIconSlotRecipe
 }

package/src/recipes/modal.ts

@@ -0,0 +1,108 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const modalSlotRecipe = defineSlotRecipe({
+  className: 'modal',
+  description: 'The styles for the Modal component',
+  jsx: ['MpModal', 'mp-modal'],
+  slots: ['root', 'rootChild', 'body', 'contentRoot', 'contentChild', 'header', 'footer', 'body', 'overlay', 'closeButton'],
+  base: {
+    root: {
+      position: 'relative',
+      zIndex: 'modal'
+    },
+    rootChild: {
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    body: {
+      p: 4,
+      flex: 1,
+    },
+    contentRoot: {
+      pos: 'fixed',
+      left: '0',
+      w: '100%',
+      h: '100%',
+      zIndex: 'modal',
+    },
+    contentChild: {
+      outline: 0,
+      width: '100%',
+      position: 'relative',
+      display: 'flex',
+      flexDir: 'column',
+      zIndex: 'modal',
+      fontFamily: 'body',
+      borderColor: 'gray.100',
+      bg: 'white',
+      marginInline: 'auto',
+    },
+
+    header: {
+      px: 4,
+      py: 3,
+      position: 'relative',
+      fontSize: 'md',
+      fontWeight: 'semiBold',
+      bg: 'background',
+      borderTopLeftRadius: 'md',
+      borderTopRightRadius: 'md',
+      borderBottom: 'solid 1px',
+      borderBottomColor: 'gray.100'
+    },
+    closeButton: {
+      position: 'absolute',
+      top: '10px',
+      right: '12px',
+      bg: 'transparent',
+      borderColor: 'transparent'
+    },
+    footer: {
+      display: 'flex',
+      pt: 2,
+      px: 4,
+      pb: 4,
+      justifyContent: 'flex-end',
+    },
+    overlay: {
+      position: 'fixed',
+      bg: 'overlay',
+      left: '0',
+      top: '0',
+      w: '100vw',
+      h: '100vh',
+      zIndex: 'overlay',
+    }
+  },
+  variants: {
+    full: {
+      true: {
+        contentRoot: {
+          top: '0',
+        },
+        contentChild: {
+          height: '100vh',
+          border: 'none',
+          borderRadius: 'none'
+        }
+      },
+      false: {
+        contentRoot: {
+          top: '3.75rem',
+        },
+        contentChild: {
+          height: '100%',
+          borderWidth: '1px',
+          borderRadius: 'md'
+        }
+      }
+    }
+  },
+
+  defaultVariants: {
+    full: false
+  },
+})

package/src/recipes/table.ts

@@ -19,7 +19,7 @@ const tableRecipe = defineRecipe({
         }
       }
     },
-    thead: {
+    '& > thead': {
       width: 'full',
       backgroundColor: 'gray.25',
       '&[data-table-head-fixed=true]': {
@@ -29,15 +29,15 @@ const tableRecipe = defineRecipe({
         boxShadow: '0px 2px var(--mp-colors-gray-100)'
       }
     },
-    tbody: {
+    '& > tbody': {
       width: 'full'
     },
-    tr: {
+    '& > tr': {
       width: 'full',
       boxSizing: 'border-box',
       whiteSpace: 'nowrap'
     },
-    'th, td': {
+    '& th, & td': {
       cursor: 'default',
       paddingLeft: '2',
       paddingRight: '4',
@@ -50,15 +50,15 @@ const tableRecipe = defineRecipe({
       borderColor: 'gray.100',
       transition: 'background linear 120ms'
     },
-    th: {
+    '& th': {
       fontWeight: 'semiBold',
       backgroundColor: 'gray.25'
     },
-    td: {
+    '& td': {
       fontWeight: 'regular',
       backgroundColor: 'white'
     },
-    'th[data-table-cell-fixed=true], td[data-table-cell-fixed=true]': {
+    '& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]': {
       position: 'sticky',
       zIndex: 'docked',
       left: '0',

package/src/recipes/tag.ts

@@ -28,7 +28,6 @@ const tagSlotRecipe = defineSlotRecipe({
     close: {
       position: 'absolute!',
       color: 'gray.600',
-      background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)!',
       border: 'none',
       right: '0',
       width: '5',
@@ -74,11 +73,19 @@ const tagSlotRecipe = defineSlotRecipe({
     }
   },
   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%)!'
+          background: 'linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)'
         }
       }
     },

package/src/recipes/upload.ts

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const uploadSlotRecipe = defineSlotRecipe({
+  className: 'upload',
+  jsx: ['MpUpload', 'mp-upload'],
+  slots: ['root', 'resetButton'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '3',
+      py: '1',
+      pl: '1',
+      pr: '3',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      backgroundColor: 'white',
+      outline: 'none',
+      transition: 'all 250ms',
+      _hover: {
+        borderColor: 'gray.400',
+        '& .mp-upload__resetButton': {
+          display: 'block'
+        }
+      },
+      _focusVisible: {
+        boxShadow: 'focus',
+        borderColor: 'blue.400',
+        _hover: {
+          borderColor: 'blue.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        background: 'gray.50'
+      },
+      _invalid: {
+        borderColor: 'red.400',
+        _hover: {
+          borderColor: 'red.400'
+        }
+      }
+    },
+    resetButton: {
+      display: 'none',
+      cursor: 'pointer',
+      position: 'absolute',
+      top: '2',
+      right: '3'
+    }
+  }
+})
+
+const uploadListSlotRecipe = defineSlotRecipe({
+  className: 'upload-list',
+  jsx: ['MpUploadList', 'mp-upload-list'],
+  slots: ['root', 'titleWrapper', 'actionWrapper'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'start',
+      gap: '3',
+      py: '2',
+      px: '1',
+      borderRadius: 'md',
+      backgroundColor: 'white',
+      transition: 'all 250ms',
+      _hover: {
+        backgroundColor: 'background'
+      }
+    },
+    titleWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      minWidth: '1px',
+    },
+    actionWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '0.5',
+      ml: 'auto',
+      '& > button': {
+        // Remove hover style for Button Icon
+        _hover: {
+          background: 'transparent!important',
+          borderColor: 'transparent!important'
+        }
+      }
+    }
+  }
+})
+
+export { uploadSlotRecipe, uploadListSlotRecipe }

package/src/tokens/colors.ts

@@ -27,6 +27,30 @@ export const colors = defineTokens.colors({
     talenta: { value: '#F22929', description: 'Mekari Talenta' },
     university: { value: '#448AFF', description: 'Mekari University' }
   },
+  whiteAlpha: {
+    50: { value: 'rgba(255, 255, 255, 0.04)' },
+    100: { value: 'rgba(255, 255, 255, 0.06)' },
+    200: { value: 'rgba(255, 255, 255, 0.08)' },
+    300: { value: 'rgba(255, 255, 255, 0.16)' },
+    400: { value: 'rgba(255, 255, 255, 0.24)' },
+    500: { value: 'rgba(255, 255, 255, 0.36)' },
+    600: { value: 'rgba(255, 255, 255, 0.48)' },
+    700: { value: 'rgba(255, 255, 255, 0.64)' },
+    800: { value: 'rgba(255, 255, 255, 0.80)' },
+    900: { value: 'rgba(255, 255, 255, 0.92)' }
+  },
+  blackAplpha: {
+    50: { value: 'rgba(0, 0, 0, 0.04)' },
+    100: { value: 'rgba(0, 0, 0, 0.06)' },
+    200: { value: 'rgba(0, 0, 0, 0.08)' },
+    300: { value: 'rgba(0, 0, 0, 0.16)' },
+    400: { value: 'rgba(0, 0, 0, 0.24)' },
+    500: { value: 'rgba(0, 0, 0, 0.36)' },
+    600: { value: 'rgba(0, 0, 0, 0.48)' },
+    700: { value: 'rgba(0, 0, 0, 0.64)' },
+    800: { value: 'rgba(0, 0, 0, 0.80)' },
+    900: { value: 'rgba(0, 0, 0, 0.92)' }
+  },
   gray: {
     25: {
       value: '#F8F9FB',

package/src/tokens/sizes.ts

@@ -24,5 +24,6 @@ export const sizes = defineTokens.sizes({
   22: { value: '5.5rem', description: '96px' },
   56: { value: '14rem', description: '224px' },
   65: { value: '17.5rem', description: '280px' },
-  full: { value: '100%' }
+  full: { value: '100%' },
+  sm: {value: '24rem'}
 })