@cerebruminc/cerebellum 17.3.3 → 17.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/src/components/CheckboxGroup/types.ts +2 -2
  4. package/src/components/ColorPickerInput/ColorPickerInput.mdx +1 -1
  5. package/src/components/ConfigurableInput/ConfigurableInput.mdx +1 -1
  6. package/src/components/CreditCardInput/types.ts +1 -1
  7. package/src/components/CurrencyInput/types.ts +1 -1
  8. package/src/components/DatePicker/DatePicker.mdx +1 -1
  9. package/src/components/DatePicker/types.ts +1 -1
  10. package/src/components/DigitalInput/DigitalInput.mdx +1 -1
  11. package/src/components/EmailInput/types.ts +1 -1
  12. package/src/components/HorizontalTabMenu/HorizontalTabMenu.mdx +1 -1
  13. package/src/components/HorizontalTabMenu/types.ts +1 -1
  14. package/src/components/ImagePicker/ImagePicker.mdx +1 -1
  15. package/src/components/InlineInput/types.ts +1 -1
  16. package/src/components/Input/types.ts +1 -1
  17. package/src/components/PhoneInput/types.ts +1 -1
  18. package/src/components/RJSForm/RJSFormStyles.tsx +2 -2
  19. package/src/components/RJSFormRenderer/RJSFormRenderer.mdx +1 -1
  20. package/src/components/RadioGroup/types.ts +2 -2
  21. package/src/components/SearchMenu/SearchMenu.tsx +1 -1
  22. package/src/components/SsnInput/types.ts +1 -1
  23. package/src/components/Stepper/Stepper.mdx +3 -3
  24. package/src/components/Table/types.ts +2 -2
  25. package/src/components/Textarea/types.ts +1 -1
  26. package/src/components/ToggleGroup/types.ts +2 -2
  27. package/src/components/TooltipOptions/TooltipOptionsStyles.tsx +1 -1
  28. package/src/components/UserInformationCard/UserInformationCardStyles.tsx +1 -1
  29. package/src/components/ZipCodeInput/types.ts +1 -1
  30. package/src/configuredComponents/DescriptiveDropdownInput/DescriptiveDropdownInput.mdx +1 -1
  31. package/src/configuredComponents/DropdownInput/types.ts +1 -1
  32. package/src/configuredComponents/StatusDropdown/StatusDropdown.tsx +2 -2
  33. package/src/examples/FormGridLayout.tsx +1 -1
  34. package/src/theme.ts +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # react-component-lib-boilerplate
2
2
 
3
+ ## [17.3.4](https://github.com/cerebruminc/cerebellum/compare/v17.3.3...v17.3.4) (2026-06-17)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * **text:** update text color defaults from COOL_GREY_60 to COOL_GREY_65 for WCAG AA compliance ([519ec47](https://github.com/cerebruminc/cerebellum/commit/519ec4771cee58a17b68948fe8ffa38dd4eb4dd6))
9
+
3
10
  ## [17.3.3](https://github.com/cerebruminc/cerebellum/compare/v17.3.2...v17.3.3) (2026-06-17)
4
11
 
5
12
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerebruminc/cerebellum",
3
- "version": "17.3.3",
3
+ "version": "17.3.4",
4
4
  "description": "Cerebrum's React Component Library",
5
5
  "type": "module",
6
6
  "main": "src/index.ts",
package/src/components/CheckboxGroup/types.ts CHANGED
@@ -17,9 +17,9 @@ export interface CheckboxGroupType extends Omit<CheckboxItemType, "active" | "di
17
17
  disableGroup?: boolean;
18
18
  /** The failed validation color. THEME PROP: default is colors.RED_100 */
19
19
  failColor?: string;
20
- /** Small explainatory text that applies to the whole checkbox group. It appears under the label */
20
+ /** Small explanatory text that applies to the whole checkbox group. It appears under the label */
21
21
  helperText?: string | ReactElement;
