Use CSS color-mix functionality to calculate color scales

This allows completely removing the chroma.js dependency.

Author: grubersjoe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-activity-calendar",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "description": "React component to display activity data in calendar",
   "author": "Jonathan Gruber <gruberjonathan@gmail.com>",
   "license": "MIT",
@@ -28,8 +28,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "@types/chroma-js": "^2.4.3",
-    "chroma-js": "^3.1.1",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
@@ -41,6 +39,8 @@
     "@emotion/styled": "^11.11.5",
     "@eslint/compat": "^1.1.0",
     "@eslint/js": "^9.11.1",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
     "@mui/material": "^6.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -55,7 +55,6 @@
     "@storybook/theming": "^8.3.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/jest": "^29.5.13",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 'use client';
 
-import chroma from 'chroma-js';
 import { getYear, parseISO } from 'date-fns';
 import {
   type CSSProperties,
@@ -17,7 +16,6 @@ import styles from '../styles/styles.module.css';
 import type {
   Activity,
   BlockElement,
-  Color,
   DayIndex,
   DayName,
   EventHandlerMap,
@@ -392,15 +390,14 @@ const ActivityCalendar = forwardRef<HTMLElement, Props>(
 
     const { width, height } = getDimensions();
 
-    const zeroColor = colorScale[0] as Color;
     const containerStyles = {
       fontSize,
       ...(useAnimation && {
-        [`--${NAMESPACE}-loading`]: zeroColor,
+        [`--${NAMESPACE}-loading`]: colorScale[0],
         [`--${NAMESPACE}-loading-active`]:
           colorScheme === 'light'
-            ? chroma(zeroColor).darken(0.3).hex()
-            : chroma(zeroColor).brighten(0.25).hex(),
+            ? `oklab(from ${colorScale[0]} calc(l * 0.96) a b)`
+            : `oklab(from ${colorScale[0]} calc(l * 1.06) a b)`,
       }),
     };
 

src/component/ActivityCalendar.tsx

@@ -42,12 +42,12 @@ export interface Theme {
 // Require that at least one color scheme is passed.
 export type ThemeInput =
   | {
-      light: ColorScale | [from: Color, to: Color];
-      dark?: ColorScale | [from: Color, to: Color];
+      light: ColorScale;
+      dark?: ColorScale;
     }
   | {
-      light?: ColorScale | [from: Color, to: Color];
-      dark: ColorScale | [from: Color, to: Color];
+      light?: ColorScale;
+      dark: ColorScale;
     };
 
 interface BlockAttributes extends SVGAttributes<SVGRectElement>, HTMLAttributes<SVGRectElement> {}

src/types.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from '@jest/globals';
+
 import type { Activity } from '../types';
 import { validateActivities } from './calendar';
 

src/utils/calendar.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from '@jest/globals';
+
 import type { DayIndex, Week } from '../types';
 import { generateTestData, groupByWeeks } from './calendar';
 import { getMonthLabels, initWeekdayLabels } from './label';
@@ -100,10 +102,10 @@ describe('initWeekdayLabels', () => {
     [4, [true, false, true, false, false, true, false]],
     [5, [false, true, false, true, false, false, true]],
     [6, [true, false, true, false, true, false, false]],
-  ] as const)(
+  ])(
     'should return true for every second weekday for `true` as input with %d as week start',
     (weekStart, expected) => {
-      const actual = initWeekdayLabels(true, weekStart);
+      const actual = initWeekdayLabels(true, weekStart as DayIndex);
 
       expect(actual.shouldShow).toBe(true);
       for (const weekStart of days) {

src/utils/label.test.ts

@@ -1,17 +1,39 @@
+import { beforeEach, describe, expect, it } from '@jest/globals';
+
 import type { Theme, ThemeInput } from '../types';
 import { createTheme } from './theme';
 
 describe('createTheme', () => {
   const defaultTheme = {
-    light: ['#ebebeb', '#bdbdbd', '#929292', '#696969', '#424242'],
-    dark: ['#333333', '#5c5c5c', '#898989', '#b9b9b9', '#ebebeb'],
+    light: [
+      'color-mix(in oklab, hsl(0, 0%, 26%) 0%, hsl(0, 0%, 92%))',
+      'color-mix(in oklab, hsl(0, 0%, 26%) 25%, hsl(0, 0%, 92%))',
+      'color-mix(in oklab, hsl(0, 0%, 26%) 50%, hsl(0, 0%, 92%))',
+      'color-mix(in oklab, hsl(0, 0%, 26%) 75%, hsl(0, 0%, 92%))',
+      'color-mix(in oklab, hsl(0, 0%, 26%) 100%, hsl(0, 0%, 92%))',
+    ],
+    dark: [
+      'color-mix(in oklab, hsl(0, 0%, 92%) 0%, hsl(0, 0%, 22%))',
+      'color-mix(in oklab, hsl(0, 0%, 92%) 25%, hsl(0, 0%, 22%))',
+      'color-mix(in oklab, hsl(0, 0%, 92%) 50%, hsl(0, 0%, 22%))',
+      'color-mix(in oklab, hsl(0, 0%, 92%) 75%, hsl(0, 0%, 22%))',
+      'color-mix(in oklab, hsl(0, 0%, 92%) 100%, hsl(0, 0%, 22%))',
+    ],
   };
 
   const explicitTheme: Theme = {
     light: ['#f0f0f0', '#c4edde', '#7ac7c4', '#f73859', '#384259'],
     dark: ['hsl(0, 0%, 22%)', '#4D455D', '#7DB9B6', '#F5E9CF', '#E96479'],
   };
 
+  beforeEach(() => {
+    global.CSS = {
+      // @ts-expect-error No clue how to fix this
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      supports: (_k, _v) => true,
+    };
+  });
+
   it('returns the default theme if no input is passed', () => {
     expect(createTheme()).toStrictEqual(defaultTheme);
   });
@@ -53,7 +75,7 @@ describe('createTheme', () => {
       createTheme({
         light: explicitTheme.light,
       }),
-    ).toStrictEqual<Theme>({
+    ).toStrictEqual({
       light: explicitTheme.light,
       dark: defaultTheme.dark,
     });
@@ -64,13 +86,18 @@ describe('createTheme', () => {
       createTheme({
         dark: explicitTheme.dark,
       }),
-    ).toStrictEqual<Theme>({
+    ).toStrictEqual({
       light: defaultTheme.light,
       dark: explicitTheme.dark,
     });
   });
 
   it('throws if an invalid color is passed', () => {
+    global.CSS = {
+      // @ts-expect-error No clue how to fix this
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      supports: (_k, _v) => false,
+    };
     expect(() =>
       createTheme({
         dark: ['#333', '🙃'],

src/utils/theme.test.ts

@@ -1,66 +1,72 @@
-import chroma from 'chroma-js';
-
 import type { Color, ColorScale, Theme, ThemeInput } from '../types';
+import { range } from './calendar';
 
-export function createTheme(input?: ThemeInput, size: number = 5): Theme {
-  const defaultTheme = createDefaultTheme(size);
+export function createTheme(input?: ThemeInput, steps: number = 5): Theme {
+  const defaultTheme = createDefaultTheme(steps);
 
   if (input) {
-    validateTheme(input, size);
+    validateInput(input, steps);
 
     input.light = input.light ?? defaultTheme.light;
     input.dark = input.dark ?? defaultTheme.dark;
 
     return {
-      light: isColorScale(input.light, size) ? input.light : createColorScale(input.light, size),
-      dark: isColorScale(input.dark, size) ? input.dark : createColorScale(input.dark, size),
+      light: isPair(input.light) ? calcColorScale(input.light, steps) : input.light,
+      dark: isPair(input.dark) ? calcColorScale(input.dark, steps) : input.dark,
     };
   }
 
   return defaultTheme;
 }
 
-function createDefaultTheme(size: number): Theme {
+function createDefaultTheme(steps: number): Theme {
   return {
-    light: createColorScale(['hsl(0, 0%, 92%)', 'hsl(0, 0%, 26%)'], size),
-    dark: createColorScale(['hsl(0, 0%, 20%)', 'hsl(0, 0%, 92%)'], size),
+    light: calcColorScale(['hsl(0, 0%, 92%)', 'hsl(0, 0%, 26%)'], steps),
+    dark: calcColorScale(['hsl(0, 0%, 22%)', 'hsl(0, 0%, 92%)'], steps),
   };
 }
 
-function validateTheme(input: ThemeInput, size: number) {
+function validateInput(input: ThemeInput, steps: number) {
   if (typeof input !== 'object' || (input.light === undefined && input.dark === undefined)) {
     throw new Error(
-      `The theme object must contain at least one of the fields "light" and "dark" with exactly 2 or ${size} colors respectively.`,
+      `The theme object must contain at least one of the fields "light" and "dark" with exactly 2 or ${steps} colors respectively.`,
     );
   }
 
   if (input.light) {
     const { length } = input.light;
-    if (length !== 2 && length !== size) {
-      throw new Error(`theme.light must contain exactly 2 or ${size} colors, ${length} passed.`);
+    if (length !== 2 && length !== steps) {
+      throw new Error(`theme.light must contain exactly 2 or ${steps} colors, ${length} passed.`);
+    }
+
+    for (const c of input.light) {
+      if (!CSS.supports('color', c)) {
+        throw new Error(`Invalid color "${String(c)}" passed. All CSS color formats are accepted.`);
+      }
     }
   }
 
   if (input.dark) {
     const { length } = input.dark;
-    if (length !== 2 && length !== size) {
-      throw new Error(`theme.dark must contain exactly 2 or ${size} colors, ${length} passed.`);
+    if (length !== 2 && length !== steps) {
+      throw new Error(`theme.dark must contain exactly 2 or ${steps} colors, ${length} passed.`);
     }
-  }
-}
 
-function isColorScale(colors: Array<unknown>, size: number): colors is ColorScale {
-  const invalidColor = colors.find(color => !chroma.valid(color));
-
-  if (invalidColor) {
-    throw new Error(
-      `Invalid color "${String(invalidColor)}" passed. All CSS color formats are accepted.`,
-    );
+    for (const c of input.dark) {
+      if (!CSS.supports('color', c)) {
+        throw new Error(`Invalid color "${String(c)}" passed. All CSS color formats are accepted.`);
+      }
+    }
   }
+}
 
-  return colors.length === size;
+function calcColorScale(colors: [from: Color, to: Color], steps: number): ColorScale {
+  return range(steps).map(i => {
+    const mixFactor = (i / (steps - 1)) * 100;
+    return `color-mix(in oklab, ${colors[1]} ${parseFloat(mixFactor.toFixed(2))}%, ${colors[0]})`;
+  });
 }
 
-function createColorScale(colors: [from: Color, to: Color], size: number): ColorScale {
-  return chroma.scale(colors).mode('lch').colors(size);
+function isPair<T>(val: T[]): val is [T, T] {
+  return val.length === 2;
 }