@fibery/ui-kit 2.0.1 → 2.1.1

package/src/design-system/colors.ts

@@ -1,10 +1,13 @@
 /* eslint-disable max-lines */
-import {ThemePalette} from "../palette-generator";
-import mapValues from "lodash/mapValues";
-import {a11yColor} from "../a11y-color";
-import {darkenChroma, produceColor, set, setAlpha, setLuminanceChroma} from "../color-utils";
+import {darkenChroma, hslFrom, produceColor, setAlpha, setLuminanceChroma} from "../color-utils";
 import {ThemeMode} from "../theme-settings";
-import {alpha, getOpacities, opacity, transparent} from "./alpha";
+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 {mapDef} from "./def";
+import mapValues from "lodash/mapValues";
 
 export const cardTypeColors = [
   "#4A4A4A",
@@ -26,12 +29,6 @@ export const cardTypeColors = [
   "#B04E31",
 ] as const;
 
-const swatches = {
-  "gray-light": cardTypeColors[1],
-  yellow: cardTypeColors[14],
-  green: "#69AC5E",
-};
-
 type ThemeColorsDef = Record<
   string,
   | readonly [lightColor: string, darkColor: string]
@@ -51,8 +48,20 @@ type ThemeFnsDef = Record<
 >;
 
 const separator = (color: string) => `0.5px solid ${color}`;
+const border1 = (color: string) => `1px solid ${color}`;
+const border3 = (color: string) => `3px solid ${color}`;
+
+const steps = (steps: string[]) => steps.join(", ");
 
-export function makeThemeDefs({
+/** @deprecated analyze usages — most likely you should use light/dark (different) variants like [base, baseDark] */
+const same = <T>(v: T): [light: T, dark: T] => [v, v];
+
+const both =
+  (map: (_: string) => string) =>
+  ([light, dark]: Def): Def => [map(light), map(dark)];
+
+export function defsFromPalette({
+  key,
   white,
   black,
   whiteA,
@@ -67,22 +76,48 @@ export function makeThemeDefs({
   tealDark,
   yellow,
   yellowDark,
+  deneutralize: deneutralizeFilter,
+  highlight,
 }: ThemePalette) {
-  const blackish = produceColor(black, (x) => set(x, "hsl.l", (x) => x + 5));
-  const purple9 = "rgb(157, 99, 212)";
-  const purpleDark9 = "rgb(131, 73, 182)";
-  const blue9 = "rgba(56, 105, 204, 1)";
-  const blueDark9 = "rgba(151, 177, 237, 1)";
-
-  const shades = getOpacities(black);
-  const separators = {
-    ...mapValues(shades, separator),
-  } as const;
+  const [deneutralizeL, deneutralizeD] = mapDef(deneutralizeFilter, makeColorFilter);
+  const deneutralize = (def: Def) => mapDef(def, deneutralizeL, deneutralizeD);
 
-  const lights = getOpacities(white);
-  const inversedSeparators = {
-    ...mapValues(lights, separator),
-  } as const;
+  // 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)];
+  const whiteA25: Def = [alpha(white, 0.25), alpha(black, 0.25)];
+  const whiteA40: Def = [alpha(white, 0.4), alpha(black, 0.4)];
+  const whiteA100: Def = [white, black];
+
+  // blackA = contrast direction (black on light / white on dark) — readable on bg
+  const blackA5: Def = [alpha(black, 0.05), alpha(white, 0.05)];
+  const blackA10: Def = [alpha(black, 0.1), alpha(white, 0.1)];
+  const blackA15: Def = [alpha(black, 0.15), alpha(white, 0.15)];
+  const blackA25: Def = [alpha(black, 0.25), alpha(white, 0.25)];
+  const blackA50: Def = [alpha(black, 0.5), alpha(white, 0.5)];
+  const blackA90: Def = [alpha(black, 0.9), alpha(white, 0.9)];
+
+  const opacities = {
+    subtle: same(opacity.opacity15.toString()),
+    faint: same(opacity.opacity20.toString()),
+    weak: same(opacity.opacity30.toString()),
+    drag: same(opacity.opacity40.toString()),
+    muted: same(opacity.opacity50.toString()),
+    done: same(opacity.opacity60.toString()),
+    disabled: same(opacity.opacity65.toString()),
+    visible: same(opacity.opacity70.toString()),
+    disabledHoverOrFocus: same(opacity.opacity75.toString()),
+  };
 
   // FIXME WIP to find commons/dedupe/adjust
   const surface = {
@@ -107,6 +142,7 @@ export function makeThemeDefs({
 
     // muted bg (code, form fields)
     level3exotic: [base[3], blackish], // FIXME try blackA[3] | baseDark[3] to make it less exotic
+    level3_1: [base[3], baseDark[1]],
     level3_4: [base[3], baseDark[4]],
     level3_6: [base[3], baseDark[6]],
     level3_7: [base[3], baseDark[7]],
@@ -118,9 +154,9 @@ export function makeThemeDefs({
     level4_5: [base[4], baseDark[5]],
     level4_6: [base[4], baseDark[6]],
 
-    level3_1: [base[3], baseDark[1]],
     level5_4: [base[5], baseDark[4]],
-  } as const;
+    level6_7: [base[6], baseDark[7]],
+  } satisfies Defs;
 
   const raised = {
     // menus, modals, entity boxes
@@ -134,55 +170,118 @@ export function makeThemeDefs({
 
     // card bg, comment bubbles, float editors
     level4: [white, baseDark[6]],
-  } as const;
+  } satisfies Defs;
 
-  const shadows = {
-    // Elevations
-    surfaceElevationS: [`0 2px 4px 0 ${blackA[3]}`, `0 2px 4px 0 ${whiteA[3]}`],
-    surfaceElevationM: [`0 4px 8px 0 ${blackA[5]}`, `0 4px 8px 0 ${whiteA[5]}`],
-    surfaceElevationL: [`0 8px 12px 0 ${blackA[5]}`, `0 8px 12px 0 ${whiteA[5]}`],
+  // Strokes (spread-only, no blur/offset)
+  const stroke05 = (color: string) => `0 0 0 0.5px ${color}`;
+  const stroke1 = (color: string) => `0 0 0 1px ${color}`;
+  const stroke2 = (color: string) => `0 0 0 2px ${color}`;
+  const stroke3 = (color: string) => `0 0 0 3px ${color}`;
 
-    // Shadows and effects / Elevation
-    shadow50: [`0px 0px 0px 1px ${alpha(base[12], 0.05)}`, `0px 0px 0px 1px ${alpha(baseDark[12], 0.1)}`],
-    shadow100: [`0px 1px 4px 0px ${alpha(base[12], 0.05)}`, `0px 1px 4px 0px ${alpha(base[12], 0.1)}`],
-    shadow200: [`0px 2px 6px 0px ${alpha(base[12], 0.05)}`, `0px 2px 6px 0px ${alpha(base[12], 0.1)}`],
-    shadow300: [
-      `0px 3px 6px -3px ${alpha(base[12], 0.1)}, 0px 8px 20px -4px ${alpha(base[12], 0.15)}`,
-      `0px 3px 6px -3px ${alpha(base[12], 0.1)}, 0px 8px 20px -4px ${alpha(base[12], 0.15)}`,
-    ],
-    shadow400: [
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 16px 40px 0px ${alpha(base[12], 0.15)}`,
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 16px 40px 0px ${alpha(base[12], 0.15)}`,
-    ],
-    shadow500: [
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 20px 50px 0px ${alpha(base[12], 0.15)}`,
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 20px 50px 0px ${alpha(base[12], 0.15)}`,
-    ],
-    shadow600: [
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 26px 80px 0px ${alpha(base[12], 0.2)}`,
-      `0px 0px 1px 0px ${alpha(base[12], 0.2)}, 0px 26px 80px 0px ${alpha(base[12], 0.2)}`,
+  // Glows (blur-only, no offset/spread)
+  const glow1 = (color: string) => `0 0 1px 0 ${color}`;
+  const glow2 = (color: string) => `0 0 2px 0 ${color}`;
+  const glow6 = (color: string) => `0 0 6px 0 ${color}`;
+
+  // Elevations (y-offset + blur)
+  const elevationS = (color: string) => `0 2px 4px 0 ${color}`;
+  const elevationS_shrinked = (color: string) => `0 2px 4px -4px ${color}`;
+  const elevationSM = (color: string) => `0 4px 6px 0 ${color}`;
+  const elevationSL = (color: string) => `0 3px 12px 0 ${color}`; // soft-large: small offset, large blur
+  const elevationM = (color: string) => `0 4px 8px 0 ${color}`;
+  const elevationL = (color: string) => `0 8px 12px 0 ${color}`;
+  const elevationXL = (color: string) => `0 10px 26px 0 ${color}`; // extra-large
+  const elevation100 = (color: string) => `0 1px 4px 0 ${color}`;
+  const elevation200 = (color: string) => `0 2px 6px 0 ${color}`;
+  const elevation250 = (color: string) => `0 3px 6px -3px ${color}`;
+  const elevation300 = (color: string) => `0 8px 20px -4px ${color}`;
+  const elevation400 = (color: string) => `0 16px 40px 0 ${color}`;
+  const elevation500 = (color: string) => `0 20px 50px 0 ${color}`;
+  const elevation600 = (color: string) => `0 26px 80px 0 ${color}`;
+
+  // --- Input borders (stroke shadows) ---
+  const inputStrokes = {
+    disabled: [stroke1(alpha(base[6], 0.2)), stroke1(alpha(baseDark[8], 0.2))],
+    default: [stroke1(alpha(base[6], 0.7)), stroke1(alpha(baseDark[8], 0.7))],
+    hover: [stroke1(base[7]), stroke1(baseDark[8])],
+    focus: [stroke1(base[8]), stroke1(baseDark[9])],
+    error: [stroke1(red[11]), stroke1(red[7])],
+    errorHover: [stroke1(alpha(red[11], 0.4)), stroke1(alpha(red[7], 0.4))],
+    errorFocus: [stroke1(alpha(red[11], 0.25)), stroke1(alpha(red[7], 0.25))],
+    errorFocusRing: [stroke3(alpha(red[11], 0.25)), stroke3(alpha(red[7], 0.25))],
+    warning: [stroke1(yellow[9]), stroke1(yellowDark[8])],
+  } satisfies Defs;
+
+  // --- Floating surface shadows ---
+  const floatingShadows = {
+    popup: [
+      steps([glow2(alpha(base[11], 0.3)), elevationSM(alpha(base[11], 0.05)), elevationXL(alpha(base[11], 0.15))]),
+      steps([stroke1(baseDark[6]), elevationSM(alpha(baseDark[1], 0.05)), elevationXL(alpha(baseDark[1], 0.15))]),
     ],
-    actionMenuShadow: [
-      `0px 0px 2px 0px ${alpha(base[11], 0.3)}, 0px 4px 6px 0px ${alpha(base[11], 0.05)}, 0px 10px 26px 0px ${alpha(
-        base[11],
-        0.15
-      )}`,
-      `0px 0px 0px 1px ${baseDark[6]}, 0px 4px 6px 0px ${alpha(baseDark[1], 0.05)}, 0px 10px 26px 0px ${alpha(
-        baseDark[1],
-        0.15
-      )}`,
+    instrumentsMenu: [
+      steps([glow1(alpha(base[11], 0.2)), elevationSM(alpha(base[11], 0.05)), elevationSL(alpha(base[11], 0.1))]),
+      steps([glow1(baseDark[6]), elevationSM(alpha(baseDark[1], 0.05)), elevationSL(alpha(baseDark[1], 0.15))]),
     ],
-    shadowPopup: [
-      `0px 0px 2px 0px ${alpha(base[11], 0.3)}, 0px 4px 6px 0px ${alpha(base[11], 0.05)}, 0px 10px 26px 0px ${alpha(
-        base[11],
-        0.15
-      )}`,
-      `0px 0px 0px 1px ${baseDark[6]}, 0px 4px 6px 0px ${alpha(baseDark[1], 0.05)}, 0px 10px 26px 0px ${alpha(
-        baseDark[1],
-        0.15
-      )}`,
+  } satisfies Defs;
+
+  // --- Card/container shadows ---
+  const cardShadows = {
+    subtle: [
+      steps([stroke1(alpha(base[10], 0.1)), elevationS_shrinked(alpha(base[10], 0.2))]),
+      steps([stroke1(alpha(baseDark[2], 0.1)), elevationS_shrinked(alpha(baseDark[2], 0.2))]),
     ],
-    shadowSidebar: [`-3px 0px 10px 0px ${alpha(base[10], 0.1)}`, `-3px 0px 10px 0px ${alpha(baseDark[1], 0.8)}`],
+  } satisfies Defs;
+
+  const entityBoxShadows = {
+    stroke: {
+      default: [stroke1(base[5]), stroke1(baseDark[5])],
+      focus: [stroke2(alpha(accent[9], 0.4)), stroke2(alpha(accentDark[9], 0.4))],
+      focusHover: [stroke2(alpha(accent[9], 0.6)), stroke2(alpha(accentDark[9], 0.6))],
+      selected: [
+        steps([stroke1(alpha(accent[9], 0.4)), stroke3(alpha(accent[9], 0.4))]),
+        steps([stroke1(accentDark[9]), stroke3(alpha(accentDark[9], 0.4))]),
+      ],
+      selectedHover: [
+        steps([stroke1(alpha(accent[9], 0.6)), stroke3(alpha(accent[9], 0.4))]),
+        steps([stroke1(accentDark[9]), stroke3(alpha(accentDark[9], 0.4))]),
+      ],
+    } satisfies Defs,
+    elevation: {
+      // Progression: S → M → L (default → hover → drag)
+      default: [elevationS(alpha(base[12], 0.05)), elevationS(alpha(baseDark[1], 0.05))],
+      hover: [elevationM(alpha(base[12], 0.1)), elevationM(alpha(baseDark[1], 0.1))],
+      drag: [elevationL(alpha(base[12], 0.1)), elevationL(alpha(baseDark[1], 0.1))],
+    } satisfies Defs,
+  };
+
+  // FIXME assymetric: light is composite (elevation100 + stroke05), dark is simple (stroke1 only)
+  const shadowMenuHeaderAvatar = [
+    steps([elevation100(alpha(base[11], 0.1)), stroke05(alpha(base[5], 0.5))]),
+    stroke1(alpha(baseDark[9], 0.2)),
+  ] as const;
+
+  const edgeLeft = (color: string) => `-3px 0 10px 0 ${color}`;
+
+  const formHeaderShadow = [glow6(alpha(base[10], 0.1)), glow6(alpha(baseDark[1], 0.4))] as const;
+
+  const shadows = {
+    // Elevations
+    surfaceElevationS: [elevationS(blackA[3]), elevationS(whiteA[3])],
+    surfaceElevationM: [elevationM(blackA[5]), elevationM(whiteA[5])],
+    surfaceElevationL: [elevationL(blackA[5]), elevationL(whiteA[5])],
+
+    // Shadows and effects / Elevation
+    shadow50: [stroke1(alpha(base[12], 0.05)), stroke1(alpha(baseDark[12], 0.1))],
+    shadow100: [elevation100(alpha(base[12], 0.05)), elevation100(alpha(base[12], 0.1))],
+    shadow200: [elevation200(alpha(base[12], 0.05)), elevation200(alpha(base[12], 0.1))],
+    shadow300: same(steps([elevation250(alpha(base[12], 0.1)), elevation300(alpha(base[12], 0.15))])),
+    shadow400: same(steps([glow1(alpha(base[12], 0.2)), elevation400(alpha(base[12], 0.15))])),
+    shadow500: same(steps([glow1(alpha(base[12], 0.2)), elevation500(alpha(base[12], 0.15))])),
+    shadow600: same(steps([glow1(alpha(base[12], 0.2)), elevation600(alpha(base[12], 0.2))])),
+
+    actionMenuShadow: floatingShadows.popup,
+    shadowPopup: floatingShadows.popup,
+    shadowSidebar: [edgeLeft(alpha(base[10], 0.1)), edgeLeft(alpha(baseDark[1], 0.8))],
   } as const;
 
   // names proposal: forbid color in keys (they all are colors) — restructure it better (separate shadows, borders etc)
@@ -193,63 +292,219 @@ export function makeThemeDefs({
   // shadow-*	Sets the color of box shadows
   // fill-*	Sets the fill color of SVG elements
   // stroke-*	Sets the stroke color of SVG elements
-  // e.g.
-  // bgMain
-  // bgPanel
-  // bgForm
-  // bgTooltip
-  // textDefault
-  // textAccent
-  // textDisabled
-  // textInversed
-  // borderInputDisabled
-  // borderInputError
-  // borderInputErrorHover
-  // borderInputErrorFocus
+  // TODO elevation = raised * shadow
+
+  const transparentAlways = same(transparent);
+  const whiteColor = same(white);
+  const blackColor = same(black);
+
+  const fg = {
+    accent: [accent[11], accentDark[11]],
+    accentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
+
+    neutral: [base[11], baseDark[11]],
+    neutralActive: [alpha(base[11], 0.8), alpha(baseDark[11], 0.8)],
+    // FIXME uses base[12] while soft/ghost use base[11] — inconsistent?
+    neutralActive__TODO: [alpha(base[12], 0.8), alpha(baseDark[12], 0.8)],
+    muted: [base[9], baseDark[9]],
+
+    destructive: [red[11], redDark[11]],
+    destructiveActive: [alpha(red[11], 0.8), alpha(redDark[11], 0.8)],
+
+    addition: [teal[9], tealDark[11]],
+
+    success: [teal[11], tealDark[11]],
+    warning: [yellow[11], yellowDark[11]],
+
+    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)],
+  } satisfies Defs;
+
+  const bg = {
+    neutral3: [base[3], baseDark[3]],
+    accent3: [accent[3], accentDark[3]],
+    success: [teal[3], tealDark[3]],
+    warning: [yellow[3], yellowDark[3]],
+    error: [red[3], redDark[3]],
+  } satisfies Defs;
+
+  const icon = {
+    primary: [base[12], baseDark[12]],
+    neutral: [base[11], baseDark[11]],
+    accent: [accent[11], accentDark[11]],
+    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 = {
+    primary: [base[12], baseDark[12]],
+    accent: [accent[11], accentDark[11]],
+    success: [teal[11], tealDark[11]],
+    warning: [yellow[11], yellowDark[11]],
+    error: [red[11], redDark[11]],
+  } satisfies Defs;
+
+  const primary = {
+    accent: [accent[9], accentDark[9]],
+    destructive_TODO: [red[9], redDark[9]],
+    destructive: [red[9], redDark[10]], // TODO 9_9?
+    success: [teal[9], tealDark[9]],
+    warning: [yellow[9], yellowDark[8]], // TODO 9_9 after correct adjusting palette?
+  } satisfies Defs;
+
+  const bgStatus = {
+    accent: [alpha(accent[5], 0.7), alpha(accentDark[4], 0.8)],
+    neutral: [alpha(base[5], 0.7), alpha(baseDark[4], 0.8)],
+    success: [teal[5], tealDark[5]],
+    warning: [yellow[5], yellowDark[5]],
+    error: [red[5], redDark[5]],
+  } satisfies Defs;
+
+  const borderAccentOrMedium = [accent[7], accentDark[7]] as const;
+  const borderAccentOrMediumAccent = [accent[8], accentDark[8]] as const;
+  const borderDanger = [red[7], redDark[7]] as const;
+  const borderNeutral = [base[8], baseDark[7]] as const;
+
+  // beg(TODO shake it)
+  const bgEntityCardOverlay = [alpha(base[2], 0.8), alpha(baseDark[6], 0.5)] as const;
+  const bgEntityCardDone = [alpha(base[4], 0.3), alpha(baseDark[5], 0.3)] as const;
+  const base5_6 = [base[5], baseDark[6]] as const;
+  const base6_6_opacity30 = [alpha(base[6], 0.3), alpha(baseDark[6], 0.3)] as const;
+  const base8 = [base[8], baseDark[8]] as const;
+  const fgAccentText = [base[10], baseDark[10]] as const;
+  const fgMenuEtc = [base[12], baseDark[12]] as const;
+
+  const bgTabFocus = [base[6], baseDark[6]] as const;
+  const bgTabHover = [alpha(base[11], 0.1), alpha(baseDark[11], 0.1)] as const;
+
+  const viewHighlightBg = [accent[3], accentDark[3]] as const;
+  const notificationSelected = [accent[3], accentDark[4]] as const;
+  const bgCellGridDisabledOrHighlighted = [accent[4], accentDark[5]] as const;
+  const notificationSelectedHover = [accent[4], accentDark[6]] as const;
+
+  const fgSelection = [alpha(accent[9], 0.2), alpha(accentDark[9], 0.4)] as const;
+
+  const warningColor = [alpha(yellow[6], 0.6), alpha(yellowDark[9], 0.4)] as const;
+  const bgBtnGhostAccentHover = [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)] as const;
+  const bgBtnGhostNeutralHover = [alpha(base[7], 0.5), alpha(baseDark[6], 0.8)] as const;
+  const bgBtnGhostDestructiveHover = [red[4], redDark[4]] as const;
+  const bgBtnSoftAccentHover = [accent[5], accentDark[6]] as const;
+  const bgBtnSoftNeutralDefault = [base[3], baseDark[3]] as const;
+  const bgBtnSoftNeutralHover = [base[7], baseDark[7]] as const;
+  const bgBtnSoftDestructiveHover = [red[6], redDark[6]] as const;
+  const borderFocusRingAccent = same(alpha(accent[9], 0.3));
+  const borderFocusRingNeutral = same(alpha(base[9], 0.3));
+  const borderFocusRingDestructive = same(alpha(red[9], 0.3));
+  const textWhiteboardSelectionLockedOrDisabled = [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)] as const;
+
+  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]);
+  const neutralStrong = same(base[11]);
+  // end(TODO shake it)
+
+  const bgActionsMenu = raised.level1;
+  const bgActionsMenuItemHover = surface.level4_5;
+
+  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 iconBadge = iconFromFg(base[10]);
+
   const colors = {
-    mode: ["light", "dark"],
     ...shadows,
+    ...mapValues(highlightColors(highlight, surface.level0), deneutralize),
+    colorPickerCssFilter: mapDef(deneutralizeFilter, cssFromFilter),
+
+    mode: ["light", "dark"],
+
+    // Accent background tints (light → strong)
+    colorAccentBgSubtle: same(alpha(accent[9], 0.1)),
+    colorAccentBgMild: same(alpha(accent[9], 0.15)),
+    colorAccentBgMedium: same(alpha(accent[9], 0.2)),
+    colorAccentBgStrong: same(alpha(accent[9], 0.3)),
+    colorAccentBgBold: same(alpha(accent[9], 0.35)),
+    colorAccentBgVivid: same(alpha(accent[9], 0.6)),
+
+    // Accent strokes
+    colorAccentStroke: same(alpha(accent[9], 0.25)),
+    colorAccentStrokeHover: same(alpha(accent[9], 0.4)),
+    colorAccentStrokeFocus: same(alpha(accent[9], 0.5)),
+
+    // Accent solid
+    colorAccentSolid: same(alpha(accent[9], 0.8)),
+
+    // Accent base
+    colorAccent: primary.accent,
 
     // Rubbish dump
-    primaryBlue: [accent[9], accentDark[9]],
-    whiteColor: [white, white],
-    blackColor: [black, black],
+    /** @deprecated */
+    darkenPrimary: same(getDarkenColor(accent[9])),
+    whiteColor,
+    blackColor,
     mainBg: surface.level3exotic,
     panelBg: surface.level0,
     panelContentBg: surface.level2_1,
     colorBgRelationContainer: surface.level2_1,
+
     // AI colors
     colorAI: [purple9, purpleDark9],
     colorBgAI: [alpha(purple9, 0.1), alpha(purpleDark9, 0.1)],
-    colorSubtleBgAI: [alpha(purple9, 0.05), alpha(purpleDark9, 0.1)], // FIXME why 0.1 for dark vs 0.05 for light?
+    // FIXME why 0.1 for dark vs 0.05 for light?
+    colorSubtleBgAI: [alpha(purple9, 0.05), alpha(purpleDark9, 0.1)],
     colorBgAIFloatingLauncher: surface.level1_4,
     colorBgAIFloatingPanelContent: surface.level1_3,
     colorBgAISidebarContent: surface.level1,
+
     // Other colors
     pageContentBg: surface.level0elevated,
     colorBgPopup: raised.level2,
     menuBg: surface.level3exotic,
-    menuTextColor: [base[12], baseDark[12]],
-    menuItemHoverColor: [base[5], baseDark[6]],
-    menuSelectedTextColor: [base[2], base[2]], // FIXME baseDark
-    menuIconColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
+    menuTextColor: fgMenuEtc,
+    menuItemHoverColor: base5_6,
+    menuSelectedTextColor: fgSelectedText,
+    menuIconColor: fg.icon,
 
     // Text, links colors
-    textColor: [base[12], baseDark[12]],
-    textSelectionColor: [alpha(accent[9], 0.2), alpha(accentDark[9], 0.4)],
-    accentTextColor: [base[10], baseDark[10]],
-    disabledTextColor: [base[9], baseDark[9]],
+    textColor: fgMenuEtc,
+    textSelectionColor: fgSelection,
+    accentTextColor: fgAccentText,
+    disabledTextColor: fg.muted,
     inversedTextColor: surface.level3_6,
-    colorTextSecondary: [alpha(base[12], 0.7), alpha(baseDark[12], 0.65)],
-    linkColor: [blue9, blueDark9],
+    colorTextSecondary: fg.secondary,
+    linkColor: linkBlue,
     linkBorder: [separator(alpha(blue9, 0.4)), separator(alpha(blueDark9, 0.4))],
-    linkHoverColor: [blue9, blueDark9],
+    linkHoverColor: linkBlue,
     linkBorderHover: [separator(alpha(blue9, 0.8)), separator(alpha(blueDark9, 0.7))], // FIXME why different alpha?
-    codeColor: [red[9], red[8]],
+    codeColor: codeOrErrorMessage,
     codeBgColor: surface.level3_4,
     codeBlockBgColor: surface.level3_4,
-    addedDiffTextColor: [teal[9], tealDark[11]],
-    removedDiffTextColor: [red[11], redDark[11]],
+    addedDiffTextColor: fg.addition,
+    removedDiffTextColor: fg.destructive,
 
     // Entity
     entityNodeColor: [baseDark[3], base[8]],
@@ -258,161 +513,156 @@ export function makeThemeDefs({
     entityNodeBorderHover: [separator(alpha(base[11], 0.8)), separator(alpha(base[7], 0.8))],
     entityNodeBgColor: surface.level2_3,
     shortcutTextColor: [base[9], baseDark[11]],
-    shortcutBorder: [`1px solid ${alpha(base[8], 0.5)}`, `1px solid ${alpha(baseDark[10], 0.2)}`],
+    shortcutBorder: [border1(alpha(base[8], 0.5)), border1(alpha(baseDark[10], 0.2))],
     shortcutBorderColor: [alpha(base[8], 0.5), alpha(baseDark[10], 0.2)],
 
     // Input
     inputBgColor: surface.level0elevated,
-    inputDisabledBgColor: [alpha(base[6], 0.3), alpha(baseDark[6], 0.3)],
-    inputDisabledBorderColor: [`0 0 0 1px ${alpha(base[6], 0.2)}`, `0 0 0 1px ${alpha(baseDark[8], 0.2)}`],
+    inputDisabledBgColor: base6_6_opacity30,
+    inputDisabledBorderColor: inputStrokes.disabled,
     inputCopyBgColor: surface.level3_4,
-    inputBorderColor: [`0 0 0 1px ${alpha(base[6], 0.7)}`, `0 0 0 1px ${alpha(baseDark[8], 0.7)}`],
-    inputBorderHoverColor: [`0 0 0 1px ${base[7]}`, `0 0 0 1px ${baseDark[8]}`],
-    inputBorderFocusColor: [`0 0 0 1px ${base[8]}`, `0 0 0 1px ${baseDark[9]}`],
+    inputBorderColor: inputStrokes.default,
+    inputBorderHoverColor: inputStrokes.hover,
+    inputBorderFocusColor: inputStrokes.focus,
     inputBorderBlendMode: ["multiply", "lighten"],
-    inputPlaceholderTextColor: [base[9], baseDark[9]],
-    inputErrorBorderColor: [`0 0 0 1px ${red[11]}`, `0 0 0 1px ${red[7]}`],
-    inputErrorBorderHoverColor: [`0 0 0 1px ${alpha(red[11], 0.4)}`, `0 0 0 1px ${alpha(red[7], 0.4)}`],
-    inputErrorBorderFocusColor: [`0 0 0 1px ${alpha(red[11], 0.25)}`, `0 0 0 1px ${alpha(red[7], 0.25)}`],
-    inputErrorBorderFocusShadow: [`0 0 0 3px ${alpha(red[11], 0.25)}`, `0 0 0 3px ${alpha(red[7], 0.25)}`],
-    buttonPrimaryColor: [accent[9], accentDark[9]],
-    buttonColor: [base[10], baseDark[10]],
+    inputPlaceholderTextColor: fg.muted,
+    inputErrorBorderColor: inputStrokes.error,
+    inputErrorBorderHoverColor: inputStrokes.errorHover,
+    inputErrorBorderFocusColor: inputStrokes.errorFocus,
+    inputErrorBorderFocusShadow: inputStrokes.errorFocusRing,
+    inputBorderWarningColor: inputStrokes.warning,
+    buttonPrimaryColor: primary.accent,
+    buttonColor: fgAccentText,
     buttonPrimaryTextColor: [base[2], base[6]],
-    checkboxColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
-    colorBorderBlockQuote: [base[11], baseDark[11]],
+    checkboxColor: fg.icon,
+    colorBorderBlockQuote: fg.neutral,
 
     // Actions menu
-    colorBgActionsMenu: raised.level1,
-    colorBgActionsMenuItemHover: surface.level4_5,
-    colorBgActionsMenuItemSelected: [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)],
+    colorBgActionsMenu: bgActionsMenu,
+    colorBgActionsMenuItemHover: bgActionsMenuItemHover,
+    colorBgActionsMenuItemSelected: bgBtnGhostAccentHover,
     colorBgActionsMenuItemSelectedHover: [alpha(accent[5], 0.8), alpha(accentDark[6], 0.8)],
     colorBgActionsMenuItemDangerHover: [alpha(red[9], 0.1), alpha(redDark[10], 0.1)],
     colorBgActionsMenuItemDangerActive: [alpha(red[9], 0.8), alpha(redDark[10], 0.8)],
-    actionMenuBg: raised.level1,
+    actionMenuBg: bgActionsMenu,
     actionMenuInnerBg: raised.level2,
-    actionMenuHover: surface.level4_5,
+    actionMenuHover: bgActionsMenuItemHover,
     actionMenuInnerHover: [base[4], alpha(baseDark[6], 0.5)],
     actionMenuButtonColor: surface.level0elevated,
     actionMenuButtonHoverColor: surface.level1_3,
-    actionMenuButtonShadow: [
-      `0 0 0 1px ${alpha(base[10], 0.1)}, 0 2px 4px -4px ${alpha(base[10], 0.2)}`,
-      `0 0 0 1px ${alpha(baseDark[2], 0.1)}, 0 2px 4px -4px ${alpha(baseDark[2], 0.2)}`,
-    ],
+    actionMenuButtonShadow: cardShadows.subtle,
     actionMenuSeparatorColor: [alpha(black, 0.1), alpha(white, 0.15)],
-    separatorColor: [alpha(black, 0.1), alpha(white, 0.1)],
-    separatorColorDimmed: [alpha(black, 0.05), alpha(white, 0.05)],
-    separatorBreadcrumbsColor: [base[8], baseDark[8]],
-    iconColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
+    separatorColor: blackA10,
+    separatorColorDimmed: blackA5,
+    separatorBreadcrumbsColor: base8,
+
+    // Border shorthands — 0.5px (thin separator)
+    borderSeparatorDimmed: both(separator)(blackA5),
+    borderSeparator: both(separator)(blackA10),
+    borderSeparatorMedium: both(separator)(blackA15),
+    borderSeparatorStrong: both(separator)(blackA25),
+    borderMedia: same(separator(blackA[7])),
+
+    // Border shorthands — 1px (solid)
+    borderSolidSeparator: both(border1)(blackA10),
+    borderSolidSeparatorDimmed: both(border1)(blackA5),
+    borderSolidFilterGroup: [border1(blackA[3]), border1(whiteA[3])],
+    borderSolidGrid: [border1(base5_6[0]), border1(base5_6[1])],
+    borderSolidOutlineNeutral: [border1(borderNeutral[0]), border1(borderNeutral[1])],
+    borderSolidMedia: same(border1(blackA[7])),
+    borderSolidCommentBubble: [border1(raised.level4[0]), border1(raised.level4[1])],
+
+    // Border shorthands — 3px
+    borderBlockQuote: [border3(fg.neutral[0]), border3(fg.neutral[1])],
+
+    // Composite shadows (stroke + elevation)
+    shadowCardDefault: [
+      steps([inputStrokes.default[0], shadows.shadow100[0]]),
+      steps([inputStrokes.default[1], shadows.shadow100[1]]),
+    ],
+    shadowCardHover: [
+      steps([inputStrokes.default[0], shadows.shadow200[0]]),
+      steps([inputStrokes.default[1], shadows.shadow200[1]]),
+    ],
+    shadowCardInset: [`inset ${inputStrokes.default[0]}`, `inset ${inputStrokes.default[1]}`],
+
+    iconColor: fg.icon,
     appIconColor: [alpha(base[2], 0.9), alpha(base[2], 0.7)],
     appIconBgColor: [alpha(base[1], 0.9), alpha(base[2], 0.5)],
     mentionBgColor: [alpha(base[7], 0.3), alpha(baseDark[7], 0.4)],
     colorBgSelectMenu: surface.level1_3,
-    shadowSelectMenu: [
-      `0px 0px 2px 0px ${alpha(base[11], 0.3)}, 0px 4px 6px 0px ${alpha(base[11], 0.05)}, 0px 10px 26px 0px ${alpha(
-        base[11],
-        0.15
-      )}`,
-      `0px 0px 0px 1px ${baseDark[6]}, 0px 4px 6px 0px ${alpha(baseDark[1], 0.05)}, 0px 10px 26px 0px ${alpha(
-        baseDark[1],
-        0.15
-      )}`,
-    ],
-    colorBgListItemGeneral: [transparent, transparent],
+    shadowSelectMenu: floatingShadows.popup,
+    colorBgListItemGeneral: transparentAlways,
     colorBgListItemGeneralHover: surface.level3_4,
     colorBgListItemGeneralFocus: surface.level4_6,
-    colorBgListItemGeneralSelected: [accent[3], accentDark[4]],
-    colorBgListItemGeneralSelectedHover: [accent[4], accentDark[6]],
-    colorBgListItemGeneralSelectedFocus: [accent[4], accentDark[6]],
-    colorBgListItemGeneralDisabled: [transparent, transparent],
-    colorTextListItemGeneralDisabled: [base[9], baseDark[9]],
+    colorBgListItemGeneralSelected: notificationSelected,
+    colorBgListItemGeneralSelectedHover: notificationSelectedHover,
+    colorBgListItemGeneralSelectedFocus: notificationSelectedHover,
+    colorBgListItemGeneralDisabled: transparentAlways,
+    colorTextListItemGeneralDisabled: fg.muted,
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
-    opacityListItemGeneralDisabled: [opacity.opacity40.toString(), opacity.opacity40.toString()],
+    opacityListItemGeneralDisabled: opacities.drag,
 
     // Search Items
-    colorBgSearchRowHover: surface.level4_5,
+    colorBgSearchRowHover: bgActionsMenuItemHover,
     colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
-    opacitySearchItemDone: [opacity.opacity40.toString(), opacity.opacity40.toString()],
+    opacitySearchItemDone: opacities.drag,
+
     // Entity Box Style And States
     // Basic Entity Box State
-    colorBgEntityBoxDefault: raised.level1,
-    shadowStrokeEntityBoxDefault: [`0 0 0 1px ${base[5]}`, `0 0 0 1px ${baseDark[5]}`],
-    shadowEntityBoxDefault: [`0px 2px 4px 0px ${alpha(base[12], 0.05)}`, `0px 2px 4px 0px ${alpha(baseDark[1], 0.05)}`],
+    colorBgEntityBoxDefault: bgActionsMenu,
+    shadowStrokeEntityBoxDefault: entityBoxShadows.stroke.default,
+    shadowEntityBoxDefault: entityBoxShadows.elevation.default,
     // :hover
     colorBgEntityBoxDefaultHover: raised.level2,
-    shadowEntityBoxDefaultHover: [
-      `0px 4px 8px 0px ${alpha(base[12], 0.1)}`,
-      `0px 4px 8px 0px ${alpha(baseDark[1], 0.1)}`,
-    ],
+    shadowEntityBoxDefaultHover: entityBoxShadows.elevation.hover,
     // :focus
-    colorBgEntityBoxDefaultFocus: raised.level1,
-    colorOverlayEntityBoxDefaultFocus: [accent[9], accentDark[9]],
-    shadowStrokeEntityBoxDefaultFocus: [`0 0 0 2px ${alpha(accent[9], 0.4)}`, `0 0 0 2px ${alpha(accentDark[9], 0.4)}`],
+    colorBgEntityBoxDefaultFocus: bgActionsMenu,
+    colorOverlayEntityBoxDefaultFocus: primary.accent,
+    shadowStrokeEntityBoxDefaultFocus: entityBoxShadows.stroke.focus,
     // :focus:hover
     colorBgEntityBoxDefaultFocusHover: raised.level2,
-    colorOverlayEntityBoxDefaultFocusHover: [accent[9], accentDark[9]],
-    shadowStrokeEntityBoxDefaultFocusHover: [
-      `0 0 0 2px ${alpha(accent[9], 0.6)}`,
-      `0 0 0 2px ${alpha(accentDark[9], 0.6)}`,
-    ],
+    colorOverlayEntityBoxDefaultFocusHover: primary.accent,
+    shadowStrokeEntityBoxDefaultFocusHover: entityBoxShadows.stroke.focusHover,
     //::drag
-    opacityEntityBoxDefaultDrag: [opacity.opacity40.toString(), opacity.opacity40.toString()],
-    shadowEntityBoxDefaultDrag: [
-      `0px 8px 12px 0px ${alpha(base[12], 0.1)}`,
-      `0px 8px 12px 0px ${alpha(baseDark[1], 0.1)}`,
-    ],
+    opacityEntityBoxDefaultDrag: opacities.drag,
+    shadowEntityBoxDefaultDrag: entityBoxShadows.elevation.drag,
     // Selected Entity Box State
     colorBgEntityBoxSelected: [accent[2], accentDark[3]],
-    shadowStrokeEntityBoxSelected: [
-      `0 0 0 1px ${alpha(accent[9], 0.4)}, 0 0 0 3px ${alpha(accent[9], 0.4)}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${alpha(accentDark[9], 0.4)}`,
-    ],
+    shadowStrokeEntityBoxSelected: entityBoxShadows.stroke.selected,
     // :hover
-    colorBgEntityBoxSelectedHover: [accent[3], accentDark[3]],
-    shadowStrokeEntityBoxSelectedHover: [
-      `0 0 0 1px ${alpha(accent[9], 0.6)}, 0 0 0 3px ${alpha(accent[9], 0.4)}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${alpha(accentDark[9], 0.4)}`,
-    ],
+    colorBgEntityBoxSelectedHover: viewHighlightBg,
+    shadowStrokeEntityBoxSelectedHover: entityBoxShadows.stroke.selectedHover,
     //::drag
-    colorBgEntityBoxSelectedDrag: [accent[3], accentDark[3]],
-    shadowStrokeEntityBoxSelectedDrag: [
-      `0 0 0 1px ${alpha(accent[9], 0.4)}, 0 0 0 3px ${alpha(accent[9], 0.4)}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${alpha(accentDark[9], 0.4)}`,
-    ],
+    colorBgEntityBoxSelectedDrag: viewHighlightBg,
+    shadowStrokeEntityBoxSelectedDrag: entityBoxShadows.stroke.selected,
     // Disabled Entity Box State (done)
-    opacityEntityBoxDisabled: [opacity.opacity65.toString(), opacity.opacity65.toString()],
+    opacityEntityBoxDisabled: opacities.disabled,
     // :hover
-    opacityEntityBoxDisabledHover: [opacity.opacity75.toString(), opacity.opacity75.toString()],
+    opacityEntityBoxDisabledHover: opacities.disabledHoverOrFocus,
     // :focus
-    opacityEntityBoxDisabledFocus: [opacity.opacity75.toString(), opacity.opacity75.toString()],
+    opacityEntityBoxDisabledFocus: opacities.disabledHoverOrFocus,
     // :drag
-    opacityEntityBoxDisabledDrag: [opacity.opacity40.toString(), opacity.opacity40.toString()],
+    opacityEntityBoxDisabledDrag: opacities.drag,
+
     // Entity Old
     entityCardBgColor: raised.level3,
-    entityCardSelectedColor: [alpha(base[2], 0.8), alpha(baseDark[6], 0.5)],
-    entityCardHoverColor: [alpha(base[2], 0.8), alpha(baseDark[6], 0.5)],
-    entityCardDoneColor: [alpha(base[4], 0.3), alpha(baseDark[5], 0.3)],
-    entityCardShadow: [
-      `0 0 0 1px ${alpha(base[10], 0.1)}, 0 2px 4px -4px ${alpha(base[10], 0.2)}`,
-      `0 0 0 1px ${alpha(baseDark[2], 0.1)}, 0 2px 4px -4px ${alpha(baseDark[2], 0.2)}`,
-    ],
-    entityCardShadowHover: [
-      `0 0 0 1px ${alpha(base[10], 0.1)}, 0 2px 4px -4px ${alpha(base[10], 0.2)}`,
-      `0 0 0 1px ${alpha(baseDark[2], 0.1)}, 0 2px 4px -4px ${alpha(baseDark[2], 0.2)}`,
-    ],
+    entityCardSelectedColor: bgEntityCardOverlay,
+    entityCardHoverColor: bgEntityCardOverlay,
+    entityCardDoneColor: bgEntityCardDone,
+    entityCardShadow: cardShadows.subtle,
+    entityCardShadowHover: cardShadows.subtle,
     colorBgSegmentedControl: [alpha(base[5], 0.8), alpha(baseDark[3], 0.8)],
     colorBgMenuHeaderAvatar: surface.level0elevated,
-    shadowMenuHeaderAvatar: [
-      `0px 1px 4px ${alpha(base[11], 0.1)}, 0 0 0 0.5px ${alpha(base[5], 0.5)}`,
-      `0 0 0 1px ${alpha(baseDark[9], 0.2)}`,
-    ],
+    shadowMenuHeaderAvatar: shadowMenuHeaderAvatar,
+
     // Main Menu Items Styles and States
     // Dragged
-    opacityMenuItemDragged: [opacity.opacity40.toString(), opacity.opacity40.toString()],
+    opacityMenuItemDragged: opacities.drag,
     colorBgMenuItemSelectedDragged: [accent[6], accentDark[6]],
     // Default
     colorTextMenuItem: [alpha(base[12], 0.9), alpha(baseDark[12], 0.9)],
-
-    colorBgMenuItem: [transparent, transparent],
+    colorBgMenuItem: transparentAlways,
     // :hover
     colorBgMenuItemHover: [base[5], baseDark[2]],
     // :focus
@@ -422,98 +672,97 @@ export function makeThemeDefs({
     // :hover
     colorBgMenuItemSelectedHover: [alpha(accent[6], 0.7), accentDark[5]],
     // :focus, :focus:hover
-    colorBgPinnedFieldsLabel: [base[11], baseDark[11]],
-    colorBgObjectEditorSeparator: [base[12], baseDark[12]],
+    colorBgPinnedFieldsLabel: fg.neutral,
+    colorBgObjectEditorSeparator: fgMenuEtc,
     colorBgMenuItemSelectedFocused: [accent[6], accentDark[5]],
     colorBgFieldEditorContainer: surface.level2_3,
     colorBgFieldEditorLinkEqualSign: [base[6], baseDark[2]],
     allowedDropColor: surface.level4,
     relationViewBgColor: surface.level2_3,
 
-    mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
-    mySpaceIconBg: [alpha(swatches["gray-light"], 0.2), alpha(swatches["gray-light"], 0.2)],
-    privateIconColor: [swatches.green, swatches.green],
-    privateIconBg: [alpha(swatches.green, 0.2), alpha(swatches.green, 0.2)],
-    favoritesIconColor: [swatches.yellow, swatches.yellow],
-    favoritesIconBg: [alpha(swatches.yellow, 0.2), alpha(swatches.yellow, 0.2)],
+    mySpaceIconColor: iconMySpace.fg,
+    mySpaceIconBg: iconMySpace.bg,
+    privateIconColor: iconPrivate.fg,
+    privateIconBg: iconPrivate.bg,
+    favoritesIconColor: iconFavorites.fg,
+    favoritesIconBg: iconFavorites.bg,
+    defaultCardTypeColorUppercaseHex,
 
     // Unit
     unitBg: surface.level3_6,
     unitBgHover: [base[4], baseDark[7]],
 
     // Badges
-    colorBgBadgeNeutral: [alpha(accent[5], 0.7), alpha(accentDark[4], 0.8)],
-    colorBgBadgeSuccess: [teal[5], tealDark[5]],
-    colorBgBadgeWarning: [yellow[5], yellowDark[5]],
-    colorBgBadgeError: [red[5], redDark[5]],
-    colorTextBadgeNeutral: [accent[11], accentDark[11]],
-    colorTextBadgeSuccess: [teal[11], tealDark[11]],
-    colorTextBadgeWarning: [yellow[11], yellowDark[11]],
-    colorTextBadgeError: [red[11], redDark[11]],
-    // FIXME: lack of baseDark usage; same values!
-    badgeBgColor: [alpha(base[10], 0.2), alpha(base[10], 0.2)],
+    colorBgBadgeNeutral: bgStatus.neutral,
+    colorBgBadgeAccent: bgStatus.accent,
+    colorBgBadgeSuccess: bgStatus.success,
+    colorBgBadgeWarning: bgStatus.warning,
+    colorBgBadgeError: bgStatus.error,
+    colorTextBadgeNeutral: fg.neutral,
+    colorTextBadgeAccent: fg.accent,
+    colorTextBadgeSuccess: fg.success,
+    colorTextBadgeWarning: fg.warning,
+    colorTextBadgeError: fg.destructive,
+    badgeBgColor: iconBadge.bg,
+
     tooltipBgColor: [baseDark[5], baseDark[6]],
     todayMarkerColor: [red[8], redDark[6]],
     viewBgOverlayColor: [alpha(base[8], 0.2), alpha(baseDark[1], 0.6)],
     floatEditorMenuBg: surface.level1_6,
-    floatEditorActiveColor: [accent[11], accentDark[11]],
-    commentColor: [alpha(yellow[6], 0.6), alpha(yellowDark[9], 0.4)],
+    floatEditorActiveColor: fg.accent,
+    commentColor: warningColor,
     cellBackgroundColor: surface.level2,
-    cellBackgroundHoverColor: [alpha(base[6], 0.3), alpha(baseDark[6], 0.3)],
+    cellBackgroundHoverColor: base6_6_opacity30,
     cellBorderColor: [alpha(base[8], 0.5), alpha(baseDark[9], 0.5)],
     cellPinnedBorderColor: [alpha(base[8], 0.7), alpha(baseDark[9], 0.7)],
-    tableRowWarningColor: [alpha(yellow[6], 0.6), alpha(yellowDark[9], 0.4)],
+    tableRowWarningColor: warningColor,
     errorBgColor: [alpha(red[9], 0.2), alpha(redDark[9], 0.6)],
     errorTextColor: [red[11], red[7]],
-    errorButtonColor: [red[9], redDark[10]],
+    errorButtonColor: primary.destructive,
     warningBgColor: [alpha(yellow[6], 0.6), alpha(yellowDark[8], 0.6)],
-    warningButtonColor: [yellow[11], yellowDark[11]],
+    warningButtonColor: fg.warning,
     infoBox: [alpha(yellow[4], 0.5), alpha(yellowDark[9], 0.2)],
     appCardBgColor: surface.level0elevated,
     appCardHoverColor: [alpha(base[1], 0.95), baseDark[2]],
     modalBg: [alpha(base[11], 0.2), alpha(baseDark[2], 0.5)],
-    modalContentBg: raised.level1,
+    modalContentBg: bgActionsMenu,
     progressIconBg: [blackA[7], whiteA[7]],
     progressIconFill: [blackA[11], whiteA[11]],
     formBg: surface.level2,
-    formHeaderShadow: [`${alpha(base[10], 0.1)} 0px 0px 6px`, `${alpha(baseDark[1], 0.4)} 0px 0px 6px`],
+    formHeaderShadow: formHeaderShadow,
     formEditorFieldBg: surface.level3_4,
     filterGroup1Bg: surface.level2_6,
     filterGroup2Bg: surface.level3_7,
     filterGroupBorder: [blackA[3], whiteA[3]],
     colorBgNotificationHover: surface.level3_4,
-    colorBgNotificationSelected: [accent[3], accentDark[4]],
-    colorBgNotificationSelectedHover: [accent[4], accentDark[6]],
-    disabledInversedTextColor: [shades.opacity25, lights.opacity25],
-    success: [teal[9], tealDark[9]],
-    danger: [red[9], redDark[10]],
-    active: [red[9], redDark[10]],
-    warning: [yellow[9], yellowDark[8]],
+    colorBgNotificationSelected: notificationSelected,
+    colorBgNotificationSelectedHover: notificationSelectedHover,
+    disabledInversedTextColor: blackA25,
+    success: primary.success,
+    danger: primary.destructive,
+    active: primary.destructive,
+    warning: primary.warning,
     cardBg: raised.level4,
     selectedImageBorder: [blackA[8], whiteA[11]],
-    transparent: [transparent, transparent],
-    shades: [lights, shades],
-    lights: [shades, lights],
-    separators: [separators, inversedSeparators],
-    progressBg: [base[4], base[4]], // FIXME surface.level4?
-    progressText: [base[11], base[11]],
-    progressFillBg: [base[11], base[11]],
-    progressFillText: [white, white],
+    transparent: transparentAlways,
+    progressBg: same(base[4]), // TODO check if that could be surface.level4?
+    progressText: neutralStrong,
+    progressFillBg: neutralStrong,
+    progressFillText: whiteColor,
     progressBarFillNeutral: [alpha(base[9], 0.2), alpha(baseDark[9], 0.2)],
     progressBarFill: [accent[9], accentDark[10]],
     progressBarBg: [alpha(accent[9], 0.25), alpha(accentDark[10], 0.25)],
-    // FIXME: lack of inverse scale usage, same values!
-    colorPickerSwatchBorder: [blackA[7], blackA[7]],
-    colorBorderRichTextMedia: [blackA[7], blackA[7]],
+    colorPickerSwatchBorder: same(blackA[7]),
+    colorBorderRichTextMedia: same(blackA[7]),
     richTextTableBorder: [blackA[5], whiteA[7]],
 
     // Drag and drop
-    colorBgDropLine: [accent[8], accentDark[8]],
+    colorBgDropLine: borderAccentOrMediumAccent,
 
     // Views
     viewBg: surface.level1,
     viewSecondaryBg: surface.level2,
-    viewHighlightBg: [accent[3], accentDark[3]],
+    viewHighlightBg: viewHighlightBg,
 
     // Board
     boardBg: surface.level1,
@@ -525,20 +774,20 @@ export function makeThemeDefs({
     gridHeaderHoverBgColor: surface.level3_4,
     gridHeaderTextColor: [base[10], baseDark[11]],
     gridCellBgColor: surface.level0elevated,
-    gridCellBorderColor: [base[5], baseDark[6]],
+    gridCellBorderColor: base5_6,
     gridDisabledCellBgColor: surface.level2_3,
-    gridSelectedCellBgColor: [accent[3], accentDark[3]],
-    gridHighlightedCellBgColor: [accent[4], accentDark[5]],
+    gridSelectedCellBgColor: viewHighlightBg,
+    gridHighlightedCellBgColor: bgCellGridDisabledOrHighlighted,
     gridSelectedCellBorderColor: [accent[6], accentDark[7]],
-    gridSelectedPinnedCellBorderColor: [accent[7], accentDark[7]],
-    gridDisabledSelectedCellBgColor: [accent[4], accentDark[5]],
+    gridSelectedPinnedCellBorderColor: borderAccentOrMedium,
+    gridDisabledSelectedCellBgColor: bgCellGridDisabledOrHighlighted,
     gridActiveCellBorderColor: [accent[8], accentDark[9]],
 
     //timeline
-    timelineEntityHandleColor: [accent[7], accentDark[7]],
-    timelineDependencyHoverBgColor: [accent[8], accentDark[8]],
-    timelineDependencyOverlapBgColor: [red[9], redDark[9]],
-    timelineDependencyOverlapHoverBgColor: [red[11], redDark[11]],
+    timelineEntityHandleColor: borderAccentOrMedium,
+    timelineDependencyHoverBgColor: borderAccentOrMediumAccent,
+    timelineDependencyOverlapBgColor: primary.destructive_TODO,
+    timelineDependencyOverlapHoverBgColor: fg.destructive,
     timelineCellBgColor: surface.level1,
     timelineCellWeekendBgColor: surface.level2,
     timelineCellTodayBgColor: [accent[4], accentDark[2]],
@@ -546,115 +795,116 @@ export function makeThemeDefs({
 
     // #region buttons
     // solid
-    colorBgButtonSolidAccentDefault: [accent[9], accentDark[9]],
+    colorBgButtonSolidAccentDefault: primary.accent,
     colorBgButtonSolidAccentHover: [accent[11], accentDark[10]],
-    colorBgButtonSolidNeutralDefault: [base[12], baseDark[12]],
+    colorBgButtonSolidNeutralDefault: fgMenuEtc,
     colorBgButtonSolidNeutralHover: [alpha(base[12], 0.85), white],
-    colorBgButtonSolidDestructiveDefault: [red[9], redDark[9]],
+    colorBgButtonSolidDestructiveDefault: primary.destructive_TODO,
     colorBgButtonSolidDestructiveHover: [red[11], redDark[10]],
-    colorTextButtonSolidAccent: [white, white],
-    colorTextButtonSolidAccentActive: [alpha(white, 0.8), alpha(white, 0.8)],
+    colorTextButtonSolidAccent: whiteColor,
+    colorTextButtonSolidAccentActive: fgSolidActiveText,
     colorTextButtonSolidNeutral: [white, baseDark[2]],
     colorTextButtonSolidNeutralActive: [white, alpha(baseDark[2], 0.8)],
-    colorTextButtonSolidDestructive: [white, white],
-    colorTextButtonSolidDestructiveActive: [alpha(white, 0.8), alpha(white, 0.8)],
-    colorIconButtonSolidAccent: [white, white],
+    colorTextButtonSolidDestructive: whiteColor,
+    colorTextButtonSolidDestructiveActive: fgSolidActiveText,
+    colorIconButtonSolidAccent: whiteColor,
     colorIconButtonSolidNeutral: [white, baseDark[8]],
-    colorIconButtonSolidDestructive: [white, white],
+    colorIconButtonSolidDestructive: whiteColor,
     // outline
-    colorBorderButtonOutlineAccentDefault: [accent[8], accentDark[8]],
-    colorBorderButtonOutlineNeutralDefault: [base[8], baseDark[7]],
-    colorBorderButtonOutlineDestructiveDefault: [red[7], redDark[7]],
+    colorBorderButtonOutlineAccentDefault: borderAccentOrMediumAccent,
+    colorBorderButtonOutlineNeutralDefault: borderNeutral,
+    colorBorderButtonOutlineDestructiveDefault: borderDanger,
     colorBgButtonOutlineAccentDefault: surface.level0,
-    colorBgButtonOutlineAccentHover: [accent[3], accentDark[3]],
+    colorBgButtonOutlineAccentHover: viewHighlightBg,
     colorBgButtonOutlineNeutralDefault: surface.level0,
     colorBgButtonOutlineNeutralHover: surface.level4,
     colorBgButtonOutlineDestructiveDefault: surface.level0,
-    colorBgButtonOutlineDestructiveHover: [red[4], redDark[4]],
-    colorTextButtonOutlineAccent: [accent[11], accentDark[11]],
-    colorTextButtonOutlineAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
-    colorTextButtonOutlineNeutral: [base[11], baseDark[11]],
-    colorTextButtonOutlineNeutralActive: [alpha(base[12], 0.8), alpha(baseDark[12], 0.8)],
-    colorTextButtonOutlineDestructive: [red[11], redDark[11]],
-    colorTextButtonOutlineDestructiveActive: [alpha(red[11], 0.8), alpha(redDark[11], 0.8)],
-    colorIconButtonOutlineAccent: [accent[11], accentDark[11]],
-    colorIconButtonOutlineNeutral: [base[11], baseDark[11]],
-    colorIconButtonOutlineDestructive: [red[11], redDark[11]],
+    colorBgButtonOutlineDestructiveHover: bgBtnGhostDestructiveHover,
+    colorTextButtonOutlineAccent: fg.accent,
+    colorTextButtonOutlineAccentActive: fg.accentActive,
+    colorTextButtonOutlineNeutral: fg.neutral,
+    colorTextButtonOutlineNeutralActive: fg.neutralActive__TODO,
+    colorTextButtonOutlineDestructive: fg.destructive,
+    colorTextButtonOutlineDestructiveActive: fg.destructiveActive,
+    colorIconButtonOutlineAccent: fg.accent,
+    colorIconButtonOutlineNeutral: fg.neutral,
+    colorIconButtonOutlineDestructive: fg.destructive,
     // soft
-    colorBgButtonSoftAccentDefault: [accent[3], accentDark[4]],
-    colorBgButtonSoftAccentHover: [accent[5], accentDark[6]],
-    colorBgButtonSoftNeutralDefault: [base[3], baseDark[3]],
-    colorBgButtonSoftNeutralHover: [base[7], baseDark[7]],
-    colorBgButtonSoftDestructiveDefault: [red[4], redDark[4]],
-    colorBgButtonSoftDestructiveHover: [red[6], redDark[6]],
-    colorTextButtonSoftAccent: [accent[11], accentDark[11]],
-    colorTextButtonSoftAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
-    colorTextButtonSoftNeutral: [base[11], baseDark[11]],
-    colorTextButtonSoftNeutralActive: [alpha(base[11], 0.8), alpha(baseDark[11], 0.8)],
-    colorTextButtonSoftDestructive: [red[11], redDark[11]],
-    colorTextButtonSoftDestructiveActive: [alpha(red[11], 0.8), alpha(redDark[11], 0.8)],
-    colorIconButtonSoftAccent: [accent[11], accentDark[11]],
-    colorIconButtonSoftNeutral: [base[11], baseDark[11]],
-    colorIconButtonSoftDestructive: [red[11], redDark[11]],
+    colorBgButtonSoftAccentDefault: notificationSelected,
+    colorBgButtonSoftAccentHover: bgBtnSoftAccentHover,
+    colorBgButtonSoftNeutralDefault: bgBtnSoftNeutralDefault,
+    colorBgButtonSoftNeutralHover: bgBtnSoftNeutralHover,
+    colorBgButtonSoftDestructiveDefault: bgBtnGhostDestructiveHover,
+    colorBgButtonSoftDestructiveHover: bgBtnSoftDestructiveHover,
+    colorTextButtonSoftAccent: fg.accent,
+    colorTextButtonSoftAccentActive: fg.accentActive,
+    colorTextButtonSoftNeutral: fg.neutral,
+    colorTextButtonSoftNeutralActive: fg.neutralActive,
+    colorTextButtonSoftDestructive: fg.destructive,
+    colorTextButtonSoftDestructiveActive: fg.destructiveActive,
+    colorIconButtonSoftAccent: fg.accent,
+    colorIconButtonSoftNeutral: fg.neutral,
+    colorIconButtonSoftDestructive: fg.destructive,
     // ghost
-    colorBgButtonGhostAccentDefault: [transparent, transparent],
-    colorBgButtonGhostAccentHover: [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)],
-    colorBgButtonGhostNeutralDefault: [transparent, transparent],
-    colorBgButtonGhostNeutralHover: [alpha(base[7], 0.5), alpha(baseDark[6], 0.8)],
-    colorBgButtonGhostDestructiveDefault: [transparent, transparent],
-    colorBgButtonGhostDestructiveHover: [red[4], redDark[4]],
-    colorTextButtonGhostAccent: [accent[11], accentDark[11]],
-    colorTextButtonGhostAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
-    colorTextButtonGhostNeutral: [base[11], baseDark[11]],
-    colorTextButtonGhostNeutralActive: [alpha(base[11], 0.8), alpha(baseDark[11], 0.8)],
-    colorTextButtonGhostDestructive: [red[11], redDark[11]],
-    colorTextButtonGhostDestructiveActive: [alpha(red[11], 0.8), alpha(redDark[11], 0.8)],
-    colorIconButtonGhostAccent: [accent[11], accentDark[11]],
-    colorIconButtonGhostNeutral: [base[11], baseDark[11]],
-    colorIconButtonGhostDestructive: [red[11], redDark[11]],
+    colorBgButtonGhostAccentDefault: transparentAlways,
+    colorBgButtonGhostAccentHover: bgBtnGhostAccentHover,
+    colorBgButtonGhostNeutralDefault: transparentAlways,
+    colorBgButtonGhostNeutralHover: bgBtnGhostNeutralHover,
+    colorBgButtonGhostDestructiveDefault: transparentAlways,
+    colorBgButtonGhostDestructiveHover: bgBtnGhostDestructiveHover,
+    colorTextButtonGhostAccent: fg.accent,
+    colorTextButtonGhostAccentActive: fg.accentActive,
+    colorTextButtonGhostNeutral: fg.neutral,
+    colorTextButtonGhostNeutralActive: fg.neutralActive,
+    colorTextButtonGhostDestructive: fg.destructive,
+    colorTextButtonGhostDestructiveActive: fg.destructiveActive,
+    colorIconButtonGhostAccent: fg.accent,
+    colorIconButtonGhostNeutral: fg.neutral,
+    colorIconButtonGhostDestructive: fg.destructive,
     // #endregion
 
-    colorBorderAccentFocusRing: [alpha(accent[9], 0.3), alpha(accent[9], 0.3)],
-    colorBorderNeutralFocusRing: [alpha(base[9], 0.3), alpha(base[9], 0.3)],
-    colorBorderDestructiveFocusRing: [alpha(red[9], 0.3), alpha(red[9], 0.3)],
+    colorBorderAccentFocusRing: borderFocusRingAccent,
+    colorBorderNeutralFocusRing: borderFocusRingNeutral,
+    colorBorderDestructiveFocusRing: borderFocusRingDestructive,
 
     colorBgReactionsDefault: surface.level0elevated,
     colorBgReactionsHover: surface.level3_6,
     colorBorderReactionsHover: [base[8], baseDark[9]],
     colorBgReactionsSelectedDefault: [accent[3], accentDark[8]],
-    colorBorderReactionsSelectedDefault: [accent[8], accentDark[8]],
+    colorBorderReactionsSelectedDefault: borderAccentOrMediumAccent,
     // FIXME: lack of accentDark scale usage
     colorBgReactionsSelectedHover: [accent[2], accent[10]],
     colorBorderReactionsSelectedHover: [accent[9], accent[10]],
     colorTextReactionsSelected: [accent[10], baseDark[12]],
     colorBgToastDefault: surface.level1,
     colorBgDbTabHover: surface.level3_4,
-    colorBgDbTabFocus: [base[6], baseDark[6]],
-    colorBgTabHover: [alpha(base[11], 0.1), alpha(baseDark[11], 0.1)],
+    colorBgDbTabFocus: bgTabFocus,
+    colorBgTabHover: bgTabHover,
 
     // Chat
-    colorBgMessageContainer: [blackA[3], baseDark[6]],
-    colorBgMessageContainerHover: surface.level2_3,
+    colorBgMessageContainer: [base[3], baseDark[3]],
+    colorBgMessageContainerHover: [base[4], baseDark[4]],
     colorBgEntityAvatarDefault: [accent[1], accentDark[1]],
-    colorBgEntityAvatarHover: [accent[3], accentDark[3]],
-    colorTextEntityAvatarDefault: [accent[8], accentDark[8]],
-    colorTextEntityAvatarHover: [accent[9], accentDark[9]],
+    colorBgEntityAvatarHover: viewHighlightBg,
+    colorTextEntityAvatarDefault: borderAccentOrMediumAccent,
+    colorTextEntityAvatarHover: primary.accent,
+    colorBgMessageHighlighted: surface.level0elevated,
 
     // Text editor
     colorBgEditorImageZoomed: surface.level3_6,
     colorMermaidPrimaryColor: [base[2], baseDark[8]],
-    colorMermaidPrimaryBorderColor: [base[9], baseDark[9]],
+    colorMermaidPrimaryBorderColor: fg.muted,
     colorMermaidLineColor: [base[10], baseDark[9]],
 
     //Whiteboard
     colorBgWhiteboard: surface.level0,
-    colorGridDotWhiteboard: [base[6], baseDark[6]],
-    colorSelectionWhiteboardBorderEnabled: [accent[8], accentDark[8]],
-    colorHighlightWhiteboardSelection: [accent[8], accentDark[8]],
-    colorHighlightWhiteboardSelectionLocked: [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)],
-    colorSelectionWhiteboardBorderDisabled: [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)],
+    colorGridDotWhiteboard: bgTabFocus,
+    colorSelectionWhiteboardBorderEnabled: borderAccentOrMediumAccent,
+    colorHighlightWhiteboardSelection: borderAccentOrMediumAccent,
+    colorHighlightWhiteboardSelectionLocked: textWhiteboardSelectionLockedOrDisabled,
+    colorSelectionWhiteboardBorderDisabled: textWhiteboardSelectionLockedOrDisabled,
     colorPlaceholderWhiteboardDefault: [alpha(accent[8], 0.2), alpha(accentDark[8], 0.2)],
-    colorLinkPointWhiteboardDefault: [accent[8], accentDark[8]],
+    colorLinkPointWhiteboardDefault: borderAccentOrMediumAccent,
     colorLinkPointWhiteboardFillDefault: [white, blackish],
     colorMapWhiteboardPreviewDefault: [alpha(accent[8], 0.4), alpha(accentDark[8], 0.4)],
     colorCardWhiteboardShadowDefault: [alpha(base[11], 0.05), alpha(baseDark[11], 0.05)],
@@ -664,44 +914,55 @@ export function makeThemeDefs({
     colorUnitWhiteboardBgDefault: surface.level3_6,
     colorUnitWhiteboardBorderDefault: [alpha(base[12], 0.2), alpha(baseDark[12], 0.25)],
     colorSectionWhiteboardBgInactive: surface.level2,
-    colorSectionWhiteboardBorderInactive: [base[6], baseDark[6]],
+    colorSectionWhiteboardBorderInactive: bgTabFocus,
     colorEmbedWhiteboardEditBorder: [alpha(teal[8], 0.9), alpha(tealDark[8], 0.9)],
-    colorTextWhiteboardDefault: [base[12], baseDark[12]],
-    colorTextWhiteboardDisabled: [base[9], baseDark[9]],
+    colorTextWhiteboardDefault: fgMenuEtc,
+    colorTextWhiteboardDisabled: fg.muted,
+    // FIXME bug?
+    //  Dark uses baseDark[1] (near-black at 60% opacity) as "accent text" on a dark background.
+    //  This reads as near-invisible dark text on dark bg.
+    //  Compare with colorUnitHeaderWhiteboardDefault (L772) which correctly uses baseDark[12] for dark.
+    //  Likely should be baseDark[12] too.
     colorTextWhiteboardAccent: [alpha(base[12], 0.6), alpha(baseDark[1], 0.6)],
-    colorTextWhiteboardInversedDefault: [white, white],
+    colorTextWhiteboardInversedDefault: whiteColor,
     instrumentsMenuBg: raised.level2,
-    instrumentsMenuShadow: [
-      `0px 0px 1px 0px ${alpha(base[11], 0.2)}, 0px 4px 6px 0px ${alpha(base[11], 0.05)}, 0px 3px 12px 0px ${alpha(
-        base[11],
-        0.1
-      )}`,
-      `0px 0px 1px 0px ${baseDark[6]}, 0px 4px 6px 0px ${alpha(baseDark[1], 0.05)}, 0px 3px 12px 0px ${alpha(
-        baseDark[1],
-        0.15
-      )}`,
-    ],
+    instrumentsMenuShadow: floatingShadows.instrumentsMenu,
     commentBubbleBg: raised.level4,
-    commentsPanelShadow: [
-      `0 0 0 1px ${alpha(base[10], 0.1)}, 0 2px 4px -4px ${alpha(base[10], 0.2)}`,
-      `0 0 0 1px ${alpha(baseDark[2], 0.1)}, 0 2px 4px -4px ${alpha(baseDark[2], 0.2)}`,
-    ],
+    commentsPanelShadow: floatingShadows.instrumentsMenu,
     searchFiltersBg: surface.level1_1,
-    selectedColorBorder: [alpha(base[6], 0.25), alpha(base[6], 0.25)],
+    selectedColorBorder: same(alpha(base[6], 0.25)),
 
     // SegmentedControl
     colorBgSegmentedControlDefault: surface.level3_1,
     colorBgSegmentedControlActive: surface.level1_6,
     colorBgSegmentedControlHover: surface.level5_4,
-    colorBorderSegmentedControlDefault: [base[6], baseDark[7]],
+    colorBorderSegmentedControlDefault: surface.level6_7,
+
+    // Banner
+    colorBgBannerNeutral: bg.neutral3,
+    colorBgBannerPrimary: bg.accent3,
+    colorBgBannerWarning: bg.warning,
+    colorBgBannerError: bg.error,
+    colorBgBannerSuccess: bg.success,
+
+    colorIconBannerNeutral: icon.primary,
+    colorIconBannerAccent: icon.accent,
+    colorIconBannerWarning: icon.warning,
+    colorIconBannerError: icon.error,
+    colorIconBannerSuccess: icon.success,
+
+    colorTextBannerNeutral: text.primary,
+    colorTextBannerAccent: text.accent,
+    colorTextBannerWarning: text.warning,
+    colorTextBannerError: text.error,
+    colorTextBannerSuccess: text.success,
 
     // Chargebee info
     colorBgChargebeeInfoBox: surface.level3_1,
 
     // Various found direct palette references
-    // FIXME: lack of redDark scale usage, same values!
-    newCommentHorizontalRulerColor: [red[8], red[8]],
-    colorBgErrorMessage: [red[8], red[8]],
+    newCommentHorizontalRulerColor: errorIndicatorColor,
+    colorBgErrorMessage: errorIndicatorColor,
 
     // Logo/illustration specific colors
     colorBorderLogoGrid: surface.level4,
@@ -709,27 +970,74 @@ export function makeThemeDefs({
     colorBorderLogoGridMedium: [alpha(base[4], 0.4), baseDark[4]],
     colorStrokeLogoDashed: [base[6], baseDark[8]],
     colorBgLogoCardTransparent: surface.level0elevated,
-    colorBgLogoCardDark: [base[8], baseDark[8]],
+    colorBgLogoCardDark: base8,
     colorBgLogoCardMedium: surface.level4,
 
+    // Skeleton/loading
+    colorBgSkeletonFrom: whiteA5,
+    colorBgSkeletonTo: whiteA10,
+
+    // Inset edge shadows (scroll containers)
+    colorShadowInsetEdge: whiteA5,
+
+    // Shadow border (surface direction for colors-css)
+    colorShadowBorder: whiteA10,
+
+    // Elevation shadows (ink direction)
+    colorShadowElevation: blackA10,
+    colorShadowOutline: [alpha(black, 0.2), alpha(white, 0.2)],
+
+    // Placeholder/fallback
+    colorPlaceholder: whiteA40,
+    colorPlaceholderSubtle: whiteA25,
+    colorBgSubtleLight: whiteA5,
+    colorStrokeSurface: whiteA100,
+
+    // Ink-based tokens (contrast direction)
+    colorTextMilestone: blackA50,
+    colorSpinnerIcon: blackA90,
+    colorSpinnerBg: blackA10,
+    colorBgLaneSubtle: blackA5,
+
+    // Opacities (numeric)
+    opacity15: opacities.subtle,
+    opacity20: opacities.faint,
+    opacity25: same(opacity.opacity25.toString()),
+    opacity30: opacities.weak,
+    opacity40: opacities.drag,
+    opacity50: opacities.muted,
+    opacity60: opacities.done,
+    opacity65: opacities.disabled,
+    opacity70: opacities.visible,
+    opacity75: opacities.disabledHoverOrFocus,
+    opacity80: same(opacity.opacity80.toString()),
+    opacity85: same(opacity.opacity85.toString()),
+    opacity90: same(opacity.opacity90.toString()),
+
+    // Gradient overlays (whiteA direction)
+    whiteA10,
+    whiteA40,
+    whiteA100,
+
+    // File hover overlay (always dark scrim for white text readability)
+    colorBgFileOverlay: same(alpha(black, 0.6)),
+
+    // Scroll fade edges
+    colorBgScrollFade: [alpha(white, 0.15), alpha(black, 0.15)],
+
+    // Date picker selected outline
+    colorStrokeSelectedOutline: [alpha(black, 0.75), alpha(white, 0.75)],
+
     // Preloader / chrome
     scrollbar: [alpha(base[9], 0.5), alpha(baseDark[7], 0.5)],
   } as const satisfies ThemeColorsDef;
 
+  const adaptive = makeAdaptiveBgFg(white, blackish);
   const fns = {
-    getEnumBackground: {
-      light: (color: string) => a11yColor(alpha(color, 0.15), white, 1),
-      dark: (color: string) => a11yColor(alpha(color, 0.3), blackish, 1.3),
-    },
-    getAppIconBackground: {
-      light: (color: string) => a11yColor(alpha(color, 0.15), white, 1),
-      dark: (color: string) => a11yColor(alpha(color, 0.3), blackish, 1.3),
-      light2: (color: string) => a11yColor(alpha(color, 0.3), blackish, 1.3),
-    },
-    getIconColor: {
-      light: (color: string) => a11yColor(alpha(color, 0.95), white, 3),
-      dark: (color: string) => a11yColor(alpha(color, 0.95), blackish, 5),
-    },
+    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)]),
@@ -741,20 +1049,10 @@ export function makeThemeDefs({
     },
   } as const satisfies ThemeFnsDef;
 
-  return {colors, fns} as const;
+  return {key, colors, fns} as const;
 }
 
-export type ThemeDefs = ReturnType<typeof makeThemeDefs>;
-
-type ThemeFns = {
-  [K in keyof ThemeDefs["fns"]]: ThemeDefs["fns"][K]["light"];
-};
-
-export function pickFns(fns: ThemeFnsDef, mode: ThemeMode) {
-  return Object.fromEntries(
-    Object.entries(fns).map(([key, modeFns]) => [key, modeFns[mode] ?? modeFns.light])
-  ) as ThemeFns;
-}
+export type ThemeDefs = ReturnType<typeof defsFromPalette>;
 
 type ThemeDefsColors = ThemeDefs["colors"];
 
@@ -762,36 +1060,34 @@ type GetThemeColors<idx extends number> = {
   [k in keyof ThemeDefsColors]: ThemeDefsColors[k][idx];
 };
 
-function pickColorsByIndex<I extends 0 | 1>(colors: ThemeDefsColors, idx: I): GetThemeColors<I> {
+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 pickLightColors(themeDefs: ThemeDefs) {
-  return pickColorsByIndex(themeDefs.colors, 0);
+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 pickDarkColors(themeDefs: ThemeDefs) {
-  return pickColorsByIndex(themeDefs.colors, 1);
+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 pickLight2Colors(themeDefs: ThemeDefs) {
+export function sideFromDefs(defs: ThemeDefs, side: ThemeMode) {
   return {
-    ...pickLightColors(themeDefs),
-    mode: "light2",
-  } as const;
-}
-
-export function pickColors(themeDefs: ThemeDefs, mode: ThemeMode) {
-  if (mode === "dark") {
-    return pickDarkColors(themeDefs);
-  }
-  if (mode === "light2") {
-    return pickLight2Colors(themeDefs);
-  }
-  return pickLightColors(themeDefs);
+    colors: colorsFromDefs(defs, side),
+    fns: fnsFromDefs(defs, side),
+  };
 }
-
-export type Colors = ReturnType<typeof pickColors>;