22
- /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
22
+ /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
23
23
  helperTextColor?: string;
24
24
  /** The label for CheckboxGroup. Not required, but strongly recommended */
25
25
  label?: ReactNode;
package/src/components/ColorPickerInput/ColorPickerInput.mdx CHANGED
@@ -52,7 +52,7 @@ If you need to override the theme, these props are available through `themeOverr
52
52
  | disabledColor | string | Text color when input is disabled | colors.COOL_GREY_30 |
53
53
  | failColor | string | Border color when validation fails | colors.RED_100 |
54
54
  | failColorSecondary | string | Secondary color for validation failure states | colors.RED_5 |
55
- | helperTextColor | string | Color of helper text and legibility messages | colors.COOL_GREY_60 |
55
+ | helperTextColor | string | Color of helper text and legibility messages | colors.COOL_GREY_65 |
56
56
  | hoverBorderColor | string | Border color when input is hovered | colors.COOL_GREY_40 |
57
57
  | inactiveBorderColor | string | Border color when input is inactive | colors.COOL_GREY_25 |
58
58
  | inputBackgroundColor | string | Background color of the input | colors.WHITE |
package/src/components/ConfigurableInput/ConfigurableInput.mdx CHANGED
@@ -85,7 +85,7 @@ import { ConfigurableInput, ConfigurableInputType, MaskedRadioType } from "@cere
85
85
  | focusedRadioColor | string | Color of the shadow when a radio is focused | colors.BLUE_5 |
86
86
  | failColor | string | The failed validation color. | colors.RED_100 |
87
87
  | failColorSecondary | string | The failed validation color that highlights the input text | colors.RED_5 |
88
- | helperTextColor | string | The helper text color. | colors.COOL_GREY_60 |
88
+ | helperTextColor | string | The helper text color. | colors.COOL_GREY_65 |
89
89
  | hoverBorderColor | string | The input border color, on hover | colors.COOL_GREY_40 |
90
90
  | inactiveBorderColor | string | The input border color | colors.COOL_GREY_25 |
91
91
  | inactiveRadioColor | string | The inactive radio color | colors.COOL_GREY_60 |
package/src/components/CreditCardInput/types.ts CHANGED
@@ -6,7 +6,7 @@ export interface CreditCardInputType extends Omit<InlineCreditCardInputType, "tr
6
6
  asteriskColor?: string;
7
7
  /** Descriptive text for your input. Keep it short & concise */
8
8
  helperText?: string | ReactElement;
9
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
9
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
10
10
  helperTextColor?: string;
11
11
  /** A label for your input. Not required, but strongly recommended. */
12
12
  inputLabel?: ReactNode;
package/src/components/CurrencyInput/types.ts CHANGED
@@ -6,7 +6,7 @@ export interface CurrencyInputType extends Omit<InlineCurrencyInputType, "traili
6
6
  asteriskColor?: string;
7
7
  /** Descriptive text for your input. Keep it short & concise */
8
8
  helperText?: string | ReactElement;
9
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
9
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
10
10
  helperTextColor?: string;
11
11
  /** A label for your input. Not required, but strongly recommended. */
12
12
  inputLabel?: ReactNode;
package/src/components/DatePicker/DatePicker.mdx CHANGED
@@ -72,7 +72,7 @@ DatePicker supports theme styling. You can pass the following props individually
72
72
  | calendarHeaderColor | string | Calendar header color, and hover date color | colors.COOL_GREY_5 |
73
73
  | disabledColor | string | If `disabled`, then everything turns this color | colors.COOL_GREY_30 |
74
74
  | failColor | string | The failed validation color | colors.RED_100 |
75
- | helperTextColor | string | The helper text color | colors.COOL_GREY_60 |
75
+ | helperTextColor | string | The helper text color | colors.COOL_GREY_65 |
76
76
  | inactiveBorderColor | string | The border color | colors.COOL_GREY_25 |
77
77
  | inactiveIconColor | string | The icon color | colors.COOL_GREY_35 |
78
78
  | inputHeight | number | The input height, not counting the label, in pixels | 55 |
package/src/components/DatePicker/types.ts CHANGED
@@ -85,7 +85,7 @@ export type DatePickerType = InlineDatePickerProps & {
85
85
  asteriskColor?: string;
86
86
  /** Descriptive text for your input. Keep it short & concise */
87
87
  helperText?: string | ReactElement;
88
- /** The helper text color. Set by the theme, defaults to colors.COOL_GREY_60 */
88
+ /** The helper text color. Set by the theme, defaults to colors.COOL_GREY_65 */
89
89
  helperTextColor?: string;
90
90
  /** A label for your input. Not required, but strongly recommended. */
91
91
  inputLabel?: ReactNode;
package/src/components/DigitalInput/DigitalInput.mdx CHANGED
@@ -89,7 +89,7 @@ If you need to override the theme, these props are available through `themeOverr
89
89
  | disabledColor | string | If `disabled`, then everything turns this color | colors.COOL_GREY_30 |
