@fibery/ui-kit 2.1.0 → 2.1.1

package/src/link-input/{utils.js → utils.ts}

@@ -1,9 +1,4 @@
-/**
- * Infers actual URL from the input's value.
- * @param value
- * @returns {null|string} null for invalid URL
- */
-export const getURL = (value) => {
+export const getURL = (value: string | null | undefined) => {
   if (!value) {
     return null;
   }

package/src/number-input/decimal.ts

@@ -0,0 +1,50 @@
+import isNil from "lodash/isNil";
+import trimEnd from "lodash/trimEnd";
+
+type NumericValue = string | number | null | undefined;
+
+const isEmpty = (value: NumericValue): value is null | undefined | "" => isNil(value) || value === "";
+
+const getPrecision = (value: NumericValue) => {
+  if (isEmpty(value)) {
+    return 0;
+  }
+  const [, decimalPart = ""] = String(value).split(".");
+  return decimalPart.length;
+};
+
+const removeTrailingZeros = (value: string) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const hasDecimalPart = value.indexOf(".") > 0;
+  return hasDecimalPart ? trimEnd(trimEnd(value, "0"), ".") : value;
+};
+
+export const add = (first: NumericValue, second: NumericValue) => {
+  const result = Number(first) + Number(second);
+  const maxPrecision = Math.max(getPrecision(first), getPrecision(second));
+  return removeTrailingZeros(result.toFixed(maxPrecision));
+};
+
+export const sub = (first: NumericValue, second: NumericValue) => {
+  return removeTrailingZeros(add(first, -(second as number)));
+};
+
+export const multiplyByHundred = (value: NumericValue) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const result = Number(value) * 100;
+  const precision = Math.max(0, getPrecision(value) - 2);
+  return removeTrailingZeros(result.toFixed(precision));
+};
+
+export const divideByHundred = (value: NumericValue) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const result = Number(value) / 100;
+  const precision = getPrecision(value) + 2;
+  return removeTrailingZeros(result.toFixed(precision));
+};

package/src/number-input/utils.ts

@@ -53,8 +53,8 @@ export const parseValue = (value: Value, numberFormat: NumberFormat, numberPreci
     return numberFormat === "Percent" ? divideByHundred(value) : value;
   };
 
