@fibery/ui-kit 1.40.4 → 1.42.0

package/src/palette-generator.test.ts

@@ -1,6 +1,6 @@
-/* eslint-disable max-lines */
-import {getAlpha, OKLCH, parse, to, toOKLCH} from "./color-utils";
+import {getAlpha, OKLCH, parse, to} from "./color-utils";
 import {type ColorScale, makeDefaultPalette, makeThematicPalette} from "./palette-generator";
+import {zeroBasedFromOneBased} from "./scale-generator";
 
 function roundToThreeDigits(number: number) {
   return Math.round(number * 1000) / 1000;
@@ -16,11 +16,11 @@ function getOklch(color: string): {l: number; c: number; h: number} {
 }
 
 function extractLightness(scale: ColorScale): number[] {
-  return scale.slice(1).map((color) => getOklch(color).l);
+  return zeroBasedFromOneBased(scale).map((color) => getOklch(color).l);
 }
 
 function extractChromaNormalized(scale: ColorScale): number[] {
-  const chromas = scale.slice(1).map((color) => getOklch(color).c);
+  const chromas = zeroBasedFromOneBased(scale).map((color) => getOklch(color).c);
   const maxChroma = Math.max(...chromas);
   return chromas.map((c) => roundToThreeDigits(c / maxChroma));
 }
@@ -202,81 +202,6 @@ describe("palette-generator", () => {
     });
   });
 
