@cerebruminc/cerebellum 17.3.6 → 17.3.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.3.7](https://github.com/cerebruminc/cerebellum/compare/v17.3.6...v17.3.7) (2026-06-23)
+
+
+### Bug Fixes
+
+* **upload-dropzone:** increase contrast in UploadDropzone ([ca12fb3](https://github.com/cerebruminc/cerebellum/commit/ca12fb3e092138e49580e00d901dd3dc8a29bd58))
+
 ## [17.3.6](https://github.com/cerebruminc/cerebellum/compare/v17.3.5...v17.3.6) (2026-06-22)
 
 

package/package.json

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

package/src/components/UploadDropzone/UploadDropzone.test.tsx

@@ -1,9 +1,11 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { act } from "react-dom/test-utils";
+import { contrast } from "../../helpers/accessibility";
 import { noop } from "../../helpers/utils";
-import { FileTypeEnum } from "../../sharedTypes/enums";
 import { withTheme } from "../../hocs/withTheme";
+import { FileTypeEnum } from "../../sharedTypes/enums";
+import { cerebellumTheme } from "../../theme";
 import { UploadDropzone } from "./UploadDropzone";
 
 const ThemedUploadDropzone = withTheme(UploadDropzone);
@@ -70,3 +72,40 @@ describe("UploadDropzone", () => {
     expect(await screen.findByText("ping.json - Invalid file type")).toBeInTheDocument();
   });
 });
+
+describe("UploadDropzone color contrast (WCAG 2.1 AA)", () => {
+  const WCAG_AA_TEXT = 4.5;
+
+  // Source directly from the theme so these tests catch regressions in
+  // both the token values and the theme wiring (e.g. textColor, secondaryText).
+  const textColor = cerebellumTheme.uploadDropzone.textColor;
+
+  const colorFamilyPairs = [
+    {
+      family: "Purple",
+      accent: cerebellumTheme.colorFamilies.PURPLE.secondaryText!,
+      background: cerebellumTheme.colorFamilies.PURPLE.light,
+    },
+    {
+      family: "Blue",
+      accent: cerebellumTheme.colorFamilies.BLUE.secondaryText!,
+      background: cerebellumTheme.colorFamilies.BLUE.light,
+    },
+    {
+      family: "Red",
+      accent: cerebellumTheme.colorFamilies.RED.secondaryText!,
+      background: cerebellumTheme.colorFamilies.RED.light,
+    },
+  ];
+
+  test.each(colorFamilyPairs)("$family: body text (COOL_GREY_70) achieves >= 4.5:1 contrast against light background", ({ background }) => {
+    expect(contrast(textColor, background)).toBeGreaterThanOrEqual(WCAG_AA_TEXT);
+  });
+
+  test.each(colorFamilyPairs)(
+    "$family: accent color (secondaryText) achieves >= 4.5:1 contrast against light background",
+    ({ accent, background }) => {
+      expect(contrast(accent, background)).toBeGreaterThanOrEqual(WCAG_AA_TEXT);
+    }
+  );
+});

package/src/components/UploadDropzone/UploadDropzone.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useTheme } from "styled-components";
 
+import { colors } from "../../const/colors";
 import { CloseCircle, File, FileComplete, FileError as FileErrorIcon, UploadDocument } from "../Icons";
 import { TextLink } from "../TextLink";
-import { colors } from "../../const/colors";
 import {
   DropZoneContainer,
   DropzoneBox,
@@ -22,13 +22,13 @@ import {
 import { DropzoneColorFamilyEnum, FileError, UploadDropzoneType } from "./types";
 
 import { FileRejection, useDropzone } from "react-dropzone";
-import { Truncate } from "../Truncate";
 import { formatBytesToString } from "../../helpers/numbers";
 import useMeasure from "../../hooks/useMeasure";
 import { showLabel } from "../../sharedHelpers/showLabel";
 import { Asterisk, LabelBox, ValidationText } from "../../sharedStyle/Inputs";
 import { TextStyleEnum } from "../../sharedTypes/enums";
 import { ASTERISK_OFFSET_SPACE } from "../Input/helpers";
+import { Truncate } from "../Truncate";
 import { TextVariantEnum, Typography } from "../Typography";
 import { createAcceptObject, defaultDescripion } from "./helpers";
 
@@ -57,6 +57,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
   const theme = useTheme();
   const { colorFamilies } = theme;
   const colorGroup = colorFamilyOverride || colorFamilies[dropzoneColorFamily || DropzoneColorFamilyEnum.Purple];
+  const accentColor = colorGroup.secondaryText || colorGroup.main;
   const acceptObject = createAcceptObject(acceptedFileTypes);
 
   const [errorSummary, setErrorSummary] = useState<Array<FileError>>([]);
@@ -186,7 +187,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
           {displayFileInline && !multipleFileUploads && errorSummary?.[0] ? (
             <InlineFileItemBox>
               <InlineIconBox>
-                {errorSummary.length > 0 ? <FileErrorIcon fill={theme.input.failColor} /> : <FileComplete fill={colorGroup.hover} />}
+                {errorSummary.length > 0 ? <FileErrorIcon fill={theme.input.failColor} /> : <FileComplete fill={accentColor} />}
               </InlineIconBox>
               <InlineFileTextBox>
                 <Truncate>{errorSummary?.[0]?.name}</Truncate>
@@ -210,12 +211,11 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
               <UploadIconBox>
                 <UploadDocument
                   boxColor={disabled ? theme?.uploadDropzone?.disabledColorLight : colorGroup.medium}
-                  fill={disabled ? theme.uploadDropzone.disabledColorDark : colorGroup.hover}
+                  fill={disabled ? theme.uploadDropzone.disabledColorDark : accentColor}
                 />
               </UploadIconBox>
               <TextSection $disabled={disabled} $isDragging={isDragActive} $themeOverride={themeOverride}>
-                {description ||
-                  defaultDescripion(disabled ? theme.uploadDropzone.disabledColorText : colorGroup.hover, acceptObject, disabled)}
+                {description || defaultDescripion(disabled ? theme.uploadDropzone.disabledColorText : accentColor, acceptObject, disabled)}
               </TextSection>
             </>
           )}
@@ -237,7 +237,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
           {fileList.map((item, idx) => (
             <FileItemBox key={`fileitem_${item?.name}_${idx}`}>
               <ItemIconBox>
-                <File fill={colorGroup.hover} />
+                <File fill={accentColor} />
               </ItemIconBox>
               <Truncate>{item.name}</Truncate>
               <RightAligned>

package/src/theme.ts

@@ -806,6 +806,7 @@ export const cerebellumTheme: DefaultTheme = {
       main: colors.PURPLE_55,
       hover: colors.PURPLE_70,
       text: colors.WHITE,
+      secondaryText: colors.PURPLE_75,
     },
     RED: {
       light: colors.RED_5,
@@ -1332,7 +1333,7 @@ export const cerebellumTheme: DefaultTheme = {
     listDeleteColor: colors.BLUE_100,
     minHeight: 180,
     paddingString: "37px 26px 32px 26px",
-    textColor: "#767689",
+    textColor: colors.COOL_GREY_70,
   },
   userCard: {
     avatarBackgroundColor: colors.BLUE_55,