@mekari/pixel3-theme 0.2.1-dev.0 → 0.2.2-dev.0

package/src/semanticTokens/index.ts

@@ -0,0 +1,8 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+import { colors } from './colors'
+import { spacing } from './spacing'
+
+export const semanticTokens = defineSemanticTokens({
+  colors,
+  spacing
+})

package/src/semanticTokens/spacing.ts

@@ -0,0 +1,59 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const spacing = defineSemanticTokens.spacing({
+  '4xs': {
+    value : {
+      base: '0.125rem'
+    }
+  },
+  '3xs': {
+    value : {
+      base: '{spacing.1}'
+    }
+  },
+  '2xs': {
+    value : {
+      base: '0.375rem'
+    }
+  },
+  xs: {
+    value : {
+      base: '{spacing.2}'
+    }
+  },
+  sm: {
+    value : {
+      base: '{spacing.3}'
+    }
+  },
+  md: {
+    value : {
+      base: '{spacing.4}'
+    }
+  },
+  lg: {
+    value : {
+      base: '{spacing.5}'
+    }
+  },
+  xl: {
+    value : {
+      base: '{spacing.6}'
+    }
+  },
+  '2xl': {
+    value : {
+      base: '{spacing.8}'
+    }
+  },
+  '3xl': {
+    value : {
+      base: '{spacing.10}'
+    }
+  },
+  '4xl': {
+    value : {
+      base: '{spacing.20}'
+    }
+  }
+})

package/src/tokens/borders.ts

@@ -1,6 +1,6 @@
 import { defineTokens } from '@pandacss/dev'
 
