@fibery/ui-kit 2.1.1 → 3.0.0

package/src/design-system/colors.ts

@@ -1,33 +1,16 @@
 /* eslint-disable max-lines */
-import {darkenChroma, hslFrom, produceColor, setAlpha, setLuminanceChroma} from "../color-utils";
-import {ThemeMode} from "../theme-settings";
-import {alpha, opacity, transparent} from "./alpha";
-import {getDarkenColor, makeAdaptiveBgFg} from "./colors-js";
 import {cssFromFilter, makeColorFilter} from "../color-filter";
 import {highlightColors} from "../highlight-colors";
-import type {Def, Defs, ThemePalette} from "./types";
+import type {ThemeMode} from "../theme-settings";
+import {alpha, opacity, transparent} from "./alpha";
+import {getDarkenColor} from "./colors-js";
+import {Swatch, swatches} from "./colors-swatches";
 import {mapDef} from "./def";
-import mapValues from "lodash/mapValues";
-
-export const cardTypeColors = [
-  "#4A4A4A",
-  "#6A849B",
-  "#99A2AB",
-  "#D40915",
-  "#E72065",
-  "#9C2BAF",
-  "#673DB6",
-  "#3E53B4",
-  "#2978FB",
-  "#199EE3",
-  "#1FBED3",
-  "#159789",
-  "#4FAF54",
-  "#8EC351",
-  "#FBA32F",
-  "#FC551F",
-  "#B04E31",
-] as const;
+import {createColorFns} from "./fns";
+import type {Def, DefMapper, Defs, ThemePalette} from "./types";
+
+/** @deprecated use swatches */
+export const cardTypeColors = swatches;
 
 type ThemeColorsDef = Record<
   string,
@@ -36,17 +19,6 @@ type ThemeColorsDef = Record<
   | readonly ["light", "dark"]
 >;
 
-type ThemeFnsDef = Record<
-  string,
-  {
-    light: (color: string) => string;
-    dark: (color: string) => string;
-    // light2 is "dark menu on light rest".
-    // defaults to 'light'
-    light2?: (color: string) => string;
-  }
->;
-
 const separator = (color: string) => `0.5px solid ${color}`;
 const border1 = (color: string) => `1px solid ${color}`;
 const border3 = (color: string) => `3px solid ${color}`;
