@cerebruminc/cerebellum 17.3.1 → 17.3.2-beta.dangerous.9e2daf3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.3.2](https://github.com/cerebruminc/cerebellum/compare/v17.3.1...v17.3.2) (2026-06-15)
+
+
+### Bug Fixes
+
+* **toggle:** add aria-checked and aria-label to Toggle switch (FRN-3162) ([06a1896](https://github.com/cerebruminc/cerebellum/commit/06a1896e1712b5accfe0d95baccdb7b23af7c75a))
+
 ## [17.3.1](https://github.com/cerebruminc/cerebellum/compare/v17.3.0...v17.3.1) (2026-06-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.1",
+  "version": "17.3.2-beta.dangerous.9e2daf3",
   "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/ButtonAccessibility.test.tsx

@@ -0,0 +1,60 @@
+import { colors } from "../../const/colors";
+import { contrast } from "../../helpers/accessibility";
+import { cerebellumTheme, cortexTheme, highContrastTheme } from "../../theme";
+
+const WCAG_AA = 4.5;
+const WHITE = colors.WHITE;
+const COOL_GREY_5 = colors.COOL_GREY_5;
+
+describe("Button color family WCAG AA compliance", () => {
+  const themes = {
+    cerebellum: cerebellumTheme,
+    cortex: cortexTheme,
+    highContrast: highContrastTheme,
+  };
+
+  for (const [themeName, theme] of Object.entries(themes)) {
+    describe(`${themeName} theme`, () => {
+      for (const [familyName, family] of Object.entries(theme.colorFamilies)) {
+        describe(`${familyName} color family`, () => {
+          const secondaryText = family.secondaryText || family.main;
+
+          test("PrimaryButton: white text on main background meets AA", () => {
+            const ratio = contrast(WHITE, family.main);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("PrimaryButton hover: white text on hover background meets AA", () => {
+            const ratio = contrast(WHITE, family.hover);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("OutlineButton/TextButton: main text on white meets AA", () => {
+            const ratio = contrast(family.main, WHITE);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("OutlineButton hover: hover text on COOL_GREY_5 meets AA", () => {
+            const ratio = contrast(family.hover, COOL_GREY_5);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("SecondaryButton: secondaryText on light background meets AA", () => {
+            const ratio = contrast(secondaryText, family.light);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("SecondaryButton hover: secondaryText on medium background meets AA", () => {
+            const ratio = contrast(secondaryText, family.medium);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+
+          test("TextButton hover: secondaryText on light background meets AA", () => {
+            const ratio = contrast(secondaryText, family.light);
+            expect(ratio).toBeGreaterThanOrEqual(WCAG_AA);
+          });
+        });
+      }
+    });
+  }
+});

package/src/components/Button/ButtonComponentStyles.tsx

@@ -88,6 +88,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 +144,36 @@ 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: ${({ $primary, $secondary, $boxed, $colorGroup, $disabled, $disabledTextColor, theme }) =>
+    $disabled
+      ? $disabledTextColor || theme.button?.disabledTextColor
+      : $primary
+        ? $colorGroup.text
+        : $secondary || $boxed
+          ? $colorGroup.secondaryText || $colorGroup.main
+          : $colorGroup.main};
   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"))};
   position: relative;
+  transition: color 150ms ease-out;
   vertical-align: middle;
   white-space: nowrap;
   z-index: 1;
+  ${ButtonElement}:hover & {
+    color: ${({ $primary, $secondary, $boxed, $outline, $boxedOutline, $textButton, $colorGroup, $disabled, $disabledTextColor, theme }) =>
+      $disabled
+        ? $disabledTextColor || theme.button?.disabledTextColor
+        : $primary
+          ? $colorGroup.text
+          : $outline || $boxedOutline
+            ? $colorGroup.hover
+            : $textButton
+              ? $colorGroup.secondaryText || $colorGroup.main
+              : $secondary || $boxed
+                ? $colorGroup.secondaryText || $colorGroup.main
+                : $colorGroup.main};
+  }
 `;
 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/Toggle/Toggle.stories.tsx

@@ -17,6 +17,7 @@ type Story = StoryObj<typeof Toggle>;
 export const Default: Story = {
   args: {
     active: true,
+    "aria-label": "Toggle switch",
     disabled: false,
     onToggle: () => console.log("ToggleClick"),
   },

package/src/components/Toggle/Toggle.test.tsx

@@ -20,6 +20,39 @@ describe("Toggle", () => {
     });
   });
 
+  test("has aria-checked true when active", () => {
+    render(<ThemedToggle active onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+  });
+
+  test("has aria-checked false when inactive", () => {
+    render(<ThemedToggle active={false} onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("sets aria-label when provided", () => {
+    render(<ThemedToggle active onToggle={jest.fn()} aria-label="Dark mode" />);
+    const toggle = screen.getByRole("switch", { name: "Dark mode" });
+    expect(toggle).toBeInTheDocument();
+  });
+
+  test("toggles on Space key press", async () => {
+    const mockOnToggle = jest.fn();
+    render(<ThemedToggle active onToggle={mockOnToggle} />);
+    const toggle = screen.getByRole("switch");
+    toggle.focus();
+    await userEvent.keyboard(" ");
+    expect(mockOnToggle).toHaveBeenCalledTimes(1);
+  });
+
+  test("has aria-disabled true when disabled", () => {
+    render(<ThemedToggle active={false} disabled onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-disabled", "true");
+  });
+
   test("renders disabled Toggle", async () => {
     const mockOnClick = jest.fn();
     render(<ThemedToggle active={false} disabled onToggle={mockOnClick} />);

package/src/components/Toggle/Toggle.tsx

@@ -1,12 +1,13 @@
 import React, { FC, KeyboardEvent } from "react";
 
-import { pressedEnter } from "../../helpers/accessibility";
+import { pressedEnter, pressedSpacebar } from "../../helpers/accessibility";
 
 import { ActiveTrack, Base, ClickPadding, Focus, Knob, KnobColor, TrackBox } from "./ToggleStyles";
 import { ToggleType } from "./types";
 
 export const Toggle: FC<ToggleType> = ({
   active,
+  "aria-label": ariaLabel,
   clickPadding = 15,
   children,
   disabled,
@@ -33,8 +34,17 @@ export const Toggle: FC<ToggleType> = ({
           onToggle?.(event);
         }
       }}
+      onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {
+        if (!disabled && pressedSpacebar(event)) {
+          event.preventDefault();
+          onToggle?.(event);
+        }
+      }}
       $disabled={disabled}
       role="switch"
+      aria-checked={active}
+      aria-disabled={disabled}
+      aria-label={ariaLabel}
       tabIndex={!onToggle || disabled ? -1 : 0}
     >
       <Base disabled={disabled} $knobSize={knobSize} $trackHeight={trackHeight} $width={width}>

package/src/components/Toggle/types.ts

@@ -3,6 +3,8 @@ import { KeyboardEvent, MouseEvent } from "react";
 export interface ToggleType {
   /** The current state of the Toggle  */
   active: boolean;
+  /** Accessible label for the toggle switch. Required when Toggle is used without a visible label or wrapping <label> element. */
+  "aria-label"?: string;
   children?: React.ReactNode;
   /** Clickable space added around Toggle, in pixels. Pass `0` to disable  */
   clickPadding?: number | string;

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

@@ -138,8 +138,8 @@ 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");
+    // Default: active icon fill = colorGroup.hover = BLUE_120
+    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,57 +288,57 @@ 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
         : [
             "#FFF1EC", // PEACH_5 - 0
-            "#FFE5DE", // PEACH_15 - 1
+            "#FFEBE5", // PEACH_10 - 1
             "#FFD9D1", // PEACH_25 - 2
-            "#FFCDC3", // PEACH_35 - 3
-            "#FFBBAE", // PEACH_50 - 4
-            "#FFAA9A", // PEACH_65 - 5
-            "#FF9885", // PEACH_80 - 6
-            "#FF806A", // PEACH_100 - 7
-            "#ED7762", // PEACH_110 - 8
-            "#DB6E5B", // PEACH_120 - 9
+            "#FFBBAE", // PEACH_50 - 3
+            "#FFA493", // PEACH_70 - 4
+            "#FF806A", // PEACH_100 - 5
+            "#B65B4C", // PEACH_140 - 6 (main)
+            "#A45244", // PEACH_150 - 7 (hover)
+            "#92493D", // PEACH_160 - 8 (secondaryText)
+            "#804035", // PEACH_170 - 9
           ],
       purple: highContrast
         ? highContrastGray
         : [
             "#F0EAFF", // PURPLE_5 - 0
-            "#dbcdff", // PURPLE_15 - 1
+            "#e5dbff", // PURPLE_10 - 1
             "#c6afff", // PURPLE_25 - 2
-            "#b192ff", // PURPLE_35 - 3
+            "#9c75ff", // PURPLE_45 - 3
             "#8a5aff", // PURPLE_55 - 4
             "#8346ff", // PURPLE_65 - 5
-            "#7928ff", // PURPLE_80 - 6
-            "#6B00FF", // PURPLE_100 - 7
-            "#6300ED", // PURPLE_110 - 8
+            "#803cff", // PURPLE_70 - 6 (main)
+            "#7928ff", // PURPLE_80 - 7 (hover)
+            "#6B00FF", // PURPLE_100 - 8 (secondaryText)
             "#5C00DB", // PURPLE_120 - 9
           ],
       aqua: highContrast
         ? highContrastGray
         : [
             "#e0f7f2", // AQUA_5 - 0
-            "#cdf2ea", // AQUA_15 - 1
+            "#d7f5ee", // AQUA_10 - 1
             "#baede2", // AQUA_25 - 2
-            "#a7e8da", // AQUA_35 - 3
-            "#8be1ce", // AQUA_50 - 4
-            "#6fdac2", // AQUA_65 - 5
-            "#53d3b6", // AQUA_80 - 6
-            "#2dc9a6", // AQUA_100 - 7
-            "#2ABB9A", // AQUA_110 - 8
-            "#27AC8E", // AQUA_120 - 9
+            "#8be1ce", // AQUA_50 - 3
+            "#53d3b6", // AQUA_80 - 4
+            "#2dc9a6", // AQUA_100 - 5
+            "#1D816B", // AQUA_150 - 6 (main)
+            "#1A735F", // AQUA_160 - 7 (hover)
+            "#176553", // AQUA_170 - 8 (secondaryText)
+            "#135647", // AQUA_180 - 9
           ],
       orange: 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

@@ -757,9 +757,10 @@ export const cerebellumTheme: DefaultTheme = {
       medium: colors.AQUA_10,
       mediumDark: colors.AQUA_25,
       dark: colors.AQUA_80,
-      main: colors.AQUA_90,
-      hover: colors.AQUA_100,
+      main: colors.AQUA_150,
+      hover: colors.AQUA_160,
       text: colors.WHITE,
+      secondaryText: colors.AQUA_170,
     },
     BLACK: {
       light: colors.COOL_GREY_10,
@@ -775,9 +776,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,
@@ -793,27 +795,30 @@ export const cerebellumTheme: DefaultTheme = {
       medium: colors.PEACH_10,
       mediumDark: colors.PEACH_25,
       dark: colors.PEACH_80,
-      main: colors.PEACH_90,
-      hover: colors.PEACH_100,
+      main: colors.PEACH_140,
+      hover: colors.PEACH_150,
       text: colors.WHITE,
+      secondaryText: colors.PEACH_160,
     },
     PURPLE: {
       light: colors.PURPLE_5,
       medium: colors.PURPLE_10,
       mediumDark: colors.PURPLE_25,
       dark: colors.PURPLE_45,
-      main: colors.PURPLE_55,
-      hover: colors.PURPLE_70,
+      main: colors.PURPLE_70,
+      hover: colors.PURPLE_80,
       text: colors.WHITE,
+      secondaryText: colors.PURPLE_100,
     },
     RED: {
       light: colors.RED_5,
       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: {
@@ -1361,10 +1366,12 @@ const cortexColorFamilies = JSON.parse(JSON.stringify(cerebellumTheme.colorFamil
 cortexColorFamilies.PURPLE = {
   light: colors.PLUM_10,
   medium: colors.PLUM_20,
+  mediumDark: colors.PLUM_40,
   dark: colors.PLUM_40,
   main: colors.PLUM_50,
   hover: colors.PLUM_60,
   text: colors.WHITE,
+  secondaryText: colors.PLUM_60,
 };
 
 export const cortexTheme: DefaultTheme = {