@fibery/ui-kit 2.1.1 → 4.0.0

package/src/design-system/colors-highlight.warm-light.test.ts

@@ -0,0 +1,78 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[0];
+
+describe("highlight.bg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.highlight(c).bg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#C9C9C94D | hsl(none   0%  79% / 0.3 ) | oklch(0.84 0    none / 0.3 )",
+        "CMYK Cyan   ": "#00DFD84D | hsl( 178 100%  44% / 0.3 ) | oklch(0.82 0.14 191  / 0.3 )",
+        "CMYK Magenta": "#FFA3FF4D | hsl( 300 100%  82% / 0.3 ) | oklch(0.84 0.16 327  / 0.3 )",
+        "CMYK Yellow ": "#D0D0004D | hsl(  60 100%  41% / 0.3 ) | oklch(0.83 0.18 110  / 0.3 )",
+        "Noti green  ": "#C3CBC54D | hsl( 135   7%  78% / 0.3 ) | oklch(0.83 0.01 154  / 0.3 )",
+        "Noti red    ": "#D4C6C34D | hsl(  11  17%  80% / 0.3 ) | oklch(0.84 0.02  32  / 0.3 )",
+        "Noti yellow ": "#D3C9A84D | hsl(  46  33%  74% / 0.3 ) | oklch(0.84 0.05  93  / 0.3 )",
+        "RGB  Blue   ": "#AAC8FF4D | hsl( 219 100%  83% / 0.3 ) | oklch(0.83 0.08 262  / 0.3 )",
+        "RGB  Green  ": "#44E6004D | hsl( 102 100%  45% / 0.3 ) | oklch(0.81 0.26 140  / 0.3 )",
+        "RGB  Red    ": "#FFB0A34D | hsl(   8 100%  82% / 0.3 ) | oklch(0.83 0.1   30  / 0.3 )",
+        "White       ": "#C9C9C94D | hsl(none   0%  79% / 0.3 ) | oklch(0.84 0    none / 0.3 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#CEC7C74D | hsl(   0   7%  79% / 0.3 ) | oklch(0.84 0.01  17  / 0.3 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#C5C9CE4D | hsl( 213   8%  79% / 0.3 ) | oklch(0.83 0.01 254  / 0.3 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#C6C9CD4D | hsl( 214   7%  79% / 0.3 ) | oklch(0.83 0.01 255  / 0.3 )",
+        "swatches[ 3] aka Swatch.Red       ": "#FFB0A64D | hsl(   7 100%  83% / 0.3 ) | oklch(0.83 0.09  27  / 0.3 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FFADC34D | hsl( 344 100%  84% / 0.3 ) | oklch(0.83 0.1    2  / 0.3 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#FEA8FF4D | hsl( 299 100%  83% / 0.3 ) | oklch(0.84 0.15 326  / 0.3 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#D2BCFF4D | hsl( 260 100%  87% / 0.3 ) | oklch(0.84 0.09 299  / 0.3 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#B1C6FF4D | hsl( 224 100%  85% / 0.3 ) | oklch(0.83 0.08 269  / 0.3 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#A5CAFF4D | hsl( 215 100%  82% / 0.3 ) | oklch(0.83 0.08 257  / 0.3 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#87D0FF4D | hsl( 204 100%  76% / 0.3 ) | oklch(0.83 0.1  238  / 0.3 )",
+        "swatches[10] aka Swatch.Turquoise ": "#67D9DE4D | hsl( 183  64%  64% / 0.3 ) | oklch(0.82 0.1  199  / 0.3 )",
+        "swatches[11] aka Swatch.GreenDark ": "#80D9C44D | hsl( 166  54%  68% / 0.3 ) | oklch(0.82 0.09 177  / 0.3 )",
+        "swatches[12] aka Swatch.Green     ": "#92DA8A4D | hsl( 114  52%  70% / 0.3 ) | oklch(0.82 0.13 142  / 0.3 )",
+        "swatches[13] aka Swatch.GreenLight": "#ACD6784D | hsl(  87  53%  65% / 0.3 ) | oklch(0.82 0.13 129  / 0.3 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FFBC594D | hsl(  36 100%  67% / 0.3 ) | oklch(0.84 0.14  74  / 0.3 )",
+        "swatches[15] aka Swatch.Orange    ": "#FFB2954D | hsl(  16 100%  79% / 0.3 ) | oklch(0.83 0.1   41  / 0.3 )",
+        "swatches[16] aka Swatch.Brown     ": "#FFB4984D | hsl(  16 100%  80% / 0.3 ) | oklch(0.83 0.1   41  / 0.3 )",
+      }
+    `);
+  });
+});
+
+describe("highlight.bgDecor", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.highlight(c).bgDecor)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#BCBCBCE6 | hsl(none   0%  74% / 0.9 ) | oklch(0.8  0    none / 0.9 )",
+        "CMYK Cyan   ": "#00D2CBE6 | hsl( 178 100%  41% / 0.9 ) | oklch(0.78 0.13 191  / 0.9 )",
+        "CMYK Magenta": "#FF8AFFE6 | hsl( 300 100%  77% / 0.9 ) | oklch(0.8  0.2  327  / 0.9 )",
+        "CMYK Yellow ": "#C3C300E6 | hsl(  60 100%  38% / 0.9 ) | oklch(0.79 0.17 110  / 0.9 )",
+        "Noti green  ": "#B6BEB8E6 | hsl( 135   6%  73% / 0.9 ) | oklch(0.79 0.01 154  / 0.9 )",
+        "Noti red    ": "#C8B9B6E6 | hsl(  10  14%  75% / 0.9 ) | oklch(0.8  0.02  31  / 0.9 )",
+        "Noti yellow ": "#C6BC9BE6 | hsl(  46  27%  69% / 0.9 ) | oklch(0.79 0.05  93  / 0.9 )",
+        "RGB  Blue   ": "#97BBFFE6 | hsl( 219 100%  80% / 0.9 ) | oklch(0.79 0.11 263  / 0.9 )",
+        "RGB  Green  ": "#31D800E6 | hsl( 106 100%  42% / 0.9 ) | oklch(0.77 0.25 141  / 0.9 )",
+        "RGB  Red    ": "#FF9D8DE6 | hsl(   8 100%  78% / 0.9 ) | oklch(0.79 0.12  30  / 0.9 )",
+        "White       ": "#BCBCBCE6 | hsl(none   0%  74% / 0.9 ) | oklch(0.8  0    none / 0.9 )",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#C2BBBBE6 | hsl(   0   5%  75% / 0.9 ) | oklch(0.8  0.01  17  / 0.9 )",
+        "swatches[ 1] aka Swatch.Grey      ": "#B8BDC1E6 | hsl( 207   7%  74% / 0.9 ) | oklch(0.8  0.01 242  / 0.9 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#BABDC1E6 | hsl( 214   5%  74% / 0.9 ) | oklch(0.8  0.01 255  / 0.9 )",
+        "swatches[ 3] aka Swatch.Red       ": "#FF9D91E6 | hsl(   7 100%  78% / 0.9 ) | oklch(0.79 0.12  28  / 0.9 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FF98B5E6 | hsl( 343 100%  80% / 0.9 ) | oklch(0.79 0.13   2  / 0.9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F39BFFE6 | hsl( 293 100%  80% / 0.9 ) | oklch(0.81 0.16 323  / 0.9 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#C8ACFFE6 | hsl( 260 100%  84% / 0.9 ) | oklch(0.8  0.12 299  / 0.9 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#A0B9FFE6 | hsl( 224 100%  81% / 0.9 ) | oklch(0.79 0.1  269  / 0.9 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#90BCFFE6 | hsl( 216 100%  78% / 0.9 ) | oklch(0.79 0.11 259  / 0.9 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#73C3FFE6 | hsl( 206 100%  73% / 0.9 ) | oklch(0.79 0.12 243  / 0.9 )",
+        "swatches[10] aka Swatch.Turquoise ": "#59CCD1E6 | hsl( 183  57%  58% / 0.9 ) | oklch(0.78 0.1  199  / 0.9 )",
+        "swatches[11] aka Swatch.GreenDark ": "#73CCB7E6 | hsl( 166  47%  63% / 0.9 ) | oklch(0.78 0.09 177  / 0.9 )",
+        "swatches[12] aka Swatch.Green     ": "#86CD7EE6 | hsl( 114  44%  65% / 0.9 ) | oklch(0.78 0.13 142  / 0.9 )",
+        "swatches[13] aka Swatch.GreenLight": "#A0C96CE6 | hsl(  86  46%  61% / 0.9 ) | oklch(0.79 0.13 129  / 0.9 )",
+        "swatches[14] aka Swatch.Yellow    ": "#F2AF4BE6 | hsl(  36  87%  62% / 0.9 ) | oklch(0.8  0.14  74  / 0.9 )",
+        "swatches[15] aka Swatch.Orange    ": "#FF9F7BE6 | hsl(  16 100%  74% / 0.9 ) | oklch(0.79 0.13  41  / 0.9 )",
+        "swatches[16] aka Swatch.Brown     ": "#FBA78CE6 | hsl(  15  93%  77% / 0.9 ) | oklch(0.8  0.11  39  / 0.9 )",
+      }
+    `);
+  });
+});

