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

package/dist/conditions.d.mts

@@ -10,6 +10,7 @@ declare const conditions: {
         collapsed: string;
         loading: string;
         hasIcon: string;
+        hasLabel: string;
         active: string;
         highlight: string;
         hasBorder: string;

package/dist/conditions.d.ts

@@ -10,6 +10,7 @@ declare const conditions: {
         collapsed: string;
         loading: string;
         hasIcon: string;
+        hasLabel: string;
         active: string;
         highlight: string;
         hasBorder: string;

package/dist/index.js

@@ -48,6 +48,7 @@ var 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]",
@@ -396,6 +397,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     alignItems: "center",
     gap: "2",
     height: "fit-content",
+    width: "fit-content",
     borderWidth: "1px",
     whiteSpace: "nowrap",
     userSelect: "none",
@@ -511,8 +513,6 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     },
     size: {
       sm: {
-        paddingX: "2",
-        paddingY: "1",
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
@@ -520,12 +520,15 @@ var buttonRecipe = (0, import_dev5.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",
@@ -533,7 +536,12 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           borderRadius: "md"
         },
         _hasIcon: {
-          padding: "2 !important"
+          paddingX: "1.5",
+          paddingY: "1.5 !important"
+        },
+        _hasLabel: {
+          paddingX: "4 !important",
+          paddingY: "2"
         }
       }
     }
@@ -542,8 +550,6 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     {
       variant: ["textLink"],
       css: {
-        paddingX: "0",
-        paddingY: "0",
         borderRadius: "sm",
         _focusVisible: {
           borderColor: "white",
@@ -3097,30 +3103,27 @@ var borders = import_dev34.defineTokens.borders({
 var import_dev35 = require("@pandacss/dev");
 var colors = import_dev35.defineTokens.colors({
   currentcolor: {
-    value: "currentcolor",
-    description: "Need to add this for Icon usage"
+    value: "currentcolor"
   },
-  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"
+    value: "#FFFFFF"
   },
-  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"
+    value: "rgba(22, 26, 32, 0.8)"
   },
   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)" },
@@ -3148,21 +3151,17 @@ var colors = import_dev35.defineTokens.colors({
   },
   gray: {
     25: {
-      value: "#F8F9FB",
-      description: "Background color in table header component"
+      value: "#F8F9FB"
     },
     50: {
-      value: "#EDF0F2",
-      description: "Disabled background color in components such as Input and Select backgrounds"
+      value: "#EDF0F2"
     },
-    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"
+      value: "#8B95A5"
     },
     600: {
-      value: "#626B79",
-      description: "Description text color and default color for outline icon"
+      value: "#626B79"
     }
   },
   blue: {
@@ -3268,11 +3267,11 @@ var opacity = import_dev37.defineTokens.opacity({
 var import_dev38 = require("@pandacss/dev");
 var radii = import_dev38.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%" }
 });
 
@@ -3320,29 +3319,29 @@ var shadows = import_dev39.defineTokens.shadows({
 // src/tokens/sizes.ts
 var import_dev40 = require("@pandacss/dev");
 var sizes = import_dev40.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" }
 });
@@ -3350,23 +3349,23 @@ var sizes = import_dev40.defineTokens.sizes({
 // src/tokens/spacing.ts
 var import_dev41 = require("@pandacss/dev");
 var spacing = import_dev41.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" }
 });
 
 // src/tokens/z-index.ts
@@ -3393,12 +3392,12 @@ var fonts = import_dev43.defineTokens.fonts({
   }
 });
 var fontSizes = import_dev43.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" }
 });
 var fontWeights = import_dev43.defineTokens.fontWeights({
   regular: { value: "400" },
@@ -3406,13 +3405,13 @@ var fontWeights = import_dev43.defineTokens.fontWeights({
   bold: { value: "800" }
 });
 var lineHeights = import_dev43.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 }
 });
 var letterSpacings = import_dev43.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },

package/dist/index.mjs

@@ -22,6 +22,7 @@ var 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]",
@@ -370,6 +371,7 @@ var buttonRecipe = defineRecipe({
     alignItems: "center",
     gap: "2",
     height: "fit-content",
+    width: "fit-content",
     borderWidth: "1px",
     whiteSpace: "nowrap",
     userSelect: "none",
@@ -485,8 +487,6 @@ var buttonRecipe = defineRecipe({
     },
     size: {
       sm: {
-        paddingX: "2",
-        paddingY: "1",
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
@@ -494,12 +494,15 @@ var 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",
@@ -507,7 +510,12 @@ var buttonRecipe = defineRecipe({
           borderRadius: "md"
         },
         _hasIcon: {
-          padding: "2 !important"
+          paddingX: "1.5",
+          paddingY: "1.5 !important"
+        },
+        _hasLabel: {
+          paddingX: "4 !important",
+          paddingY: "2"
         }
       }
     }
@@ -516,8 +524,6 @@ var buttonRecipe = defineRecipe({
     {
       variant: ["textLink"],
       css: {
-        paddingX: "0",
-        paddingY: "0",
         borderRadius: "sm",
         _focusVisible: {
           borderColor: "white",
@@ -3071,30 +3077,27 @@ var borders = defineTokens.borders({
 import { defineTokens as defineTokens2 } from "@pandacss/dev";
 var colors = defineTokens2.colors({
   currentcolor: {
-    value: "currentcolor",
-    description: "Need to add this for Icon usage"
+    value: "currentcolor"
   },
-  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"
+    value: "#FFFFFF"
   },
-  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"
+    value: "rgba(22, 26, 32, 0.8)"
   },
   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)" },
@@ -3122,21 +3125,17 @@ var colors = defineTokens2.colors({
   },
   gray: {
     25: {
-      value: "#F8F9FB",
-      description: "Background color in table header component"
+      value: "#F8F9FB"
     },
     50: {
-      value: "#EDF0F2",
-      description: "Disabled background color in components such as Input and Select backgrounds"
+      value: "#EDF0F2"
     },
-    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"
+      value: "#8B95A5"
     },
     600: {
-      value: "#626B79",
-      description: "Description text color and default color for outline icon"
+      value: "#626B79"
     }
   },
   blue: {
@@ -3242,11 +3241,11 @@ var opacity = defineTokens4.opacity({
 import { defineTokens as defineTokens5 } from "@pandacss/dev";
 var radii = defineTokens5.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%" }
 });
 
@@ -3294,29 +3293,29 @@ var shadows = defineTokens6.shadows({
 // src/tokens/sizes.ts
 import { defineTokens as defineTokens7 } from "@pandacss/dev";
 var sizes = defineTokens7.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" }
 });
@@ -3324,23 +3323,23 @@ var sizes = defineTokens7.sizes({
 // src/tokens/spacing.ts
 import { defineTokens as defineTokens8 } from "@pandacss/dev";
 var spacing = defineTokens8.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" }
 });
 
 // src/tokens/z-index.ts
@@ -3367,12 +3366,12 @@ var fonts = defineTokens10.fonts({
   }
 });
 var fontSizes = defineTokens10.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" }
 });
 var fontWeights = defineTokens10.fontWeights({
   regular: { value: "400" },
@@ -3380,13 +3379,13 @@ var fontWeights = defineTokens10.fontWeights({
   bold: { value: "800" }
 });
 var lineHeights = defineTokens10.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 }
 });
 var letterSpacings = defineTokens10.letterSpacings({
   tighter: { value: "-0.05em" },