-export const borders = defineTokens.borders({
+export const borderWidths = defineTokens.borderWidths({
   none: { value: 'none' },
   sm: { value: '1px' },
   md: { value: '1.5px' },

package/src/tokens/colors.ts

@@ -1,29 +1,12 @@
 import { defineTokens } from '@pandacss/dev'
 
 export const colors = defineTokens.colors({
-  currentcolor: {
-    value: 'currentcolor'
-  },
+  debug: { value: 'blue' },
+  currentcolor: { value: 'currentcolor' },
   dark: { value: '#232933' },
-  white: {
-    value: '#FFFFFF'
-  },
   background: { value: '#F1F5F9' },
-  overlay: {
-    value: 'rgba(22, 26, 32, 0.8)'
-  },
-  brand: {
-    capital: { value: '#2F5573' },
-    esign: { value: '#00C853' },
-    expense: { value: '#183883' },
-    flex: { value: '#7C4DFF' },
-    jurnal: { value: '#40C3FF' },
-    klikpajak: { value: '#FF9100' },
-    mekari: { value: '#651FFF' },
-    qontak: { value: '#2979FF' },
-    talenta: { value: '#F22929' },
-    university: { value: '#448AFF' }
-  },
+  overlay: { value: 'rgba(22, 26, 32, 0.8)' },
+  white: { value: '#FFFFFF' },
   whiteAlpha: {
     50: { value: 'rgba(255, 255, 255, 0.04)' },
     100: { value: 'rgba(255, 255, 255, 0.06)' },
@@ -142,5 +125,17 @@ export const colors = defineTokens.colors({
   },
   ash: {
     100: { value: '#E7EDF5' }
-  }
-})
+  },
+  brand: {
+    capital: { value: '#2F5573' },
+    esign: { value: '#00C853' },
+    expense: { value: '#183883' },
+    flex: { value: '#7C4DFF' },
+    jurnal: { value: '#40C3FF' },
+    klikpajak: { value: '#FF9100' },
+    mekari: { value: '#651FFF' },
+    qontak: { value: '#2979FF' },
+    talenta: { value: '#F22929' },
+    university: { value: '#448AFF' }
+  },
+})

package/src/tokens/index.ts

@@ -1,5 +1,5 @@
 import { defineTokens } from '@pandacss/dev'
-import { borders } from './borders'
+import { borderWidths } from './borders'
 import { colors } from './colors'
 import { durations } from './durations'
 import { opacity } from './opacity'
@@ -11,7 +11,7 @@ import { zIndex } from './z-index'
 import { fonts, fontSizes, fontWeights, lineHeights, letterSpacings } from './typography'
 
 export const tokens = defineTokens({
-  borders,
+  borderWidths,
   colors,
   durations,
   fonts,

package/src/tokens/radii.ts

@@ -2,10 +2,10 @@ import { defineTokens } from '@pandacss/dev'
 
 export const radii = defineTokens.radii({
   none: { value: '0' },
-  xs: { value: '0.125rem' },
-  sm: { value: '0.25rem' },
-  md: { value: '0.375rem' },
-  lg: { value: '0.5rem' },
-  xl: { value: '0.75rem' },
+  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/spacing.ts

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

package/src/tokens-next/borders.ts

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

package/src/tokens-next/colors.ts

@@ -0,0 +1,171 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const colors = defineTokens.colors({
+  debug: { value: 'red' },
+  currentcolor: { value: 'currentcolor' },
+  white: { value: '#FFFFFF' },
+  dark: {
+    '-100': {
+      value: '#101214'
+    },
+    DEFAULT: {
+      value: '#161A1D'
+    },
+    100: { value: '#1D2125' },
+    200: { value: '#22272B' },
+    250: { value: '#282E33' },
+    300: { value: '#2C333A' },
+    350: { value: '#38414A' },
+    400: { value: '#454F59' },
+    500: { value: '#596773' },
+    600: { value: '#738496' },
+    700: { value: '#8C9BAB' },
+    800: { value: '#9FADBC' },
+    900: { value: '#B6C2CF' },
+    1000: { value: '#C7D1DB' }
+  },
+  neutral: {
+    100: { value: '#F7F8F9' },
+    200: { value: '#F0F1F3' },
+    300: { value: '#DCDFE4' },
+    400: { value: '#B2B9C4' },
+    500: { value: '#8690A2' },
+    600: { value: '#758195' },
+    700: { value: '#656F80' },
+    800: { value: '#4C5460' },
+    900: { value: '#383E48' },
+    1000: { value: '#272B32' }
+  },
+  blue: {
+    100: { value: '#ECF3FE' },
+    200: { value: '#CEE0FD' },
+    300: { value: '#8EB7FA' },
+    400: { value: '#649CF8' },
+    500: { value: '#488BF7' },
+    600: { value: '#387CEB' },
+    700: { value: '#306AC8' },
+    800: { value: '#295AAA' },
+    900: { value: '#173361' },
+    1000: { value: '#132A4F' }
+  },
+  indigo: {
+    100: { value: '#EEF0FC' },
+    200: { value: '#D6DBF7' },
+    300: { value: '#A8B2EF' },
+    400: { value: '#8997E9' },
+    500: { value: '#7586E5' },
+    600: { value: '#6577E2' },
+    700: { value: '#4B61DC' },
+    800: { value: '#4053BC' },
+    900: { value: '#242F6A' },
+    1000: { value: '#1D2656' }
+  },
+  violet: {
+    100: { value: '#F3F1FC' },
+    200: { value: '#DEDAF6' },
+    300: { value: '#B8AEEB' },
+    400: { value: '#9F91E3' },
+    500: { value: '#8F7FDF' },
+    600: { value: '#8270DB' },
+    700: { value: '#6F5FBA' },
+    800: { value: '#5F519F' },
+    900: { value: '#352E5A' },
+    1000: { value: '#2B2549' }
+  },
+  fuchsia: {
+    100: { value: '#FBEEFE' },
+    200: { value: '#F6D1FB' },
+    300: { value: '#EA98F6' },
+    400: { value: '#E16CF2' },
+    500: { value: '#DA4DF0' },
+    600: { value: '#C841DC' },
+    700: { value: '#AC37BD' },
+    800: { value: '#932FA2' },
+    900: { value: '#531B5C' },
+    1000: { value: '#45164C' }
+  },
+  red: {
+    100: { value: '#FCEEED' },
+    200: { value: '#F9D7D5' },
+    300: { value: '#F09E99' },
+    400: { value: '#EA7A72' },
+    500: { value: '#E6645B' },
+    600: { value: '#E2483D' },
+    700: { value: '#C33E35' },
+    800: { value: '#A8352D' },
+    900: { value: '#5E1E19' },
+    1000: { value: '#4E1915' }
+  },
+  orange: {
+    100: { value: '#FDF3EC' },
+    200: { value: '#F9DECB' },
+    300: { value: '#F5C39F' },
+    400: { value: '#F0A875' },
+    500: { value: '#EB8E4B' },
+    600: { value: '#E46910' },
+    700: { value: '#BC560D' },
+    800: { value: '#A14A0B' },
+    900: { value: '#6B3108' },
+    1000: { value: '#492105' }
+  },
+  yellow: {
+    100: { value: '#FDF6DD' },
+    200: { value: '#F9E399' },
+    300: { value: '#F5CD47' },
+    400: { value: '#D8B53F' },
+    500: { value: '#C2A338' },
+    600: { value: '#A68A30' },
+    700: { value: '#897228' },
+    800: { value: '#766222' },
+    900: { value: '#4D4016' },
+    1000: { value: '#362D10' }
+  },
+  lime: {
+    100: { value: '#F4FAEA' },
+    200: { value: '#D8EFB5' },
+    300: { value: '#B1DF6B' },
+    400: { value: '#83CA16' },
+    500: { value: '#77B814' },
+    600: { value: '#649B11' },
+    700: { value: '#53800E' },
+    800: { value: '#466C0C' },
+    900: { value: '#304A08' },
+    1000: { value: '#213306' }
+  },
+  green: {
+    100: { value: '#F2F9F6' },
+    200: { value: '#D2EBE1' },
+    300: { value: '#A7D9C4' },
+    400: { value: '#7DC7A8' },
+    500: { value: '#56B78E' },
+    600: { value: '#23A06B' },
+    700: { value: '#1C8459' },
+    800: { value: '#186F4A' },
+    900: { value: '#104B32' },
+    1000: { value: '#0B3524' }
+  },
+  teal: {
+    100: { value: '#F2F9F6' },
+    200: { value: '#C4EDE9' },
+    300: { value: '#92DED6' },
+    400: { value: '#4FCABC' },
+    500: { value: '#19B9A8' },
+    600: { value: '#119E8F' },
+    700: { value: '#0E8275' },
+    800: { value: '#0C6E63' },
+    900: { value: '#084841' },
+    1000: { value: '#06342F' }
+  },
+  brand: {
+    capital: { value: '#2F5573' },
+    esign: { value: '#00C853' },
+    expense: { value: '#183883' },
+    flex: { value: '#7C4DFF' },
+    jurnal: { value: '#40C3FF' },
+    klikpajak: { value: '#FF9100' },
+    mekari: { value: '#651FFF' },
+    qontak: { value: '#2979FF' },
+    talenta: { value: '#F22929' },
+    university: { value: '#448AFF' }
+  }
+})

package/src/tokens-next/index.ts

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

package/src/tokens-next/radii.ts

@@ -0,0 +1,10 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const radii = defineTokens.radii({
+  none: { value: '0' },
+  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: '999px' }
+})

package/src/tokens-next/shadows.ts

@@ -0,0 +1,28 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const shadows = defineTokens.shadows({
+  xs: {
+    value: ['0px 2px 4px 0px {colors.background.shadow}', '0px 0px 2px 0px {colors.background.shadow}']
+  },
+  sm: {
+    value: ['0px 10px 15px -3px {colors.background.shadow}', '0px 4px 6px -2px {colors.background.shadow}']
+  },
+  md: {
+    value: ['0px 20px 25px -5px {colors.background.shadow}', '0px 10px 10px -5px {colors.background.shadow}']
+  },
+  lg: {
+    value: ['0px 25px 30px -10px {colors.background.shadow}', '0px 15px 15px -10px {colors.background.shadow}']
+  },
+  focus: {
+    value: '0 0 0 1px {colors.border.focused}'
+  },
+  outline: {
+    value: '0 0 0 3px #E0EEFF'
+  },
+  outer: {
+    value: '0 0 0 3px rgba(224, 238, 255, 1)'
+  },
+  none: {
+    value: 'none'
+  }
+})

package/src/tokens-next/spacing.ts

@@ -0,0 +1,16 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const spacing = defineTokens.spacing({
+  0: { value: '0' },
+  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' },
+  10: { value: '2.5rem', description: '40px' },
+  20: { value: '5rem', description: '80px' }
+})