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

package/src/recipes/toggle.ts

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const toggleSlotRecipe = defineSlotRecipe({
+  className: 'toggle',
+  jsx: ['MpToggle', 'mp-toggle'],
+  slots: ['root', 'control', 'label'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '3',
+      cursor: 'pointer',
+      outline: 'none',
+      '&[data-has-description=true]': {
+        alignItems: 'flex-start',
+        '& .mp-toggle__control': {
+          marginTop: '1'
+        }
+      },
+      '& .mp-shared__hidden': {
+        '&:focus + .mp-toggle__control': {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      },
+      _hover: {
+        '& .mp-toggle__control': {
+          borderColor: 'gray.400',
+          background: 'gray.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        '& .mp-toggle__control': {
+          borderColor: 'gray.100 !important',
+          background: 'gray.50 !important',
+          boxShadow: 'none !important',
+
+          '& div': {
+            background: 'gray.100'
+          }
+        }
+      },
+      _invalid: {
+        '& .mp-toggle__control': {
+          borderColor: 'red.400',
+          background: 'red.400'
+        }
+      },
+      _checked: {
+        '& .mp-toggle__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400',
+
+          '& div': {
+            transform: 'translateX(var(--mp-sizes-3))'
+          }
+        },
+        _hover: {
+          '& .mp-toggle__control': {
+            borderColor: 'blue.400',
+            background: 'blue.400'
+          }
+        }
+      }
+    },
+    control: {
+      flex: 'none',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      width: '7',
+      height: '4',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'lg',
+      background: 'gray.100',
+
+      '& div': {
+        transitionDuration: '250ms',
+        transitionProperty: 'transform',
+        transitionTimingFunction: 'linear',
+        transform: 'translateX(2px)',
+        width: '3',
+        height: '3',
+        background: 'white',
+        borderRadius: 'full'
+      }
+    },
+    label: {
+      background: 'transparent'
+    }
+  }
+})
+
+export { toggleSlotRecipe }

package/src/recipes/tooltip.ts

@@ -0,0 +1,24 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const tooltipRecipe = defineRecipe({
+  className: 'tooltip',
+  jsx: ['MpTooltip', 'mp-tooltip'],
+  base: {
+    px: '2',
+    py: '1',
+    borderRadius: 'sm',
+    fontWeight: 'regular',
+    pointerEvents: 'none',
+    fontSize: 'sm',
+    shadow: 'md',
+    maxW: '300px',
+    zIndex: 'tooltip',
+    boxShadow: 'sm',
+    bg: 'overlay',
+    color: 'white',
+    whiteSpace: 'normal',
+    overflowWrap: 'break-word'
+  }
+})
+
+export { tooltipRecipe }

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/text-styles.ts

@@ -0,0 +1,34 @@
+import { defineTextStyles } from '@pandacss/dev'
+
+export const textStyles = defineTextStyles({
+  overline: { value: { fontSize: 'xs', lineHeight: 'xs' } },
+  body: {
+    sm: { value: { fontSize: 'sm', lineHeight: '2xl' } },
+    md: { value: { fontSize: 'md', lineHeight: '3xl' } }
+  },
+  label: {
+    sm: { value: { fontSize: 'sm', lineHeight: 'sm' } },
+    md: { value: { fontSize: 'md', lineHeight: 'lg' } }
+  },
+  h3: {
+    value: {
+      fontSize: 'lg',
+      lineHeight: 'xl',
+      fontWeight: 'semiBold !important'
+    }
+  },
+  h2: {
+    value: {
+      fontSize: 'xl',
+      lineHeight: 'md',
+      fontWeight: 'semiBold !important'
+    }
+  },
+  h1: {
+    value: {
+      fontSize: '2xl',
+      lineHeight: 'sm',
+      fontWeight: 'semiBold !important'
+    }
+  }
+})

package/src/tokens/borders.ts

