Merge pull request #2894 from evidence-dev/fix/2893-bug-themes---colo…

…rpalette-with-10-values-uses-defaults-for-undefined-values fix: dont merge color palettes/scales
evidence-dev · Dec 11, 2024 · d194078 · d194078
2 parents fcc0e81 + 6115376
commit d194078
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 7 deletions.
diff --git a/.changeset/warm-jars-sip.md b/.changeset/warm-jars-sip.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/tailwind': patch
+---
+
+Dont merge color palettes/scales
diff --git a/packages/ui/tailwind/src/themes/applyThemeDefaults/applyThemeDefaults.js b/packages/ui/tailwind/src/themes/applyThemeDefaults/applyThemeDefaults.js
@@ -1,5 +1,5 @@
-import defaultsDeep from 'lodash/defaultsDeep.js';
 import merge from 'lodash/merge.js';
+import mergeWith from 'lodash/mergeWith.js';
 import { defaultThemesConfigFile } from './defaultThemesConfigFile.js';
 import { computeShades } from './computeShades.js';
 
@@ -8,8 +8,14 @@ import { computeShades } from './computeShades.js';
  * @returns {import('../../schemas/types.js').ThemesConfig}
  */
 export const applyThemeDefaults = (configFile) => {
-	const withDefaults = defaultsDeep({}, configFile, defaultThemesConfigFile);
+	/** @satisfies {typeof defaultThemesConfigFile} */
+	const withDefaults = mergeWith({}, defaultThemesConfigFile, configFile, (_, configValue) => {
+		// Don't merge arrays - prevents merging users defined color palette with our defaults
+		if (Array.isArray(configValue) && configValue.length) {
+			return configValue;
+		}
+	});
 	const computedColors = computeShades(withDefaults.theme.colors);
 	merge(withDefaults.theme.colors, computedColors);
-	return withDefaults;
+	return /** @type {import('../../schemas/types.js').ThemesConfig} */ (withDefaults);
 };
diff --git a/packages/ui/tailwind/src/themes/applyThemeDefaults/applyThemeDefaults.spec.js b/packages/ui/tailwind/src/themes/applyThemeDefaults/applyThemeDefaults.spec.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 import { describe, it, expect } from 'vitest';
 import chroma from 'chroma-js';
 
@@ -61,8 +63,8 @@ describe('applyThemeDefaults', () => {
 				'should have contrast >= 4.5 between $requiredColor and $computedColor in $mode mode',
 				({ requiredColor, computedColor, mode }) => {
 					const actual = applyThemeDefaults(input);
-					const requiredColorValue = actual.theme.colors[requiredColor][mode];
-					const computedColorValue = actual.theme.colors[computedColor][mode];
+					const requiredColorValue = actual.theme.colors[requiredColor]?.[mode];
+					const computedColorValue = actual.theme.colors[computedColor]?.[mode];
 					expect(
 						chroma.contrast(requiredColorValue, computedColorValue),
 						`Expected contrast between ${requiredColor} (${requiredColorValue}) and ${computedColor} (${computedColorValue}) to be greater than 4.5 in ${mode} mode`
@@ -81,8 +83,8 @@ describe('applyThemeDefaults', () => {
 				'should have contrast >= 4.5 between $bgColor and $fgColor in $mode mode',
 				({ bgColor, fgColor, mode }) => {
 					const actual = applyThemeDefaults(input);
-					const bgColorValue = actual.theme.colors[bgColor][mode];
-					const fgColorValue = actual.theme.colors[fgColor][mode];
+					const bgColorValue = actual.theme.colors[bgColor]?.[mode];
+					const fgColorValue = actual.theme.colors[fgColor]?.[mode];
 					expect(
 						chroma.contrast(bgColorValue, fgColorValue),
 						`Expected contrast between ${bgColor} (${bgColorValue}) and ${fgColor} (${fgColorValue}) to be greater than 7 in ${mode} mode`
@@ -107,4 +109,40 @@ describe('applyThemeDefaults', () => {
 		expect(actual.theme.colors.myCustomColor?.light).toBe('#abcdef');
 		expect(actual.theme.colors.myCustomColor?.dark).toBe('#fedcba');
 	});
+
+	it('should not merge default color palette into user configured default color palette', () => {
+		/** @satisfies {import('../../schemas/types.js').ThemesConfigFile} */
+		const config = {
+			theme: {
+				colorPalettes: {
+					default: {
+						light: ['colorPalettes_default_light_1', 'colorPalettes_default_light_2'],
+						dark: ['colorPalettes_default_dark_1', 'colorPalettes_default_dark_2']
+					}
+				}
+			}
+		};
+
+		const withDefaults = applyThemeDefaults(config);
+
+		expect(withDefaults.theme.colorPalettes.default).toEqual(config.theme.colorPalettes.default);
+	});
+
+	it('should not merge default color scale into user configured default color scale', () => {
+		/** @satisfies {import('../../schemas/types.js').ThemesConfigFile} */
+		const config = {
+			theme: {
+				colorScales: {
+					default: {
+						light: ['colorScales_default_light_1', 'colorScales_default_light_2'],
+						dark: ['colorScales_default_dark_1', 'colorScales_default_dark_2']
+					}
+				}
+			}
+		};
+
+		const withDefaults = applyThemeDefaults(config);
+
+		expect(withDefaults.theme.colorScales.default).toEqual(config.theme.colorScales.default);
+	});
 });