@cerebruminc/cerebellum 17.3.2 → 17.3.3-beta.dangerous.d775720

package/.jsonSeeds/digitalInput.json

@@ -183,7 +183,7 @@
       "name": "helperTextColor",
       "property": "color",
       "type": "string",
-      "value": "colors.COOL_GREY_60",
+      "value": "colors.COOL_GREY_65",
       "description": "The color for the helper text"
     },
     {

package/.jsonSeeds/input.json

@@ -189,7 +189,7 @@
       "name": "helperTextColor",
       "property": "color",
       "type": "string",
-      "value": "colors.COOL_GREY_60",
+      "value": "colors.COOL_GREY_65",
       "description": "The helper text color"
     },
     {

package/.jsonSeeds/stepper.json

@@ -174,7 +174,7 @@
       "name": "inactiveTextColor",
       "property": "color",
       "type": "string",
-      "value": "colors.COOL_GREY_60",
+      "value": "colors.COOL_GREY_65",
       "description": "The future/disabled steps` text color"
     }
   ],

package/.jsonSeeds/table.json

@@ -411,7 +411,7 @@
       "name": "inactiveHeaderColor",
       "property": "color",
       "type": "string",
-      "value": "colors.COOL_GREY_60",
+      "value": "colors.COOL_GREY_65",
       "description": "The header text color when it is not the sorting column"
     },
     {

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-beta.dangerous.d775720",
   "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/CheckboxGroup/types.ts

@@ -17,9 +17,9 @@ export interface CheckboxGroupType extends Omit<CheckboxItemType, "active" | "di
   disableGroup?: boolean;
   /** The failed validation color. THEME PROP: default is colors.RED_100 */
   failColor?: string;
-  /** Small explainatory text that applies to the whole checkbox group. It appears under the label */
+  /** Small explanatory text that applies to the whole checkbox group. It appears under the label */
   helperText?: string | ReactElement;
-  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** The label for CheckboxGroup. Not required, but strongly recommended */
   label?: ReactNode;

package/src/components/ColorPickerInput/ColorPickerInput.mdx

@@ -52,7 +52,7 @@ If you need to override the theme, these props are available through `themeOverr
 | disabledColor          | string | Text color when input is disabled                       | colors.COOL_GREY_30      |
 | failColor              | string | Border color when validation fails                      | colors.RED_100           |
 | failColorSecondary     | string | Secondary color for validation failure states           | colors.RED_5             |
-| helperTextColor        | string | Color of helper text and legibility messages            | colors.COOL_GREY_60      |
+| helperTextColor        | string | Color of helper text and legibility messages            | colors.COOL_GREY_65      |
 | hoverBorderColor       | string | Border color when input is hovered                      | colors.COOL_GREY_40      |
 | inactiveBorderColor    | string | Border color when input is inactive                     | colors.COOL_GREY_25      |
 | inputBackgroundColor   | string | Background color of the input                           | colors.WHITE             |

package/src/components/ConfigurableInput/ConfigurableInput.mdx

@@ -85,7 +85,7 @@ import { ConfigurableInput, ConfigurableInputType, MaskedRadioType } from "@cere
 | focusedRadioColor          | string | Color of the shadow when a radio is focused                                                                                             | colors.BLUE_5       |
 | failColor                  | string | The failed validation color.                                                                                                            | colors.RED_100      |
 | failColorSecondary         | string | The failed validation color that highlights the input text                                                                              | colors.RED_5        |
-| helperTextColor            | string | The helper text color.                                                                                                                  | colors.COOL_GREY_60 |
+| helperTextColor            | string | The helper text color.                                                                                                                  | colors.COOL_GREY_65 |
 | hoverBorderColor           | string | The input border color, on hover                                                                                                        | colors.COOL_GREY_40 |
 | inactiveBorderColor        | string | The input border color                                                                                                                  | colors.COOL_GREY_25 |
 | inactiveRadioColor         | string | The inactive radio color                                                                                                                | colors.COOL_GREY_60 |

package/src/components/CreditCardInput/types.ts

@@ -6,7 +6,7 @@ export interface CreditCardInputType extends Omit<InlineCreditCardInputType, "tr
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/CurrencyInput/types.ts

@@ -6,7 +6,7 @@ export interface CurrencyInputType extends Omit<InlineCurrencyInputType, "traili
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/DatePicker/DatePicker.mdx

@@ -72,7 +72,7 @@ DatePicker supports theme styling. You can pass the following props individually
 | calendarHeaderColor | string | Calendar header color, and hover date color         | colors.COOL_GREY_5        |
 | disabledColor       | string | If `disabled`, then everything turns this color     | colors.COOL_GREY_30       |
 | failColor           | string | The failed validation color                         | colors.RED_100            |
-| helperTextColor     | string | The helper text color                               | colors.COOL_GREY_60       |
+| helperTextColor     | string | The helper text color                               | colors.COOL_GREY_65       |
 | inactiveBorderColor | string | The border color                                    | colors.COOL_GREY_25       |
 | inactiveIconColor   | string | The icon color                                      | colors.COOL_GREY_35       |
 | inputHeight         | number | The input height, not counting the label, in pixels | 55                        |

package/src/components/DatePicker/types.ts

@@ -85,7 +85,7 @@ export type DatePickerType = InlineDatePickerProps & {
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Set by the theme, defaults to colors.COOL_GREY_60  */
+  /** The helper text color. Set by the theme, defaults to colors.COOL_GREY_65  */
   helperTextColor?: string;
   /**  A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/DigitalInput/DigitalInput.mdx

@@ -89,7 +89,7 @@ If you need to override the theme, these props are available through `themeOverr
 | disabledColor         | string | If `disabled`, then everything turns this color                                  | colors.COOL_GREY_30 |
 | disabledBorderColor   | string | If `disabled`, then the border turns this color                                  | colors.COOL_GREY_25 |
 | failColor             | string | The failed validation color                                                      | colors.RED_100      |
-| helperTextColor       | string | The color for the helper text                                                    | colors.COOL_GREY_60 |
+| helperTextColor       | string | The color for the helper text                                                    | colors.COOL_GREY_65 |
 | hoverBorderColor      | string | The border color, on hover                                                       | colors.COOL_GREY_40 |
 | inactiveBorderColor   | string | The border color                                                                 | colors.COOL_GREY_25 |
 | inputBackgroundColor  | string | The input's background color                                                 | colors.WHITE        |

package/src/components/EmailInput/types.ts

@@ -6,7 +6,7 @@ export interface EmailInputType extends InlineEmailInputType {
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/HorizontalTabMenu/HorizontalTabMenu.mdx

@@ -105,7 +105,7 @@ If you update `options` to change the tabs contents (ie, change a label's text),
 | mainColor             | string | The highlight color for active menu items.                       | BLUE_100 |
 | menuPaddingString     | string | Padding for the HorizontalTabMenu                                | 4px 0 0 0 |
 | minTabWidth           | number | Sets a minimum tab width. Useful for numerical tab labels        | -- |
-| textColor             | string | Text color for inactive menu items.                              | COOL_GREY_60 |
+| textColor             | string | Text color for inactive menu items.                              | COOL_GREY_65 |
 | textHoverColor        | string | Text color for inactive menu items when hovered.                 | COOL_GREY_75 |
 | underlineColor        | string | Color for the underline, when `floating: false`.                 | COOL_GREY_20 |
 

package/src/components/HorizontalTabMenu/types.ts

@@ -31,7 +31,7 @@ export interface HorizontalTabMenuType {
   preventClick?: boolean;
   /** The space between the tabs, in pixels */
   spaceBetweenTabs?: number;
-  /** Text color for inactive menu items. THEME PROP: default is colors.COOL_GREY_60 */
+  /** Text color for inactive menu items. THEME PROP: default is colors.COOL_GREY_65 */
   textColor?: string;
   /** Text color for inactive menu items when hovered. THEME PROP: default is colors.COOL_GREY_75 */
   textHoverColor?: string;

package/src/components/ImagePicker/ImagePicker.mdx

@@ -127,7 +127,7 @@ If you need to override the theme, these props are available through `themeOverr
 | borderRadius            | number | The outline box border radius, in pixels                                                  | 5                   |
 | disabledColor           | string | The label and helperText when disabled                                                    | colors.COOL_GREY_30 |
 | failColor               | string | The failed validation color                                                               | colors.RED_100      |
-| helperTextColor         | string | The helper text color.                                                                    | colors.COOL_GREY_60 |
+| helperTextColor         | string | The helper text color.                                                                    | colors.COOL_GREY_65 |
 | labelColor              | string | The image label color.                                                                    | colors.COOL_GREY_80 |
 | placeholderCircleColor  | string | The color for the placeholder circle                                                      | colors.BLUE_100     |
 | placeholderIconHeight   | number | The height for the placeholder icon                                                       | 95px                |

package/src/components/InlineInput/types.ts

@@ -128,7 +128,7 @@ export interface InlineInputType {
   textFontSize?: number;
   /** The trailing icon's color. Only used if passing an icon component from Cerebellum. THEME PROP: default is colors.COOL_GREY_60 */
   trailingIconColor?: string;
-  /** The trailing text color. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The trailing text color. THEME PROP: default is colors.COOL_GREY_65 */
   trailingTextColor?: string;
 }
 

package/src/components/Input/types.ts

@@ -6,7 +6,7 @@ export interface InputType extends InlineInputType {
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/PhoneInput/types.ts

@@ -6,7 +6,7 @@ export interface PhoneInputType extends Omit<InlinePhoneInputType, "trailingText
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/RJSForm/RJSFormStyles.tsx

@@ -78,10 +78,10 @@ export const RJSTitleBox = styled.div<RJSTitleBoxProps>`
 `;
 
 const ValueLabel = styled.span<{ $isDefault?: boolean }>`
-  color: ${({ $isDefault }) => ($isDefault ? colors.COOL_GREY_60 : colors.BLUE_60)};
+  color: ${({ $isDefault }) => ($isDefault ? colors.COOL_GREY_65 : colors.BLUE_60)};
   font-size: 15px;
   cursor: ${({ $isDefault }) => ($isDefault ? "default" : "pointer")};
-  text-decoration: ${({ $isDefault }) => ($isDefault ? "default" : "underline")};
+  text-decoration: ${({ $isDefault }) => ($isDefault ? "none" : "underline")};
 `;
 
 const FlexListItem = styled.li`

package/src/components/RJSFormRenderer/RJSFormRenderer.mdx

@@ -56,7 +56,7 @@ If you need to override the theme, these props are available through `themeOverr
 | --------------------- | ------ | ------------------------------------------------- | -------------------- |
 | altRowBackgroundColor | string | The background color of the odd rows              | colors.COOL_GREY_4   |
 | backgroundColor       | string | The background color of the surrounding component | colors.WHITE         |
-| labelColor            | string | The color for the label                           | colors.COOL_GREY_60  |
+| labelColor            | string | The color for the label                           | colors.COOL_GREY_65  |
 | paddingString         | string | The padding value for the surrounding component   | "30px 20px"          |
 | rowBackgroundColor    | string | The background color of the even rows             | colors.WHITE         |
 | titleColor            | string | The color of the component title                  | colors.COOL_GREY_100 |

package/src/components/RadioGroup/types.ts

@@ -11,9 +11,9 @@ export interface RadioGroupType extends Omit<RadioItemType, "active" | "disabled
   disableGroup?: boolean;
   /** The failed validation color. THEME PROP: default is colors.RED_100 */
   failColor?: string;
-  /** Explainatory text that applies to the whole radio group */
+  /** Explanatory text that applies to the whole radio group */
   helperText?: string | ReactElement;
-  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** Defines if the orientation is horizontal or vertical.  */
   horizontal?: boolean;

package/src/components/SearchMenu/SearchMenu.tsx

@@ -193,7 +193,7 @@ export const SearchMenu: FC<SearchMenuType> = ({
     <Menu ref={innerRef} $backgroundColor={backgroundColor} $borderRadius={borderRadius} $boxShadow={boxShadow}>
       {displayHeader && (
         <Header data-testid="searchMenu_header">
-          <HeaderTitle $textColor={colors.COOL_GREY_60}>
+          <HeaderTitle $textColor={colors.COOL_GREY_65}>
             <Truncate sentryUnmask>{headerTitle}</Truncate>
           </HeaderTitle>
           {headerFunction && (

package/src/components/SsnInput/types.ts

@@ -36,7 +36,7 @@ export interface SsnInputType extends Omit<InlineSsnInputType, "trailingTextColo
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/components/Stepper/Stepper.mdx

@@ -48,10 +48,10 @@ If you need to override the theme, these props are available through `themeOverr
 | footerBackgroundColor    | string | Footer background color                               | colors.COOL_GREY_4                     |
 | headerFontSize           | number | The header main text's font size, in pixels           | 30                                     |
 | headerMinHeight          | number | The header's minimum height, in pixels                | 110                                    |
-| helperText               | string | The helperText text color                             | colors.COOL_GREY_60                    |
-| inactiveCheckmarkBgColor | string | The future completed steps` checkmark backgroun color | colors.COOL_GREY_20                    |
+| helperTextColor          | string | The helperText text color                             | colors.COOL_GREY_65                    |
+| inactiveCheckmarkBgColor | string | The future completed steps` checkmark background color | colors.COOL_GREY_20                    |
 | inactiveCheckmarkColor   | string | The future completed steps` checkmark color           | colors.COOL_GREY_45                    |
-| inactiveTextColor        | string | The future/disabled steps` text color                 | colors.COOL_GREY_60                    |
+| inactiveTextColor        | string | The future/disabled steps` text color                 | colors.COOL_GREY_65                    |
 
 ### CompletedStepsType
 

package/src/components/Table/types.ts

@@ -153,9 +153,9 @@ export interface TableType {
   highlightRowExtend?: number;
   /** The color of the rightmost tip of the highlighted row. THEME PROP: Defaults to transparent. */
   highlightTipColor?: string;
-  /** The header text color when it is not the sorting column. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The header text color when it is not the sorting column. THEME PROP: default is colors.COOL_GREY_65 */
   inactiveHeaderColor?: string;
-  /** The header text color when hovered and it is not the sorting column. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The header text color when hovered and it is not the sorting column. THEME PROP: default is colors.COOL_GREY_80 */
   inactiveHeaderColorHover?: string;
   /** The color family for the no results button. THEME PROP: default is ButtonColorFamilyEnum.Blue */
   noResultsButtonColorFamily?: ButtonColorFamilyEnum;

package/src/components/Textarea/types.ts

@@ -76,7 +76,7 @@ export interface TextareaType extends Omit<InlineTextareaType, "textareaRef" | "
 
   /** The required asterisk color. THEME PROP: default is BLUE_70 */
   asteriskColor?: string;
-  /** The helper text color. THEME PROP: default is COOL_GREY_60 */
+  /** The helper text color. THEME PROP: default is COOL_GREY_65 */
   helperTextColor?: string;
   /** The label color. THEME PROP: default is COOL_GREY_80 */
   labelColor?: string;

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/components/ToggleGroup/types.ts

@@ -10,9 +10,9 @@ export interface ToggleGroupType extends Omit<ToggleItemType, "active" | "label"
   failColor?: string;
   /** Disables the whole group. Disable individual toggles in `toggles` */
   disableGroup?: boolean;
-  /** Explainatory text that applies to the whole toggle group */
+  /** Explanatory text that applies to the whole toggle group */
   helperText?: string | ReactElement;
-  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** Removes the bottom padding. This padding is necessary if you're using the `validationMessage` */
   noBottomPadding?: boolean;

package/src/components/TooltipOptions/TooltipOptionsStyles.tsx

@@ -24,7 +24,7 @@ export const TooltipOptionText = styled(BodySSemiBold)`
 `;
 
 export const Header = styled(BodySSecondary)`
-  color: ${colors.COOL_GREY_60};
+  color: ${colors.COOL_GREY_65};
   letter-spacing: 0;
   margin-left: 13px;
   padding: 3px 0 8px;

package/src/components/UserInformationCard/UserInformationCardStyles.tsx

@@ -132,7 +132,7 @@ export const Item = styled.div<ItemProps>`
 
 export const Label = styled.span`
   font-size: 15px;
-  color: ${colors.COOL_GREY_60};
+  color: ${colors.COOL_GREY_65};
   font-weight: 600;
   width: 100%;
 `;

package/src/components/ZipCodeInput/types.ts

@@ -33,7 +33,7 @@ export interface ZipCodeInputType extends Omit<InlineZipCodeInputType, "trailing
   asteriskColor?: string;
   /** Descriptive text for your input. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** A label for your input. Not required, but strongly recommended. */
   inputLabel?: ReactNode;

package/src/configuredComponents/DescriptiveDropdownInput/DescriptiveDropdownInput.mdx

@@ -118,7 +118,7 @@ import {
 | failColor                | string                | The failed validation color.                                                                                                                             | colors.RED_100                         |
 | failColorSecondary       | string                | The failed validation color that highlights the text.                                                                                                    | colors.RED_5                           |
 | focusedColor             | string                | Focus color for the switches                                                                                                                             | colors.BLUE_5                          |
-| helperTextColor          | string                | The helper text color.                                                                                                                                   | colors.COOL_GREY_60                    |
+| helperTextColor          | string                | The helper text color.                                                                                                                                   | colors.COOL_GREY_65                    |
 | hoverBorderColor         | string                | The border color when InputButton is hovered                                                                                                             | colors.COOL_GREY_30                    |
 | inactiveBorderColor      | string                | The border color.                                                                                                                                        | colors.COOL_GREY_25                    |
 | inactiveSwitchColor      | string                | Inactive checkbox & radio color                                                                                                                          | colors.COOL_GREY_60                    |

package/src/configuredComponents/DropdownInput/types.ts

@@ -48,7 +48,7 @@ export interface DropdownInputType {
   headerFunctionLabel?: string;
   /** Descriptive text that appears below the InputButton. Keep it short & concise */
   helperText?: string | ReactElement;
-  /** The helper text color. THEME PROP: default is colors.COOL_GREY_60 */
+  /** The helper text color. THEME PROP: default is colors.COOL_GREY_65 */
   helperTextColor?: string;
   /** Hides the InputButton caret. A TrailingIcon will also hide the caret */
   hideCaret?: boolean;

package/src/configuredComponents/StatusDropdown/StatusDropdown.tsx

@@ -27,7 +27,7 @@ export const StatusDropdown: FC<StatusDropdownType> = (props) => {
           <OptionBox $numbers={numbers}>
             {numbers && (
               <Typography
-                textColor={option?.disabled ? cerebellumTheme.input.disabledColor : colors.COOL_GREY_60}
+                textColor={option?.disabled ? cerebellumTheme.input.disabledColor : colors.COOL_GREY_65}
                 variant={TextVariantEnum.BodySEmphasis}
               >
                 {index != null ? index + 1 : ""}
@@ -40,7 +40,7 @@ export const StatusDropdown: FC<StatusDropdownType> = (props) => {
             />
             <Typography
               textColor={
-                option?.disabled ? cerebellumTheme.input.disabledColor : option?.status ? colors.COOL_GREY_100 : colors.COOL_GREY_60
+                option?.disabled ? cerebellumTheme.input.disabledColor : option?.status ? colors.COOL_GREY_100 : colors.COOL_GREY_65
               }
               variant={option?.id === activeId ? TextVariantEnum.BodySSemiBold : TextVariantEnum.BodySPrimary}
             >

package/src/examples/FormGridLayout.tsx

@@ -511,7 +511,7 @@ const AddedApplicantsBase = styled.div`
   padding: 32px 10px 0px;
 `;
 const ApplicantsTableHeader = styled.div`
-  color: ${colors.COOL_GREY_60};
+  color: ${colors.COOL_GREY_65};
   display: flex;
   justify-content: space-between;
   align-items: center;

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: {
@@ -869,7 +871,7 @@ export const cerebellumTheme: DefaultTheme = {
     calendarHeaderColor: colors.COOL_GREY_5,
     disabledColor: colors.COOL_GREY_30,
     failColor: colors.RED_100,
-    helperTextColor: colors.COOL_GREY_60,
+    helperTextColor: colors.COOL_GREY_65,
     inactiveBorderColor: colors.COOL_GREY_25,
     inactiveIconColor: colors.COOL_GREY_35,
     inputHeight: 55,
@@ -958,7 +960,7 @@ export const cerebellumTheme: DefaultTheme = {
     floatingBorderRadius: 10,
     floatingShadow: "0 4px 10px 0 rgba(81,118,236,0.15)",
     mainColor: colors.BLUE_100,
-    textColor: colors.COOL_GREY_60,
+    textColor: colors.COOL_GREY_65,
     textHoverColor: colors.COOL_GREY_75,
     underlineColor: colors.COOL_GREY_20,
   },
@@ -986,7 +988,7 @@ export const cerebellumTheme: DefaultTheme = {
     borderRadius: 5,
     disabledColor: colors.COOL_GREY_30,
     failColor: colors.RED_100,
-    helperTextColor: colors.COOL_GREY_60,
+    helperTextColor: colors.COOL_GREY_65,
     iconSize: 30,
     imagePadding: 11,
     labelColor: colors.COOL_GREY_80,
@@ -1008,7 +1010,7 @@ export const cerebellumTheme: DefaultTheme = {
     disabledLabelColor: colors.COOL_GREY_30,
     failColor: colors.RED_100,
     failColorSecondary: colors.RED_5,
-    helperTextColor: colors.COOL_GREY_60,
+    helperTextColor: colors.COOL_GREY_65,
     hoverBorderColor: colors.COOL_GREY_40,
     inactiveBorderColor: colors.COOL_GREY_25,
     inputBackgroundColor: colors.WHITE,
@@ -1107,7 +1109,7 @@ export const cerebellumTheme: DefaultTheme = {
   rjsFormRenderer: {
     altRowBackgroundColor: colors.COOL_GREY_4,
     backgroundColor: colors.WHITE,
-    labelColor: colors.COOL_GREY_60,
+    labelColor: colors.COOL_GREY_65,
     paddingString: "30px 20px",
     rowBackgroundColor: colors.WHITE,
     titleColor: colors.COOL_GREY_100,
@@ -1195,10 +1197,10 @@ export const cerebellumTheme: DefaultTheme = {
     footerBackgroundColor: colors.COOL_GREY_4,
     headerFontSize: 30,
     headerMinHeight: 110,
-    helperTextColor: colors.COOL_GREY_60,
+    helperTextColor: colors.COOL_GREY_65,
     inactiveCheckmarkBgColor: colors.COOL_GREY_20,
     inactiveCheckmarkColor: colors.COOL_GREY_45,
-    inactiveTextColor: colors.COOL_GREY_60,
+    inactiveTextColor: colors.COOL_GREY_65,
   },
   switchGroup: {
     titleColor: colors.COOL_GREY_80,
@@ -1229,7 +1231,7 @@ export const cerebellumTheme: DefaultTheme = {
     highlightRowColor: colors.WHITE,
     highlightRowExtend: 0,
     highlightTipColor: "transparent",
-    inactiveHeaderColor: colors.COOL_GREY_60,
+    inactiveHeaderColor: colors.COOL_GREY_65,
     inactiveHeaderColorHover: colors.COOL_GREY_80,
     noResultsButtonColorFamily: ButtonColorFamilyEnum.Blue,
     noResultsHeaderColor: colors.COOL_GREY_90,