@fibery/ui-kit 2.0.0 → 2.1.0

package/src/design-system/colors.ts

@@ -1,10 +1,10 @@
 /* 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, serializeHexVariadic, setAlpha, setLuminanceChroma} from "../color-utils";
 import {ThemeMode} from "../theme-settings";
-import {getOpacities, opacity, transparent} from "./alpha";
+import {alpha, opacity, transparent} from "./alpha";
+import {getDarkenColor, makeAdaptiveBgFg} from "./colors-js";
+import {cssFromFilter, makeColorFilter} from "../color-filter";
 
 export const cardTypeColors = [
   "#4A4A4A",
@@ -26,12 +26,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]
@@ -50,7 +44,24 @@ type ThemeFnsDef = Record<
   }
 >;
 
-export function makeThemeDefs({
+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(", ");
+
+/** @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)];
+
+type Def = [light: string, dark: string];
+type Defs = Record<string, Def>;
+
+export function defsFromPalette({
+  key,
   white,
   black,
   whiteA,
@@ -65,633 +76,990 @@ export function makeThemeDefs({
   tealDark,
   yellow,
   yellowDark,
+  deneutralize,
 }: ThemePalette) {
-  const blackish = produceColor(black, (x) => set(x, "hsl.l", (x) => x + 5));
+  const shift = makeColorFilter(deneutralize);
+  const colorPickerCssFilter = cssFromFilter(deneutralize) ?? "none";
 
-  const shades = getOpacities(black);
-  const separators = {
-    ...mapValues(shades, (shade) => `0.5px solid ${shade}`),
-  } 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 = shift("rgb(157, 99, 212)");
+  const purpleDark9 = shift("rgb(131, 73, 182)");
+  const blue9 = shift("rgba(56, 105, 204, 1)");
+  const blueDark9 = shift("rgba(151, 177, 237, 1)");
+  // end(TODO pull into ThemePalette)
 
-  const lights = getOpacities(white);
-  const inversedSeparators = {
-    ...mapValues(lights, (light) => `0.5px solid ${light}`),
-  } as const;
+  // 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];
 
-  const colors = {
-    mode: ["light", "dark"],
+  // 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)];
 
-    // 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]}`],
+  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()),
+  };
 
-    // Shadows and effects / Elevation
-    shadow50: [
-      `0px 0px 0px 1px ${getOpacities(base[12]).opacity5}`,
-      `0px 0px 0px 1px ${getOpacities(baseDark[12]).opacity10}`,
-    ],
-    shadow100: [
-      `0px 1px 4px 0px ${getOpacities(base[12]).opacity5}`,
-      `0px 1px 4px 0px ${getOpacities(base[12]).opacity10}`,
-    ],
-    shadow200: [
-      `0px 2px 6px 0px ${getOpacities(base[12]).opacity5}`,
-      `0px 2px 6px 0px ${getOpacities(base[12]).opacity10}`,
-    ],
-    shadow300: [
-      `0px 3px 6px -3px ${getOpacities(base[12]).opacity10}, 0px 8px 20px -4px ${getOpacities(base[12]).opacity15}`,
-      `0px 3px 6px -3px ${getOpacities(base[12]).opacity10}, 0px 8px 20px -4px ${getOpacities(base[12]).opacity15}`,
-    ],
-    shadow400: [
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 16px 40px 0px ${getOpacities(base[12]).opacity15}`,
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 16px 40px 0px ${getOpacities(base[12]).opacity15}`,
-    ],
-    shadow500: [
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 20px 50px 0px ${getOpacities(base[12]).opacity15}`,
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 20px 50px 0px ${getOpacities(base[12]).opacity15}`,
-    ],
-    shadow600: [
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 26px 80px 0px ${getOpacities(base[12]).opacity20}`,
-      `0px 0px 1px 0px ${getOpacities(base[12]).opacity20}, 0px 26px 80px 0px ${getOpacities(base[12]).opacity20}`,
-    ],
-    actionMenuShadow: [
-      `0px 0px 2px 0px ${getOpacities(base[11]).opacity30}, 0px 4px 6px 0px ${
-        getOpacities(base[11]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(base[11]).opacity15}`,
-      `0px 0px 0px 1px ${getOpacities(baseDark[6]).opacity100}, 0px 4px 6px 0px ${
-        getOpacities(baseDark[1]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(baseDark[1]).opacity15}`,
+  // FIXME WIP to find commons/dedupe/adjust
+  const surface = {
+    // pure white / deepest dark
+    level0: [white, baseDark[1]],
+
+    // pure white / slightly elevated dark
+    level0elevated: [white, baseDark[2]],
+
+    // near-white canvas
+    level1: [base[1], baseDark[1]],
+    level1_1: [base[1], baseDark[2]],
+    level1_3: [base[1], baseDark[3]],
+    level1_4: [base[1], baseDark[4]],
+    level1_6: [base[1], baseDark[6]],
+
+    // secondary/subtle bg
+    level2: [base[2], baseDark[2]],
+    level2_1: [base[2], baseDark[1]],
+    level2_3: [base[2], baseDark[3]],
+    level2_6: [base[2], baseDark[6]],
+
+    // 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]],
+
+    // hover emphasis (neutral)
+    level4: [base[4], baseDark[4]],
+
+    // hover emphasis, elevated dark
+    level4_5: [base[4], baseDark[5]],
+    level4_6: [base[4], baseDark[6]],
+
+    level5_4: [base[5], baseDark[4]],
+    level6_7: [base[6], baseDark[7]],
+  } satisfies Defs;
+
+  const raised = {
+    // menus, modals, entity boxes
+    level1: [white, baseDark[3]],
+
+    // popups, inner menus, hover on raised.level1
+    level2: [white, baseDark[4]],
+
+    // entity cards (old)
+    level3: [white, baseDark[5]],
+
+    // card bg, comment bubbles, float editors
+    level4: [white, baseDark[6]],
+  } satisfies Defs;
+
+  // 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}`;
+
+  // 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))]),
     ],
-    shadowPopup: [
-      `0px 0px 2px 0px ${getOpacities(base[11]).opacity30}, 0px 4px 6px 0px ${
-        getOpacities(base[11]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(base[11]).opacity15}`,
-      `0px 0px 0px 1px ${getOpacities(baseDark[6]).opacity100}, 0px 4px 6px 0px ${
-        getOpacities(baseDark[1]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(baseDark[1]).opacity15}`,
+    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))]),
     ],
-    shadowSidebar: [
-      `-3px 0px 10px 0px ${getOpacities(base[10]).opacity10}`,
-      `-3px 0px 10px 0px ${getOpacities(baseDark[1]).opacity80}`,
+  } 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))]),
     ],
+  } 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)
+  // inspired by tailwind:
+  // bg-*	Sets the background color of an element
+  // text-*	Sets the text color of an element
+  // border-*	Sets the border color of an element
+  // shadow-*	Sets the color of box shadows
+  // fill-*	Sets the fill color of SVG elements
+  // stroke-*	Sets the stroke color of SVG elements
+  // 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: same(fg),
+    bg: same(alpha(fg, 0.2)),
+  });
+
+  const swatches = {
+    green: "#69AC5E",
+    grayLight: cardTypeColors[1],
+    indigo: cardTypeColors[8],
+    teal: cardTypeColors[10],
+    yellow: cardTypeColors[14],
+  };
+
+  const iconMySpace = iconFromFg(shift(swatches.grayLight, serializeHexVariadic));
+  const iconPrivate = iconFromFg(shift(swatches.green, serializeHexVariadic));
+  const iconFavorites = iconFromFg(shift(swatches.yellow, serializeHexVariadic));
+  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,
+
+    // 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],
-    mainBg: [base[3], blackish],
-    panelBg: [white, baseDark[1]],
-    panelContentBg: [base[2], baseDark[1]],
-    colorBgRelationContainer: [base[2], baseDark[1]],
+    /** @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: ["rgb(157, 99, 212)", "rgb(131, 73, 182)"],
-    colorBgAI: ["rgba(157, 99, 212, 0.1)", "rgba(131, 73, 182, 0.1)"],
-    colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
-    colorBgAIFloatingLauncher: [base[1], baseDark[4]],
-    colorBgAIFloatingPanelContent: [base[1], baseDark[3]],
-    colorBgAISidebarContent: [base[1], baseDark[1]],
+    colorAI: [purple9, purpleDark9],
+    colorBgAI: [alpha(purple9, 0.1), alpha(purpleDark9, 0.1)],
+    // FIXME why 0.1 for dark vs 0.05 for light?
+    colorSubtleBgAI: [alpha(purple9, 0.05), alpha(purpleDark9, 0.1)],
+    colorBgAIFloatingLauncher: surface.level1_4,
+    colorBgAIFloatingPanelContent: surface.level1_3,
+    colorBgAISidebarContent: surface.level1,
+
     // Other colors
-    pageContentBg: [white, baseDark[2]],
-    colorBgPopup: [white, baseDark[4]],
-    menuBg: [base[3], blackish],
-    menuTextColor: [base[12], baseDark[12]],
-    menuItemHoverColor: [base[5], baseDark[6]],
-    menuSelectedTextColor: [base[2], base[2]],
-    menuIconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
+    pageContentBg: surface.level0elevated,
+    colorBgPopup: raised.level2,
+    menuBg: surface.level3exotic,
+    menuTextColor: fgMenuEtc,
+    menuItemHoverColor: base5_6,
+    menuSelectedTextColor: fgSelectedText,
+    menuIconColor: fg.icon,
 
     // Text, links colors
-    textColor: [base[12], baseDark[12]],
-    textSelectionColor: [getOpacities(accent[9]).opacity20, getOpacities(accentDark[9]).opacity40],
-    accentTextColor: [base[10], baseDark[10]],
-    disabledTextColor: [base[9], baseDark[9]],
-    inversedTextColor: [base[3], baseDark[6]],
-    colorTextSecondary: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity65],
-    linkColor: ["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"],
-    linkBorder: [`0.5px solid "rgba(56, 105, 204, 0.4)"`, `0.5px solid "rgba(151, 177, 237, 0.4)"`],
-    linkHoverColor: ["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"],
-    linkBorderHover: [`0.5px solid "rgba(56, 105, 204, 0.8)"`, `0.5px solid "rgba(151, 177, 237, 0.7)"`],
-    codeColor: [red[9], red[8]],
-    codeBgColor: [base[3], baseDark[4]],
-    codeBlockBgColor: [base[3], baseDark[4]],
-    addedDiffTextColor: [teal[9], tealDark[11]],
-    removedDiffTextColor: [red[11], redDark[11]],
+    textColor: fgMenuEtc,
+    textSelectionColor: fgSelection,
+    accentTextColor: fgAccentText,
+    disabledTextColor: fg.muted,
+    inversedTextColor: surface.level3_6,
+    colorTextSecondary: fg.secondary,
+    linkColor: linkBlue,
+    linkBorder: [separator(alpha(blue9, 0.4)), separator(alpha(blueDark9, 0.4))],
+    linkHoverColor: linkBlue,
+    linkBorderHover: [separator(alpha(blue9, 0.8)), separator(alpha(blueDark9, 0.7))], // FIXME why different alpha?
+    codeColor: codeOrErrorMessage,
+    codeBgColor: surface.level3_4,
+    codeBlockBgColor: surface.level3_4,
+    addedDiffTextColor: fg.addition,
+    removedDiffTextColor: fg.destructive,
 
     // Entity
     entityNodeColor: [baseDark[3], base[8]],
-    entityNodeBorder: [
-      `0.5px solid ${getOpacities(baseDark[3]).opacity30}`,
-      `0.5px solid ${getOpacities(base[8]).opacity40}`,
-    ],
+    entityNodeBorder: [separator(alpha(baseDark[3], 0.3)), separator(alpha(base[8], 0.4))],
     entityNodeHoverColor: [baseDark[7], base[7]],
-    entityNodeBorderHover: [
-      `0.5px solid ${getOpacities(base[11]).opacity80}`,
-      `0.5px solid ${getOpacities(base[7]).opacity80}`,
-    ],
-    entityNodeBgColor: [base[2], baseDark[3]],
+    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 ${getOpacities(base[8]).opacity50}`,
-      `1px solid ${getOpacities(baseDark[10]).opacity20}`,
-    ],
-    shortcutBorderColor: [getOpacities(base[8]).opacity50, getOpacities(baseDark[10]).opacity20],
+    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: [white, baseDark[2]],
-    inputDisabledBgColor: [getOpacities(base[6]).opacity30, getOpacities(baseDark[6]).opacity30],
-    inputDisabledBorderColor: [
-      `0 0 0 1px ${getOpacities(base[6]).opacity20}`,
-      `0 0 0 1px ${getOpacities(baseDark[8]).opacity20}`,
-    ],
-    inputCopyBgColor: [base[3], baseDark[4]],
-    inputBorderColor: [
-      `0 0 0 1px ${getOpacities(base[6]).opacity70}`,
-      `0 0 0 1px ${getOpacities(baseDark[8]).opacity70}`,
-    ],
-    inputBorderHoverColor: [
-      `0 0 0 1px ${getOpacities(base[7]).opacity100}`,
-      `0 0 0 1px ${getOpacities(baseDark[8]).opacity100}`,
-    ],
-    inputBorderFocusColor: [
-      `0 0 0 1px  ${getOpacities(base[8]).opacity100}`,
-      `0 0 0 1px ${getOpacities(baseDark[9]).opacity100}`,
-    ],
+    inputBgColor: surface.level0elevated,
+    inputDisabledBgColor: base6_6_opacity30,
+    inputDisabledBorderColor: inputStrokes.disabled,
+    inputCopyBgColor: surface.level3_4,
+    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 ${getOpacities(red[11]).opacity40}`,
-      `0 0 0 1px ${getOpacities(red[7]).opacity40}`,
-    ],
-    inputErrorBorderFocusColor: [
-      `0 0 0 1px ${getOpacities(red[11]).opacity25}`,
-      `0 0 0 1px ${getOpacities(red[7]).opacity25}`,
-    ],
-    inputErrorBorderFocusShadow: [
-      `0 0 0 3px ${getOpacities(red[11]).opacity25}`,
-      `0 0 0 3px ${getOpacities(red[7]).opacity25}`,
-    ],
-    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: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
-    colorBorderBlockQuote: [base[11], baseDark[11]],
+    checkboxColor: fg.icon,
+    colorBorderBlockQuote: fg.neutral,
 
     // Actions menu
-    colorBgActionsMenu: [white, baseDark[3]],
-    colorBgActionsMenuItemHover: [base[4], baseDark[5]],
-    colorBgActionsMenuItemSelected: [getOpacities(accent[4]).opacity80, getOpacities(accentDark[4]).opacity80],
-    colorBgActionsMenuItemSelectedHover: [getOpacities(accent[5]).opacity80, getOpacities(accentDark[6]).opacity80],
-    colorBgActionsMenuItemDangerHover: [getOpacities(red[9]).opacity10, getOpacities(redDark[10]).opacity10],
-    colorBgActionsMenuItemDangerActive: [getOpacities(red[9]).opacity80, getOpacities(redDark[10]).opacity80],
-    actionMenuBg: [white, baseDark[3]],
-    actionMenuInnerBg: [white, baseDark[4]],
-    actionMenuHover: [base[4], baseDark[5]],
-    actionMenuInnerHover: [base[4], getOpacities(baseDark[6]).opacity50],
-    actionMenuButtonColor: [white, baseDark[2]],
-    actionMenuButtonHoverColor: [base[1], baseDark[3]],
-    actionMenuButtonShadow: [
-      `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
-      `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
+    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: bgActionsMenu,
+    actionMenuInnerBg: raised.level2,
+    actionMenuHover: bgActionsMenuItemHover,
+    actionMenuInnerHover: [base[4], alpha(baseDark[6], 0.5)],
+    actionMenuButtonColor: surface.level0elevated,
+    actionMenuButtonHoverColor: surface.level1_3,
+    actionMenuButtonShadow: cardShadows.subtle,
+    actionMenuSeparatorColor: [alpha(black, 0.1), alpha(white, 0.15)],
+    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]]),
     ],
-    actionMenuSeparatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity15],
-    separatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity10],
-    separatorColorDimmed: [getOpacities(black).opacity5, getOpacities(white).opacity5],
-    separatorBreadcrumbsColor: [base[8], baseDark[8]],
-    iconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
-    appIconColor: [getOpacities(base[2]).opacity90, getOpacities(base[2]).opacity70],
-    appIconBgColor: [getOpacities(base[1]).opacity90, getOpacities(base[2]).opacity50],
-    mentionBgColor: [getOpacities(base[7]).opacity30, getOpacities(baseDark[7]).opacity40],
-    colorBgSelectMenu: [base[1], baseDark[3]],
-    shadowSelectMenu: [
-      `0px 0px 2px 0px ${getOpacities(base[11]).opacity30}, 0px 4px 6px 0px ${
-        getOpacities(base[11]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(base[11]).opacity15}`,
-      `0px 0px 0px 1px ${getOpacities(baseDark[6]).opacity100}, 0px 4px 6px 0px ${
-        getOpacities(baseDark[1]).opacity5
-      }, 0px 10px 26px 0px ${getOpacities(baseDark[1]).opacity15}`,
+    shadowCardHover: [
+      steps([inputStrokes.default[0], shadows.shadow200[0]]),
+      steps([inputStrokes.default[1], shadows.shadow200[1]]),
     ],
-    colorBgListItemGeneral: [transparent, transparent],
-    colorBgListItemGeneralHover: [base[3], baseDark[4]],
-    colorBgListItemGeneralFocus: [base[4], baseDark[6]],
-    colorBgListItemGeneralSelected: [accent[3], accentDark[4]],
-    colorBgListItemGeneralSelectedHover: [accent[4], accentDark[6]],
-    colorBgListItemGeneralSelectedFocus: [accent[4], accentDark[6]],
-    colorBgListItemGeneralDisabled: [transparent, transparent],
-    colorTextListItemGeneralDisabled: [base[9], baseDark[9]],
+    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: floatingShadows.popup,
+    colorBgListItemGeneral: transparentAlways,
+    colorBgListItemGeneralHover: surface.level3_4,
+    colorBgListItemGeneralFocus: surface.level4_6,
+    colorBgListItemGeneralSelected: notificationSelected,
+    colorBgListItemGeneralSelectedHover: notificationSelectedHover,
+    colorBgListItemGeneralSelectedFocus: notificationSelectedHover,
+    colorBgListItemGeneralDisabled: transparentAlways,
+    colorTextListItemGeneralDisabled: fg.muted,
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
-    opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityListItemGeneralDisabled: opacities.drag,
 
     // Search Items
-    colorBgSearchRowHover: [base[4], baseDark[5]],
+    colorBgSearchRowHover: bgActionsMenuItemHover,
     colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
-    opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacitySearchItemDone: opacities.drag,
+
     // Entity Box Style And States
     // Basic Entity Box State
-    colorBgEntityBoxDefault: [white, baseDark[3]],
-    shadowStrokeEntityBoxDefault: [`0 0 0 1px ${base[5]}`, `0 0 0 1px ${baseDark[5]}`],
-    shadowEntityBoxDefault: [
-      `0px 2px 4px 0px ${getOpacities(base[12]).opacity5}`,
-      `0px 2px 4px 0px ${getOpacities(baseDark[1]).opacity5}`,
-    ],
+    colorBgEntityBoxDefault: bgActionsMenu,
+    shadowStrokeEntityBoxDefault: entityBoxShadows.stroke.default,
+    shadowEntityBoxDefault: entityBoxShadows.elevation.default,
     // :hover
-    colorBgEntityBoxDefaultHover: [white, baseDark[4]],
-    shadowEntityBoxDefaultHover: [
-      `0px 4px 8px 0px ${getOpacities(base[12]).opacity10}`,
-      `0px 4px 8px 0px ${getOpacities(baseDark[1]).opacity10}`,
-    ],
+    colorBgEntityBoxDefaultHover: raised.level2,
+    shadowEntityBoxDefaultHover: entityBoxShadows.elevation.hover,
     // :focus
-    colorBgEntityBoxDefaultFocus: [white, baseDark[3]],
-    colorOverlayEntityBoxDefaultFocus: [accent[9], accentDark[9]],
-    shadowStrokeEntityBoxDefaultFocus: [
-      `0 0 0 2px ${getOpacities(accent[9]).opacity40}`,
-      `0 0 0 2px ${getOpacities(accentDark[9]).opacity40}`,
-    ],
+    colorBgEntityBoxDefaultFocus: bgActionsMenu,
+    colorOverlayEntityBoxDefaultFocus: primary.accent,
+    shadowStrokeEntityBoxDefaultFocus: entityBoxShadows.stroke.focus,
     // :focus:hover
-    colorBgEntityBoxDefaultFocusHover: [white, baseDark[4]],
-    colorOverlayEntityBoxDefaultFocusHover: [accent[9], accentDark[9]],
-    shadowStrokeEntityBoxDefaultFocusHover: [
-      `0 0 0 2px ${getOpacities(accent[9]).opacity60}`,
-      `0 0 0 2px ${getOpacities(accentDark[9]).opacity60}`,
-    ],
+    colorBgEntityBoxDefaultFocusHover: raised.level2,
+    colorOverlayEntityBoxDefaultFocusHover: primary.accent,
+    shadowStrokeEntityBoxDefaultFocusHover: entityBoxShadows.stroke.focusHover,
     //::drag
-    opacityEntityBoxDefaultDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
-    shadowEntityBoxDefaultDrag: [
-      `0px 8px 12px 0px ${getOpacities(base[12]).opacity10}`,
-      `0px 8px 12px 0px ${getOpacities(baseDark[1]).opacity10}`,
-    ],
+    opacityEntityBoxDefaultDrag: opacities.drag,
+    shadowEntityBoxDefaultDrag: entityBoxShadows.elevation.drag,
     // Selected Entity Box State
     colorBgEntityBoxSelected: [accent[2], accentDark[3]],
-    shadowStrokeEntityBoxSelected: [
-      `0 0 0 1px ${getOpacities(accent[9]).opacity40}, 0 0 0 3px ${getOpacities(accent[9]).opacity40}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${getOpacities(accentDark[9]).opacity40}`,
-    ],
+    shadowStrokeEntityBoxSelected: entityBoxShadows.stroke.selected,
     // :hover
-    colorBgEntityBoxSelectedHover: [accent[3], accentDark[3]],
-    shadowStrokeEntityBoxSelectedHover: [
-      `0 0 0 1px ${getOpacities(accent[9]).opacity60}, 0 0 0 3px ${getOpacities(accent[9]).opacity40}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${getOpacities(accentDark[9]).opacity40}`,
-    ],
+    colorBgEntityBoxSelectedHover: viewHighlightBg,
+    shadowStrokeEntityBoxSelectedHover: entityBoxShadows.stroke.selectedHover,
     //::drag
-    colorBgEntityBoxSelectedDrag: [accent[3], accentDark[3]],
-    shadowStrokeEntityBoxSelectedDrag: [
-      `0 0 0 1px ${getOpacities(accent[9]).opacity40}, 0 0 0 3px ${getOpacities(accent[9]).opacity40}`,
-      `0 0 0 1px ${accentDark[9]}, 0 0 0 3px ${getOpacities(accentDark[9]).opacity40}`,
-    ],
+    colorBgEntityBoxSelectedDrag: viewHighlightBg,
+    shadowStrokeEntityBoxSelectedDrag: entityBoxShadows.stroke.selected,
     // Disabled Entity Box State (done)
-    opacityEntityBoxDisabled: [`${opacity.opacity65}`, `${opacity.opacity65}`],
+    opacityEntityBoxDisabled: opacities.disabled,
     // :hover
-    opacityEntityBoxDisabledHover: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    opacityEntityBoxDisabledHover: opacities.disabledHoverOrFocus,
     // :focus
-    opacityEntityBoxDisabledFocus: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    opacityEntityBoxDisabledFocus: opacities.disabledHoverOrFocus,
     // :drag
-    opacityEntityBoxDisabledDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityEntityBoxDisabledDrag: opacities.drag,
+
     // Entity Old
-    entityCardBgColor: [white, baseDark[5]],
-    entityCardSelectedColor: [getOpacities(base[2]).opacity80, getOpacities(baseDark[6]).opacity50],
-    entityCardHoverColor: [getOpacities(base[2]).opacity80, getOpacities(baseDark[6]).opacity50],
-    entityCardDoneColor: [getOpacities(base[4]).opacity30, getOpacities(baseDark[5]).opacity30],
-    entityCardShadow: [
-      `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
-      `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
-    ],
-    entityCardShadowHover: [
-      `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
-      `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
-    ],
-    colorBgSegmentedControl: [getOpacities(base[5]).opacity80, getOpacities(baseDark[3]).opacity80],
-    colorBgMenuHeaderAvatar: [white, baseDark[2]],
-    shadowMenuHeaderAvatar: [
-      `0px 1px 4px ${getOpacities(base[11]).opacity10}, 0 0 0 0.5px ${getOpacities(base[5]).opacity50}`,
-      `0 0 0 1px ${getOpacities(baseDark[9]).opacity20}`,
-    ],
+    entityCardBgColor: raised.level3,
+    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: shadowMenuHeaderAvatar,
+
     // Main Menu Items Styles and States
     // Dragged
-    opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityMenuItemDragged: opacities.drag,
     colorBgMenuItemSelectedDragged: [accent[6], accentDark[6]],
     // Default
-    colorTextMenuItem: [getOpacities(base[12]).opacity90, getOpacities(baseDark[12]).opacity90],
-
-    colorBgMenuItem: [transparent, transparent],
+    colorTextMenuItem: [alpha(base[12], 0.9), alpha(baseDark[12], 0.9)],
+    colorBgMenuItem: transparentAlways,
     // :hover
     colorBgMenuItemHover: [base[5], baseDark[2]],
     // :focus
     colorBgMenuItemFocus: [base[6], baseDark[5]],
     // Selected
-    colorBgMenuItemSelected: [getOpacities(accent[5]).opacity80, accentDark[3]],
+    colorBgMenuItemSelected: [alpha(accent[5], 0.8), accentDark[3]],
     // :hover
-    colorBgMenuItemSelectedHover: [getOpacities(accent[6]).opacity70, accentDark[5]],
+    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: [base[2], baseDark[3]],
+    colorBgFieldEditorContainer: surface.level2_3,
     colorBgFieldEditorLinkEqualSign: [base[6], baseDark[2]],
-    allowedDropColor: [base[4], baseDark[4]],
-    relationViewBgColor: [base[2], baseDark[3]],
+    allowedDropColor: surface.level4,
+    relationViewBgColor: surface.level2_3,
 
-    mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
-    mySpaceIconBg: [getOpacities(swatches["gray-light"]).opacity20, getOpacities(swatches["gray-light"]).opacity20],
-    privateIconColor: [swatches.green, swatches.green],
-    privateIconBg: [getOpacities(swatches.green).opacity20, getOpacities(swatches.green).opacity20],
-    favoritesIconColor: [swatches.yellow, swatches.yellow],
-    favoritesIconBg: [getOpacities(swatches.yellow).opacity20, getOpacities(swatches.yellow).opacity20],
+    mySpaceIconColor: iconMySpace.fg,
+    mySpaceIconBg: iconMySpace.bg,
+    privateIconColor: iconPrivate.fg,
+    privateIconBg: iconPrivate.bg,
+    favoritesIconColor: iconFavorites.fg,
+    favoritesIconBg: iconFavorites.bg,
+    defaultCardTypeColorUppercaseHex,
 
     // Unit
-    unitBg: [base[3], baseDark[6]],
+    unitBg: surface.level3_6,
     unitBgHover: [base[4], baseDark[7]],
 
     // Badges
-    colorBgBadgeNeutral: [getOpacities(accent[5]).opacity70, getOpacities(accentDark[4]).opacity80],
-    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: [getOpacities(base[10]).opacity20, getOpacities(base[10]).opacity20],
+    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: [getOpacities(base[8]).opacity20, getOpacities(baseDark[1]).opacity60],
-    floatEditorMenuBg: [base[1], baseDark[6]],
-    floatEditorActiveColor: [accent[11], accentDark[11]],
-    commentColor: [getOpacities(yellow[6]).opacity60, getOpacities(yellowDark[9]).opacity40],
-    cellBackgroundColor: [base[2], baseDark[2]],
-    cellBackgroundHoverColor: [getOpacities(base[6]).opacity30, getOpacities(baseDark[6]).opacity30],
-    cellBorderColor: [getOpacities(base[8]).opacity50, getOpacities(baseDark[9]).opacity50],
-    cellPinnedBorderColor: [getOpacities(base[8]).opacity70, getOpacities(baseDark[9]).opacity70],
-    tableRowWarningColor: [getOpacities(yellow[6]).opacity60, getOpacities(yellowDark[9]).opacity40],
-    errorBgColor: [getOpacities(red[9]).opacity20, getOpacities(redDark[9]).opacity60],
+    viewBgOverlayColor: [alpha(base[8], 0.2), alpha(baseDark[1], 0.6)],
+    floatEditorMenuBg: surface.level1_6,
+    floatEditorActiveColor: fg.accent,
+    commentColor: warningColor,
+    cellBackgroundColor: surface.level2,
+    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: warningColor,
+    errorBgColor: [alpha(red[9], 0.2), alpha(redDark[9], 0.6)],
     errorTextColor: [red[11], red[7]],
-    errorButtonColor: [red[9], redDark[10]],
-    warningBgColor: [getOpacities(yellow[6]).opacity60, getOpacities(yellowDark[8]).opacity60],
-    warningButtonColor: [yellow[11], yellowDark[11]],
-    infoBox: [getOpacities(yellow[4]).opacity50, getOpacities(yellowDark[9]).opacity20],
-    appCardBgColor: [white, baseDark[2]],
-    appCardHoverColor: [getOpacities(base[1]).opacity95, baseDark[2]],
-    modalBg: [getOpacities(base[11]).opacity20, getOpacities(baseDark[2]).opacity50],
-    modalContentBg: [white, baseDark[3]],
+    errorButtonColor: primary.destructive,
+    warningBgColor: [alpha(yellow[6], 0.6), alpha(yellowDark[8], 0.6)],
+    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: bgActionsMenu,
     progressIconBg: [blackA[7], whiteA[7]],
     progressIconFill: [blackA[11], whiteA[11]],
-    formBg: [base[2], baseDark[2]],
-    formHeaderShadow: [
-      `${getOpacities(base[10]).opacity10} 0px 0px 6px`,
-      `${getOpacities(baseDark[1]).opacity40} 0px 0px 6px`,
-    ],
-    formEditorFieldBg: [base[3], baseDark[4]],
-    filterGroup1Bg: [base[2], baseDark[6]],
-    filterGroup2Bg: [base[3], baseDark[7]],
+    formBg: surface.level2,
+    formHeaderShadow: formHeaderShadow,
+    formEditorFieldBg: surface.level3_4,
+    filterGroup1Bg: surface.level2_6,
+    filterGroup2Bg: surface.level3_7,
     filterGroupBorder: [blackA[3], whiteA[3]],
-    colorBgNotificationHover: [base[3], baseDark[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]],
-    cardBg: [white, baseDark[6]],
+    colorBgNotificationHover: surface.level3_4,
+    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],
-    // FIXME: lack of baseDark scale usage, same values!
-    progressBg: [base[4], base[4]],
-    progressText: [base[11], base[11]],
-    progressFillBg: [base[11], base[11]],
-    progressFillText: [white, white],
-    progressBarFillNeutral: [getOpacities(base[9]).opacity20, getOpacities(baseDark[9]).opacity20],
+    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: [getOpacities(accent[9]).opacity25, getOpacities(accentDark[10]).opacity25],
-    // FIXME: lack of inverse scale usage, same values!
-    colorPickerSwatchBorder: [blackA[7], blackA[7]],
-    colorBorderRichTextMedia: [blackA[7], blackA[7]],
+    progressBarBg: [alpha(accent[9], 0.25), alpha(accentDark[10], 0.25)],
+    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: [base[1], baseDark[1]],
-    viewSecondaryBg: [base[2], baseDark[2]],
-    viewHighlightBg: [accent[3], accentDark[3]],
+    viewBg: surface.level1,
+    viewSecondaryBg: surface.level2,
+    viewHighlightBg: viewHighlightBg,
 
     // Board
-    boardBg: [base[1], baseDark[1]],
-    boardBgWithOpacity80: [getOpacities(base[1]).opacity80, getOpacities(baseDark[1]).opacity80],
-    boardAxisBgHover: [base[4], baseDark[4]],
+    boardBg: surface.level1,
+    boardBgWithOpacity80: [alpha(base[1], 0.8), alpha(baseDark[1], 0.8)],
+    boardAxisBgHover: surface.level4,
 
     // Grid
-    gridHeaderBgColor: [base[2], baseDark[3]],
-    gridHeaderHoverBgColor: [base[3], baseDark[4]],
+    gridHeaderBgColor: surface.level2_3,
+    gridHeaderHoverBgColor: surface.level3_4,
     gridHeaderTextColor: [base[10], baseDark[11]],
-    gridCellBgColor: [white, baseDark[2]],
-    gridCellBorderColor: [base[5], baseDark[6]],
-    gridDisabledCellBgColor: [base[2], baseDark[3]],
-    gridSelectedCellBgColor: [accent[3], accentDark[3]],
-    gridHighlightedCellBgColor: [accent[4], accentDark[5]],
+    gridCellBgColor: surface.level0elevated,
+    gridCellBorderColor: base5_6,
+    gridDisabledCellBgColor: surface.level2_3,
+    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]],
-    timelineCellBgColor: [base[1], baseDark[1]],
-    timelineCellWeekendBgColor: [base[2], baseDark[2]],
+    timelineEntityHandleColor: borderAccentOrMedium,
+    timelineDependencyHoverBgColor: borderAccentOrMediumAccent,
+    timelineDependencyOverlapBgColor: primary.destructive_TODO,
+    timelineDependencyOverlapHoverBgColor: fg.destructive,
+    timelineCellBgColor: surface.level1,
+    timelineCellWeekendBgColor: surface.level2,
     timelineCellTodayBgColor: [accent[4], accentDark[2]],
-    timelineCreateEntityPlaceholderBgColor: [getOpacities(base[11]).opacity20, baseDark[7]],
+    timelineCreateEntityPlaceholderBgColor: [alpha(base[11], 0.2), baseDark[7]],
 
     // #region buttons
     // solid
-    colorBgButtonSolidAccentDefault: [accent[9], accentDark[9]],
+    colorBgButtonSolidAccentDefault: primary.accent,
     colorBgButtonSolidAccentHover: [accent[11], accentDark[10]],
-    colorBgButtonSolidNeutralDefault: [base[12], baseDark[12]],
-    colorBgButtonSolidNeutralHover: [getOpacities(base[12]).opacity85, white],
-    colorBgButtonSolidDestructiveDefault: [red[9], redDark[9]],
+    colorBgButtonSolidNeutralDefault: fgMenuEtc,
+    colorBgButtonSolidNeutralHover: [alpha(base[12], 0.85), white],
+    colorBgButtonSolidDestructiveDefault: primary.destructive_TODO,
     colorBgButtonSolidDestructiveHover: [red[11], redDark[10]],
-    colorTextButtonSolidAccent: [white, white],
-    colorTextButtonSolidAccentActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
+    colorTextButtonSolidAccent: whiteColor,
+    colorTextButtonSolidAccentActive: fgSolidActiveText,
     colorTextButtonSolidNeutral: [white, baseDark[2]],
-    colorTextButtonSolidNeutralActive: [white, getOpacities(baseDark[2]).opacity80],
-    colorTextButtonSolidDestructive: [white, white],
-    colorTextButtonSolidDestructiveActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
-    colorIconButtonSolidAccent: [white, white],
+    colorTextButtonSolidNeutralActive: [white, alpha(baseDark[2], 0.8)],
+    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]],
-    colorBgButtonOutlineAccentDefault: [white, baseDark[1]],
-    colorBgButtonOutlineAccentHover: [accent[3], accentDark[3]],
-    colorBgButtonOutlineNeutralDefault: [white, baseDark[1]],
-    colorBgButtonOutlineNeutralHover: [base[4], baseDark[4]],
-    colorBgButtonOutlineDestructiveDefault: [white, baseDark[1]],
-    colorBgButtonOutlineDestructiveHover: [red[4], redDark[4]],
-    colorTextButtonOutlineAccent: [accent[11], accentDark[11]],
-    colorTextButtonOutlineAccentActive: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
-    colorTextButtonOutlineNeutral: [base[11], baseDark[11]],
-    colorTextButtonOutlineNeutralActive: [getOpacities(base[12]).opacity80, getOpacities(baseDark[12]).opacity80],
-    colorTextButtonOutlineDestructive: [red[11], redDark[11]],
-    colorTextButtonOutlineDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
-    colorIconButtonOutlineAccent: [accent[11], accentDark[11]],
-    colorIconButtonOutlineNeutral: [base[11], baseDark[11]],
-    colorIconButtonOutlineDestructive: [red[11], redDark[11]],
+    colorBorderButtonOutlineAccentDefault: borderAccentOrMediumAccent,
+    colorBorderButtonOutlineNeutralDefault: borderNeutral,
+    colorBorderButtonOutlineDestructiveDefault: borderDanger,
+    colorBgButtonOutlineAccentDefault: surface.level0,
+    colorBgButtonOutlineAccentHover: viewHighlightBg,
+    colorBgButtonOutlineNeutralDefault: surface.level0,
+    colorBgButtonOutlineNeutralHover: surface.level4,
+    colorBgButtonOutlineDestructiveDefault: surface.level0,
+    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: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
-    colorTextButtonSoftNeutral: [base[11], baseDark[11]],
-    colorTextButtonSoftNeutralActive: [getOpacities(base[11]).opacity80, getOpacities(baseDark[11]).opacity80],
-    colorTextButtonSoftDestructive: [red[11], redDark[11]],
-    colorTextButtonSoftDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
-    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: [getOpacities(accent[4]).opacity80, getOpacities(accentDark[4]).opacity80],
-    colorBgButtonGhostNeutralDefault: [transparent, transparent],
-    colorBgButtonGhostNeutralHover: [getOpacities(base[7]).opacity50, getOpacities(baseDark[6]).opacity80],
-    colorBgButtonGhostDestructiveDefault: [transparent, transparent],
-    colorBgButtonGhostDestructiveHover: [red[4], redDark[4]],
-    colorTextButtonGhostAccent: [accent[11], accentDark[11]],
-    colorTextButtonGhostAccentActive: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
-    colorTextButtonGhostNeutral: [base[11], baseDark[11]],
-    colorTextButtonGhostNeutralActive: [getOpacities(base[11]).opacity80, getOpacities(baseDark[11]).opacity80],
-    colorTextButtonGhostDestructive: [red[11], redDark[11]],
-    colorTextButtonGhostDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
-    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: [getOpacities(accent[9]).opacity30, getOpacities(accent[9]).opacity30],
-    colorBorderNeutralFocusRing: [getOpacities(base[9]).opacity30, getOpacities(base[9]).opacity30],
-    colorBorderDestructiveFocusRing: [getOpacities(red[9]).opacity30, getOpacities(red[9]).opacity30],
+    colorBorderAccentFocusRing: borderFocusRingAccent,
+    colorBorderNeutralFocusRing: borderFocusRingNeutral,
+    colorBorderDestructiveFocusRing: borderFocusRingDestructive,
 
-    colorBgReactionsDefault: [white, baseDark[2]],
-    colorBgReactionsHover: [base[3], baseDark[6]],
+    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: [base[1], baseDark[1]],
-    colorBgDbTabHover: [base[3], baseDark[4]],
-    colorBgDbTabFocus: [base[6], baseDark[6]],
-    colorBgTabHover: [getOpacities(base[11]).opacity10, getOpacities(baseDark[11]).opacity10],
+    colorBgToastDefault: surface.level1,
+    colorBgDbTabHover: surface.level3_4,
+    colorBgDbTabFocus: bgTabFocus,
+    colorBgTabHover: bgTabHover,
 
     // Chat
-    colorBgMessageContainer: [blackA[3], baseDark[6]],
-    colorBgMessageContainerHover: [base[2], baseDark[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: [base[3], baseDark[6]],
+    colorBgEditorImageZoomed: surface.level3_6,
     colorMermaidPrimaryColor: [base[2], baseDark[8]],
-    colorMermaidPrimaryBorderColor: [base[9], baseDark[9]],
+    colorMermaidPrimaryBorderColor: fg.muted,
     colorMermaidLineColor: [base[10], baseDark[9]],
 
+    // Text highlight backgrounds (shifted for warm palette)
+    highlightBgYellow: [shift("rgba(250, 240, 185, 1)"), shift("rgba(88, 72, 18, 1)")],
+    highlightBgGreen: [shift("rgba(208, 242, 187, 1)"), shift("rgba(50, 88, 51, 1)")],
+    highlightBgAquamarine: [shift("rgba(195, 247, 193, 1)"), shift("rgba(15, 75, 52, 1)")],
+    highlightBgAqua: [shift("rgba(198, 242, 235, 1)"), shift("rgba(45, 87, 83, 1)")],
+    highlightBgBlue: [shift("rgba(208, 235, 250, 1)"), shift("rgba(45, 54, 90, 1)")],
+    highlightBgPurple: [shift("rgba(242, 228, 250, 1)"), shift("rgba(82, 50, 82, 1)")],
+    highlightBgPink: [shift("rgba(250, 228, 240, 1)"), shift("rgba(108, 50, 85, 1)")],
+    highlightBgRed: [shift("rgba(250, 224, 221, 1)"), shift("rgba(95, 44, 49, 1)")],
+    highlightBgGrey: [shift("rgba(222, 227, 233, 1)"), shift("rgba(62, 63, 78, 1)")],
+
+    // Text highlight backgrounds (shifted for warm palette)
+    highlightFgYellow: [shift("rgba(195, 155, 45, 1)"), shift("rgba(200, 168, 85, 1)")],
+    highlightFgGreen: [shift("rgba(80, 165, 65, 1)"), shift("rgba(88, 172, 78, 1)")],
+    highlightFgAquamarine: [shift("rgba(40, 165, 115, 1)"), shift("rgba(52, 172, 128, 1)")],
+    highlightFgAqua: [shift("rgba(35, 155, 150, 1)"), shift("rgba(52, 168, 158, 1)")],
+    highlightFgBlue: [shift("rgba(55, 125, 205, 1)"), shift("rgba(72, 135, 200, 1)")],
+    highlightFgPurple: [shift("rgba(150, 85, 205, 1)"), shift("rgba(155, 90, 200, 1)")],
+    highlightFgPink: [shift("rgba(205, 85, 148, 1)"), shift("rgba(200, 90, 152, 1)")],
+    highlightFgRed: [shift("rgba(205, 85, 80, 1)"), shift("rgba(200, 90, 85, 1)")],
+    highlightFgGrey: [shift("rgba(115, 125, 142, 1)"), shift("rgba(135, 140, 160, 1)")],
+
+    // Color picker CSS filter (applied as CSS filter property to warm the picker UI)
+    colorPickerCssFilter: same(colorPickerCssFilter),
+
     //Whiteboard
-    colorBgWhiteboard: [white, baseDark[1]],
-    colorGridDotWhiteboard: [base[6], baseDark[6]],
-    colorSelectionWhiteboardBorderEnabled: [accent[8], accentDark[8]],
-    colorHighlightWhiteboardSelection: [accent[8], accentDark[8]],
-    colorHighlightWhiteboardSelectionLocked: [getOpacities(base[9]).opacity50, getOpacities(baseDark[9]).opacity50],
-    colorSelectionWhiteboardBorderDisabled: [getOpacities(base[9]).opacity50, getOpacities(baseDark[9]).opacity50],
-    colorPlaceholderWhiteboardDefault: [getOpacities(accent[8]).opacity20, getOpacities(accentDark[8]).opacity20],
-    colorLinkPointWhiteboardDefault: [accent[8], accentDark[8]],
+    colorBgWhiteboard: surface.level0,
+    colorGridDotWhiteboard: bgTabFocus,
+    colorSelectionWhiteboardBorderEnabled: borderAccentOrMediumAccent,
+    colorHighlightWhiteboardSelection: borderAccentOrMediumAccent,
+    colorHighlightWhiteboardSelectionLocked: textWhiteboardSelectionLockedOrDisabled,
+    colorSelectionWhiteboardBorderDisabled: textWhiteboardSelectionLockedOrDisabled,
+    colorPlaceholderWhiteboardDefault: [alpha(accent[8], 0.2), alpha(accentDark[8], 0.2)],
+    colorLinkPointWhiteboardDefault: borderAccentOrMediumAccent,
     colorLinkPointWhiteboardFillDefault: [white, blackish],
-    colorMapWhiteboardPreviewDefault: [getOpacities(accent[8]).opacity40, getOpacities(accentDark[8]).opacity40],
-    colorCardWhiteboardShadowDefault: [getOpacities(base[11]).opacity5, getOpacities(baseDark[11]).opacity5],
-    colorCardWhiteboardBgDefault: [white, baseDark[5]],
-    colorCardWhiteboardBorderDefault: [getOpacities(base[12]).opacity20, getOpacities(baseDark[12]).opacity20],
-    colorUnitHeaderWhiteboardDefault: [getOpacities(base[12]).opacity60, getOpacities(baseDark[12]).opacity60],
-    colorUnitWhiteboardBgDefault: [base[3], baseDark[6]],
-    colorUnitWhiteboardBorderDefault: [getOpacities(base[12]).opacity20, getOpacities(baseDark[12]).opacity25],
-    colorSectionWhiteboardBgInactive: [base[2], baseDark[2]],
-    colorSectionWhiteboardBorderInactive: [base[6], baseDark[6]],
-    colorEmbedWhiteboardEditBorder: [getOpacities(teal[8]).opacity90, getOpacities(tealDark[8]).opacity90],
-    colorTextWhiteboardDefault: [base[12], baseDark[12]],
-    colorTextWhiteboardDisabled: [base[9], baseDark[9]],
-    colorTextWhiteboardAccent: [getOpacities(base[12]).opacity60, getOpacities(baseDark[1]).opacity60],
-    colorTextWhiteboardInversedDefault: [white, white],
-    instrumentsMenuBg: [getOpacities(white).opacity100, getOpacities(baseDark[4]).opacity100],
-    instrumentsMenuShadow: [
-      `0px 0px 1px 0px ${getOpacities(base[11]).opacity20}, 0px 4px 6px 0px ${
-        getOpacities(base[11]).opacity5
-      }, 0px 3px 12px 0px ${getOpacities(base[11]).opacity10}`,
-      `0px 0px 1px 0px ${getOpacities(baseDark[6]).opacity100}, 0px 4px 6px 0px ${
-        getOpacities(baseDark[1]).opacity5
-      }, 0px 3px 12px 0px ${getOpacities(baseDark[1]).opacity15}`,
-    ],
-    commentBubbleBg: [white, baseDark[6]],
-    commentsPanelShadow: [
-      `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
-      `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
-    ],
-    searchFiltersBg: [base[1], baseDark[2]],
-    selectedColorBorder: [getOpacities(base[6]).opacity25, getOpacities(base[6]).opacity25],
+    colorMapWhiteboardPreviewDefault: [alpha(accent[8], 0.4), alpha(accentDark[8], 0.4)],
+    colorCardWhiteboardShadowDefault: [alpha(base[11], 0.05), alpha(baseDark[11], 0.05)],
+    colorCardWhiteboardBgDefault: raised.level3,
+    colorCardWhiteboardBorderDefault: [alpha(base[12], 0.2), alpha(baseDark[12], 0.2)],
+    colorUnitHeaderWhiteboardDefault: [alpha(base[12], 0.6), alpha(baseDark[12], 0.6)],
+    colorUnitWhiteboardBgDefault: surface.level3_6,
+    colorUnitWhiteboardBorderDefault: [alpha(base[12], 0.2), alpha(baseDark[12], 0.25)],
+    colorSectionWhiteboardBgInactive: surface.level2,
+    colorSectionWhiteboardBorderInactive: bgTabFocus,
+    colorEmbedWhiteboardEditBorder: [alpha(teal[8], 0.9), alpha(tealDark[8], 0.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: whiteColor,
+    instrumentsMenuBg: raised.level2,
+    instrumentsMenuShadow: floatingShadows.instrumentsMenu,
+    commentBubbleBg: raised.level4,
+    commentsPanelShadow: floatingShadows.instrumentsMenu,
+    searchFiltersBg: surface.level1_1,
+    selectedColorBorder: same(alpha(base[6], 0.25)),
 
     // SegmentedControl
-    colorBgSegmentedControlDefault: [base[3], baseDark[1]],
-    colorBgSegmentedControlActive: [base[1], baseDark[6]],
-    colorBgSegmentedControlHover: [base[5], baseDark[4]],
-    colorBorderSegmentedControlDefault: [base[6], baseDark[7]],
+    colorBgSegmentedControlDefault: surface.level3_1,
+    colorBgSegmentedControlActive: surface.level1_6,
+    colorBgSegmentedControlHover: surface.level5_4,
+    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: [base[3], baseDark[1]],
+    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: [base[4], baseDark[4]],
-    colorBorderLogoGridSubtle: [getOpacities(base[4]).opacity20, baseDark[4]],
-    colorBorderLogoGridMedium: [getOpacities(base[4]).opacity40, baseDark[4]],
+    colorBorderLogoGrid: surface.level4,
+    colorBorderLogoGridSubtle: [alpha(base[4], 0.2), baseDark[4]],
+    colorBorderLogoGridMedium: [alpha(base[4], 0.4), baseDark[4]],
     colorStrokeLogoDashed: [base[6], baseDark[8]],
-    colorBgLogoCardTransparent: [white, baseDark[2]],
-    colorBgLogoCardDark: [base[8], baseDark[8]],
-    colorBgLogoCardMedium: [base[4], baseDark[4]],
+    colorBgLogoCardTransparent: surface.level0elevated,
+    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: [getOpacities(base[9]).opacity50, getOpacities(baseDark[7]).opacity50],
+    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(getOpacities(color).opacity15, white, 1),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
-    },
-    getAppIconBackground: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity15, white, 1),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
-      light2: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
-    },
-    getIconColor: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity95, white, 3),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity95, blackish, 5),
-    },
+    deneutralize: {light: shift, dark: shift},
+    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)]),
@@ -703,20 +1071,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"];
 
@@ -724,36 +1082,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;
+    colors: colorsFromDefs(defs, side),
+    fns: fnsFromDefs(defs, side),
+  };
 }
-
-export function pickColors(themeDefs: ThemeDefs, mode: ThemeMode) {
-  if (mode === "dark") {
-    return pickDarkColors(themeDefs);
-  }
-  if (mode === "light2") {
-    return pickLight2Colors(themeDefs);
-  }
-  return pickLightColors(themeDefs);
-}
-
-export type Colors = ReturnType<typeof pickColors>;