@cerebruminc/cerebellum 17.2.0 → 17.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.2.1](https://github.com/cerebruminc/cerebellum/compare/v17.2.0...v17.2.1) (2026-06-02)
+
+
+### Bug Fixes
+
+* **toggle-buttons:** add invertActive support ([15ec451](https://github.com/cerebruminc/cerebellum/commit/15ec451b7e0d36cd3851ab7acf2459eb2969ba33))
+
 ## [17.2.0](https://github.com/cerebruminc/cerebellum/compare/v17.1.2...v17.2.0) (2026-05-29)
 
 

package/package.json

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

package/src/components/ToggleButtons/ToggleButtons.mdx

@@ -105,6 +105,11 @@ import { ToggleButtons, ToggleButtonsType, ToggleButtonButtonsType } from "@cere
 <Description of={ToggleButtonsStories.FixedButtonWidth} />
 <Canvas of={ToggleButtonsStories.FixedButtonWidth} />
 
+## Inverted Active Button Color
+
+<Description of={ToggleButtonsStories.InvertedColor} />
+<Canvas of={ToggleButtonsStories.InvertedColor} />
+
 ### themeOverride
 
 <Description of={ToggleButtonsStories.ThemeOverride} />

package/src/components/ToggleButtons/ToggleButtons.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Email, Mobile, Phone } from "../Icons";
+import { useArgs } from "storybook/preview-api";
 import { colors } from "../../const/colors";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
-import { useArgs } from "storybook/preview-api";
+import { Email, Mobile, Phone } from "../Icons";
 import { ToggleButtons } from "./ToggleButtons";
 
 /**
@@ -152,6 +152,40 @@ export const FixedButtonWidth: Story = {
   },
 };
 
+/**
+ * The `invertActive` prop will flip the active button's color and background. It's necessary to get the highContrast styles in the theme to work.
+ *
+ * In the `highContrast` theme, the default active-state color (`colorGroup.light`) is white, making it invisible against a white background. Setting `invertActive` swaps the active button's background to `colorGroup.hover` (a darker shade) and the text/icon color to `colorGroup.light`, restoring visibility. This prop is also safe to use with the default theme.
+ */
+export const InvertedColor: Story = {
+  render: Template.bind({}),
+  args: {
+    activeId: "1",
+    buttons: [
+      {
+        id: "1",
+        buttonText: "Email",
+        Icon: Email,
+        iconGap: 10,
+      },
+      {
+        id: "2",
+        buttonText: "Text",
+        Icon: Mobile,
+        iconSize: 16,
+        iconGap: 5,
+      },
+      {
+        id: "3",
+        buttonText: "Phone",
+        Icon: Phone,
+      },
+    ],
+    invertActive: true,
+    fixedButtonWidth: 120,
+  },
+};
+
 /** If you need to override the theme, these props are available through `themeOverride`. */
 export const ThemeOverride: Story = {
   render: Template.bind({}),

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

@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { Settings } from "../Icons";
 import { withTheme } from "../../hocs/withTheme";
+import { Settings } from "../Icons";
 import { ToggleButtons } from "./ToggleButtons";
 import { ToggleButtonButtonsType } from "./types";
 
@@ -100,4 +100,61 @@ describe("ToggleButtons", () => {
     const icon = screen.getByTestId(`${buttonText} icon`);
     expect(icon).toBeInTheDocument();
   });
+
+  test("invertActive renders without error", () => {
+    const buttons: ToggleButtonButtonsType[] = [
+      { id: "1", buttonText: "Foo" },
+      { id: "2", buttonText: "Bar" },
+    ];
+    render(<ThemedToggleButtons activeId="1" buttons={buttons} invertActive />);
+
+    expect(screen.getByText("Foo")).toBeInTheDocument();
+    expect(screen.getByText("Bar")).toBeInTheDocument();
+  });
+
+  test("invertActive renders icons without error", () => {
+    const buttonId = "1";
+    const buttonText = "Foo";
+    const buttons: ToggleButtonButtonsType[] = [
+      { id: buttonId, buttonText: buttonText, Icon: Settings },
+      { id: "2", buttonText: "Bar", Icon: Settings },
+    ];
+
+    render(<ThemedToggleButtons activeId={buttonId} buttons={buttons} invertActive />);
+
+    const icon = screen.getByTestId(`${buttonText} icon`);
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("active icon uses colorGroup.hover fill by default", () => {
+    const buttonId = "1";
+    const buttonText = "Foo";
+    const buttons: ToggleButtonButtonsType[] = [
+      { id: buttonId, buttonText: buttonText, Icon: Settings },
+      { id: "2", buttonText: "Bar", Icon: Settings },
+    ];
+
+    render(<ThemedToggleButtons activeId={buttonId} buttons={buttons} />);
+
+    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");
+  });
+
+  test("active icon uses colorGroup.light fill when invertActive is true", () => {
+    const buttonId = "1";
+    const buttonText = "Foo";
+    const buttons: ToggleButtonButtonsType[] = [
+      { id: buttonId, buttonText: buttonText, Icon: Settings },
+      { id: "2", buttonText: "Bar", Icon: Settings },
+    ];
+
+    render(<ThemedToggleButtons activeId={buttonId} buttons={buttons} invertActive />);
+
+    const iconBox = screen.getByTestId(`${buttonText} icon`);
+    const path = iconBox.querySelector("path");
+    // invertActive: active icon fill = colorGroup.light = BLUE_5
+    expect(path?.getAttribute("fill")).toBe("#E5EBFC");
+  });
 });

package/src/components/ToggleButtons/ToggleButtons.tsx

@@ -11,6 +11,7 @@ export const ToggleButtons: FC<ToggleButtonsType> = ({
   activeId,
   buttons = [],
   fixedButtonWidth,
+  invertActive,
   onToggle,
   themeOverride,
 }) => {
@@ -32,6 +33,7 @@ export const ToggleButtons: FC<ToggleButtonsType> = ({
             disabled={isActive}
             $firstButton={index === 0}
             $fixedButtonWidth={fixedButtonWidth}
+            $invertActive={invertActive}
             $lastButton={index === buttons.length - 1}
             onClick={() => onToggle?.(buttonProps)}
             $themeOverride={themeOverride}
@@ -39,10 +41,16 @@ export const ToggleButtons: FC<ToggleButtonsType> = ({
             {/* We could use title instead of data-testid, but it would be redundant with buttonText for screen readers */}
             {Icon && (
               <IconBox $iconSize={iconSize} data-testid={`${buttonText} icon`} $iconGap={iconGap}>
-                <Icon fill={isActive ? colorGroup.hover : inactiveTextColor} />
+                <Icon fill={isActive ? (invertActive ? colorGroup.light : colorGroup.hover) : inactiveTextColor} />
               </IconBox>
             )}
-            <Text $active={isActive} $colorGroup={colorGroup} $themeOverride={themeOverride} data-sentry-unmask>
+            <Text
+              $active={isActive}
+              $colorGroup={colorGroup}
+              $invertActive={invertActive}
+              $themeOverride={themeOverride}
+              data-sentry-unmask
+            >
               {buttonText}
             </Text>
           </Button>

package/src/components/ToggleButtons/ToggleButtonsStyles.tsx

@@ -8,8 +8,10 @@ export const ButtonGroup = styled.div<ButtonGroupProps>`
 `;
 export const Button = styled.button<ButtonProps>`
   align-items: center;
-  background-color: ${({ $active, $colorGroup, $themeOverride, theme }) =>
-    $active ? $colorGroup.light : $themeOverride?.backgroundColor || theme.toggleButtons.backgroundColor};
+  background-color: ${({ $active, $colorGroup, $invertActive, $themeOverride, theme }) => {
+    if (!$active) return $themeOverride?.backgroundColor || theme.toggleButtons.backgroundColor;
+    return $invertActive ? $colorGroup.hover : $colorGroup.light;
+  }};
   border: 1px solid
     ${({ $active, $colorGroup, $themeOverride, theme }) =>
       $active ? $colorGroup.hover : $themeOverride?.borderColor || theme.toggleButtons.borderColor};
@@ -49,8 +51,10 @@ export const IconBox = styled.div<IconBoxProps>`
   width: ${({ $iconSize }) => $iconSize || 14}px;
 `;
 export const Text = styled.span<TextProps>`
-  color: ${({ $active, $colorGroup, $themeOverride, theme }) =>
-    $active ? $colorGroup.hover : $themeOverride?.textColor || theme.toggleButtons.textColor};
+  color: ${({ $active, $colorGroup, $invertActive, $themeOverride, theme }) => {
+    if (!$active) return $themeOverride?.textColor || theme.toggleButtons.textColor;
+    return $invertActive ? $colorGroup.light : $colorGroup.hover;
+  }};
   font-size: ${({ $themeOverride, theme }) => $themeOverride?.fontSize || theme.toggleButtons.fontSize}px;
   font-weight: 600;
   letter-spacing: 0.34px;

package/src/components/ToggleButtons/types.ts

@@ -1,6 +1,6 @@
-import { IconType } from "../Icons";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { ColorFamilyType } from "../../sharedTypes/types";
+import { IconType } from "../Icons";
 
 export interface ToggleButtonsType {
   /** The color family for the active buttons. */
@@ -13,6 +13,8 @@ export interface ToggleButtonsType {
   buttons?: Array<ToggleButtonButtonsType>;
   /** By default, buttons fit the text. This forces the same width for all buttons. This is recommended if text is close in length */
   fixedButtonWidth?: number;
+  /** If true, the active button text/background will be inverted. Necessary to get the highContrast styles in the theme to work */
+  invertActive?: boolean;
   /** Called when a button is clicked */
   onToggle?: (button: ToggleButtonButtonsType) => void;
   /** You can override the theme by passing a `themeOverride` object. See below for the available props. */
@@ -46,6 +48,7 @@ export interface ButtonProps {
   $colorGroup: ColorFamilyType;
   $firstButton: boolean;
   $fixedButtonWidth?: number;
+  $invertActive?: boolean;
   $lastButton: boolean;
   $themeOverride?: ThemeOverride;
 }
@@ -56,5 +59,6 @@ export interface IconBoxProps {
 export interface TextProps {
   $active: boolean;
   $colorGroup: ColorFamilyType;
+  $invertActive?: boolean;
   $themeOverride?: ThemeOverride;
 }