@cerebruminc/cerebellum 17.3.2 → 17.3.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # react-component-lib-boilerplate
 
+## [17.3.3](https://github.com/cerebruminc/cerebellum/compare/v17.3.2...v17.3.3) (2026-06-17)
+
+
+### Bug Fixes
+
+* **button:** add secondaryText color property and hover text transitions ([22f165d](https://github.com/cerebruminc/cerebellum/commit/22f165d001263d93dccf583036c9ff4f07b37c83))
+* **button:** sync Mantine theme button colors with accessible values ([b18f1eb](https://github.com/cerebruminc/cerebellum/commit/b18f1eb12f18eba7011d7b14c12fd110afe0083f))
+* **button:** update color families for WCAG AA compliance ([75f6b2f](https://github.com/cerebruminc/cerebellum/commit/75f6b2fc044c50c536710339ae9472780f5924d8))
+* **toggle-button:** update test to work with new colors ([e60fe71](https://github.com/cerebruminc/cerebellum/commit/e60fe71f0ce2ba94e2937c2200b38eb13a81523d))
+
 ## [17.3.2](https://github.com/cerebruminc/cerebellum/compare/v17.3.1...v17.3.2) (2026-06-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.2",
+  "version": "17.3.3",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/components/Button/Button.tsx

@@ -89,7 +89,13 @@ export const Button: FC<ButtonType> = (props: ButtonType) => {
   const arrowGap = directionalButtonGap || theme.button?.directionalButtonGap;
   const confirmedCaretGap = caretGap || theme.button?.caretGap;
   const confirmedIconGap = iconGap ?? (boxed || textButton ? 10 : boxedOutline ? 13 : Icon ? 20 : arrowGap || 70);
-  const iconColor = disabled ? disabledTextColor || theme.button?.disabledTextColor : primary && !white ? colorGroup.text : colorGroup.main;
+  const iconColor = disabled
+    ? disabledTextColor || theme.button?.disabledTextColor
+    : primary && !white
+      ? colorGroup.text
+      : secondary || boxed
+        ? colorGroup.secondaryText || colorGroup.main
+        : colorGroup.main;
   const loadingStyleFormat =
     loadingConfiguration || getLoadingConfiguration({ primary, outline, boxedOutline, secondary, textButton, boxed, colorGroup });
   const loadingOffsetParams = { iconSize, autoIconSize, iconGap, confirmedIconGap, Icon, backButton, caret, nextButton };
@@ -182,7 +188,9 @@ export const Button: FC<ButtonType> = (props: ButtonType) => {
             $disabled={disabled}
             $disabledTextColor={disabledTextColor}
             $letterSpacing={letterSpacing}
+            $outline={outline}
             $primary={!(!primary || white)}
+            $secondary={secondary}
             $textButton={textButton}
             $textFontSize={textFontSize}
             data-sentry-unmask

package/src/components/Button/ButtonComponentStyles.tsx

@@ -1,5 +1,5 @@
 import { colors } from "../../const/colors";
-import { styled } from "styled-components";
+import { styled, type DefaultTheme } from "styled-components";
 
 import {
   ButtonElementProps,
@@ -11,6 +11,64 @@ import {
   UnderlineProps,
 } from "./types";
 
+type BaseTextColorProps = Pick<TextProps, "$primary" | "$secondary" | "$boxed" | "$colorGroup" | "$disabled" | "$disabledTextColor"> & {
+  theme: DefaultTheme;
+};
+
+type HoverTextColorProps = Pick<
+  TextProps,
+  "$primary" | "$secondary" | "$boxed" | "$outline" | "$boxedOutline" | "$textButton" | "$colorGroup" | "$disabled" | "$disabledTextColor"
+> & {
+  theme: DefaultTheme;
+};
+
+const getBaseTextColor = ({ $primary, $secondary, $boxed, $colorGroup, $disabled, $disabledTextColor, theme }: BaseTextColorProps) => {
+  if ($disabled) {
+    return $disabledTextColor || theme.button?.disabledTextColor;
+  }
+
+  if ($primary) {
+    return $colorGroup.text;
+  }
+
+  if ($secondary || $boxed) {
+    return $colorGroup.secondaryText || $colorGroup.main;
+  }
+
+  return $colorGroup.main;
+};
+
+const getHoverTextColor = ({
+  $primary,
+  $secondary,
+  $boxed,
+  $outline,
+  $boxedOutline,
+  $textButton,
+  $colorGroup,
+  $disabled,
+  $disabledTextColor,
+  theme,
+}: HoverTextColorProps) => {
+  if ($disabled) {
+    return $disabledTextColor || theme.button?.disabledTextColor;
+  }
+
+  if ($primary) {
+    return $colorGroup.text;
+  }
+
+  if ($outline || $boxedOutline) {
+    return $colorGroup.hover;
+  }
+
+  if ($textButton || $secondary || $boxed) {
+    return $colorGroup.secondaryText || $colorGroup.main;
+  }
+
+  return $colorGroup.main;
+};
+
 export const ButtonElement = styled.button<ButtonElementProps>`
   align-items: center;
   line-height: ${({ $lineHeight }) => ($lineHeight ? $lineHeight : 1.15)};
@@ -40,7 +98,11 @@ export const ButtonElement = styled.button<ButtonElementProps>`
   }};
   border: 1px solid
     ${({ $boxedOutline, disabled, $disabledTextColor, $outline, $colorGroup, $textButton, theme }) =>
-      $boxedOutline || $outline ? (disabled ? $disabledTextColor || theme.button?.disabledTextColor : $colorGroup.main) : $textButton ? "transparent" : theme.button?.outlineColor || "transparent"};
+      $boxedOutline || $outline
+        ? (disabled ? $disabledTextColor || theme.button?.disabledTextColor : $colorGroup.main)
+        : $textButton
+          ? "transparent"
+          : theme.button?.outlineColor || "transparent"};
   border-radius: ${({ $borderRadius, $boxed, $boxedOutline, $textButton }) =>
     $borderRadius ?? ($boxedOutline ? 7 : $boxed || $textButton ? 8 : 30)}px;
   box-shadow: ${({ $colorGroup, disabled, $primary, $shadow }) =>
@@ -88,6 +150,8 @@ export const ButtonElement = styled.button<ButtonElementProps>`
               ? $colorGroup.medium
               : $colorGroup.hover;
     }};
+    ${({ $boxedOutline, $outline, $colorGroup, disabled }) =>
+      ($boxedOutline || $outline) && !disabled ? `border-color: ${$colorGroup.hover};` : ""}
   }
   &:after {
     content: "";
@@ -142,15 +206,18 @@ export const NextIconBox = styled(IconBox)`
   margin-right: 0;
 `;
 export const Text = styled.span<TextProps>`
-  color: ${({ $primary, $colorGroup, $disabled, $disabledTextColor, theme }) =>
-    $disabled ? $disabledTextColor || theme.button?.disabledTextColor : $primary ? $colorGroup.text : $colorGroup.main};
+  color: ${getBaseTextColor};
   font-size: ${(props) => props.$textFontSize || props.theme.button?.textFontSize}px;
   font-weight: ${({ $boxed, $boxedOutline, $textButton }) => ($boxed || $boxedOutline || $textButton ? 500 : 600)};
-  letter-spacing: ${({ $boxed, $boxedOutline, $letterSpacing, $textButton: textButton }) => ($letterSpacing ? $letterSpacing : ($boxed || $boxedOutline || textButton ? "0.36px" : "0.07em"))};
+  letter-spacing: ${({ $boxed, $boxedOutline, $letterSpacing, $textButton: textButton }) => ($letterSpacing ? $letterSpacing : $boxed || $boxedOutline || textButton ? "0.36px" : "0.07em")};
   position: relative;
+  transition: color 150ms ease-out;
   vertical-align: middle;
   white-space: nowrap;
   z-index: 1;
+  ${ButtonElement}:hover & {
+    color: ${getHoverTextColor};
+  }
 `;
 export const TextButtonBackground = styled.span<TextBackgroundProps>`
   bottom: 0;

package/src/components/Button/helpers.ts

@@ -69,7 +69,7 @@ export const getLoadingConfiguration = ({
   if (primary) {
     return PrimaryButtonLoadingConfiguration(colorGroup?.text);
   } else if (secondary) {
-    return SecondaryButtonLoadingConfiguration(colorGroup?.main);
+    return SecondaryButtonLoadingConfiguration(colorGroup?.secondaryText || colorGroup?.main);
   } else if (outline) {
     return OutlineButtonLoadingConfiguration(colorGroup?.main);
   } else if (boxedOutline) {
@@ -77,7 +77,7 @@ export const getLoadingConfiguration = ({
   } else if (textButton) {
     return TextButtonLoadingConfiguration(colorGroup?.main);
   } else if (boxed) {
-    return BoxedButtonLoadingConfiguration(colorGroup?.main);
+    return BoxedButtonLoadingConfiguration(colorGroup?.secondaryText || colorGroup?.main);
   } else {
     return {};
   }

package/src/components/Button/types.ts

@@ -164,7 +164,9 @@ export interface TextProps {
   $disabled?: boolean;
   $disabledTextColor?: string;
   $letterSpacing?: string;
+  $outline?: boolean;
   $primary: boolean;
+  $secondary?: boolean;
   $textButton?: boolean;
   $textFontSize?: number;
 }

package/src/components/ToggleButtons/ToggleButtons.test.tsx

@@ -139,7 +139,7 @@ describe("ToggleButtons", () => {
     const iconBox = screen.getByTestId(`${buttonText} icon`);
     const path = iconBox.querySelector("path");
     // Default: active icon fill = colorGroup.hover = BLUE_100
-    expect(path?.getAttribute("fill")).toBe("#4F6CEA");
+    expect(path?.getAttribute("fill")).toBe("#4965c8");
   });
 
   test("active icon uses colorGroup.light fill when invertActive is true", () => {

package/src/mantine/mantineTheme.ts

@@ -82,13 +82,13 @@ const blue: MantineColorsTuple = [
   "#E5EBFC", // BLUE_5 - 0
   "#D7E1FF", // BLUE_10 - 1
   "#ADBDFE", // BLUE_25 - 2
-  "#829EFD", // BLUE_40 - 3
-  "#7290F7", // BLUE_50 - 4
-  "#6b8af5", // BLUE_65 - 5
-  "#5d7cf0", // BLUE_80 - 6
-  "#4F6CEA", // BLUE_100 - 7
-  "#4d6be1", // BLUE_110 - 8
-  "#4965c8", // BLUE_120 - 9
+  "#7A97FA", // BLUE_45 - 3
+  "#6988f4", // BLUE_70 - 4
+  "#5d7cf0", // BLUE_80 - 5
+  "#4F6CEA", // BLUE_100 - 6 (main)
+  "#4965c8", // BLUE_120 - 7 (hover)
+  "#4158aa", // BLUE_130 - 8 (secondaryText)
+  "#394B91", // BLUE_150 - 9
 ];
 
 // High-contrast binary palette — mirrors styled-components highContrastColorFamily (BLACK/WHITE only)
@@ -288,15 +288,15 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
         ? highContrastRed
         : [
             "#FFDDE5", // RED_5 - 0
-            "#FFCCD4", // RED_15 - 1
+            "#FFD5DD", // RED_10 - 1
             "#FFBBC4", // RED_25 - 2
-            "#FFAAB4", // RED_35 - 3
-            "#FF8F9C", // RED_50 - 4
-            "#FF7285", // RED_65 - 5
-            "#FF506F", // RED_80 - 6
-            "#FF3161", // RED_100 - 7
-            "#EB305A", // RED_110 - 8
-            "#D72F53", // RED_120 - 9
+            "#FF8F9C", // RED_50 - 3
+            "#FF677E", // RED_70 - 4
+            "#FF3161", // RED_100 - 5
+            "#D72F53", // RED_120 - 6 (main)
+            "#C42D4C", // RED_130 - 7 (hover)
+            "#B02B45", // RED_140 - 8 (secondaryText)
+            "#9E293E", // RED_150 - 9
           ],
       peach: highContrast
         ? highContrastGray

package/src/sharedTypes/types.ts

@@ -18,6 +18,7 @@ export interface ColorFamilyType {
   hover: string;
   text: string;
   outline?: string;
+  secondaryText?: string;
 }
 export interface ConnotationColorType {
   light: string;

package/src/theme.ts

@@ -775,9 +775,10 @@ export const cerebellumTheme: DefaultTheme = {
       medium: colors.BLUE_10,
       mediumDark: colors.BLUE_25,
       dark: colors.BLUE_45,
-      main: colors.BLUE_70,
-      hover: colors.BLUE_100,
+      main: colors.BLUE_100,
+      hover: colors.BLUE_120,
       text: colors.WHITE,
+      secondaryText: colors.BLUE_130,
     },
     COOL_GREY: {
       light: colors.COOL_GREY_4,
@@ -811,9 +812,10 @@ export const cerebellumTheme: DefaultTheme = {
       medium: colors.RED_10,
       mediumDark: colors.RED_25,
       dark: colors.RED_65,
-      main: colors.RED_100,
-      hover: colors.RED_100,
+      main: colors.RED_120,
+      hover: colors.RED_130,
       text: colors.WHITE,
+      secondaryText: colors.RED_140,
     },
   },
   colorPicker: {