package/src/design-system/colors-js.test.ts

@@ -1,15 +1,10 @@
-import {
-  getDarkenColor,
-  getObjectColorMemoized as getObjectColor,
-  getTextColor,
-  makeAdaptiveBgFg,
-  makeSelect,
-} from "./colors-js";
-import {themeFromPalette} from "./theme";
-import {selectPalette} from "../palette-generator";
+import {mapValues} from "@fibery/helpers/src/_";
+
 import {withColorDiff} from "../palettes/diff-colors";
+import {deepMapColors} from "../palettes/testkit";
+import {getDarkenColor, getObjectColorMemoized as getObjectColor, getTextColor, makeSelect} from "./colors-js";
 
-const colors = {
+const samples = {
   red: "#ff5401",
   blue: "#4978d4",
   green: "#07bd9f",
@@ -19,21 +14,21 @@ const colors = {
   white: "#ffffff",
 } as const;
 
-function mapColors(fn: (color: string) => string) {
-  return withColorDiff(Object.fromEntries(Object.entries(colors).map(([k, hex]) => [k, fn(hex)])));
+function reflect(colors: Record<string, string>) {
+  return withColorDiff(deepMapColors(colors));
 }
 
 describe("getDarkenColor", () => {
   test("snapshot", () => {
-    expect(mapColors(getDarkenColor)).toMatchInlineSnapshot(`
+    expect(reflect(mapValues(samples, getDarkenColor))).toMatchInlineSnapshot(`
       {
-        "black": "rgb(0, 0, 0)",
-        "blue": "rgb(70, 98, 162)",
-        "green": "rgb(82, 159, 138)",
-        "purple": "rgb(78, 46, 138)",
-        "red": "rgb(213, 74, 29)",
-        "white": "rgb(229, 229, 229)",
-        "yellow": "rgb(214, 143, 55)",
+        "   red": "#CF4914   | hsl(  17  82%  45%) | oklch(0.58 0.18  39 )",
+        "  blue": "#3E60A1   | hsl( 219  44%  44%) | oklch(0.5  0.11 262 )",
+        " black": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        " green": "#3B9A85   | hsl( 167  45%  42%) | oklch(0.62 0.09 176 )",
+        " white": "#E1E1E1   | hsl(none   0%  88%) | oklch(0.91 0    none)",
+        "purple": "#4C2D87   | hsl( 261  50%  35%) | oklch(0.39 0.14 295 )",
+        "yellow": "#CE8E41   | hsl(  33  59%  53%) | oklch(0.7  0.12  68 )",
       }
     `);
   });
@@ -41,140 +36,15 @@ describe("getDarkenColor", () => {
 
 describe("getTextColor", () => {
   test("snapshot", () => {
-    expect(mapColors(getTextColor)).toMatchInlineSnapshot(`
-      {
-        "black": "rgb(0, 0, 0)",
-        "blue": "rgb(73, 120, 212)",
-        "green": "rgb(7, 189, 159)",
-        "purple": "rgb(103, 61, 182)",
-        "red": "rgb(255, 84, 1)",
-        "white": "rgb(255, 255, 255)",
-        "yellow": "rgb(251, 163, 46)",
-      }
-    `);
-  });
-});
-
-const adaptive = makeAdaptiveBgFg("#FFFFFF", "#0D0D0D");
-
-describe("adaptive.bg", () => {
-  test("light", () => {
-    expect(mapColors(adaptive.bg[0])).toMatchInlineSnapshot(`
-      {
-        "black": "rgb(217, 217, 217)",
-        "blue": "rgb(228, 235, 249)",
-        "green": "rgb(218, 245, 241)",
-        "purple": "rgb(232, 226, 244)",
-        "red": "rgb(255, 229, 217)",
-        "white": "rgb(255, 255, 255)",
-        "yellow": "rgb(254, 241, 224)",
-      }
-    `);
-  });
-  test("dark", () => {
-    expect(mapColors(adaptive.bg[1])).toMatchInlineSnapshot(`
+    expect(reflect(mapValues(samples, getTextColor))).toMatchInlineSnapshot(`
       {
-        "black": "rgb(39, 39, 39)",
-        "blue": "rgb(31, 45, 73)",
-        "green": "rgb(11, 66, 57)",
-        "purple": "rgb(46, 31, 73)",
-        "red": "rgb(86, 34, 9)",
-        "white": "rgb(86, 86, 86)",
-        "yellow": "rgb(84, 58, 23)",
-      }
-    `);
-  });
-});
-
-describe("adaptive.fg", () => {
-  test("light", () => {
-    expect(mapColors(adaptive.fg[0])).toMatchInlineSnapshot(`
-      {
-        "black": "rgb(13, 13, 13)",
-        "blue": "rgb(82, 127, 214)",
-        "green": "rgb(17, 168, 143)",
-        "purple": "rgb(111, 71, 186)",
-        "red": "rgb(255, 93, 14)",
-        "white": "rgb(149, 149, 149)",
-        "yellow": "rgb(218, 126, 4)",
-      }
-    `);
-  });
-  test("dark", () => {
-    expect(mapColors(adaptive.fg[1])).toMatchInlineSnapshot(`
-      {
-        "black": "rgb(129, 129, 129)",
-        "blue": "rgb(88, 128, 207)",
-        "green": "rgb(7, 180, 152)",
-        "purple": "rgb(145, 112, 207)",
-        "red": "rgb(243, 80, 2)",
-        "white": "rgb(243, 243, 243)",
-        "yellow": "rgb(239, 156, 44)",
-      }
-    `);
-  });
-});
-
-const palette = selectPalette();
-const themes = {
-  light: themeFromPalette(palette, "light"),
-  dark: themeFromPalette(palette, "dark"),
-  light2: themeFromPalette(palette, "light2"),
-};
-
-describe("getLinkedHighlightBackground", () => {
-  test("light", () => {
-    expect(mapColors(themes.light.fns.getLinkedHighlightBackground)).toMatchInlineSnapshot(`
-      {
-        "black": "rgba(203, 203, 203, 0.3)",
-        "blue": "rgba(187, 204, 239, 0.3)",
-        "green": "rgba(124, 220, 204, 0.3)",
-        "purple": "rgba(210, 198, 234, 0.3)",
-        "red": "rgba(255, 189, 157, 0.3)",
-        "white": "rgba(203, 203, 203, 0.3)",
-        "yellow": "rgba(252, 193, 114, 0.3)",
-      }
-    `);
-  });
-  test("dark", () => {
-    expect(mapColors(themes.dark.fns.getLinkedHighlightBackground)).toMatchInlineSnapshot(`
-      {
-        "black": "rgba(188, 188, 188, 0.4)",
-        "blue": "rgba(165, 188, 234, 0.4)",
-        "green": "rgba(77, 208, 186, 0.4)",
-        "purple": "rgba(196, 180, 227, 0.4)",
-        "red": "rgba(255, 166, 123, 0.4)",
-        "white": "rgba(188, 188, 188, 0.4)",
-        "yellow": "rgba(251, 171, 64, 0.4)",
-      }
-    `);
-  });
-});
-
-describe("getLinkedHighlightDecorationBackground", () => {
-  test("light", () => {
-    expect(mapColors(themes.light.fns.getLinkedHighlightDecorationBackground)).toMatchInlineSnapshot(`
-      {
-        "black": "rgba(188, 188, 188, 0.9)",
-        "blue": "rgba(165, 188, 234, 0.9)",
-        "green": "rgba(77, 208, 186, 0.9)",
-        "purple": "rgba(196, 180, 227, 0.9)",
-        "red": "rgba(255, 166, 123, 0.9)",
-        "white": "rgba(188, 188, 188, 0.9)",
-        "yellow": "rgba(251, 171, 64, 0.9)",
-      }
-    `);
-  });
-  test("dark", () => {
-    expect(mapColors(themes.dark.fns.getLinkedHighlightDecorationBackground)).toMatchInlineSnapshot(`
-      {
-        "black": "rgba(178, 178, 178, 0.9)",
-        "blue": "rgba(155, 178, 223, 0.9)",
-        "green": "rgba(64, 197, 176, 0.9)",
-        "purple": "rgba(186, 170, 217, 0.9)",
-        "red": "rgba(244, 156, 114, 0.9)",
-        "white": "rgba(178, 178, 178, 0.9)",
-        "yellow": "rgba(240, 161, 54, 0.9)",
+        "   red": "#FF5401   | hsl(  20 100%  50%) | oklch(0.67 0.22  39 )",
+        "  blue": "#4978D4   | hsl( 220  62%  56%) | oklch(0.59 0.15 262 )",
+        " black": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        " green": "#07BD9F   | hsl( 170  93%  38%) | oklch(0.71 0.13 176 )",
+        " white": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "purple": "#673DB6   | hsl( 261  50%  48%) | oklch(0.48 0.18 294 )",
+        "yellow": "#FBA32E   | hsl(  34  96%  58%) | oklch(0.79 0.16  68 )",
       }
     `);
   });
@@ -223,24 +93,10 @@ describe("getObjectColor", () => {
 
 describe("select", () => {
   test("light theme", () => {
-    expect(
-      makeSelect("light")({light: "light-value", light2: "light2-value", dark: "dark-value"})
-    ).toMatchInlineSnapshot(`"light-value"`);
+    expect(makeSelect("light")({light: "light-value", dark: "dark-value"})).toMatchInlineSnapshot(`"light-value"`);
   });
 
   test("dark theme", () => {
-    expect(
-      makeSelect("dark")({light: "light-value", light2: "light2-value", dark: "dark-value"})
-    ).toMatchInlineSnapshot(`"dark-value"`);
-  });
-
-  test("light2 theme", () => {
-    expect(
-      makeSelect("dark")({light: "light-value", light2: "light2-value", dark: "dark-value"})
-    ).toMatchInlineSnapshot(`"dark-value"`);
-  });
-
-  test("light2 theme falls back to light when key is not defined", () => {
-    expect(makeSelect("light2")({light: "fallback", dark: "dark"})).toMatchInlineSnapshot(`"fallback"`);
+    expect(makeSelect("dark")({light: "light-value", dark: "dark-value"})).toMatchInlineSnapshot(`"dark-value"`);
   });
 });

package/src/design-system/colors-js.ts

@@ -1,18 +1,21 @@
+import {memoize} from "@fibery/helpers/src/_";
 import ColorHash from "color-hash";
-import {clampRgb, darkenChroma, desaturateChroma, produceColor, cssFromUnsafe} from "../color-utils";
-import memoize from "lodash/memoize";
-import {a11yColor} from "../a11y-color";
-import {alpha} from "./alpha";
-import {ThemeMode} from "../theme-settings";
-import {Color} from "culori";
+import {clampChroma} from "culori";
+
+import {produceColor, cssFromUnsafe} from "../color-utils";
+import type {ThemeMode} from "../theme-settings";
 
-/** @deprecated switch from this ported chroma impl to color-utils oklch transformations at first convenience */
 export const getDarkenColor = memoize((color: string): string => {
-  return produceColor(color, [
-    (c) => darkenChroma(c, 0.5),
-    clampRgb as (_: Color) => Color,
-    (c) => desaturateChroma(c, 0.8),
-  ]);
+  return produceColor(color, (oklch) => {
+    return clampChroma(
+      {
+        ...oklch,
+        l: Math.max(0, oklch.l - 0.09),
+        c: Math.max(0, oklch.c - 0.0384),
+      },
+      "oklch"
+    );
+  });
 });
 
 /** @deprecated identity for a while. inline */
@@ -31,19 +34,8 @@ export const getObjectColorMemoized = memoize((name: string | null | undefined)
   return colorHash.hex(name);
 });
 
-export const makeAdaptiveBgFg = (bgWhite: string, bgBlack: string) => ({
-  bg: [
-    (color: string) => a11yColor(alpha(color, 0.15), bgWhite, 1),
-    (color: string) => a11yColor(alpha(color, 0.3), bgBlack, 1.3),
-  ],
-  fg: [
-    (color: string) => a11yColor(alpha(color, 0.95), bgWhite, 3),
-    (color: string) => a11yColor(alpha(color, 0.95), bgBlack, 5),
-  ],
-});
-
 export function makeSelect(mode: ThemeMode) {
-  return function select<T>(values: {light: T; light2?: T; dark: T}): T {
+  return function select<T>(values: {light: T; dark: T}): T {
     if (mode in values) {
       return values[mode]!;
     }

package/src/design-system/colors-swatches.ts

@@ -0,0 +1,43 @@
+// BEG — DO NOT CHANGE VALUES — immutable tokens — migrate in transit
+export const Swatch = {
+  GreyDark: "#4A4A4A",
+  Grey: "#6A849B",
+  GreyLight: "#99A2AB",
+  Red: "#D40915",
+  Magenta: "#E72065",
+  Purple: "#9C2BAF",
+  Violet: "#673DB6",
+  BlueDark: "#3E53B4",
+  Blue: "#2978FB",
+  BlueSky: "#199EE3",
+  Turquoise: "#1FBED3",
+  GreenDark: "#159789",
+  /** @deprecated use Green */
+  Green_: "#69AC5E",
+  Green: "#4FAF54",
+  GreenLight: "#8EC351",
+  Yellow: "#FBA32F",
+  Orange: "#FC551F",
+  Brown: "#B04E31",
+} as const;
+// END — DO NOT CHANGE VALUES — immutable tokens — migrate in transit
+
+export const swatches = [
+  Swatch.GreyDark,
+  Swatch.Grey,
+  Swatch.GreyLight,
+  Swatch.Red,
+  Swatch.Magenta,
+  Swatch.Purple,
+  Swatch.Violet,
+  Swatch.BlueDark,
+  Swatch.Blue,
+  Swatch.BlueSky,
+  Swatch.Turquoise,
+  Swatch.GreenDark,
+  Swatch.Green,
+  Swatch.GreenLight,
+  Swatch.Yellow,
+  Swatch.Orange,
+  Swatch.Brown,
+];

package/src/design-system/colors.test.ts

@@ -10,9 +10,7 @@ describe("sideFromDefs", () => {
       shades: [{opacity5: "shade5"}, {opacity5: "dark-shade5"}],
       separators: [{opacity5: "separator5"}, {opacity5: "dark-separator5"}],
     } as unknown as ThemeDefs["colors"],
-    fns: {
-      getIconColor: {light: (_: string) => "IconColor", dark: (_: string) => "DarkIconColor"},
-    } as unknown as ThemeDefs["fns"],
+    fns: {} as unknown as ThemeDefs["fns"],
   } satisfies Partial<ThemeDefs> as ThemeDefs;
 
   test("light", () => {
@@ -52,23 +50,4 @@ describe("sideFromDefs", () => {
       }
     `);
   });
-
-  test("light2 overrides mode", () => {
-    expect(sideFromDefs(themeDefs, "light2").colors).toMatchInlineSnapshot(`
-      {
-        "colorAI": "hsla(271, 57%, 61%, 1)",
-        "lights": {
-          "opacity5": "light5",
-        },
-        "mode": "light2",
-        "separators": {
-          "opacity5": "separator5",
-        },
-        "shades": {
-          "opacity5": "shade5",
-        },
-        "transparent": "rgba(255, 255, 255, 0)",
-      }
-    `);
-  });
 });