Fix whitelabling for chart colors (#17903)

frontend/src/metabase/lib/colors.js

@@ -199,7 +199,7 @@ export function lighten(
 }
 
 const PREFERRED_COLORS = {
-  [colors["success"]]: [
+  success: [
     "success",
     "succeeded",
     "pass",
@@ -211,7 +211,7 @@ const PREFERRED_COLORS = {
     "active",
     "profit",
   ],
-  [colors["error"]]: [
+  error: [
     "error",
     "fail",
     "failed",
@@ -225,10 +225,10 @@ const PREFERRED_COLORS = {
     "deleted",
     "pending",
   ],
-  [colors["warning"]]: ["warn", "warning", "incomplete", "unstable"],
-  [colors["brand"]]: ["count"],
-  [colors["accent1"]]: ["sum"],
-  [colors["accent2"]]: ["average"],
+  warning: ["warn", "warning", "incomplete", "unstable"],
+  brand: ["count"],
+  accent1: ["sum"],
+  accent2: ["average"],
 };
 
 const PREFERRED_COLORS_MAP = {};
@@ -244,7 +244,7 @@ for (const color in PREFERRED_COLORS) {
 type Key = string;
 
 function getPreferredColor(key: Key) {
-  return PREFERRED_COLORS_MAP[key.toLowerCase()];
+  return color(PREFERRED_COLORS_MAP[key.toLowerCase()]);
 }
 
 // returns a mapping of deterministically assigned colors to keys, optionally with a fixed value mapping

frontend/test/metabase/lib/colors.unit.spec.js

-import { getRandomColor, normal } from "metabase/lib/colors";
+import colors, { getColorForValue, getRandomColor } from "metabase/lib/colors";
 
 describe("getRandomColor", () => {
   it("should return a color string from the proper family", () => {
-    const color = getRandomColor(normal);
-    expect(Object.values(normal)).toContain(color);
+    const color = getRandomColor(colors);
+    expect(Object.values(colors)).toContain(color);
+  });
+});
+
+describe("getColorForValue", () => {
+  it("should get a color by semantic name", () => {
+    const color = getColorForValue("sum");
+    expect(color).toBe(colors.accent1);
+  });
+
+  it("should respect changes in colors", () => {
+    const { accent1, accent2 } = colors;
+
+    colors.accent1 = accent2;
+    const color = getColorForValue("sum");
+    colors.accent1 = accent1;
+
+    expect(color).toBe(colors.accent2);
   });
 });