90
90
  | disabledBorderColor | string | If `disabled`, then the border turns this color | colors.COOL_GREY_25 |
91
91
  | failColor | string | The failed validation color | colors.RED_100 |
92
- | helperTextColor | string | The color for the helper text | colors.COOL_GREY_60 |
92
+ | helperTextColor | string | The color for the helper text | colors.COOL_GREY_65 |
93
93
  | hoverBorderColor | string | The border color, on hover | colors.COOL_GREY_40 |
94
94
  | inactiveBorderColor | string | The border color | colors.COOL_GREY_25 |
95
95
  | inputBackgroundColor | string | The input&#39;s background color | colors.WHITE |
package/src/components/EmailInput/types.ts CHANGED
@@ -6,7 +6,7 @@ export interface EmailInputType extends InlineEmailInputType {
6
6
  asteriskColor?: string;
7
7
  /** Descriptive text for your input. Keep it short & concise */
8
8
  helperText?: string | ReactElement;
9
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
9
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
10
10
  helperTextColor?: string;
11
11
  /** A label for your input. Not required, but strongly recommended. */
12
12
  inputLabel?: ReactNode;
package/src/components/HorizontalTabMenu/HorizontalTabMenu.mdx CHANGED
@@ -105,7 +105,7 @@ If you update `options` to change the tabs contents (ie, change a label's text),
105
105
  | mainColor | string | The highlight color for active menu items. | BLUE_100 |
106
106
  | menuPaddingString | string | Padding for the HorizontalTabMenu | 4px 0 0 0 |
107
107
  | minTabWidth | number | Sets a minimum tab width. Useful for numerical tab labels | -- |
108
- | textColor | string | Text color for inactive menu items. | COOL_GREY_60 |
108
+ | textColor | string | Text color for inactive menu items. | COOL_GREY_65 |
109
109
  | textHoverColor | string | Text color for inactive menu items when hovered. | COOL_GREY_75 |
110
110
  | underlineColor | string | Color for the underline, when `floating: false`. | COOL_GREY_20 |
111
111
 
package/src/components/HorizontalTabMenu/types.ts CHANGED
@@ -31,7 +31,7 @@ export interface HorizontalTabMenuType {
31
31
  preventClick?: boolean;
32
32
  /** The space between the tabs, in pixels */
33
33
  spaceBetweenTabs?: number;
34
- /** Text color for inactive menu items. THEME PROP: default is colors.COOL_GREY_60 */
34
+ /** Text color for inactive menu items. THEME PROP: default is colors.COOL_GREY_65 */
35
35
  textColor?: string;
36
36
  /** Text color for inactive menu items when hovered. THEME PROP: default is colors.COOL_GREY_75 */
37
37
  textHoverColor?: string;
package/src/components/ImagePicker/ImagePicker.mdx CHANGED
@@ -127,7 +127,7 @@ If you need to override the theme, these props are available through `themeOverr
127
127
  | borderRadius | number | The outline box border radius, in pixels | 5 |
128
128
  | disabledColor | string | The label and helperText when disabled | colors.COOL_GREY_30 |
129
129
  | failColor | string | The failed validation color | colors.RED_100 |
130
- | helperTextColor | string | The helper text color. | colors.COOL_GREY_60 |
130
+ | helperTextColor | string | The helper text color. | colors.COOL_GREY_65 |
131
131
  | labelColor | string | The image label color. | colors.COOL_GREY_80 |
132
132
  | placeholderCircleColor | string | The color for the placeholder circle | colors.BLUE_100 |
133
133
  | placeholderIconHeight | number | The height for the placeholder icon | 95px |
package/src/components/InlineInput/types.ts CHANGED
@@ -128,7 +128,7 @@ export interface InlineInputType {
128
128
  textFontSize?: number;
129
129
  /** The trailing icon's color. Only used if passing an icon component from Cerebellum. THEME PROP: default is colors.COOL_GREY_60 */
130
130
  trailingIconColor?: string;
131
- /** The trailing text color. THEME PROP: default is colors.COOL_GREY_60 */
131
+ /** The trailing text color. THEME PROP: default is colors.COOL_GREY_65 */
132
132
  trailingTextColor?: string;
133
133
  }
134
134
 
package/src/components/Input/types.ts CHANGED
@@ -6,7 +6,7 @@ export interface InputType extends InlineInputType {
6
6
  asteriskColor?: string;
7
7
  /** Descriptive text for your input. Keep it short & concise */
8
8
  helperText?: string | ReactElement;
9
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
9
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
10
10
  helperTextColor?: string;
11
11
  /** A label for your input. Not required, but strongly recommended. */
12
12
  inputLabel?: ReactNode;
package/src/components/PhoneInput/types.ts CHANGED
@@ -6,7 +6,7 @@ export interface PhoneInputType extends Omit<InlinePhoneInputType, "trailingText
6
6
  asteriskColor?: string;
7
7
  /** Descriptive text for your input. Keep it short & concise */
8
8
  helperText?: string | ReactElement;
9
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
9
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
10
10
  helperTextColor?: string;
11
11
  /** A label for your input. Not required, but strongly recommended. */
12
12
  inputLabel?: ReactNode;
package/src/components/RJSForm/RJSFormStyles.tsx CHANGED
@@ -78,10 +78,10 @@ export const RJSTitleBox = styled.div<RJSTitleBoxProps>`
78
78
  `;
79
79
 
80
80
  const ValueLabel = styled.span<{ $isDefault?: boolean }>`
81
- color: ${({ $isDefault }) => ($isDefault ? colors.COOL_GREY_60 : colors.BLUE_60)};
81
+ color: ${({ $isDefault }) => ($isDefault ? colors.COOL_GREY_65 : colors.BLUE_60)};
82
82
  font-size: 15px;
83
83
  cursor: ${({ $isDefault }) => ($isDefault ? "default" : "pointer")};
84
- text-decoration: ${({ $isDefault }) => ($isDefault ? "default" : "underline")};
84
+ text-decoration: ${({ $isDefault }) => ($isDefault ? "none" : "underline")};
85
85
  `;
86
86
 
87
87
  const FlexListItem = styled.li`
package/src/components/RJSFormRenderer/RJSFormRenderer.mdx CHANGED
@@ -56,7 +56,7 @@ If you need to override the theme, these props are available through `themeOverr
56
56
  | --------------------- | ------ | ------------------------------------------------- | -------------------- |
57
57
  | altRowBackgroundColor | string | The background color of the odd rows | colors.COOL_GREY_4 |
58
58
  | backgroundColor | string | The background color of the surrounding component | colors.WHITE |
59
- | labelColor | string | The color for the label | colors.COOL_GREY_60 |
59
+ | labelColor | string | The color for the label | colors.COOL_GREY_65 |
60
60
  | paddingString | string | The padding value for the surrounding component | "30px 20px" |
61
61
  | rowBackgroundColor | string | The background color of the even rows | colors.WHITE |
62
62
  | titleColor | string | The color of the component title | colors.COOL_GREY_100 |
package/src/components/RadioGroup/types.ts CHANGED
@@ -11,9 +11,9 @@ export interface RadioGroupType extends Omit<RadioItemType, "active" | "disabled
11
11
  disableGroup?: boolean;
12
12
  /** The failed validation color. THEME PROP: default is colors.RED_100 */
13
13
  failColor?: string;
14
- /** Explainatory text that applies to the whole radio group */
14
+ /** Explanatory text that applies to the whole radio group */
15
15
  helperText?: string | ReactElement;
16
- /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
16
+ /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
17
17
  helperTextColor?: string;
18
18
  /** Defines if the orientation is horizontal or vertical. */
19
19
  horizontal?: boolean;
package/src/components/SearchMenu/SearchMenu.tsx CHANGED
@@ -193,7 +193,7 @@ export const SearchMenu: FC<SearchMenuType> = ({
193
193
  <Menu ref={innerRef} $backgroundColor={backgroundColor} $borderRadius={borderRadius} $boxShadow={boxShadow}>
194
194
  {displayHeader && (
195
195
  <Header data-testid="searchMenu_header">
196
- <HeaderTitle $textColor={colors.COOL_GREY_60}>
196
+ <HeaderTitle $textColor={colors.COOL_GREY_65}>
197
197
  <Truncate sentryUnmask>{headerTitle}</Truncate>
198
198
  </HeaderTitle>
199
199
  {headerFunction && (
package/src/components/SsnInput/types.ts CHANGED
@@ -36,7 +36,7 @@ export interface SsnInputType extends Omit<InlineSsnInputType, "trailingTextColo
36
36
  asteriskColor?: string;
37
37
  /** Descriptive text for your input. Keep it short & concise */
38
38
  helperText?: string | ReactElement;
39
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
39
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
40
40
  helperTextColor?: string;
41
41
  /** A label for your input. Not required, but strongly recommended. */
42
42
  inputLabel?: ReactNode;
package/src/components/Stepper/Stepper.mdx CHANGED
@@ -48,10 +48,10 @@ If you need to override the theme, these props are available through `themeOverr
48
48
  | footerBackgroundColor | string | Footer background color | colors.COOL_GREY_4 |
49
49
  | headerFontSize | number | The header main text's font size, in pixels | 30 |
50
50
  | headerMinHeight | number | The header's minimum height, in pixels | 110 |
51
- | helperText | string | The helperText text color | colors.COOL_GREY_60 |
52
- | inactiveCheckmarkBgColor | string | The future completed steps` checkmark backgroun color | colors.COOL_GREY_20 |
51
+ | helperTextColor | string | The helperText text color | colors.COOL_GREY_65 |
52
+ | inactiveCheckmarkBgColor | string | The future completed steps` checkmark background color | colors.COOL_GREY_20 |
53
53
  | inactiveCheckmarkColor | string | The future completed steps` checkmark color | colors.COOL_GREY_45 |
54
- | inactiveTextColor | string | The future/disabled steps` text color | colors.COOL_GREY_60 |
54
+ | inactiveTextColor | string | The future/disabled steps` text color | colors.COOL_GREY_65 |
55
55
 
56
56
  ### CompletedStepsType
57
57
 
package/src/components/Table/types.ts CHANGED
@@ -153,9 +153,9 @@ export interface TableType {
153
153
  highlightRowExtend?: number;
154
154
  /** The color of the rightmost tip of the highlighted row. THEME PROP: Defaults to transparent. */
155
155
  highlightTipColor?: string;
156
- /** The header text color when it is not the sorting column. THEME PROP: default is colors.COOL_GREY_60 */
156
+ /** The header text color when it is not the sorting column. THEME PROP: default is colors.COOL_GREY_65 */
157
157
  inactiveHeaderColor?: string;
158
- /** The header text color when hovered and it is not the sorting column. THEME PROP: default is colors.COOL_GREY_60 */
158
+ /** The header text color when hovered and it is not the sorting column. THEME PROP: default is colors.COOL_GREY_80 */
159
159
  inactiveHeaderColorHover?: string;
160
160
  /** The color family for the no results button. THEME PROP: default is ButtonColorFamilyEnum.Blue */
161
161
  noResultsButtonColorFamily?: ButtonColorFamilyEnum;
package/src/components/Textarea/types.ts CHANGED
@@ -76,7 +76,7 @@ export interface TextareaType extends Omit<InlineTextareaType, "textareaRef" | "
76
76
 
77
77
  /** The required asterisk color. THEME PROP: default is BLUE_70 */
78
78
  asteriskColor?: string;
79
- /** The helper text color. THEME PROP: default is COOL_GREY_60 */
79
+ /** The helper text color. THEME PROP: default is COOL_GREY_65 */
80
80
  helperTextColor?: string;
81
81
  /** The label color. THEME PROP: default is COOL_GREY_80 */
82
82
  labelColor?: string;
package/src/components/ToggleGroup/types.ts CHANGED
@@ -10,9 +10,9 @@ export interface ToggleGroupType extends Omit<ToggleItemType, "active" | "label"
10
10
  failColor?: string;
11
11
  /** Disables the whole group. Disable individual toggles in `toggles` */
12
12
  disableGroup?: boolean;
13
- /** Explainatory text that applies to the whole toggle group */
13
+ /** Explanatory text that applies to the whole toggle group */
14
14
  helperText?: string | ReactElement;
15
- /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_60 */
15
+ /** The color for the helper text. THEME PROP: default is colors.COOL_GREY_65 */
16
16
  helperTextColor?: string;
17
17
  /** Removes the bottom padding. This padding is necessary if you're using the `validationMessage` */
18
18
  noBottomPadding?: boolean;
package/src/components/TooltipOptions/TooltipOptionsStyles.tsx CHANGED
@@ -24,7 +24,7 @@ export const TooltipOptionText = styled(BodySSemiBold)`
24
24
  `;
25
25
 
26
26
  export const Header = styled(BodySSecondary)`
27
- color: ${colors.COOL_GREY_60};
27
+ color: ${colors.COOL_GREY_65};
28
28
  letter-spacing: 0;
29
29
  margin-left: 13px;
30
30
  padding: 3px 0 8px;
package/src/components/UserInformationCard/UserInformationCardStyles.tsx CHANGED
@@ -132,7 +132,7 @@ export const Item = styled.div<ItemProps>`
132
132
 
133
133
  export const Label = styled.span`
134
134
  font-size: 15px;
135
- color: ${colors.COOL_GREY_60};
135
+ color: ${colors.COOL_GREY_65};
136
136
  font-weight: 600;
137
137
  width: 100%;
138
138
  `;
package/src/components/ZipCodeInput/types.ts CHANGED
@@ -33,7 +33,7 @@ export interface ZipCodeInputType extends Omit<InlineZipCodeInputType, "trailing
33
33
  asteriskColor?: string;
34
34
  /** Descriptive text for your input. Keep it short & concise */
35
35
  helperText?: string | ReactElement;
36
- /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_60 */
36
+ /** The helper text color. Also used for trailing text. THEME PROP: default is colors.COOL_GREY_65 */
37
37
  helperTextColor?: string;
38
38
  /** A label for your input. Not required, but strongly recommended. */
39
39
  inputLabel?: ReactNode;
package/src/configuredComponents/DescriptiveDropdownInput/DescriptiveDropdownInput.mdx CHANGED
@@ -118,7 +118,7 @@ import {
118
118
  | failColor | string | The failed validation color. | colors.RED_100 |
119
119
  | failColorSecondary | string | The failed validation color that highlights the text. | colors.RED_5 |
120
120
  | focusedColor | string | Focus color for the switches | colors.BLUE_5 |
121
- | helperTextColor | string | The helper text color. | colors.COOL_GREY_60 |
121
+ | helperTextColor | string | The helper text color. | colors.COOL_GREY_65 |
122
122
  | hoverBorderColor | string | The border color when InputButton is hovered | colors.COOL_GREY_30 |
123
123
  | inactiveBorderColor | string | The border color. | colors.COOL_GREY_25 |
124
124
  | inactiveSwitchColor | string | Inactive checkbox & radio color | colors.COOL_GREY_60 |
package/src/configuredComponents/DropdownInput/types.ts CHANGED
@@ -48,7 +48,7 @@ export interface DropdownInputType {
48
48
  headerFunctionLabel?: string;
49
49
  /** Descriptive text that appears below the InputButton. Keep it short & concise */
50
50
  helperText?: string | ReactElement;
51
- /** The helper text color. THEME PROP: default is colors.COOL_GREY_60 */
51
+ /** The helper text color. THEME PROP: default is colors.COOL_GREY_65 */
52
52
  helperTextColor?: string;
53
53
  /** Hides the InputButton caret. A TrailingIcon will also hide the caret */
54
54
  hideCaret?: boolean;
package/src/configuredComponents/StatusDropdown/StatusDropdown.tsx CHANGED
@@ -27,7 +27,7 @@ export const StatusDropdown: FC<StatusDropdownType> = (props) => {
27
27
  <OptionBox $numbers={numbers}>
28
28
  {numbers && (
29
29
  <Typography
30
- textColor={option?.disabled ? cerebellumTheme.input.disabledColor : colors.COOL_GREY_60}
30
+ textColor={option?.disabled ? cerebellumTheme.input.disabledColor : colors.COOL_GREY_65}
31
31
  variant={TextVariantEnum.BodySEmphasis}
32
32
  >
33
33
  {index != null ? index + 1 : ""}
@@ -40,7 +40,7 @@ export const StatusDropdown: FC<StatusDropdownType> = (props) => {
40
40
  />
41
41
  <Typography
42
42
  textColor={
43
- option?.disabled ? cerebellumTheme.input.disabledColor : option?.status ? colors.COOL_GREY_100 : colors.COOL_GREY_60
43
+ option?.disabled ? cerebellumTheme.input.disabledColor : option?.status ? colors.COOL_GREY_100 : colors.COOL_GREY_65
44
44
  }
45
45
  variant={option?.id === activeId ? TextVariantEnum.BodySSemiBold : TextVariantEnum.BodySPrimary}
46
46
  >
package/src/examples/FormGridLayout.tsx CHANGED
@@ -511,7 +511,7 @@ const AddedApplicantsBase = styled.div`
511
511
  padding: 32px 10px 0px;
512
512
  `;
513
513
  const ApplicantsTableHeader = styled.div`
514
- color: ${colors.COOL_GREY_60};
514
+ color: ${colors.COOL_GREY_65};
515
515
  display: flex;
516
516
  justify-content: space-between;
517
517
  align-items: center;
package/src/theme.ts CHANGED
@@ -871,7 +871,7 @@ export const cerebellumTheme: DefaultTheme = {
871
871
  calendarHeaderColor: colors.COOL_GREY_5,
872
872
  disabledColor: colors.COOL_GREY_30,
873
873
  failColor: colors.RED_100,
874
- helperTextColor: colors.COOL_GREY_60,
874
+ helperTextColor: colors.COOL_GREY_65,
875
875
  inactiveBorderColor: colors.COOL_GREY_25,
876
876
  inactiveIconColor: colors.COOL_GREY_35,
877
877
  inputHeight: 55,
@@ -960,7 +960,7 @@ export const cerebellumTheme: DefaultTheme = {
960
960
  floatingBorderRadius: 10,
961
961
  floatingShadow: "0 4px 10px 0 rgba(81,118,236,0.15)",
962
962
  mainColor: colors.BLUE_100,
963
- textColor: colors.COOL_GREY_60,
963
+ textColor: colors.COOL_GREY_65,
964
964
  textHoverColor: colors.COOL_GREY_75,
965
965
  underlineColor: colors.COOL_GREY_20,
966
966
  },
@@ -988,7 +988,7 @@ export const cerebellumTheme: DefaultTheme = {
988
988
  borderRadius: 5,
989
989
  disabledColor: colors.COOL_GREY_30,
990
990
  failColor: colors.RED_100,
991
- helperTextColor: colors.COOL_GREY_60,
991
+ helperTextColor: colors.COOL_GREY_65,
992
992
  iconSize: 30,
993
993
  imagePadding: 11,
994
994
  labelColor: colors.COOL_GREY_80,
@@ -1010,7 +1010,7 @@ export const cerebellumTheme: DefaultTheme = {
1010
1010
  disabledLabelColor: colors.COOL_GREY_30,
1011
1011
  failColor: colors.RED_100,
1012
1012
  failColorSecondary: colors.RED_5,
1013
- helperTextColor: colors.COOL_GREY_60,
1013
+ helperTextColor: colors.COOL_GREY_65,
1014
1014
  hoverBorderColor: colors.COOL_GREY_40,
1015
1015
  inactiveBorderColor: colors.COOL_GREY_25,
1016
1016
  inputBackgroundColor: colors.WHITE,
@@ -1109,7 +1109,7 @@ export const cerebellumTheme: DefaultTheme = {
1109
1109
  rjsFormRenderer: {
1110
1110
  altRowBackgroundColor: colors.COOL_GREY_4,
1111
1111
  backgroundColor: colors.WHITE,
1112
- labelColor: colors.COOL_GREY_60,
1112
+ labelColor: colors.COOL_GREY_65,
1113
1113
  paddingString: "30px 20px",
1114
1114
  rowBackgroundColor: colors.WHITE,
1115
1115
  titleColor: colors.COOL_GREY_100,
@@ -1197,10 +1197,10 @@ export const cerebellumTheme: DefaultTheme = {
1197
1197
  footerBackgroundColor: colors.COOL_GREY_4,
1198
1198
  headerFontSize: 30,
1199
1199
  headerMinHeight: 110,
1200
- helperTextColor: colors.COOL_GREY_60,
1200
+ helperTextColor: colors.COOL_GREY_65,
1201
1201
  inactiveCheckmarkBgColor: colors.COOL_GREY_20,
1202
1202
  inactiveCheckmarkColor: colors.COOL_GREY_45,
1203
- inactiveTextColor: colors.COOL_GREY_60,
1203
+ inactiveTextColor: colors.COOL_GREY_65,
1204
1204
  },
1205
1205
  switchGroup: {
1206
1206
  titleColor: colors.COOL_GREY_80,
@@ -1231,7 +1231,7 @@ export const cerebellumTheme: DefaultTheme = {
1231
1231
  highlightRowColor: colors.WHITE,
1232
1232
  highlightRowExtend: 0,
1233
1233
  highlightTipColor: "transparent",
1234
- inactiveHeaderColor: colors.COOL_GREY_60,
1234
+ inactiveHeaderColor: colors.COOL_GREY_65,
1235
1235
  inactiveHeaderColorHover: colors.COOL_GREY_80,
1236
1236
  noResultsButtonColorFamily: ButtonColorFamilyEnum.Blue,
1237
1237
  noResultsHeaderColor: colors.COOL_GREY_90,