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

package/src/recipes/tag.ts

@@ -0,0 +1,98 @@
+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',
+      background: 'linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)!',
+      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: '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 }

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/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,130 @@
+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' }
+  },
+  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,28 @@
+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%' }
+})

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' }
+})