@@ -0,0 +1,8 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const borders = defineTokens.borders({
+  none: { value: 'none' },
+  sm: { value: '1px' },
+  md: { value: '1.5px' },
+  lg: { value: '2px' }
+})

package/src/tokens/colors.ts

@@ -0,0 +1,154 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const colors = defineTokens.colors({
+  currentcolor: {
+    value: 'currentcolor',
+    description: 'Need to add this for Icon usage'
+  },
+  dark: { value: '#232933', description: 'Default or primary text color' },
+  white: {
+    value: '#FFFFFF',
+    description: 'Background color in components such as Card, Modal, and Popover'
+  },
+  background: { value: '#F1F5F9', description: 'For use as background page' },
+  overlay: {
+    value: 'rgba(22, 26, 32, 0.8)',
+    description: 'For use as overlay'
+  },
+  brand: {
+    capital: { value: '#2F5573', description: 'Mekari Capital' },
+    esign: { value: '#00C853', description: 'Mekari e-Sign' },
+    expense: { value: '#183883', description: 'Mekari Expense' },
+    flex: { value: '#7C4DFF', description: 'Mekari Flex' },
+    jurnal: { value: '#40C3FF', description: 'Mekari Jurnal' },
+    klikpajak: { value: '#FF9100', description: 'Mekari Klikpajak' },
+    mekari: { value: '#651FFF', description: 'Mekari' },
+    qontak: { value: '#2979FF', description: 'Mekari Qontak' },
+    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',
+      description: 'Background color in table header component'
+    },
+    50: {
+      value: '#EDF0F2',
+      description: 'Disabled background color in components such as Input and Select backgrounds'
+    },
+    100: { value: '#D0D6DD', description: 'Default stroke color or divider' },
+    400: {
+      value: '#8B95A5',
+      description:
+        'Disabled and placeholder text color, icon or in components such as hover state Input, Select and stroke in Popover'
+    },
+    600: {
+      value: '#626B79',
+      description: 'Description text color and default color for outline icon'
+    }
+  },
+  blue: {
+    50: { value: '#EAECFB' },
+    100: { value: '#D5DEFF' },
+    400: { value: '#4B61DD' },
+    500: { value: '#1C44D5' },
+    700: { value: '#0031BE' }
+  },
+  red: {
+    50: { value: '#FDECEE' },
+    400: { value: '#DA473F' },
+    500: { value: '#C83E39' },
+    700: { value: '#AB3129' }
+  },
+  green: {
+    50: { value: '#E8F5EB' },
+    400: { value: '#68BE79' },
+    500: { value: '#4FB262' },
+    700: { value: '#3C914D' }
+  },
+  orange: {
+    50: { value: '#FBF3DD' },
+    400: { value: '#E0AB00' },
+    500: { value: '#DE9400' },
+    700: { value: '#DB8000' }
+  },
+  sky: {
+    100: { value: '#60A5FA' },
+    400: { value: '#3B82F6' }
+  },
+  teal: {
+    100: { value: '#2DD4BF' },
+    400: { value: '#14B8A6' }
+  },
+  violet: {
+    100: { value: '#A78BFA' },
+    400: { value: '#8B5CF6' }
+  },
+  amber: {
+    100: { value: '#FBBF24' },
+    400: { value: '#F59E0B' }
+  },
+  rose: {
+    100: { value: '#F87171' },
+    400: { value: '#EF4444' }
+  },
+  stone: {
+    100: { value: '#A1A1AA' },
+    400: { value: '#71717A' }
+  },
+  lime: {
+    100: { value: '#A3E635' },
+    400: { value: '#84CC16' }
+  },
+  pink: {
+    100: { value: '#F472B6' },
+    400: { value: '#EC4899' }
+  },
+  apricot: {
+    100: { value: '#FB923C' },
+    400: { value: '#F97316' }
+  },
+  aqua: {
+    100: { value: '#22D3EE' },
+    400: { value: '#06B6D4' }
+  },
+  leaf: {
+    100: { value: '#4ADE80' },
+    400: { value: '#22C55E' }
+  },
+  fuchsia: {
+    100: { value: '#E879F9' },
+    400: { value: '#D946EF' }
+  },
+  ice: {
+    50: { value: '#E0EEFF' },
+    100: { value: '#B4D3F2' }
+  },
+  ash: {
+    100: { value: '#E7EDF5' }
+  }
+})