@@ -62,10 +34,11 @@ const both =
 
 export function defsFromPalette({
   key,
-  white,
-  black,
   whiteA,
+  white,
   blackA,
+  blackish,
+  black,
   base,
   baseDark,
   accent,
@@ -76,22 +49,15 @@ export function defsFromPalette({
   tealDark,
   yellow,
   yellowDark,
-  deneutralize: deneutralizeFilter,
+  purple_9_,
+  purpleDark_9_,
+  blue_9_,
+  blueDark_9_,
+  deneutralize: deneutralizeFilterSpec,
+  swatchDefault,
   highlight,
+  enum: enumDefs,
 }: ThemePalette) {
-  const [deneutralizeL, deneutralizeD] = mapDef(deneutralizeFilter, makeColorFilter);
-  const deneutralize = (def: Def) => mapDef(def, deneutralizeL, deneutralizeD);
-
-  // beg(TODO pull into ThemePalette)
-  const blackish = produceColor(black, (x) => {
-    const hsl = hslFrom(x);
-    return {...hsl, l: (hsl.l ?? 0) + 0.05};
-  });
-
-  const [purple9, purpleDark9] = deneutralize(["rgb(157, 99, 212)", "rgb(131, 73, 182)"]);
-  const [blue9, blueDark9] = deneutralize(["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"]);
-  // end(TODO pull into ThemePalette)
-
   // whiteA = surface direction (white on light / black on dark) — blends INTO bg
   const whiteA5: Def = [alpha(white, 0.05), alpha(black, 0.05)];
   const whiteA10: Def = [alpha(white, 0.1), alpha(black, 0.1)];
@@ -319,6 +285,9 @@ export function defsFromPalette({
     icon: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
     // TODO The 0.65 vs 0.7 dark alpha might be intentional (text slightly more muted than icons?) or drift.
     secondary: [alpha(base[12], 0.7), alpha(baseDark[12], 0.65)],
+
+    link: [blue_9_, blueDark_9_],
+    ai: [purple_9_, purpleDark_9_],
   } satisfies Defs;
 
   const bg = {
@@ -336,8 +305,6 @@ export function defsFromPalette({
     success: [teal[11], tealDark[11]],
     warning: [yellow[11], yellowDark[11]],
     error: [red[11], redDark[11]],
-    link: [blue9, blueDark9],
-    ai: [purple9, purpleDark9],
   } satisfies Defs;
 
   const text = {
@@ -403,7 +370,6 @@ export function defsFromPalette({
 
   const fgSelectedText = same(base[2]);
   const fgSolidActiveText = same(alpha(white, 0.8));
-  const linkBlue = [blue9, blueDark9] as const;
 
   const codeOrErrorMessage = [red[9], red[8]] as const; // TODO check: lack of redDark scale usage
   const errorIndicatorColor = same(red[8]);
@@ -413,32 +379,32 @@ export function defsFromPalette({
   const bgActionsMenu = raised.level1;
   const bgActionsMenuItemHover = surface.level4_5;
 
+  const deneutralizeFilterDef = mapDef(deneutralizeFilterSpec, makeColorFilter);
+  const deneutralize: DefMapper = (def) => mapDef(def, deneutralizeFilterDef);
+
   const iconFromFg = (fg: string): {fg: Def; bg: Def} => ({
     fg: deneutralize(same(fg)),
     bg: deneutralize(same(alpha(fg, 0.2))),
   });
 
-  const swatches = {
-    green: "#69AC5E",
-    grayLight: cardTypeColors[1],
-    indigo: cardTypeColors[8],
-    teal: cardTypeColors[10],
-    yellow: cardTypeColors[14],
-  };
-
-  const iconMySpace = iconFromFg(swatches.grayLight);
-  const iconPrivate = iconFromFg(swatches.green);
-  const iconFavorites = iconFromFg(swatches.yellow);
-  const defaultCardTypeColorUppercaseHex = same(
-    (key.includes("arch") ? swatches.yellow : key.includes("neutral") ? swatches.indigo : swatches.teal).toUpperCase()
-  );
-
+  const iconMySpace = iconFromFg(Swatch.Grey);
+  const iconPrivate = iconFromFg(Swatch.Green_);
+  const iconFavorites = iconFromFg(Swatch.Yellow);
   const iconBadge = iconFromFg(base[10]);
 
+  const fns = createColorFns(deneutralizeFilterDef, {
+    icon: fg.icon,
+    text: whiteColor,
+    adapt: surface.level0,
+    highlight: surface.level0,
+    callout: surface.level0,
+    enum: enumDefs,
+  });
+
   const colors = {
     ...shadows,
-    ...mapValues(highlightColors(highlight, surface.level0), deneutralize),
-    colorPickerCssFilter: mapDef(deneutralizeFilter, cssFromFilter),
+    ...highlightColors(highlight, surface.level0, deneutralizeFilterDef),
+    colorPickerCssFilter: mapDef(deneutralizeFilterSpec, same(cssFromFilter)),
 
     mode: ["light", "dark"],
 
@@ -472,10 +438,9 @@ export function defsFromPalette({
     colorBgRelationContainer: surface.level2_1,
 
     // AI colors
-    colorAI: [purple9, purpleDark9],
-    colorBgAI: [alpha(purple9, 0.1), alpha(purpleDark9, 0.1)],
-    // FIXME why 0.1 for dark vs 0.05 for light?
-    colorSubtleBgAI: [alpha(purple9, 0.05), alpha(purpleDark9, 0.1)],
+    colorAI: fg.ai,
+    colorBgAI: mapDef(fg.ai, (color) => alpha(color, 0.1)),
+
     colorBgAIFloatingLauncher: surface.level1_4,
     colorBgAIFloatingPanelContent: surface.level1_3,
     colorBgAISidebarContent: surface.level1,
@@ -496,10 +461,10 @@ export function defsFromPalette({
     disabledTextColor: fg.muted,
     inversedTextColor: surface.level3_6,
     colorTextSecondary: fg.secondary,
-    linkColor: linkBlue,
-    linkBorder: [separator(alpha(blue9, 0.4)), separator(alpha(blueDark9, 0.4))],
-    linkHoverColor: linkBlue,
-    linkBorderHover: [separator(alpha(blue9, 0.8)), separator(alpha(blueDark9, 0.7))], // FIXME why different alpha?
+    linkColor: fg.link,
+    linkBorder: mapDef(fg.link, (color) => separator(alpha(color, 0.4))),
+    linkHoverColor: fg.link,
+    linkBorderHover: mapDef(fg.link, (color) => separator(alpha(color, 0.75))),
     codeColor: codeOrErrorMessage,
     codeBgColor: surface.level3_4,
     codeBlockBgColor: surface.level3_4,
@@ -603,7 +568,8 @@ export function defsFromPalette({
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
     opacityListItemGeneralDisabled: opacities.drag,
 
-    // Search Items
+    // Search
+    colorSearchSubtitle: fg.muted,
     colorBgSearchRowHover: bgActionsMenuItemHover,
     colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
     opacitySearchItemDone: opacities.drag,
@@ -686,7 +652,7 @@ export function defsFromPalette({
     privateIconBg: iconPrivate.bg,
     favoritesIconColor: iconFavorites.fg,
     favoritesIconBg: iconFavorites.bg,
-    defaultCardTypeColorUppercaseHex,
+    swatchDefault: same(swatchDefault),
 
     // Unit
     unitBg: surface.level3_6,
@@ -1032,62 +998,18 @@ export function defsFromPalette({
     scrollbar: [alpha(base[9], 0.5), alpha(baseDark[7], 0.5)],
   } as const satisfies ThemeColorsDef;
 
-  const adaptive = makeAdaptiveBgFg(white, blackish);
-  const fns = {
-    deneutralize: {light: deneutralizeL, dark: deneutralizeD},
-    getEnumBackground: {light: adaptive.bg[0], dark: adaptive.bg[1]},
-    getAppIconBackground: {light: adaptive.bg[0], dark: adaptive.bg[1], light2: adaptive.bg[1]},
-    getIconColor: {light: adaptive.fg[0], dark: adaptive.fg[1]},
-    getLinkedHighlightBackground: {
-      light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.3), (c) => setLuminanceChroma(c, 0.6)]),
-      dark: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.4), (c) => setLuminanceChroma(c, 0.5)]),
-    },
-    getLinkedHighlightDecorationBackground: {
-      light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.9), (c) => setLuminanceChroma(c, 0.5)]),
-      dark: (color: string) =>
-        produceColor(color, [(c) => setAlpha(c, 0.9), (c) => setLuminanceChroma(c, 0.5), (c) => darkenChroma(c, 0.2)]),
-    },
-  } as const satisfies ThemeFnsDef;
-
   return {key, colors, fns} as const;
 }
 
 export type ThemeDefs = ReturnType<typeof defsFromPalette>;
 
-type ThemeDefsColors = ThemeDefs["colors"];
-
-type GetThemeColors<idx extends number> = {
-  [k in keyof ThemeDefsColors]: ThemeDefsColors[k][idx];
-};
-
-function colorsByIndex<I extends 0 | 1>(colors: ThemeDefsColors, idx: I): GetThemeColors<I> {
-  type ColorTuple = readonly [unknown, unknown];
-  return Object.fromEntries(
-    (Object.entries(colors) as [string, ColorTuple][]).map(([k, v]) => [k, v[idx]])
-  ) as GetThemeColors<I>;
-}
-
-function colorsFromDefs(themeDefs: ThemeDefs, side: ThemeMode) {
-  if (side === "dark") {
-    return colorsByIndex(themeDefs.colors, 1);
-  }
-  if (side === "light2") {
-    return {
-      ...colorsByIndex(themeDefs.colors, 0),
-      mode: "light2",
-    } as const;
-  }
-  return colorsByIndex(themeDefs.colors, 0);
-}
-
-function fnsFromDefs({fns}: {fns: ThemeFnsDef}, side: ThemeMode) {
-  return Object.fromEntries(Object.entries(fns).map(([key, modeFns]) => [key, modeFns[side] ?? modeFns.light])) as {
-    [K in keyof ThemeDefs["fns"]]: ThemeDefs["fns"][K]["light"];
+function pickIdx<Defs extends Record<string, readonly [unknown, unknown]>>(d: Defs, idx: 0 | 1) {
+  return Object.fromEntries(Object.entries(d).map(([key, def]) => [key, def[idx]])) as {
+    [K in keyof Defs]: Defs[K][number];
   };
 }
-export function sideFromDefs(defs: ThemeDefs, side: ThemeMode) {
-  return {
-    colors: colorsFromDefs(defs, side),
-    fns: fnsFromDefs(defs, side),
-  };
+
+export function sideFromDefs(defs: ThemeDefs, mode: ThemeMode) {
+  const idx = mode === "dark" ? 1 : 0;
+  return {colors: pickIdx(defs.colors, idx), fns: pickIdx(defs.fns, idx)};
 }

package/src/design-system/def.ts

@@ -1,17 +1,25 @@
 import type {ModeDef} from "./types";
 
-type Mapper<T, U> = (_: T) => U;
+type Mapper<T, U> = (_: T, idx: number) => U;
 
-export function mapDef<T, U>(pair: ModeDef<T>, map0: Mapper<T, U>, map1?: Mapper<T, U>): ModeDef<U>;
-export function mapDef<T, U>(
-  pair: ModeDef<T> | undefined,
-  map0: Mapper<T | undefined, U>,
-  map1?: Mapper<T | undefined, U>
-): ModeDef<U>;
-export function mapDef<T, U>(
-  pair: ModeDef<T> | undefined,
-  map0: Mapper<T | undefined, U>,
-  map1: Mapper<T | undefined, U> = map0
-): ModeDef<U> {
-  return [map0(pair?.[0]), map1(pair?.[1])];
+type MapperDef<T, U> = Mapper<T, U> | ModeDef<Mapper<T, U>>;
+
+export function mapDef<T, U>(def: ModeDef<T>, mapper: MapperDef<T, U>): ModeDef<U>;
+export function mapDef<T, U>(def: ModeDef<T> | undefined, mapper: MapperDef<T | undefined, U>): ModeDef<U>;
+export function mapDef<T, U>(def: ModeDef<T> | undefined, mapper: MapperDef<T | undefined, U>): ModeDef<U> {
+  if (typeof mapper === "function") {
+    // oxlint-disable-next-line no-param-reassign
+    mapper = [mapper, mapper];
+  }
+  if (def === undefined) {
+    return [mapper[0](undefined, 0), mapper[1](undefined, 1)];
+  }
+  return [mapper[0](def[0], 0), mapper[1](def[1], 1)];
+}
+
+export function extendDef<T>(def: ModeDef<T>, override?: ModeDef<Partial<T>>): ModeDef<T> {
+  if (!override) {
+    return def;
+  }
+  return mapDef(override, (o, i) => ({...def[i], ...o}));
 }

package/src/design-system/fns.adaptive.test.ts

@@ -0,0 +1,149 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+import {makeAdapt} from "./fns";
+
+const {defs} = locateThemeBundle(false);
+
+const adapt = makeAdapt(defs.colors.panelBg);
+
+describe("adapt.bg", () => {
+  test("light", () => {
+    expect(userColorChoices((c) => adapt[0].bg(c))).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#D9D9D9   | hsl(none   0%  85%) | oklch(0.89 0    none)",
+        "CMYK Cyan   ": "#D9FFFF   | hsl( 180 100%  93%) | oklch(0.97 0.04 197 )",
+        "CMYK Magenta": "#FFD9FF   | hsl( 300 100%  93%) | oklch(0.93 0.06 326 )",
+        "CMYK Yellow ": "#FFFFD9   | hsl(  60 100%  93%) | oklch(0.99 0.05 107 )",
+        "Noti green  ": "#FAFBFA   | hsl( 120  11%  98%) | oklch(0.99 0    146 )",
+        "Noti red    ": "#FCFAF9   | hsl(  20  33%  98%) | oklch(0.99 0     49 )",
+        "Noti yellow ": "#FCFBF6   | hsl(  50  50%  98%) | oklch(0.99 0.01  97 )",
+        "RGB  Blue   ": "#D9D9FF   | hsl( 240 100%  93%) | oklch(0.9  0.05 285 )",
+        "RGB  Green  ": "#D9FFD9   | hsl( 120 100%  93%) | oklch(0.96 0.06 145 )",
+        "RGB  Red    ": "#FFD9D9   | hsl(   0 100%  93%) | oklch(0.92 0.04  18 )",
+        "White       ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#E4E4E4   | hsl(none   0%  89%) | oklch(0.92 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#E9EDF0   | hsl( 206  19%  93%) | oklch(0.94 0.01 240 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#F0F1F2   | hsl( 210   7%  95%) | oklch(0.96 0    248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#F9DADC   | hsl( 356  72%  92%) | oklch(0.91 0.03  13 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FBDEE8   | hsl( 339  78%  93%) | oklch(0.93 0.03 355 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F0DFF3   | hsl( 291  45%  91%) | oklch(0.92 0.03 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#E8E2F4   | hsl( 260  45%  92%) | oklch(0.92 0.02 301 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#E2E5F4   | hsl( 230  45%  92%) | oklch(0.92 0.02 277 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#DFEBFE   | hsl( 217  94%  94%) | oklch(0.94 0.03 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#DCF0FB   | hsl( 201  79%  92%) | oklch(0.94 0.03 232 )",
+        "swatches[10] aka Swatch.Turquoise ": "#DDF5F8   | hsl( 187  66%  92%) | oklch(0.95 0.03 206 )",
+        "swatches[11] aka Swatch.GreenDark ": "#DCEFED   | hsl( 174  37%  90%) | oklch(0.94 0.02 189 )",
+        "swatches[12] aka Swatch.Green     ": "#E5F3E5   | hsl( 120  37%  93%) | oklch(0.95 0.02 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#EEF6E5   | hsl(  88  49%  93%) | oklch(0.96 0.02 128 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FEF1E0   | hsl(  34  94%  94%) | oklch(0.96 0.03  75 )",
+        "swatches[15] aka Swatch.Orange    ": "#FFE6DD   | hsl(  16 100%  93%) | oklch(0.94 0.03  41 )",
+        "swatches[16] aka Swatch.Brown     ": "#F3E4E0   | hsl(  13  44%  92%) | oklch(0.93 0.02  35 )",
+      }
+    `);
+  });
+  test("dark", () => {
+    expect(userColorChoices((c) => adapt[1].bg(c))).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#2D2D2D   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "CMYK Cyan   ": "#105D5D   | hsl( 180  71%  21%) | oklch(0.44 0.07 195 )",
+        "CMYK Magenta": "#5D105D   | hsl( 300  71%  21%) | oklch(0.35 0.14 328 )",
+        "CMYK Yellow ": "#5D5D10   | hsl(  60  71%  21%) | oklch(0.46 0.09 110 )",
+        "Noti green  ": "#525553   | hsl( 140   2%  33%) | oklch(0.45 0.01 157 )",
+        "Noti red    ": "#575251   | hsl(  10   4%  33%) | oklch(0.44 0.01  31 )",
+        "Noti yellow ": "#57544A   | hsl(  46   8%  32%) | oklch(0.45 0.02  93 )",
+        "RGB  Blue   ": "#181888   | hsl( 240  70%  31%) | oklch(0.31 0.18 270 )",
+        "RGB  Green  ": "#105D10   | hsl( 120  71%  21%) | oklch(0.42 0.13 143 )",
+        "RGB  Red    ": "#5D1010   | hsl(   0  71%  21%) | oklch(0.31 0.11  26 )",
+        "White       ": "#5D5D5D   | hsl(none   0%  36%) | oklch(0.48 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#2D2D2D   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#30383F   | hsl( 208  14%  22%) | oklch(0.34 0.02 245 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#3E4143   | hsl( 204   4%  25%) | oklch(0.37 0.01 237 )",
+        "swatches[ 3] aka Swatch.Red       ": "#571519   | hsl( 356  61%  21%) | oklch(0.31 0.1   22 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#551A2E   | hsl( 340  53%  22%) | oklch(0.32 0.09   3 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#431F49   | hsl( 291  40%  20%) | oklch(0.31 0.08 322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#34264E   | hsl( 261  34%  23%) | oklch(0.31 0.07 298 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#252B4A   | hsl( 230  33%  22%) | oklch(0.3  0.06 274 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#1C345B   | hsl( 217  53%  23%) | oklch(0.33 0.08 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#184054   | hsl( 200  56%  21%) | oklch(0.35 0.06 233 )",
+        "swatches[10] aka Swatch.Turquoise ": "#19494F   | hsl( 187  52%  20%) | oklch(0.38 0.05 207 )",
+        "swatches[11] aka Swatch.GreenDark ": "#163D39   | hsl( 174  47%  16%) | oklch(0.33 0.04 186 )",
+        "swatches[12] aka Swatch.Green     ": "#284529   | hsl( 122  27%  21%) | oklch(0.36 0.06 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#3B4B28   | hsl(  87  30%  23%) | oklch(0.39 0.06 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#5B411E   | hsl(  34  50%  24%) | oklch(0.4  0.06  72 )",
+        "swatches[15] aka Swatch.Orange    ": "#5C2A19   | hsl(  15  57%  23%) | oklch(0.35 0.08  39 )",
+        "swatches[16] aka Swatch.Brown     ": "#45281F   | hsl(  14  38%  20%) | oklch(0.31 0.05  38 )",
+      }
+    `);
+  });
+});
+
+describe("adapt.fg", () => {
+  test("light", () => {
+    expect(userColorChoices((c) => adapt[0].fg(c))).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#0D0D0D   | hsl(none   0%   5%) | oklch(0.16 0    none)",
+        "CMYK Cyan   ": "#00A6A6   | hsl( 180 100%  33%) | oklch(0.66 0.11 195 )",
+        "CMYK Magenta": "#FF0DFF   | hsl( 300 100%  53%) | oklch(0.7  0.32 328 )",
+        "CMYK Yellow ": "#9A9A00   | hsl(  60 100%  30%) | oklch(0.66 0.14 110 )",
+        "Noti green  ": "#7B9D86   | hsl( 139  15%  55%) | oklch(0.66 0.05 155 )",
+        "Noti red    ": "#C58577   | hsl(  11  40%  62%) | oklch(0.68 0.08  33 )",
+        "Noti yellow ": "#B19230   | hsl(  46  57%  44%) | oklch(0.67 0.12  91 )",
+        "RGB  Blue   ": "#0D0DFF   | hsl( 240 100%  53%) | oklch(0.46 0.31 265 )",
+        "RGB  Green  ": "#00AD00   | hsl( 120 100%  34%) | oklch(0.65 0.22 142 )",
+        "RGB  Red    ": "#FF0D0D   | hsl(   0 100%  53%) | oklch(0.63 0.26  29 )",
+        "White       ": "#959595   | hsl(none   0%  58%) | oklch(0.67 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#535353   | hsl(none   0%  33%) | oklch(0.44 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#718AA0   | hsl( 208  20%  54%) | oklch(0.62 0.04 245 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#8C96A0   | hsl( 210  10%  59%) | oklch(0.67 0.02 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#D61521   | hsl( 356  82%  46%) | oklch(0.56 0.22  26 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#E82B6D   | hsl( 339  80%  54%) | oklch(0.61 0.22   7 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#A136B3   | hsl( 291  54%  46%) | oklch(0.54 0.2  322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6F47BA   | hsl( 261  45%  50%) | oklch(0.5  0.17 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#485CB8   | hsl( 229  44%  50%) | oklch(0.51 0.15 271 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#347FFB   | hsl( 217  96%  59%) | oklch(0.62 0.2  260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#1B9EE1   | hsl( 200  79%  49%) | oklch(0.67 0.14 239 )",
+        "swatches[10] aka Swatch.Turquoise ": "#23A3B4   | hsl( 187  67%  42%) | oklch(0.66 0.11 209 )",
+        "swatches[11] aka Swatch.GreenDark ": "#219C8F   | hsl( 174  65%  37%) | oklch(0.63 0.1  184 )",
+        "swatches[12] aka Swatch.Green     ": "#4CA751   | hsl( 123  37%  48%) | oklch(0.65 0.15 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#71A338   | hsl(  88  49%  43%) | oklch(0.66 0.15 131 )",
+        "swatches[14] aka Swatch.Yellow    ": "#DA7E04   | hsl(  34  96%  44%) | oklch(0.68 0.16  62 )",
+        "swatches[15] aka Swatch.Orange    ": "#FC5E2A   | hsl(  15  97%  58%) | oklch(0.68 0.2   37 )",
+        "swatches[16] aka Swatch.Brown     ": "#B4573B   | hsl(  14  51%  47%) | oklch(0.57 0.13  37 )",
+      }
+    `);
+  });
+  test("dark", () => {
+    expect(userColorChoices((c) => adapt[1].fg(c))).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#888888   | hsl(none   0%  53%) | oklch(0.63 0    none)",
+        "CMYK Cyan   ": "#02F3F3   | hsl( 180  98%  48%) | oklch(0.87 0.15 195 )",
+        "CMYK Magenta": "#F301F3   | hsl( 300  99%  48%) | oklch(0.68 0.31 328 )",
+        "CMYK Yellow ": "#F3F302   | hsl(  60  98%  48%) | oklch(0.93 0.2  110 )",
+        "Noti green  ": "#D2DBD5   | hsl( 140  11%  84%) | oklch(0.88 0.01 157 )",
+        "Noti red    ": "#E3D1CD   | hsl(  11  28%  85%) | oklch(0.87 0.02  33 )",
+        "Noti yellow ": "#E3D9B8   | hsl(  46  43%  81%) | oklch(0.88 0.05  93 )",
+        "RGB  Blue   ": "#7777FE   | hsl( 240  99%  73%) | oklch(0.64 0.2  279 )",
+        "RGB  Green  ": "#01F301   | hsl( 120  99%  48%) | oklch(0.84 0.28 142 )",
+        "RGB  Red    ": "#FE3939   | hsl(   0  99%  61%) | oklch(0.65 0.23  27 )",
+        "White       ": "#F3F3F3   | hsl(none   0%  95%) | oklch(0.96 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#878787   | hsl(none   0%  53%) | oklch(0.62 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#738A9F   | hsl( 209  19%  54%) | oklch(0.62 0.04 246 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#929BA4   | hsl( 210   9%  61%) | oklch(0.69 0.02 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#F6444F   | hsl( 356  91%  62%) | oklch(0.65 0.21  22 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#E65084   | hsl( 339  75%  61%) | oklch(0.65 0.19   3 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#C55CD6   | hsl( 292  60%  60%) | oklch(0.65 0.2  322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#9677D1   | hsl( 261  49%  64%) | oklch(0.64 0.13 298 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#7383CE   | hsl( 229  48%  63%) | oklch(0.63 0.11 274 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#4485F2   | hsl( 218  87%  61%) | oklch(0.63 0.18 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#1997D9   | hsl( 201  79%  47%) | oklch(0.64 0.14 239 )",
+        "swatches[10] aka Swatch.Turquoise ": "#1FB6CA   | hsl( 187  73%  46%) | oklch(0.71 0.12 209 )",
+        "swatches[11] aka Swatch.GreenDark ": "#16978A   | hsl( 174  75%  34%) | oklch(0.61 0.1  184 )",
+        "swatches[12] aka Swatch.Green     ": "#4CA751   | hsl( 123  37%  48%) | oklch(0.65 0.15 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#88BA4E   | hsl(  88  44%  52%) | oklch(0.73 0.15 130 )",
+        "swatches[14] aka Swatch.Yellow    ": "#F09C2E   | hsl(  34  87%  56%) | oklch(0.76 0.15  68 )",
+        "swatches[15] aka Swatch.Orange    ": "#F1521F   | hsl(  15  88%  53%) | oklch(0.65 0.2   37 )",
+        "swatches[16] aka Swatch.Brown     ": "#CD6C4F   | hsl(  14  56%  56%) | oklch(0.64 0.13  37 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.badge.dark.neutral.test.ts

@@ -0,0 +1,152 @@
+import {userColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(false).themes[1];
+
+describe("badge.bg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.badge(c).bg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#747474   | hsl(none   0%  45%) | oklch(0.56 0    none)",
+        "CMYK Cyan   ": "#4BFCFC   | hsl( 180  97%  64%) | oklch(0.9  0.14 195 )",
+        "CMYK Magenta": "#D07ACD   | hsl( 302  48%  65%) | oklch(0.7  0.15 328 )",
+        "CMYK Yellow ": "#FBFD7E   | hsl(  61  97%  74%) | oklch(0.97 0.15 110 )",
+        "Noti green  ": "#E2E2E2   | hsl(none   0%  89%) | oklch(0.91 0    none)",
+        "Noti red    ": "#FFD0C3   | hsl(  13 100%  88%) | oklch(0.89 0.06  36 )",
+        "Noti yellow ": "#F3E3AE   | hsl(  46  74%  82%) | oklch(0.92 0.07  93 )",
+        "RGB  Blue   ": "#4670CC   | hsl( 221  57%  54%) | oklch(0.56 0.15 264 )",
+        "RGB  Green  ": "#96EC8F   | hsl( 115  71%  74%) | oklch(0.87 0.15 142 )",
+        "RGB  Red    ": "#D45F51   | hsl(   6  60%  57%) | oklch(0.63 0.15  29 )",
+        "White       ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#747474   | hsl(none   0%  45%) | oklch(0.56 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#7B848D   | hsl( 210   7%  52%) | oklch(0.61 0.02 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#9AA2AA   | hsl( 210   9%  64%) | oklch(0.71 0.01 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#C04D42   | hsl(   5  50%  51%) | oklch(0.57 0.15  28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#C4506B   | hsl( 346  50%  54%) | oklch(0.59 0.15   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9C57B1   | hsl( 286  37%  52%) | oklch(0.57 0.15 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#7963C7   | hsl( 253  47%  58%) | oklch(0.57 0.15 291 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#586FC0   | hsl( 227  45%  55%) | oklch(0.56 0.13 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#4E7EDA   | hsl( 219  65%  58%) | oklch(0.6  0.15 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#529CD4   | hsl( 206  60%  58%) | oklch(0.67 0.11 243 )",
+        "swatches[10] aka Swatch.Turquoise ": "#64BACC   | hsl( 190  50%  60%) | oklch(0.74 0.09 213 )",
+        "swatches[11] aka Swatch.GreenDark ": "#4E9489   | hsl( 171  31%  44%) | oklch(0.62 0.07 182 )",
+        "swatches[12] aka Swatch.Green     ": "#6FAA65   | hsl( 111  29%  53%) | oklch(0.68 0.12 141 )",
+        "swatches[13] aka Swatch.GreenLight": "#9BC06B   | hsl(  86  40%  59%) | oklch(0.76 0.12 128 )",
+        "swatches[14] aka Swatch.Yellow    ": "#E9A859   | hsl(  33  77%  63%) | oklch(0.78 0.12  70 )",
+        "swatches[15] aka Swatch.Orange    ": "#DD6C4A   | hsl(  14  68%  58%) | oklch(0.66 0.15  37 )",
+        "swatches[16] aka Swatch.Brown     ": "#A95F48   | hsl(  14  40%  47%) | oklch(0.57 0.1   38 )",
+      }
+    `);
+  });
+});
+
+describe("badge.fg", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.badge(c).fg)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "CMYK Cyan   ": "#001616   | hsl( 180 100%   4%) | oklch(0.18 0.03 195 )",
+        "CMYK Magenta": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "CMYK Yellow ": "#3F3F00   | hsl(  60 100%  12%) | oklch(0.36 0.08 110 )",
+        "Noti green  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "Noti red    ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "Noti yellow ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "RGB  Blue   ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "RGB  Green  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "RGB  Red    ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "White       ": "#4B4B4B   | hsl(none   0%  29%) | oklch(0.41 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 2] aka Swatch.GreyLight ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 3] aka Swatch.Red       ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 5] aka Swatch.Purple    ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 6] aka Swatch.Violet    ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 8] aka Swatch.Blue      ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[10] aka Swatch.Turquoise ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[11] aka Swatch.GreenDark ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[12] aka Swatch.Green     ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[13] aka Swatch.GreenLight": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[14] aka Swatch.Yellow    ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[15] aka Swatch.Orange    ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[16] aka Swatch.Brown     ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+      }
+    `);
+  });
+});
+
+describe("badge.border", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.badge(c).border)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#747474   | hsl(none   0%  45%) | oklch(0.56 0    none)",
+        "CMYK Cyan   ": "#4BFCFC   | hsl( 180  97%  64%) | oklch(0.9  0.14 195 )",
+        "CMYK Magenta": "#D07ACD   | hsl( 302  48%  65%) | oklch(0.7  0.15 328 )",
+        "CMYK Yellow ": "#FBFD7E   | hsl(  61  97%  74%) | oklch(0.97 0.15 110 )",
+        "Noti green  ": "#E2E2E2   | hsl(none   0%  89%) | oklch(0.91 0    none)",
+        "Noti red    ": "#FFD0C3   | hsl(  13 100%  88%) | oklch(0.89 0.06  36 )",
+        "Noti yellow ": "#F3E3AE   | hsl(  46  74%  82%) | oklch(0.92 0.07  93 )",
+        "RGB  Blue   ": "#4670CC   | hsl( 221  57%  54%) | oklch(0.56 0.15 264 )",
+        "RGB  Green  ": "#96EC8F   | hsl( 115  71%  74%) | oklch(0.87 0.15 142 )",
+        "RGB  Red    ": "#D45F51   | hsl(   6  60%  57%) | oklch(0.63 0.15  29 )",
+        "White       ": "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#747474   | hsl(none   0%  45%) | oklch(0.56 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#7B848D   | hsl( 210   7%  52%) | oklch(0.61 0.02 248 )",
+        "swatches[ 2] aka Swatch.GreyLight ": "#9AA2AA   | hsl( 210   9%  64%) | oklch(0.71 0.01 248 )",
+        "swatches[ 3] aka Swatch.Red       ": "#C04D42   | hsl(   5  50%  51%) | oklch(0.57 0.15  28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#C4506B   | hsl( 346  50%  54%) | oklch(0.59 0.15   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9C57B1   | hsl( 286  37%  52%) | oklch(0.57 0.15 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#7963C7   | hsl( 253  47%  58%) | oklch(0.57 0.15 291 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#586FC0   | hsl( 227  45%  55%) | oklch(0.56 0.13 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#4E7EDA   | hsl( 219  65%  58%) | oklch(0.6  0.15 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#529CD4   | hsl( 206  60%  58%) | oklch(0.67 0.11 243 )",
+        "swatches[10] aka Swatch.Turquoise ": "#64BACC   | hsl( 190  50%  60%) | oklch(0.74 0.09 213 )",
+        "swatches[11] aka Swatch.GreenDark ": "#4E9489   | hsl( 171  31%  44%) | oklch(0.62 0.07 182 )",
+        "swatches[12] aka Swatch.Green     ": "#6FAA65   | hsl( 111  29%  53%) | oklch(0.68 0.12 141 )",
+        "swatches[13] aka Swatch.GreenLight": "#9BC06B   | hsl(  86  40%  59%) | oklch(0.76 0.12 128 )",
+        "swatches[14] aka Swatch.Yellow    ": "#E9A859   | hsl(  33  77%  63%) | oklch(0.78 0.12  70 )",
+        "swatches[15] aka Swatch.Orange    ": "#DD6C4A   | hsl(  14  68%  58%) | oklch(0.66 0.15  37 )",
+        "swatches[16] aka Swatch.Brown     ": "#A95F48   | hsl(  14  40%  47%) | oklch(0.57 0.1   38 )",
+      }
+    `);
+  });
+});
+
+describe("badge.borderSelected", () => {
+  test("snapshot", () => {
+    expect(userColorChoices((c) => theme.fns.badge(c).borderSelected)).toMatchInlineSnapshot(`
+      {
+        "CMYK Black  ": "#000000   | hsl(none   0%   0%) | oklch(0    0    none)",
+        "CMYK Cyan   ": "#52DAD9   | hsl( 180  65%  59%) | oklch(0.82 0.12 194 )",
+        "CMYK Magenta": "#D500D5   | hsl( 300 100%  42%) | oklch(0.61 0.28 328 )",
+        "CMYK Yellow ": "#DFE03F   | hsl(  60  72%  56%) | oklch(0.88 0.17 110 )",
+        "Noti green  ": "#C5C5C5   | hsl(none   0%  77%) | oklch(0.82 0    none)",
+        "Noti red    ": "#C3C3C3   | hsl(none   0%  76%) | oklch(0.82 0    none)",
+        "Noti yellow ": "#C8C6BF   | hsl(  47   8%  77%) | oklch(0.83 0.01  94 )",
+        "RGB  Blue   ": "#0021AA   | hsl( 228 100%  33%) | oklch(0.36 0.21 264 )",
+        "RGB  Green  ": "#1EDC1A   | hsl( 119  79%  48%) | oklch(0.78 0.26 142 )",
+        "RGB  Red    ": "#CF0402   | hsl(   1  98%  41%) | oklch(0.54 0.22  29 )",
+        "White       ": "#E1E1E1   | hsl(none   0%  88%) | oklch(0.91 0    none)",
+        "swatches[ 0] aka Swatch.GreyDark  ": "#333333   | hsl(none   0%  20%) | oklch(0.32 0    none)",
+        "swatches[ 1] aka Swatch.Grey      ": "#686868   | hsl(none   0%  41%) | oklch(0.52 0    none)",
+        "swatches[ 2] aka Swatch.GreyLight ": "#858585   | hsl(none   0%  52%) | oklch(0.62 0    none)",
+        "swatches[ 3] aka Swatch.Red       ": "#95241E   | hsl(   3  66%  35%) | oklch(0.44 0.15  28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#A63251   | hsl( 344  54%  42%) | oklch(0.5  0.15   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#6D2B80   | hsl( 287  50%  34%) | oklch(0.42 0.15 318 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#463281   | hsl( 255  44%  35%) | oklch(0.38 0.13 291 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#30407D   | hsl( 228  45%  34%) | oklch(0.39 0.1  270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#3362BF   | hsl( 220  58%  47%) | oklch(0.51 0.16 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#4A7FA9   | hsl( 207  39%  48%) | oklch(0.58 0.09 244 )",
+        "swatches[10] aka Swatch.Turquoise ": "#6599A5   | hsl( 191  26%  52%) | oklch(0.65 0.06 214 )",
+        "swatches[11] aka Swatch.GreenDark ": "#4F736D   | hsl( 170  19%  38%) | oklch(0.53 0.04 183 )",
+        "swatches[12] aka Swatch.Green     ": "#5E8B57   | hsl( 112  23%  44%) | oklch(0.59 0.09 141 )",
+        "swatches[13] aka Swatch.GreenLight": "#85A161   | hsl(  86  25%  51%) | oklch(0.67 0.09 128 )",
+        "swatches[14] aka Swatch.Yellow    ": "#C29054   | hsl(  33  47%  55%) | oklch(0.69 0.1   70 )",
+        "swatches[15] aka Swatch.Orange    ": "#BB5333   | hsl(  14  57%  47%) | oklch(0.57 0.14  38 )",
+        "swatches[16] aka Swatch.Brown     ": "#784434   | hsl(  14  40%  34%) | oklch(0.45 0.08  38 )",
+      }
+    `);
+  });
+});