-  describe("makeDefaultPalette", () => {
-    it("snapshots default palette in OKLCH", () => {
-      const palette = makeDefaultPalette();
-      expect({
-        base: palette.base.map(toOKLCH),
-        baseDark: palette.baseDark.map(toOKLCH),
-        accent: palette.accent.map(toOKLCH),
-        accentDark: palette.accentDark.map(toOKLCH),
-      }).toMatchInlineSnapshot(`
-        {
-          "accent": [
-            "oklch(100% 0 none)",
-            "oklch(99.069% 0.00291 264.54)",
-            "oklch(98.983% 0.00437 264.54)",
-            "oklch(96.966% 0.01293 264.51)",
-            "oklch(95.012% 0.02046 264.47)",
-            "oklch(92.145% 0.03068 264.41)",
-            "oklch(88.367% 0.04361 264.32)",
-            "oklch(82.757% 0.06206 264.15)",
-            "oklch(76.14% 0.08554 263.86)",
-            "oklch(58.48% 0.15116 262.64)",
-            "oklch(54.173% 0.16179 262.38)",
-            "oklch(49.642% 0.14201 262.46)",
-            "oklch(26.071% 0.07125 262.54)",
-          ],
-          "accentDark": [
-            "oklch(100% 0 none)",
-            "oklch(20.512% 0.01807 266.69)",
-            "oklch(22.974% 0.03429 266.01)",
-            "oklch(27.284% 0.05415 265.42)",
-            "oklch(29.742% 0.06735 265.08)",
-            "oklch(32.452% 0.07215 265.13)",
-            "oklch(35.981% 0.07843 265.18)",
-            "oklch(41.256% 0.10936 264.62)",
-            "oklch(47.972% 0.14454 264.22)",
-            "oklch(57.658% 0.15178 264.65)",
-            "oklch(62.928% 0.13984 265.13)",
-            "oklch(76.225% 0.09124 266.35)",
-            "oklch(95.899% 0.01681 267.31)",
-          ],
-          "base": [
-            "oklch(100% 0 none)",
-            "oklch(99.241% 0 none)",
-            "oklch(97.719% 0 none)",
-            "oklch(96.955% 0 none)",
-            "oklch(94.656% 0 none)",
-            "oklch(93.115% 0 none)",
-            "oklch(91.568% 0 none)",
-            "oklch(89.235% 0 none)",
-            "oklch(82.937% 0 none)",
-            "oklch(69.959% 0 none)",
-            "oklch(57.217% 0 none)",
-            "oklch(48.318% 0 none)",
-            "oklch(20.441% 0 none)",
-          ],
-          "baseDark": [
-            "oklch(15.789% 0 none)",
-            "oklch(20.441% 0 none)",
-            "oklch(22.667% 0 none)",
-            "oklch(25.908% 0 none)",
-            "oklch(28.012% 0 none)",
-            "oklch(30.078% 0 none)",
-            "oklch(32.109% 0 none)",
-            "oklch(36.079% 0 none)",
-            "oklch(43.714% 0 none)",
-            "oklch(54.586% 0 none)",
-            "oklch(59.818% 0 none)",
-            "oklch(70.787% 0 none)",
-            "oklch(94.656% 0 none)",
-          ],
-        }
-      `);
-    });
-  });
-
   describe("white/black scales", () => {
     it("generated neutral scales match default palette", () => {
       const defaultPalette = makeDefaultPalette();
@@ -287,9 +212,8 @@ describe("palette-generator", () => {
         accentChroma: 0.16,
       });
 
-      expect(generated.white).toMatchInlineSnapshot(`
+      expect(zeroBasedFromOneBased(generated.whiteA)).toMatchInlineSnapshot(`
         [
-          "rgb(255,255,255)",
           "rgba(255,255,255,0)",
           "rgba(255,255,255,0.01)",
           "rgba(255,255,255,0.03)",
@@ -304,9 +228,8 @@ describe("palette-generator", () => {
           "rgba(255,255,255,0.92)",
         ]
       `);
-      expect(generated.black).toMatchInlineSnapshot(`
+      expect(zeroBasedFromOneBased(generated.blackA)).toMatchInlineSnapshot(`
         [
-          "rgb(0,0,0)",
           "rgba(0,0,0,0.01)",
           "rgba(0,0,0,0.03)",
           "rgba(0,0,0,0.05)",
@@ -322,216 +245,36 @@ describe("palette-generator", () => {
         ]
       `);
 
+      const whiteADefault = zeroBasedFromOneBased(defaultPalette.whiteA);
+      const blackADefault = zeroBasedFromOneBased(defaultPalette.blackA);
+      const whiteAGenerated = zeroBasedFromOneBased(generated.whiteA);
+      const blackAGenerated = zeroBasedFromOneBased(generated.blackA);
       // default palette uses hsla strings, generated uses rgba — compare parsed alpha values
-      for (let i = 0; i < 13; i++) {
-        const defWhiteAlpha = getAlpha(defaultPalette.white[i]);
-        const genWhiteAlpha = getAlpha(generated.white[i]);
+      for (let i = 0; i < 12; i++) {
+        const defWhiteAlpha = getAlpha(whiteADefault[i]);
+        const genWhiteAlpha = getAlpha(whiteAGenerated[i]);
         expect(genWhiteAlpha).toBeCloseTo(defWhiteAlpha, 2);
 
-        const defBlackAlpha = getAlpha(defaultPalette.black[i]);
-        const genBlackAlpha = getAlpha(generated.black[i]);
+        const defBlackAlpha = getAlpha(blackADefault[i]);
+        const genBlackAlpha = getAlpha(blackAGenerated[i]);
         expect(genBlackAlpha).toBeCloseTo(defBlackAlpha, 2);
       }
     });
   });
 
   describe("white/black tinting across hues", () => {
-    it("white[0] should be tinted for all hues when chroma > 0", () => {
+    it("white/black should be tinted for all hues when chroma > 0", () => {
       const hues = Array.from({length: 36}, (_, i) => i * 10);
-      const results = hues.map((hue) => {
-        const palette = makeThematicPalette({baseHue: hue, baseChroma: 0.175, accentHue: hue, accentChroma: 0.16});
-        return {hue, white0: palette.white[0], black0: palette.black[0]};
-      });
 
-      // Every hue should produce a tinted white (not pure #fff)
-      for (const {hue, white0} of results) {
-        expect({hue, white0}).not.toEqual({hue, white0: "rgb(255,255,255)"});
+      for (const hue of hues) {
+        const palette = makeThematicPalette({baseHue: hue, baseChroma: 0.175, accentHue: hue, accentChroma: 0.16});
+        // white should not be pure white
+        expect(palette.white).not.toBe("rgb(255,255,255)");
+        expect(palette.white).not.toBe("#FFFFFF");
+        // black should not be pure black
+        expect(palette.black).not.toBe("rgb(0,0,0)");
+        expect(palette.black).not.toBe("#000000");
       }
-
-      expect(results).toMatchInlineSnapshot(`
-        [
-          {
-            "black0": "rgb(3,0,1)",
-            "hue": 0,
-            "white0": "rgb(255,245,249)",
-          },
-          {
-            "black0": "rgb(3,0,1)",
-            "hue": 10,
-            "white0": "rgb(255,245,246)",
-          },
-          {
-            "black0": "rgb(3,0,1)",
-            "hue": 20,
-            "white0": "rgb(255,245,244)",
-          },
-          {
-            "black0": "rgb(3,0,0)",
-            "hue": 30,
-            "white0": "rgb(255,245,242)",
-          },
-          {
-            "black0": "rgb(3,1,0)",
-            "hue": 40,
-            "white0": "rgb(255,246,241)",
-          },
-          {
-            "black0": "rgb(3,1,0)",
-            "hue": 50,
-            "white0": "rgb(255,246,239)",
-          },
-          {
-            "black0": "rgb(3,1,0)",
-            "hue": 60,
-            "white0": "rgb(255,247,238)",
-          },
-          {
-            "black0": "rgb(2,1,0)",
-            "hue": 70,
-            "white0": "rgb(255,248,237)",
-          },
-          {
-            "black0": "rgb(2,1,0)",
-            "hue": 80,
-            "white0": "rgb(255,248,236)",
-          },
-          {
-            "black0": "rgb(2,1,0)",
-            "hue": 90,
-            "white0": "rgb(254,249,236)",
-          },
-          {
-            "black0": "rgb(2,1,0)",
-            "hue": 100,
-            "white0": "rgb(252,250,237)",
-          },
-          {
-            "black0": "rgb(1,1,0)",
-            "hue": 110,
-            "white0": "rgb(250,251,237)",
-          },
-          {
-            "black0": "rgb(1,1,0)",
-            "hue": 120,
-            "white0": "rgb(247,251,238)",
-          },
-          {
-            "black0": "rgb(1,1,0)",
-            "hue": 130,
-            "white0": "rgb(245,252,240)",
-          },
-          {
-            "black0": "rgb(0,2,0)",
-            "hue": 140,
-            "white0": "rgb(243,252,241)",
-          },
-          {
-            "black0": "rgb(0,2,0)",
-            "hue": 150,
-            "white0": "rgb(241,253,243)",
-          },
-          {
-            "black0": "rgb(0,2,1)",
-            "hue": 160,
-            "white0": "rgb(240,253,245)",
-          },
-          {
-            "black0": "rgb(0,2,1)",
-            "hue": 170,
-            "white0": "rgb(238,253,247)",
-          },
-          {
-            "black0": "rgb(0,2,1)",
-            "hue": 180,
-            "white0": "rgb(237,253,250)",
-          },
-          {
-            "black0": "rgb(0,2,2)",
-            "hue": 190,
-            "white0": "rgb(237,253,252)",
-          },
-          {
-            "black0": "rgb(0,2,2)",
-            "hue": 200,
-            "white0": "rgb(236,253,254)",
-          },
-          {
-            "black0": "rgb(0,2,2)",
-            "hue": 210,
-            "white0": "rgb(237,253,255)",
-          },
-          {
-            "black0": "rgb(0,2,3)",
-            "hue": 220,
-            "white0": "rgb(237,252,255)",
-          },
-          {
-            "black0": "rgb(0,1,3)",
-            "hue": 230,
-            "white0": "rgb(238,252,255)",
-          },
-          {
-            "black0": "rgb(0,1,3)",
-            "hue": 240,
-            "white0": "rgb(239,251,255)",
-          },
-          {
-            "black0": "rgb(0,1,3)",
-            "hue": 250,
-            "white0": "rgb(241,251,255)",
-          },
-          {
-            "black0": "rgb(0,1,4)",
-            "hue": 260,
-            "white0": "rgb(243,250,255)",
-          },
-          {
-            "black0": "rgb(1,1,4)",
-            "hue": 270,
-            "white0": "rgb(244,249,255)",
-          },
-          {
-            "black0": "rgb(1,1,4)",
-            "hue": 280,
-            "white0": "rgb(247,248,255)",
-          },
-          {
-            "black0": "rgb(1,1,3)",
-            "hue": 290,
-            "white0": "rgb(249,248,255)",
-          },
-          {
-            "black0": "rgb(1,1,3)",
-            "hue": 300,
-            "white0": "rgb(251,247,255)",
-          },
-          {
-            "black0": "rgb(2,1,3)",
-            "hue": 310,
-            "white0": "rgb(253,246,255)",
-          },
-          {
-            "black0": "rgb(2,1,2)",
-            "hue": 320,
-            "white0": "rgb(255,246,255)",
-          },
-          {
-            "black0": "rgb(2,1,2)",
-            "hue": 330,
-            "white0": "rgb(255,245,255)",
-          },
-          {
-            "black0": "rgb(3,1,2)",
-            "hue": 340,
-            "white0": "rgb(255,245,253)",
-          },
-          {
-            "black0": "rgb(3,0,1)",
-            "hue": 350,
-            "white0": "rgb(255,245,251)",
-          },
-        ]
-      `);
     });
   });
 

package/src/palette-generator.ts

@@ -1,42 +1,34 @@
+import {slateUserPalette} from "./palettes/slate-user";
+import {slateArchPalette} from "./palettes/slate-arch";
+import {warmUserPalette} from "./palettes/warm-user";
+import {warmArchPalette} from "./palettes/warm-arch";
 import {
-  blackAScale,
-  indigoDarkScale,
-  indigoScale,
-  redDarkScale,
-  redScale,
-  slateDarkScale,
-  slateScale,
-  tealDarkScale,
-  tealScale,
-  whiteAScale,
-  yellowDarkScale,
-  yellowScale,
-} from "./palette";
-import {
-  BasedScale12,
   DEFAULT_DARK_CURVES,
   DEFAULT_LIGHT_CURVES,
-  generateBlackScale,
+  generateBlacks,
   generateColorScale,
   generateGrayScale,
   generateInterpolatedScale,
   generatePresetScale,
-  generateWhiteScale,
+  generateWhites,
   type InterpolatedScaleConfig,
-  type Scale12,
+  OneBasedScale,
   paletteFromHue,
   paletteFromHueBoth,
   SCALE_PRESETS,
   type ScaleConfig,
   type ScaleCurves,
+  type ZeroBasedScale,
 } from "./scale-generator";
 
-export type ColorScale = BasedScale12<string>;
+export type ColorScale = OneBasedScale<string>;
 
 export interface ThemePalette {
   key: string;
-  white: ColorScale;
-  black: ColorScale;
+  white: string;
+  black: string;
+  whiteA: ColorScale;
+  blackA: ColorScale;
   base: ColorScale;
   baseDark: ColorScale;
   accent: ColorScale;
@@ -49,23 +41,24 @@ export interface ThemePalette {
   yellowDark: ColorScale;
 }
 
-export const defaultPaletteKey = "default";
+export const defaultPaletteKey = slateUserPalette.key;
+
 export function makeDefaultPalette(): ThemePalette {
-  return {
-    key: defaultPaletteKey,
-    white: whiteAScale,
-    black: blackAScale,
-    base: slateScale,
-    baseDark: slateDarkScale,
-    accent: indigoScale,
-    accentDark: indigoDarkScale,
-    red: redScale,
-    redDark: redDarkScale,
-    teal: tealScale,
-    tealDark: tealDarkScale,
-    yellow: yellowScale,
-    yellowDark: yellowDarkScale,
-  };
+  return slateUserPalette;
+}
+
+export function selectPalette({
+  warmLook = false,
+  isArchitect = false,
+}: {
+  warmLook?: boolean;
+  isArchitect?: boolean;
+} = {}): ThemePalette {
+  if (warmLook) {
+    return isArchitect ? warmArchPalette : warmUserPalette;
+  } else {
+    return isArchitect ? slateArchPalette : slateUserPalette;
+  }
 }
 
 export type ThematicPrefs = {
@@ -93,13 +86,12 @@ function shiftHueTowards(hue: number, targetHue: number, amount: number): number
 
 export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
   const {baseHue = 0, baseChroma = 0, accentHue, accentChroma, contrast} = config;
-
-  const white = generateWhiteScale(baseHue, baseChroma, config.whiteLuminosity, config.whiteChroma);
-  const black = generateBlackScale(baseHue, baseChroma, config.blackLuminosity, config.blackChroma);
+  const {white, whiteA} = generateWhites(baseHue, baseChroma, config.whiteLuminosity, config.whiteChroma);
+  const {black, blackA} = generateBlacks(baseHue, baseChroma, config.blackLuminosity, config.blackChroma);
 
   // Generate base/gray scales with tinted base colors
-  const base = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "light", contrast, base: white[0]});
-  const baseDark = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "dark", contrast, base: black[0]});
+  const base = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "light", contrast});
+  const baseDark = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "dark", contrast});
 
   // Generate accent scales
   const accent = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "light", contrast});