package/src/tokens/durations.ts

@@ -0,0 +1,7 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const durations = defineTokens.durations({
+  slow: { value: '100ms' },
+  normal: { value: '250ms' },
+  fast: { value: '300ms' }
+})

package/src/tokens/index.ts

@@ -0,0 +1,28 @@
+import { defineTokens } from '@pandacss/dev'
+import { borders } from './borders'
+import { colors } from './colors'
+import { durations } from './durations'
+import { opacity } from './opacity'
+import { radii } from './radii'
+import { shadows } from './shadows'
+import { sizes } from './sizes'
+import { spacing } from './spacing'
+import { zIndex } from './z-index'
+import { fonts, fontSizes, fontWeights, lineHeights, letterSpacings } from './typography'
+
+export const tokens = defineTokens({
+  borders,
+  colors,
+  durations,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+  opacity,
+  radii,
+  shadows,
+  sizes,
+  spacing,
+  zIndex
+})

package/src/tokens/opacity.ts

@@ -0,0 +1,8 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const opacity = defineTokens.opacity({
+  0: { value: 0 },
+  40: { value: 0.4 },
+  60: { value: 0.6 },
+  100: { value: 1 }
+})

package/src/tokens/radii.ts

@@ -0,0 +1,11 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const radii = defineTokens.radii({
+  none: { value: '0' },
+  xs: { value: '0.125rem', description: '2px' },
+  sm: { value: '0.25rem', description: '4px' },
+  md: { value: '0.375rem', description: '6px' },
+  lg: { value: '0.5rem', description: '8px' },
+  xl: { value: '0.75rem', description: '12px' },
+  full: { value: '50%' }
+})

package/src/tokens/shadows.ts

@@ -0,0 +1,40 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const shadows = defineTokens.shadows({
+  xs: {
+    value: ['0px 0px 2px 0px rgba(0, 0, 0, 0.12)', '0px 2px 4px 0px rgba(0, 0, 0, 0.14)']
+  },
+  sm: {
+    value: ['0px 4px 6px -2px rgba(0, 0, 0, 0.05)', '0px 10px 15px -3px rgba(0, 0, 0, 0.10)']
+  },
+  md: {
+    value: ['0px 10px 10px -5px rgba(0, 0, 0, 0.04)', '0px 20px 25px -5px rgba(0, 0, 0, 0.10)']
+  },
+  lg: {
+    value: ['0px 6px 16px 0px rgba(0, 0, 0, 0.08)', '0px 9px 28px 8px rgba(0, 0, 0, 0.05)']
+  },
+  focus: {
+    value: '0 0 0 3px rgba(224, 238, 255, 1)'
+  },
+  xl: {
+    value: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
+  },
+  '2xl': {
+    value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+  },
+  outline: {
+    value: '0 0 0 3px #E0EEFF'
+  },
+  'outline-tab': {
+    value: '0 0 0 2px #E0EEFF'
+  },
+  outer: {
+    value: '0 0 0 3px rgba(224, 238, 255, 1)'
+  },
+  inner: {
+    value: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)'
+  },
+  none: {
+    value: 'none'
+  }
+})

package/src/tokens/sizes.ts

