@mekari/pixel3-theme 0.0.6-dev.0 → 0.0.6-dev.2

package/dist/tokens/typography.d.mts

@@ -9,27 +9,21 @@ declare const fonts: {
 declare const fontSizes: {
     xs: {
         value: string;
-        description: string;
     };
     sm: {
         value: string;
-        description: string;
     };
     md: {
         value: string;
-        description: string;
     };
     lg: {
         value: string;
-        description: string;
     };
     xl: {
         value: string;
-        description: string;
     };
     '2xl': {
         value: string;
-        description: string;
     };
 };
 declare const fontWeights: {
@@ -46,31 +40,24 @@ declare const fontWeights: {
 declare const lineHeights: {
     xs: {
         value: number;
-        description: string;
     };
     sm: {
         value: number;
-        description: string;
     };
     md: {
         value: number;
-        description: string;
     };
     lg: {
         value: number;
-        description: string;
     };
     xl: {
         value: number;
-        description: string;
     };
     '2xl': {
         value: number;
-        description: string;
     };
     '3xl': {
         value: number;
-        description: string;
     };
 };
 declare const letterSpacings: {

package/dist/tokens/typography.d.ts

@@ -9,27 +9,21 @@ declare const fonts: {
 declare const fontSizes: {
     xs: {
         value: string;
-        description: string;
     };
     sm: {
         value: string;
-        description: string;
     };
     md: {
         value: string;
-        description: string;
     };
     lg: {
         value: string;
-        description: string;
     };
     xl: {
         value: string;
-        description: string;
     };
     '2xl': {
         value: string;
-        description: string;
     };
 };
 declare const fontWeights: {
@@ -46,31 +40,24 @@ declare const fontWeights: {
 declare const lineHeights: {
     xs: {
         value: number;
-        description: string;
     };
     sm: {
         value: number;
-        description: string;
     };
     md: {
         value: number;
-        description: string;
     };
     lg: {
         value: number;
-        description: string;
     };
     xl: {
         value: number;
-        description: string;
     };
     '2xl': {
         value: number;
-        description: string;
     };
     '3xl': {
         value: number;
-        description: string;
     };
 };
 declare const letterSpacings: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.0.6-dev.0",
+  "version": "0.0.6-dev.2",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -9,13 +9,13 @@
     "src"
   ],
   "dependencies": {
-    "@pandacss/dev": "^0.24.1"
+    "@pandacss/dev": "^0.29.1"
   },
   "peerDependencies": {
     "vue": "^3.4.9"
   },
   "devDependencies": {
-    "@pandacss/types": "^0.24.1",
+    "@pandacss/types": "^0.29.1",
     "vue": "^3.4.9"
   },
   "publishConfig": {

package/src/conditions.ts

@@ -11,6 +11,7 @@ export const conditions = {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: '& > [data-loading=true], &:is([data-loading], [aria-busy=true])',
     hasIcon: '&[data-has-icon=true]',
+    hasLabel: '&[data-has-label=true]',
     active: '&[data-active=true], [data-active]',
     highlight: '&[data-highlight=true], [data-highlight]',
     hasBorder: '&[data-has-border=true]',

package/src/recipes/button.ts

@@ -10,6 +10,7 @@ const buttonRecipe = defineRecipe({
     alignItems: 'center',
     gap: '2',
     height: 'fit-content',
+    width: 'fit-content',
     borderWidth: '1px',
     whiteSpace: 'nowrap',
     userSelect: 'none',
@@ -125,8 +126,6 @@ const buttonRecipe = defineRecipe({
     },
     size: {
       sm: {
-        paddingX: '2',
-        paddingY: '1',
         borderRadius: 'sm',
         textStyle: 'label.md',
         fontWeight: 'regular',
@@ -134,12 +133,15 @@ const buttonRecipe = defineRecipe({
           borderRadius: 'sm'
         },
         _hasIcon: {
-          padding: '1 !important'
+          paddingX: '1',
+          paddingY: '1 !important'
+        },
+        _hasLabel: {
+          paddingX: '2 !important',
+          paddingY: '1',
         }
       },
       md: {
-        paddingX: '4',
-        paddingY: '2',
         borderRadius: 'md',
         textStyle: 'label.md',
         fontWeight: 'semiBold',
@@ -147,7 +149,12 @@ const buttonRecipe = defineRecipe({
           borderRadius: 'md'
         },
         _hasIcon: {
-          padding: '2 !important'
+          paddingX: '1.5',
+          paddingY: '1.5 !important'
+        },
+        _hasLabel: {
+          paddingX: '4 !important',
+          paddingY: '2',
         }
       }
     }
@@ -156,8 +163,6 @@ const buttonRecipe = defineRecipe({
     {
       variant: ['textLink'],
       css: {
-        paddingX: '0',
-        paddingY: '0',
         borderRadius: 'sm',
         _focusVisible: {
           borderColor: 'white',

package/src/tokens/colors.ts

@@ -3,29 +3,27 @@ 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' },
+  dark: { value: '#232933'},
   white: {
     value: '#FFFFFF',
-    description: 'Background color in components such as Card, Modal, and Popover'
+    
   },
-  background: { value: '#F1F5F9', description: 'For use as background page' },
+  background: { value: '#F1F5F9' },
   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' }
+    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',  }
   },
   whiteAlpha: {
     50: { value: 'rgba(255, 255, 255, 0.04)' },
@@ -54,21 +52,17 @@ export const colors = defineTokens.colors({
   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' },
+    100: { value: '#D0D6DD',  },
     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: {

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', 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' },
+  xs: { value: '0.125rem' },
+  sm: { value: '0.25rem' },
+  md: { value: '0.375rem' },
+  lg: { value: '0.5rem' },
+  xl: { value: '0.75rem' },
   full: { value: '50%' }
 })

package/src/tokens/sizes.ts

@@ -1,29 +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' },
+  0: { value: '0' },
+  0.25: { value: '0.0625rem' },
+  0.5: { value: '0.125rem' },
+  1: { value: '0.25rem' },
+  2: { value: '0.5rem' },
+  2.5: { value: '0.625rem' },
+  3: { value: '0.75rem' },
+  4: { value: '1rem' },
+  5: { value: '1.25rem' },
+  6: { value: '1.5rem' },
+  7: { value: '1.75rem' },
+  7.5: { value: '1.875rem' },
+  8: { value: '2rem' },
+  9: { value: '2.25rem' },
+  9.5: { value: '2.375rem' },
+  10: { value: '2.5rem' },
+  11: { value: '2.75rem' },
+  12: { value: '3rem' },
+  16: { value: '4rem' },
+  20: { value: '5rem' },
+  22: { value: '5.5rem' },
+  56: { value: '14rem' },
+  65: { value: '17.5rem' },
   full: { value: '100%' },
-  sm: {value: '24rem'}
+  sm: { value: '24rem' }
 })

package/src/tokens/spacing.ts

@@ -1,21 +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' }
+  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' }
 })

package/src/tokens/typography.ts

@@ -11,12 +11,12 @@ export const fonts = defineTokens.fonts({
 })
 
 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' }
+  xs: { value: '0.625rem' },
+  sm: { value: '0.75rem' },
+  md: { value: '0.875rem' },
+  lg: { value: '1rem' },
+  xl: { value: '1.25rem' },
+  '2xl': { value: '1.5rem' }
 })
 
 export const fontWeights = defineTokens.fontWeights({
@@ -26,13 +26,13 @@ export const fontWeights = defineTokens.fontWeights({
 })
 
 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' }
+  xs: { value: 1.2 },
+  sm: { value: 1.34 },
+  md: { value: 1.4 },
+  lg: { value: 1.429 },
+  xl: { value: 1.5 },
+  '2xl': { value: 1.67 },
+  '3xl': { value: 1.71 }
 })
 
 export const letterSpacings = defineTokens.letterSpacings({