@@ -134,6 +126,8 @@ export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
     key: JSON.stringify(config),
     white,
     black,
+    whiteA,
+    blackA,
     base,
     baseDark,
     accent,
@@ -148,18 +142,18 @@ export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
 }
 
 export {
-  generateBlackScale,
+  generateBlacks,
   generateColorScale,
   generateGrayScale,
   generateInterpolatedScale,
   generatePresetScale,
-  generateWhiteScale,
+  generateWhites,
   paletteFromHue,
   paletteFromHueBoth,
   SCALE_PRESETS,
   DEFAULT_LIGHT_CURVES,
   DEFAULT_DARK_CURVES,
-  type Scale12,
+  type ZeroBasedScale,
   type ScaleConfig,
   type ScaleCurves,
   type InterpolatedScaleConfig,

package/src/palettes/_.ts

@@ -0,0 +1,72 @@
+import {makeThemeDefs} from "../design-system/colors";
+import {HSL, isValidColor, OKLCH, produceColor, sRGB} from "../color-utils";
+import {ThemePalette} from "../palette-generator";
+
+function verboseColor(color: string) {
+  return `${produceColor(color, [], sRGB)} / ${produceColor(color, [], OKLCH)} / ${produceColor(color, [], HSL)}`;
+}
+
+const COLOR_PREFIXES = ["rgba(", "rgb(", "hsla(", "hsl("] as const;
+const HEX_CHARS = "0123456789abcdefABCDEF";
+
+function replaceColorsInString(str: string) {
+  let result = "";
+  let i = 0;
+  const seen = new Set<string>();
+  while (i < str.length) {
+    const position = i;
+    const prefix = COLOR_PREFIXES.find((p) => str.startsWith(p, position));
+    if (prefix) {
+      const closeIdx = str.indexOf(")", i + prefix.length);
+      if (closeIdx !== -1) {
+        const candidate = str.slice(i, closeIdx + 1);
+        if (isValidColor(candidate)) {
+          const verbose = verboseColor(candidate);
+          result += seen.has(verbose) ? "[SAME]" : verbose;
+          seen.add(verbose);
+          i = closeIdx + 1;
+          continue;
+        }
+      }
+    }
+    if (str[i] === "#") {
+      let end = i + 1;
+      while (end < str.length && HEX_CHARS.includes(str[end])) {
+        end++;
+      }
+      const candidate = str.slice(i, end);
+      if (candidate.length >= 4 && isValidColor(candidate)) {
+        const verbose = verboseColor(candidate);
+        result += seen.has(verbose) ? "[SAME]" : verbose;
+        seen.add(verbose);
+        i = end;
+        continue;
+      }
+    }
+    result += str[i];
+    i++;
+  }
+  return result;
+}
+
+function deepMapColors(value: unknown): unknown {
+  if (typeof value === "string") {
+    if (isValidColor(value)) {
+      return verboseColor(value);
+    }
+    return replaceColorsInString(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(deepMapColors);
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, deepMapColors(v)]));
+  }
+  return value;
+}
+
+export function colors(palette: ThemePalette) {
+  const {colors} = makeThemeDefs(palette);
+
+  return deepMapColors(colors);
+}