@@ -0,0 +1,29 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const sizes = defineTokens.sizes({
+  0: { value: '0', description: '0px' },
+  0.25: { value: '0.0625rem', description: '1px' },
+  0.5: { value: '0.125rem', description: '2px' },
+  1: { value: '0.25rem', description: '4px' },
+  2: { value: '0.5rem', description: '8px' },
+  2.5: { value: '0.625rem', description: '10px' },
+  3: { value: '0.75rem', description: '12px' },
+  4: { value: '1rem', description: '16px' },
+  5: { value: '1.25rem', description: '20px' },
+  6: { value: '1.5rem', description: '24px' },
+  7: { value: '1.75rem', description: '28px' },
+  7.5: { value: '1.875rem', description: '30px' },
+  8: { value: '2rem', description: '32px' },
+  9: { value: '2.25rem', description: '36px' },
+  9.5: { value: '2.375rem', description: '38px' },
+  10: { value: '2.5rem', description: '40px' },
+  11: { value: '2.75rem', description: '44px' },
+  12: { value: '3rem', description: '48px' },
+  16: { value: '4rem', description: '64px' },
+  20: { value: '5rem', description: '80px' },
+  22: { value: '5.5rem', description: '96px' },
+  56: { value: '14rem', description: '224px' },
+  65: { value: '17.5rem', description: '280px' },
+  full: { value: '100%' },
+  sm: {value: '24rem'}
+})

package/src/tokens/spacing.ts

@@ -0,0 +1,21 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const spacing = defineTokens.spacing({
+  0: { value: '0', description: '0px' },
+  0.5: { value: '0.125rem', description: '2px' },
+  1: { value: '0.25rem', description: '4px' },
+  1.5: { value: '0.375rem', description: '6px' },
+  2: { value: '0.5rem', description: '8px' },
+  3: { value: '0.75rem', description: '12px' },
+  4: { value: '1rem', description: '16px' },
+  5: { value: '1.3rem', description: '20px' },
+  6: { value: '1.5rem', description: '24px' },
+  8: { value: '2rem', description: '32px' },
+  12: { value: '3rem', description: '48px' },
+  16: { value: '4rem', description: '64px' },
+  20: { value: '5rem', description: '80px' },
+  24: { value: '6rem', description: '96px' },
+  32: { value: '8rem', description: '128px' },
+  40: { value: '10rem', description: '160px' },
+  64: { value: '16rem', description: '256px' }
+})

package/src/tokens/typography.ts

@@ -0,0 +1,45 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const fonts = defineTokens.fonts({
+  body: {
+    value:
+      '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  },
+  mono: {
+    value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
+  }
+})
+
+export const fontSizes = defineTokens.fontSizes({
+  xs: { value: '0.625rem', description: '10px' },
+  sm: { value: '0.75rem', description: '12px' },
+  md: { value: '0.875rem', description: '14px' },
+  lg: { value: '1rem', description: '16px' },
+  xl: { value: '1.25rem', description: '20px' },
+  '2xl': { value: '1.5rem', description: '24px' }
+})
+
+export const fontWeights = defineTokens.fontWeights({
+  regular: { value: '400' },
+  semiBold: { value: '600' },
+  bold: { value: '800' }
+})
+
+export const lineHeights = defineTokens.lineHeights({
+  xs: { value: 1.2, description: '12px/10px' },
+  sm: { value: 1.34, description: '16px/12px or 32px/24px' },
+  md: { value: 1.4, description: '28px/20px' },
+  lg: { value: 1.429, description: '20px/14px' },
+  xl: { value: 1.5, description: '24px/16px' },
+  '2xl': { value: 1.67, description: '20px/12px' },
+  '3xl': { value: 1.71, description: '24px/14px' }
+})
+
+export const letterSpacings = defineTokens.letterSpacings({
+  tighter: { value: '-0.05em' },
+  tight: { value: '-0.025em' },
+  normal: { value: '0' },
+  wide: { value: '0.025em' },
+  wider: { value: '0.05em' },
+  widest: { value: '0.1em' }
+})

package/src/tokens/z-index.ts

@@ -0,0 +1,12 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const zIndex = defineTokens.zIndex({
+  hide: { value: -1 },
+  base: { value: 0 },
+  docked: { value: 10 },
+  sticky: { value: 1100 },
+  overlay: { value: 1300 },
+  modal: { value: 1400 },
+  popover: { value: 1500 },
+  tooltip: { value: 1800 }
+})