-  const toString = (value: number | null) => {
-    return value === null ? value : String(value);
+  const toString = (value: string | number | null | undefined) => {
+    return value === null || value === undefined ? null : String(value);
   };
 
   return toString(internalizeNumber(parse(value)));

package/src/palette-generator.test.ts

@@ -1,6 +1,7 @@
 import {getAlpha, oklchFrom} from "./color-utils";
-import {type ColorScale, makeThematicPalette, selectPalette} from "./palette-generator";
+import {makeThematicPalette, selectPalette} from "./palette-generator";
 import {zeroBasedFromOneBased} from "./scale-generator";
+import type {ColorScale} from "./design-system/types";
 
 function roundToThreeDigits(number: number) {
   return Math.round(number * 1000) / 1000;

package/src/palette-generator.ts

@@ -12,36 +12,15 @@ import {
   generatePresetScale,
   generateWhites,
   type InterpolatedScaleConfig,
-  OneBasedScale,
   paletteFromHue,
   paletteFromHueBoth,
   SCALE_PRESETS,
   type ScaleConfig,
   type ScaleCurves,
-  type ZeroBasedScale,
 } from "./scale-generator";
 import {type ColorFilterSpec} from "./color-filter";
-
-export type ColorScale = OneBasedScale<string>;
-
-export interface ThemePalette {
-  key: string;
-  white: string;
-  black: string;
-  whiteA: ColorScale;
-  blackA: ColorScale;
-  base: ColorScale;
-  baseDark: ColorScale;
-  accent: ColorScale;
-  accentDark: ColorScale;
-  red: ColorScale;
-  redDark: ColorScale;
-  teal: ColorScale;
-  tealDark: ColorScale;
-  yellow: ColorScale;
-  yellowDark: ColorScale;
-  deneutralize?: ColorFilterSpec;
-}
+import {common} from "./palettes/common";
+import type {HighlightDefs, ModeDef, ThemePalette, ZeroBasedScale} from "./design-system/types";
 
 export function selectPalette({
   warmLook = false,
@@ -64,7 +43,8 @@ export type ThematicPrefs = {
   accentChroma: number;
   hueShiftTargetHue?: number;
   hueShiftAmount?: number;
-  filter?: Partial<ColorFilterSpec>;
+  filter?: ModeDef<Partial<ColorFilterSpec>>;
+  highlight: HighlightDefs;
 };
 
 export function shiftHueTowards(hue: number, targetHue: number, amount: number): number {
@@ -77,8 +57,9 @@ export function shiftHueTowards(hue: number, targetHue: number, amount: number):
   return (hue + diff * amount + 360) % 360;
 }
 
-export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
-  const {accentHue, accentChroma} = config;
+const defaultHighlight = common.highlight;
+export function makeThematicPalette(config: Omit<ThematicPrefs, "highlight"> & Partial<ThematicPrefs>): ThemePalette {
+  const {accentHue, accentChroma, highlight = defaultHighlight} = config;
   const baseChroma = config.baseChroma ?? 0;
   const baseHue = config.hueShiftTargetHue ?? config.baseHue ?? 0;
   const hueShift = config.hueShiftAmount ?? Math.min(baseChroma * 2, 0.3);
@@ -128,6 +109,7 @@ export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
     yellow,
     yellowDark,
     deneutralize: config.filter,
+    highlight,
   };
 }
 

package/src/palettes/_.ts

@@ -1,7 +1,7 @@
 import {cardTypeColors, defsFromPalette} from "../design-system/colors";
 import {inspectColor, isValidColor} from "../color-utils";
-import {ThemePalette} from "../palette-generator";
 import {backgrounds, type ColorDef, sections, stickers} from "../canvas-colors";
+import type {ThemePalette} from "../design-system/types";
 
 const COLOR_PREFIXES = ["rgba(", "rgb(", "hsla(", "hsl("] as const;
 const HEX_CHARS = "0123456789abcdefABCDEF";
@@ -110,6 +110,6 @@ export function colors(palette: ThemePalette) {
 }
 
 export function palette(palette: ThemePalette) {
-  const {deneutralize: _, ...rest} = palette;
+  const {deneutralize: _, highlight: _h, ...rest} = palette;
   return deepMapColors(rest);
 }

package/src/palettes/common.ts

@@ -0,0 +1,31 @@
+import type {ThemePaletteBase} from "../design-system/types";
+
+export const common: ThemePaletteBase = {
+  highlight: {
+    hues: {
+      yellow: 85,
+      green: 134,
+      aquamarine: 163,
+      aqua: 185,
+      blue: 254,
+      purple: 310,
+      pink: 345,
+      red: 25,
+      grey: 265,
+    },
+    bg: [
+      {c: 0.065, Lc: 8},
+      {c: 0.065, Lc: 8},
+    ],
+    fg: [
+      {c: 0.25, Lc: 65},
+      {c: 0.12, Lc: 65},
+    ],
+    overrides: {
+      grey: {
+        bg: [{c: 0}, {c: 0}],
+        fg: [{c: 0}, {c: 0}],
+      },
+    },
+  },
+};

package/src/palettes/diff-colors.ts

@@ -134,24 +134,26 @@ function differentTypes(valActual: unknown, valExpected: unknown) {
   );
 }
 
-function computeColorReport(actual: ColorDefs, expected: ColorDefs) {
+export function computeColorReport(actual: ColorDefs, expected: ColorDefs) {
   const changes: object[] = [];
+  const pairFirst: object[] = [];
+  const pairSecond: object[] = [];
 
   function compare(aStr: string, eStr: string, path: string) {
     if (eStr === aStr) {
-      return;
+      return null;
     }
     if (eStr === "none" || aStr === "none") {
       console.error("skip %o expected = %o vs %o actual", path, eStr, aStr);
-      return;
+      return null;
     }
     const actual = extractColorOrThrow(aStr);
     const expected = extractColorOrThrow(eStr);
     if (actual === null || expected === null) {
       console.error("skip %o expected = %o vs %o actual (not a color)", path, eStr, aStr);
-      return;
+      return null;
     }
-    changes.push({
+    return {
       path,
       ...mapValues(
         {
@@ -162,7 +164,7 @@ function computeColorReport(actual: ColorDefs, expected: ColorDefs) {
           [inspect.custom]: () => x,
         })
       ),
-    });
+    };
   }
 
   const keys = new Set([...Object.keys(actual), ...Object.keys(expected)] as Array<keyof ColorDefs>);
@@ -174,27 +176,42 @@ function computeColorReport(actual: ColorDefs, expected: ColorDefs) {
       continue;
     }
     if (typeof valActual === "string" || typeof valExpected === "string") {
-      compare(valActual as string, valExpected as string, key);
+      const row = compare(valActual as string, valExpected as string, key);
+      if (row) {
+        changes.push(row);
+      }
       continue;
     }
     const len = Math.max(valActual.length, valExpected.length);
+    const isPair = len === 2;
+    const pairSuffix = isPair ? [".light", ".dark"] : undefined;
     for (let i = 0; i < len; i++) {
-      const path = `${key}[${i}]`;
+      const path = `${key}${pairSuffix ? pairSuffix[i] : `[${i}]`}`;
       const elActual = valActual[i];
       const elExpected = valExpected[i];
       if (differentTypes(elActual, elExpected)) {
         console.error("skip %o expected = %o vs %o actual (likely new or gone value)", path, elExpected, elActual);
         continue;
       }
+      const target = isPair ? (i === 0 ? pairFirst : pairSecond) : changes;
       if (typeof elActual === "string" || typeof elExpected === "string") {
-        compare(elActual as string, elExpected as string, path);
+        const row = compare(elActual as string, elExpected as string, path);
+        if (row) {
+          target.push(row);
+        }
       } else {
-        compare(elActual[0], elExpected[0], `${path}.light`);
-        compare(elActual[1], elExpected[1], `${path}.dark`);
+        const lightRow = compare(elActual[0], elExpected[0], `${path}.light`);
+        if (lightRow) {
+          target.push(lightRow);
+        }
+        const darkRow = compare(elActual[1], elExpected[1], `${path}.dark`);
+        if (darkRow) {
+          target.push(darkRow);
+        }
       }
     }
   }
-  return changes;
+  return [...pairFirst, ...pairSecond, ...changes];
 }
 
 function findTestAnchor(source: string, currentTestName: string): number {

package/src/palettes/inspect.defs.colors.neutral-arch.test.ts

@@ -1582,76 +1582,112 @@ test("snapshot", () => {
         "#713a18   | hsl(23 65% 27%)            | oklch(0.41 0.09 50)         ",
       ],
       "highlightBgAqua": [
-        "#c6f2eb   | hsl(170 63% 86%)           | oklch(0.93 0.05 185)        ",
-        "#2d5753   | hsl(174 32% 26%)           | oklch(0.43 0.05 188)        ",
+        "#baf9f0   | hsl(171 84% 85%)           | oklch(0.94 0.06 185)        ",
+        "#004a43   | hsl(174 100% 15%)          | oklch(0.37 0.07 184)        ",
       ],
       "highlightBgAquamarine": [
-        "#c3f7c1   | hsl(118 77% 86%)           | oklch(0.93 0.09 144)        ",
-        "#0f4b34   | hsl(157 67% 18%)           | oklch(0.37 0.07 163)        ",
+        "#c4f9df   | hsl(151 82% 87%)           | oklch(0.94 0.06 164)        ",
+        "#174a35   | hsl(155 53% 19%)           | oklch(0.37 0.07 163)        ",
       ],
       "highlightBgBlue": [
-        "#d0ebfa   | hsl(201 81% 90%)           | oklch(0.92 0.04 232)        ",
-        "#2d365a   | hsl(228 33% 26%)           | oklch(0.34 0.06 272)        ",
+        "#e1eeff   | hsl(214 100% 94%)          | oklch(0.94 0.03 255)        ",
+        "#284363   | hsl(213 42% 27%)           | oklch(0.38 0.06 254)        ",
       ],
       "highlightBgGreen": [
-        "#d0f2bb   | hsl(97 68% 84%)            | oklch(0.92 0.08 134)        ",
-        "#325833   | hsl(122 28% 27%)           | oklch(0.42 0.07 145)        ",
+        "#daf5c9   | hsl(97 69% 87%)            | oklch(0.94 0.06 133)        ",
+        "#324823   | hsl(96 35% 21%)            | oklch(0.37 0.07 134)        ",
       ],
       "highlightBgGrey": [
-        "#dee3e9   | hsl(213 20% 89%)           | oklch(0.91 0.01 253)        ",
-        "#3e3f4e   | hsl(236 11% 27%)           | oklch(0.37 0.03 282)        ",
+        "#ededed   | hsl(none 0% 93%)           | oklch(0.95 0 none)          ",
+        "#424242   | hsl(none 0% 26%)           | oklch(0.38 0 none)          ",
       ],
       "highlightBgPink": [
-        "#fae4f0   | hsl(327 69% 94%)           | oklch(0.94 0.03 344)        ",
-        "#6c3255   | hsl(324 37% 31%)           | oklch(0.41 0.09 345)        ",
+        "#ffe7f3   | hsl(330 100% 95%)          | oklch(0.95 0.03 346)        ",
+        "#5c354b   | hsl(326 27% 28%)           | oklch(0.38 0.06 346)        ",
       ],
       "highlightBgPurple": [
-        "#f2e4fa   | hsl(278 69% 94%)           | oklch(0.94 0.03 314)        ",
-        "#523252   | hsl(300 24% 26%)           | oklch(0.37 0.07 327)        ",
+        "#f5e8ff   | hsl(274 100% 95%)          | oklch(0.95 0.03 311)        ",
+        "#4e395e   | hsl(274 25% 30%)           | oklch(0.38 0.07 310)        ",
       ],
       "highlightBgRed": [
-        "#fae0dd   | hsl(6 74% 92%)             | oklch(0.93 0.03 26)         ",
-        "#5f2c31   | hsl(354 37% 27%)           | oklch(0.36 0.07 15)         ",
+        "#ffe8e6   | hsl(5 100% 95%)            | oklch(0.95 0.03 24)         ",
+        "#613531   | hsl(5 33% 29%)             | oklch(0.38 0.06 26)         ",
       ],
       "highlightBgYellow": [
-        "#faf0b9   | hsl(51 87% 85%)            | oklch(0.95 0.07 99)         ",
-        "#584812   | hsl(46 66% 21%)            | oklch(0.41 0.07 92)         ",
+        "#ffebc4   | hsl(40 100% 88%)           | oklch(0.95 0.06 84)         ",
+        "#513f13   | hsl(43 62% 20%)            | oklch(0.38 0.06 86)         ",
       ],
       "highlightFgAqua": [
-        "#239b96   | hsl(178 63% 37%)           | oklch(0.63 0.1 191)         ",
-        "#34a89e   | hsl(175 53% 43%)           | oklch(0.67 0.1 187)         ",
+        "#009287   | hsl(175 100% 29%)          | oklch(0.59 0.1 186)         ",
+        "#42cfc0   | hsl(174 59% 54%)           | oklch(0.78 0.12 185)        ",
       ],
       "highlightFgAquamarine": [
-        "#28a573   | hsl(156 61% 40%)           | oklch(0.64 0.13 161)        ",
-        "#34ac80   | hsl(158 54% 44%)           | oklch(0.67 0.12 164)        ",
+        "#009568   | hsl(162 100% 29%)          | oklch(0.59 0.13 163)        ",
+        "#65cfa0   | hsl(153 52% 60%)           | oklch(0.78 0.12 163)        ",
       ],
       "highlightFgBlue": [
-        "#377dcd   | hsl(212 60% 51%)           | oklch(0.58 0.14 254)        ",
-        "#4887c8   | hsl(210 54% 53%)           | oklch(0.61 0.12 251)        ",
+        "#0081f3   | hsl(208 100% 48%)          | oklch(0.61 0.19 254)        ",
+        "#8abfff   | hsl(213 100% 77%)          | oklch(0.79 0.11 254)        ",
       ],
       "highlightFgGreen": [
-        "#50a541   | hsl(111 43% 45%)           | oklch(0.65 0.16 141)        ",
-        "#58ac4e   | hsl(114 38% 49%)           | oklch(0.67 0.15 142)        ",
+        "#509300   | hsl(87 100% 29%)           | oklch(0.59 0.17 134)        ",
+        "#99ca79   | hsl(96 43% 63%)            | oklch(0.79 0.12 134)        ",
       ],
       "highlightFgGrey": [
-        "#737d8e   | hsl(218 11% 50%)           | oklch(0.59 0.03 261)        ",
-        "#878ca0   | hsl(228 12% 58%)           | oklch(0.64 0.03 274)        ",
+        "#838383   | hsl(none 0% 51%)           | oklch(0.61 0 none)          ",
+        "#bcbcbc   | hsl(none 0% 74%)           | oklch(0.8 0 none)           ",
+      ],
+      "highlightFgOnBgAqua": [
+        "#00796f   | hsl(175 100% 24%)          | oklch(0.52 0.09 185)        ",
+        "#57e0d0   | hsl(173 69% 61%)           | oklch(0.83 0.12 184)        ",
+      ],
+      "highlightFgOnBgAquamarine": [
+        "#007b55   | hsl(161 100% 24%)          | oklch(0.52 0.11 163)        ",
+        "#76e0b1   | hsl(153 63% 67%)           | oklch(0.83 0.12 163)        ",
+      ],
+      "highlightFgOnBgBlue": [
+        "#006ac9   | hsl(208 100% 39%)          | oklch(0.53 0.17 254)        ",
+        "#a7cfff   | hsl(213 100% 83%)          | oklch(0.84 0.08 253)        ",
+      ],
+      "highlightFgOnBgGreen": [
+        "#417900   | hsl(88 100% 24%)           | oklch(0.52 0.15 134)        ",
+        "#a8da88   | hsl(97 53% 69%)            | oklch(0.83 0.12 134)        ",
+      ],
+      "highlightFgOnBgGrey": [
+        "#6c6c6c   | hsl(none 0% 42%)           | oklch(0.53 0 none)          ",
+        "#cccccc   | hsl(none 0% 80%)           | oklch(0.85 0 none)          ",
+      ],
+      "highlightFgOnBgPink": [
+        "#c4008e   | hsl(317 100% 38%)          | oklch(0.55 0.23 345)        ",
+        "#ffb6de   | hsl(327 100% 86%)          | oklch(0.86 0.1 345)         ",
+      ],
+      "highlightFgOnBgPurple": [
+        "#9e29db   | hsl(279 71% 51%)           | oklch(0.55 0.25 310)        ",
+        "#e3beff   | hsl(274 100% 87%)          | oklch(0.85 0.1 310)         ",
+      ],
+      "highlightFgOnBgRed": [
+        "#cf0021   | hsl(350 100% 41%)          | oklch(0.54 0.22 25)         ",
+        "#ffbbb4   | hsl(6 100% 85%)            | oklch(0.85 0.08 26)         ",
+      ],
+      "highlightFgOnBgYellow": [
+        "#8a6700   | hsl(45 100% 27%)           | oklch(0.53 0.11 85)         ",
+        "#f0c66a   | hsl(41 82% 68%)            | oklch(0.84 0.12 85)         ",
       ],
       "highlightFgPink": [
-        "#cd5594   | hsl(329 55% 57%)           | oklch(0.62 0.17 350)        ",
-        "#c85a98   | hsl(326 50% 57%)           | oklch(0.62 0.16 348)        ",
+        "#e826ac   | hsl(319 81% 53%)           | oklch(0.63 0.25 345)        ",
+        "#f8a1d2   | hsl(326 86% 80%)           | oklch(0.81 0.12 345)        ",
       ],
       "highlightFgPurple": [
-        "#9655cd   | hsl(273 55% 57%)           | oklch(0.58 0.18 307)        ",
-        "#9b5ac8   | hsl(275 50% 57%)           | oklch(0.59 0.17 309)        ",
+        "#b94cf9   | hsl(278 94% 64%)           | oklch(0.64 0.25 310)        ",
+        "#d7aafa   | hsl(274 89% 82%)           | oklch(0.81 0.12 310)        ",
       ],
       "highlightFgRed": [
-        "#cd5550   | hsl(2 56% 56%)             | oklch(0.6 0.15 25)          ",
-        "#c85a55   | hsl(3 51% 56%)             | oklch(0.6 0.14 25)          ",
+        "#fa0a2c   | hsl(352 96% 51%)           | oklch(0.62 0.25 25)         ",
+        "#ffa39b   | hsl(5 100% 80%)            | oklch(0.81 0.11 25)         ",
       ],
       "highlightFgYellow": [
-        "#c39b2d   | hsl(44 62% 47%)            | oklch(0.71 0.13 88)         ",
-        "#c8a855   | hsl(43 51% 56%)            | oklch(0.74 0.11 89)         ",
+        "#a67d00   | hsl(45 100% 33%)           | oklch(0.61 0.13 85)         ",
+        "#dfb65a   | hsl(42 68% 61%)            | oklch(0.79 0.12 85)         ",
       ],
       "iconColor": [
         "#171717b3 | hsl(none 0% 9% / 0.7)      | oklch(0.2 0 none / 0.7)     ",

package/src/palettes/inspect.defs.colors.neutral-user.test.ts

@@ -1582,76 +1582,112 @@ test("snapshot", () => {
         "#2d4786   | hsl(222 50% 35%)           | oklch(0.41 0.11 265)        ",
       ],
       "highlightBgAqua": [
-        "#c6f2eb   | hsl(170 63% 86%)           | oklch(0.93 0.05 185)        ",
-        "#2d5753   | hsl(174 32% 26%)           | oklch(0.43 0.05 188)        ",
+        "#baf9f0   | hsl(171 84% 85%)           | oklch(0.94 0.06 185)        ",
+        "#004a43   | hsl(174 100% 15%)          | oklch(0.37 0.07 184)        ",
       ],
       "highlightBgAquamarine": [
-        "#c3f7c1   | hsl(118 77% 86%)           | oklch(0.93 0.09 144)        ",
-        "#0f4b34   | hsl(157 67% 18%)           | oklch(0.37 0.07 163)        ",
+        "#c4f9df   | hsl(151 82% 87%)           | oklch(0.94 0.06 164)        ",
+        "#174a35   | hsl(155 53% 19%)           | oklch(0.37 0.07 163)        ",
       ],
       "highlightBgBlue": [
-        "#d0ebfa   | hsl(201 81% 90%)           | oklch(0.92 0.04 232)        ",
-        "#2d365a   | hsl(228 33% 26%)           | oklch(0.34 0.06 272)        ",
+        "#e1eeff   | hsl(214 100% 94%)          | oklch(0.94 0.03 255)        ",
+        "#284363   | hsl(213 42% 27%)           | oklch(0.38 0.06 254)        ",
       ],
       "highlightBgGreen": [
-        "#d0f2bb   | hsl(97 68% 84%)            | oklch(0.92 0.08 134)        ",
-        "#325833   | hsl(122 28% 27%)           | oklch(0.42 0.07 145)        ",
+        "#daf5c9   | hsl(97 69% 87%)            | oklch(0.94 0.06 133)        ",
+        "#324823   | hsl(96 35% 21%)            | oklch(0.37 0.07 134)        ",
       ],
       "highlightBgGrey": [
-        "#dee3e9   | hsl(213 20% 89%)           | oklch(0.91 0.01 253)        ",
-        "#3e3f4e   | hsl(236 11% 27%)           | oklch(0.37 0.03 282)        ",
+        "#ededed   | hsl(none 0% 93%)           | oklch(0.95 0 none)          ",
+        "#424242   | hsl(none 0% 26%)           | oklch(0.38 0 none)          ",
       ],
       "highlightBgPink": [
-        "#fae4f0   | hsl(327 69% 94%)           | oklch(0.94 0.03 344)        ",
-        "#6c3255   | hsl(324 37% 31%)           | oklch(0.41 0.09 345)        ",
+        "#ffe7f3   | hsl(330 100% 95%)          | oklch(0.95 0.03 346)        ",
+        "#5c354b   | hsl(326 27% 28%)           | oklch(0.38 0.06 346)        ",
       ],
       "highlightBgPurple": [
-        "#f2e4fa   | hsl(278 69% 94%)           | oklch(0.94 0.03 314)        ",
-        "#523252   | hsl(300 24% 26%)           | oklch(0.37 0.07 327)        ",
+        "#f5e8ff   | hsl(274 100% 95%)          | oklch(0.95 0.03 311)        ",
+        "#4e395e   | hsl(274 25% 30%)           | oklch(0.38 0.07 310)        ",
       ],
       "highlightBgRed": [
-        "#fae0dd   | hsl(6 74% 92%)             | oklch(0.93 0.03 26)         ",
-        "#5f2c31   | hsl(354 37% 27%)           | oklch(0.36 0.07 15)         ",
+        "#ffe8e6   | hsl(5 100% 95%)            | oklch(0.95 0.03 24)         ",
+        "#613531   | hsl(5 33% 29%)             | oklch(0.38 0.06 26)         ",
       ],
       "highlightBgYellow": [
-        "#faf0b9   | hsl(51 87% 85%)            | oklch(0.95 0.07 99)         ",
-        "#584812   | hsl(46 66% 21%)            | oklch(0.41 0.07 92)         ",
+        "#ffebc4   | hsl(40 100% 88%)           | oklch(0.95 0.06 84)         ",
+        "#513f13   | hsl(43 62% 20%)            | oklch(0.38 0.06 86)         ",
       ],
       "highlightFgAqua": [
-        "#239b96   | hsl(178 63% 37%)           | oklch(0.63 0.1 191)         ",
-        "#34a89e   | hsl(175 53% 43%)           | oklch(0.67 0.1 187)         ",
+        "#009287   | hsl(175 100% 29%)          | oklch(0.59 0.1 186)         ",
+        "#42cfc0   | hsl(174 59% 54%)           | oklch(0.78 0.12 185)        ",
       ],
       "highlightFgAquamarine": [
-        "#28a573   | hsl(156 61% 40%)           | oklch(0.64 0.13 161)        ",
-        "#34ac80   | hsl(158 54% 44%)           | oklch(0.67 0.12 164)        ",
+        "#009568   | hsl(162 100% 29%)          | oklch(0.59 0.13 163)        ",
+        "#65cfa0   | hsl(153 52% 60%)           | oklch(0.78 0.12 163)        ",
       ],
       "highlightFgBlue": [
-        "#377dcd   | hsl(212 60% 51%)           | oklch(0.58 0.14 254)        ",
-        "#4887c8   | hsl(210 54% 53%)           | oklch(0.61 0.12 251)        ",
+        "#0081f3   | hsl(208 100% 48%)          | oklch(0.61 0.19 254)        ",
+        "#8abfff   | hsl(213 100% 77%)          | oklch(0.79 0.11 254)        ",
       ],
       "highlightFgGreen": [
-        "#50a541   | hsl(111 43% 45%)           | oklch(0.65 0.16 141)        ",
-        "#58ac4e   | hsl(114 38% 49%)           | oklch(0.67 0.15 142)        ",
+        "#509300   | hsl(87 100% 29%)           | oklch(0.59 0.17 134)        ",
+        "#99ca79   | hsl(96 43% 63%)            | oklch(0.79 0.12 134)        ",
       ],
       "highlightFgGrey": [
-        "#737d8e   | hsl(218 11% 50%)           | oklch(0.59 0.03 261)        ",
-        "#878ca0   | hsl(228 12% 58%)           | oklch(0.64 0.03 274)        ",
+        "#838383   | hsl(none 0% 51%)           | oklch(0.61 0 none)          ",
+        "#bcbcbc   | hsl(none 0% 74%)           | oklch(0.8 0 none)           ",
+      ],
+      "highlightFgOnBgAqua": [
+        "#00796f   | hsl(175 100% 24%)          | oklch(0.52 0.09 185)        ",
+        "#57e0d0   | hsl(173 69% 61%)           | oklch(0.83 0.12 184)        ",
+      ],
+      "highlightFgOnBgAquamarine": [
+        "#007b55   | hsl(161 100% 24%)          | oklch(0.52 0.11 163)        ",
+        "#76e0b1   | hsl(153 63% 67%)           | oklch(0.83 0.12 163)        ",
+      ],
+      "highlightFgOnBgBlue": [
+        "#006ac9   | hsl(208 100% 39%)          | oklch(0.53 0.17 254)        ",
+        "#a7cfff   | hsl(213 100% 83%)          | oklch(0.84 0.08 253)        ",
+      ],
+      "highlightFgOnBgGreen": [
+        "#417900   | hsl(88 100% 24%)           | oklch(0.52 0.15 134)        ",
+        "#a8da88   | hsl(97 53% 69%)            | oklch(0.83 0.12 134)        ",
+      ],
+      "highlightFgOnBgGrey": [
+        "#6c6c6c   | hsl(none 0% 42%)           | oklch(0.53 0 none)          ",
+        "#cccccc   | hsl(none 0% 80%)           | oklch(0.85 0 none)          ",
+      ],
+      "highlightFgOnBgPink": [
+        "#c4008e   | hsl(317 100% 38%)          | oklch(0.55 0.23 345)        ",
+        "#ffb6de   | hsl(327 100% 86%)          | oklch(0.86 0.1 345)         ",
+      ],
+      "highlightFgOnBgPurple": [
+        "#9e29db   | hsl(279 71% 51%)           | oklch(0.55 0.25 310)        ",
+        "#e3beff   | hsl(274 100% 87%)          | oklch(0.85 0.1 310)         ",
+      ],
+      "highlightFgOnBgRed": [
+        "#cf0021   | hsl(350 100% 41%)          | oklch(0.54 0.22 25)         ",
+        "#ffbbb4   | hsl(6 100% 85%)            | oklch(0.85 0.08 26)         ",
+      ],
+      "highlightFgOnBgYellow": [
+        "#8a6700   | hsl(45 100% 27%)           | oklch(0.53 0.11 85)         ",
+        "#f0c66a   | hsl(41 82% 68%)            | oklch(0.84 0.12 85)         ",
       ],
       "highlightFgPink": [
-        "#cd5594   | hsl(329 55% 57%)           | oklch(0.62 0.17 350)        ",
-        "#c85a98   | hsl(326 50% 57%)           | oklch(0.62 0.16 348)        ",
+        "#e826ac   | hsl(319 81% 53%)           | oklch(0.63 0.25 345)        ",
+        "#f8a1d2   | hsl(326 86% 80%)           | oklch(0.81 0.12 345)        ",
       ],
       "highlightFgPurple": [
-        "#9655cd   | hsl(273 55% 57%)           | oklch(0.58 0.18 307)        ",
-        "#9b5ac8   | hsl(275 50% 57%)           | oklch(0.59 0.17 309)        ",
+        "#b94cf9   | hsl(278 94% 64%)           | oklch(0.64 0.25 310)        ",
+        "#d7aafa   | hsl(274 89% 82%)           | oklch(0.81 0.12 310)        ",
       ],
       "highlightFgRed": [
-        "#cd5550   | hsl(2 56% 56%)             | oklch(0.6 0.15 25)          ",
-        "#c85a55   | hsl(3 51% 56%)             | oklch(0.6 0.14 25)          ",
+        "#fa0a2c   | hsl(352 96% 51%)           | oklch(0.62 0.25 25)         ",
+        "#ffa39b   | hsl(5 100% 80%)            | oklch(0.81 0.11 25)         ",
       ],
       "highlightFgYellow": [
-        "#c39b2d   | hsl(44 62% 47%)            | oklch(0.71 0.13 88)         ",
-        "#c8a855   | hsl(43 51% 56%)            | oklch(0.74 0.11 89)         ",
+        "#a67d00   | hsl(45 100% 33%)           | oklch(0.61 0.13 85)         ",
+        "#dfb65a   | hsl(42 68% 61%)            | oklch(0.79 0.12 85)         ",
       ],
       "iconColor": [
         "#171717b3 | hsl(none 0% 9% / 0.7)      | oklch(0.2 0 none / 0.7)     ",