@bitrise/bitkit-v2 0.3.105 → 0.3.107

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts

@@ -13,8 +13,9 @@ type ControlledProps = {
 export type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {
     children: ReactNode;
     icon?: ReactElement;
+    secdText?: ReactNode;
     size: 'md' | 'lg';
-    suffix?: string;
+    suffix?: ReactNode;
     title: ReactNode;
 } & (UncontrolledProps | ControlledProps);
 declare const BitkitExpandableCard: {

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js

@@ -1,27 +1,30 @@
 import { jsx as n, jsxs as o } from "react/jsx-runtime";
 import { Box as r } from "@chakra-ui/react/box";
-import { Card as g } from "@chakra-ui/react/card";
+import { Card as y } from "@chakra-ui/react/card";
 import { Collapsible as i } from "@chakra-ui/react/collapsible";
-import { useSlotRecipe as u } from "@chakra-ui/react/styled-system";
-import { Text as b } from "@chakra-ui/react/text";
-import y from "../../icons/24x24/IconChevronDown24.js";
-const k = (c) => {
-  const { children: a, defaultExpanded: d, expanded: p, icon: s, onChange: t, size: m = "lg", suffix: l, title: f, ...h } = c, e = u({ key: "expandableCard" })({ size: m }), x = t ? (C) => t(C.open) : void 0;
-  return /* @__PURE__ */ n(g.Root, { css: e.root, children: /* @__PURE__ */ o(i.Root, { defaultOpen: d, open: p, onOpenChange: x, ...h, children: [
+import { useSlotRecipe as b } from "@chakra-ui/react/styled-system";
+import { Text as d } from "@chakra-ui/react/text";
+import I from "../../icons/24x24/IconChevronDown24.js";
+const T = (a) => {
+  const { children: p, defaultExpanded: f, expanded: m, icon: s, onChange: t, secdText: l, size: x = "lg", suffix: c, title: h, ...g } = a, e = b({ key: "expandableCard" })({ size: x }), C = t ? (u) => t(u.open) : void 0;
+  return /* @__PURE__ */ n(y.Root, { css: e.root, children: /* @__PURE__ */ o(i.Root, { defaultOpen: f, open: m, onOpenChange: C, ...g, children: [
     /* @__PURE__ */ o(i.Trigger, { css: e.header, children: [
       /* @__PURE__ */ o(r, { display: "flex", alignItems: "center", gap: "8", children: [
         s && /* @__PURE__ */ n(r, { css: e.icon, children: s }),
-        f
+        /* @__PURE__ */ o(r, { display: "flex", alignItems: "flex-start", flexDirection: "column", children: [
+          h,
+          !!l && /* @__PURE__ */ n(d, { css: e.secdText, children: l })
+        ] })
       ] }),
       /* @__PURE__ */ o(r, { display: "flex", alignItems: "center", children: [
-        !!l && /* @__PURE__ */ n(b, { css: e.suffix, children: l }),
-        /* @__PURE__ */ n(y, { css: e.chevron })
+        !!c && /* @__PURE__ */ n(d, { css: e.suffix, children: c }),
+        /* @__PURE__ */ n(I, { css: e.chevron })
       ] })
     ] }),
-    /* @__PURE__ */ n(i.Content, { css: e.collapsible, children: /* @__PURE__ */ n(r, { css: e.body, children: a }) })
+    /* @__PURE__ */ n(i.Content, { css: e.collapsible, children: /* @__PURE__ */ n(r, { css: e.body, children: p }) })
   ] }) });
 };
-k.displayName = "BitkitExpandableCard";
+T.displayName = "BitkitExpandableCard";
 export {
-  k as default
+  T as default
 };

package/dist/theme/recipes/ColorButton.recipe.js

@@ -1,5 +1,5 @@
 import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const o = e({
+const t = e({
   className: "color-button",
   base: {
     colorPalette: "neutral",
@@ -24,10 +24,25 @@ const o = e({
       lg: { height: "48", paddingInline: "16", textStyle: "comp/button/lg" }
     }
   },
+  compoundVariants: [
+    {
+      colorPalette: "white",
+      css: {
+        color: "text.on-color",
+        borderColor: "border.inverse",
+        "&:hover": {
+          backgroundColor: "white.a15"
+        },
+        "&:active": {
+          backgroundColor: "white.a30"
+        }
+      }
+    }
+  ],
   defaultVariants: {
     size: "sm"
   }
 });
 export {
-  o as default
+  t as default
 };

package/dist/theme/semantic-tokens/semanticColors.js

@@ -505,6 +505,53 @@ const r = l.colors(
             _light: "{colors.turquoise.95}"
           }
         }
+      },
+      white: {
+        a00: {
+          value: {
+            _light: "rgba(255, 255, 255, 0)"
+          }
+        },
+        a10: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.1)"
+          }
+        },
+        a15: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.15)"
+          }
+        },
+        a20: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.2)"
+          }
+        },
+        a30: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.3)"
+          }
+        },
+        a50: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.5)"
+          }
+        },
+        a80: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.8)"
+          }
+        },
+        a90: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.9)"
+          }
+        },
+        a100: {
+          value: {
+            _light: "rgb(255, 255, 255)"
+          }
+        }
       }
     },
     background: {

package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "suffix" | "chevron", {
+declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix" | "chevron", {
     size: {
         md: {
             header: {
@@ -6,12 +6,18 @@ declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDef
                 paddingX: "16";
                 paddingY: "12";
             };
+            secdText: {
+                textStyle: "body/sm/regular";
+            };
         };
         lg: {
             header: {
                 textStyle: "body/lg/regular";
                 padding: "16";
             };
+            secdText: {
+                textStyle: "body/md/regular";
+            };
         };
     };
 }>;

package/dist/theme/slot-recipes/ExpandableCard.recipe.js

@@ -2,7 +2,7 @@ import { cardAnatomy as e } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
 const t = o({
   className: "expandable-card",
-  slots: [...e.keys(), "chevron", "collapsible", "icon", "suffix"],
+  slots: [...e.keys(), "chevron", "collapsible", "icon", "secdText", "suffix"],
   base: {
     root: {
       backgroundColor: "background/primary",
@@ -19,6 +19,9 @@ const t = o({
       },
       "&:hover:not(:active)": {
         backgroundColor: "background/hover"
+      },
+      _open: {
+        backgroundColor: "background/secondary"
       }
     },
     collapsible: {
@@ -46,6 +49,9 @@ const t = o({
     icon: {
       color: "icon/secondary"
     },
+    secdText: {
+      color: "text/secondary"
+    },
     suffix: {
       color: "text/secondary",
       mx: "16",
@@ -55,10 +61,12 @@ const t = o({
   variants: {
     size: {
       md: {
-        header: { textStyle: "body/md/regular", paddingX: "16", paddingY: "12" }
+        header: { textStyle: "body/md/regular", paddingX: "16", paddingY: "12" },
+        secdText: { textStyle: "body/sm/regular" }
       },
       lg: {
-        header: { textStyle: "body/lg/regular", padding: "16" }
+        header: { textStyle: "body/lg/regular", padding: "16" },
+        secdText: { textStyle: "body/md/regular" }
       }
     }
   },

package/dist/theme/slot-recipes/index.d.ts

@@ -72,7 +72,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "suffix" | "chevron", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix" | "chevron", {
         size: {
             md: {
                 header: {
@@ -80,12 +80,18 @@ declare const slotRecipes: {
                     paddingX: "16";
                     paddingY: "12";
                 };
+                secdText: {
+                    textStyle: "body/sm/regular";
+                };
             };
             lg: {
                 header: {
                     textStyle: "body/lg/regular";
                     padding: "16";
                 };
+                secdText: {
+                    textStyle: "body/md/regular";
+                };
             };
         };
     }>;

package/dist/theme/tokens/colors.d.ts

@@ -1,12 +1,30 @@
 export declare const COLOR_PALETTES: {
     white: {
-        strong: {
+        a00: {
             value: string;
         };
-        subtle: {
+        a10: {
             value: string;
         };
-        moderate: {
+        a15: {
+            value: string;
+        };
+        a20: {
+            value: string;
+        };
+        a30: {
+            value: string;
+        };
+        a50: {
+            value: string;
+        };
+        a80: {
+            value: string;
+        };
+        a90: {
+            value: string;
+        };
+        a100: {
             value: string;
         };
     };
@@ -572,13 +590,31 @@ declare const colors: {
         };
     };
     white: {
-        strong: {
+        a00: {
             value: string;
         };
-        subtle: {
+        a10: {
             value: string;
         };
-        moderate: {
+        a15: {
+            value: string;
+        };
+        a20: {
+            value: string;
+        };
+        a30: {
+            value: string;
+        };
+        a50: {
+            value: string;
+        };
+        a80: {
+            value: string;
+        };
+        a90: {
+            value: string;
+        };
+        a100: {
             value: string;
         };
     };

package/dist/theme/tokens/colors.js

@@ -1,14 +1,32 @@
 import { defineTokens as e } from "@chakra-ui/react/styled-system";
 const l = {
   white: {
-    strong: {
-      value: "{colors.sys.fg.on-color}"
+    a00: {
+      value: "{colors.sys.white.a00}"
     },
-    subtle: {
-      value: "{colors.sys.fg.on-color/15}"
+    a10: {
+      value: "{colors.sys.white.a10}"
     },
-    moderate: {
-      value: "{colors.sys.fg.on-color/30}"
+    a15: {
+      value: "{colors.sys.white.a15}"
+    },
+    a20: {
+      value: "{colors.sys.white.a20}"
+    },
+    a30: {
+      value: "{colors.sys.white.a30}"
+    },
+    a50: {
+      value: "{colors.sys.white.a50}"
+    },
+    a80: {
+      value: "{colors.sys.white.a80}"
+    },
+    a90: {
+      value: "{colors.sys.white.a90}"
+    },
+    a100: {
+      value: "{colors.sys.white.a100}"
     }
   },
   neutral: {

package/dist/theme/tokens/index.d.ts

@@ -123,13 +123,31 @@ declare const tokens: {
             };
         };
         white: {
-            strong: {
+            a00: {
                 value: string;
             };
-            subtle: {
+            a10: {
                 value: string;
             };
-            moderate: {
+            a15: {
+                value: string;
+            };
+            a20: {
+                value: string;
+            };
+            a30: {
+                value: string;
+            };
+            a50: {
+                value: string;
+            };
+            a80: {
+                value: string;
+            };
+            a90: {
+                value: string;
+            };
+            a100: {
                 value: string;
             };
         };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.105",
+  "version": "0.3.107",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",