@fibery/ui-kit 2.0.0 → 2.0.1

package/src/design-system/colors.ts

@@ -4,7 +4,7 @@ import mapValues from "lodash/mapValues";
 import {a11yColor} from "../a11y-color";
 import {darkenChroma, produceColor, set, setAlpha, setLuminanceChroma} from "../color-utils";
 import {ThemeMode} from "../theme-settings";
-import {getOpacities, opacity, transparent} from "./alpha";
+import {alpha, getOpacities, opacity, transparent} from "./alpha";
 
 export const cardTypeColors = [
   "#4A4A4A",
@@ -50,6 +50,8 @@ type ThemeFnsDef = Record<
   }
 >;
 
+const separator = (color: string) => `0.5px solid ${color}`;
+
 export function makeThemeDefs({
   white,
   black,
@@ -67,310 +69,348 @@ export function makeThemeDefs({
   yellowDark,
 }: 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, (shade) => `0.5px solid ${shade}`),
+    ...mapValues(shades, separator),
   } as const;
 
   const lights = getOpacities(white);
   const inversedSeparators = {
-    ...mapValues(lights, (light) => `0.5px solid ${light}`),
+    ...mapValues(lights, separator),
   } as const;
 
-  const colors = {
-    mode: ["light", "dark"],
+  // 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_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]],
+
+    level3_1: [base[3], baseDark[1]],
+    level5_4: [base[5], baseDark[4]],
+  } as const;
+
+  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]],
+  } as const;
 
+  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]}`],
 
     // 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}`,
-    ],
+    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 ${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}`,
+      `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 ${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}`,
+      `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 ${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}`,
+      `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 ${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}`,
+      `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)}`,
     ],
     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}`,
+      `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
+      )}`,
     ],
     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}`,
-    ],
-    shadowSidebar: [
-      `-3px 0px 10px 0px ${getOpacities(base[10]).opacity10}`,
-      `-3px 0px 10px 0px ${getOpacities(baseDark[1]).opacity80}`,
-    ],
+      `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
+      )}`,
+    ],
+    shadowSidebar: [`-3px 0px 10px 0px ${alpha(base[10], 0.1)}`, `-3px 0px 10px 0px ${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
+  // e.g.
+  // bgMain
+  // bgPanel
+  // bgForm
+  // bgTooltip
+  // textDefault
+  // textAccent
+  // textDisabled
+  // textInversed
+  // borderInputDisabled
+  // borderInputError
+  // borderInputErrorHover
+  // borderInputErrorFocus
+  const colors = {
+    mode: ["light", "dark"],
+    ...shadows,
 
     // 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]],
+    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)],
+    colorSubtleBgAI: [alpha(purple9, 0.05), alpha(purpleDark9, 0.1)], // FIXME why 0.1 for dark vs 0.05 for light?
+    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],
+    pageContentBg: surface.level0elevated,
+    colorBgPopup: raised.level2,
+    menuBg: surface.level3exotic,
     menuTextColor: [base[12], baseDark[12]],
     menuItemHoverColor: [base[5], baseDark[6]],
-    menuSelectedTextColor: [base[2], base[2]],
-    menuIconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
+    menuSelectedTextColor: [base[2], base[2]], // FIXME baseDark
+    menuIconColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
 
     // Text, links colors
     textColor: [base[12], baseDark[12]],
-    textSelectionColor: [getOpacities(accent[9]).opacity20, getOpacities(accentDark[9]).opacity40],
+    textSelectionColor: [alpha(accent[9], 0.2), alpha(accentDark[9], 0.4)],
     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)"`],
+    inversedTextColor: surface.level3_6,
+    colorTextSecondary: [alpha(base[12], 0.7), alpha(baseDark[12], 0.65)],
+    linkColor: [blue9, blueDark9],
+    linkBorder: [separator(alpha(blue9, 0.4)), separator(alpha(blueDark9, 0.4))],
+    linkHoverColor: [blue9, blueDark9],
+    linkBorderHover: [separator(alpha(blue9, 0.8)), separator(alpha(blueDark9, 0.7))], // FIXME why different alpha?
     codeColor: [red[9], red[8]],
-    codeBgColor: [base[3], baseDark[4]],
-    codeBlockBgColor: [base[3], baseDark[4]],
+    codeBgColor: surface.level3_4,
+    codeBlockBgColor: surface.level3_4,
     addedDiffTextColor: [teal[9], tealDark[11]],
     removedDiffTextColor: [red[11], redDark[11]],
 
     // 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: [`1px solid ${alpha(base[8], 0.5)}`, `1px solid ${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: [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)}`],
+    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]}`],
     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}`,
-    ],
+    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]],
     buttonPrimaryTextColor: [base[2], base[6]],
-    checkboxColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
+    checkboxColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
     colorBorderBlockQuote: [base[11], baseDark[11]],
 
     // 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]],
+    colorBgActionsMenu: raised.level1,
+    colorBgActionsMenuItemHover: surface.level4_5,
+    colorBgActionsMenuItemSelected: [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)],
+    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,
+    actionMenuInnerBg: raised.level2,
+    actionMenuHover: surface.level4_5,
+    actionMenuInnerHover: [base[4], alpha(baseDark[6], 0.5)],
+    actionMenuButtonColor: surface.level0elevated,
+    actionMenuButtonHoverColor: surface.level1_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}`,
+      `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)}`,
     ],
-    actionMenuSeparatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity15],
-    separatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity10],
-    separatorColorDimmed: [getOpacities(black).opacity5, getOpacities(white).opacity5],
+    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: [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]],
+    iconColor: [alpha(base[12], 0.7), alpha(baseDark[12], 0.7)],
+    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 ${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}`,
+      `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],
-    colorBgListItemGeneralHover: [base[3], baseDark[4]],
-    colorBgListItemGeneralFocus: [base[4], baseDark[6]],
+    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]],
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
-    opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityListItemGeneralDisabled: [opacity.opacity40.toString(), opacity.opacity40.toString()],
 
     // Search Items
-    colorBgSearchRowHover: [base[4], baseDark[5]],
+    colorBgSearchRowHover: surface.level4_5,
     colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
-    opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacitySearchItemDone: [opacity.opacity40.toString(), opacity.opacity40.toString()],
     // Entity Box Style And States
     // Basic Entity Box State
-    colorBgEntityBoxDefault: [white, baseDark[3]],
+    colorBgEntityBoxDefault: raised.level1,
     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}`,
-    ],
+    shadowEntityBoxDefault: [`0px 2px 4px 0px ${alpha(base[12], 0.05)}`, `0px 2px 4px 0px ${alpha(baseDark[1], 0.05)}`],
     // :hover
-    colorBgEntityBoxDefaultHover: [white, baseDark[4]],
+    colorBgEntityBoxDefaultHover: raised.level2,
     shadowEntityBoxDefaultHover: [
-      `0px 4px 8px 0px ${getOpacities(base[12]).opacity10}`,
-      `0px 4px 8px 0px ${getOpacities(baseDark[1]).opacity10}`,
+      `0px 4px 8px 0px ${alpha(base[12], 0.1)}`,
+      `0px 4px 8px 0px ${alpha(baseDark[1], 0.1)}`,
     ],
     // :focus
-    colorBgEntityBoxDefaultFocus: [white, baseDark[3]],
+    colorBgEntityBoxDefaultFocus: raised.level1,
     colorOverlayEntityBoxDefaultFocus: [accent[9], accentDark[9]],
-    shadowStrokeEntityBoxDefaultFocus: [
-      `0 0 0 2px ${getOpacities(accent[9]).opacity40}`,
-      `0 0 0 2px ${getOpacities(accentDark[9]).opacity40}`,
-    ],
+    shadowStrokeEntityBoxDefaultFocus: [`0 0 0 2px ${alpha(accent[9], 0.4)}`, `0 0 0 2px ${alpha(accentDark[9], 0.4)}`],
     // :focus:hover
-    colorBgEntityBoxDefaultFocusHover: [white, baseDark[4]],
+    colorBgEntityBoxDefaultFocusHover: raised.level2,
     colorOverlayEntityBoxDefaultFocusHover: [accent[9], accentDark[9]],
     shadowStrokeEntityBoxDefaultFocusHover: [
-      `0 0 0 2px ${getOpacities(accent[9]).opacity60}`,
-      `0 0 0 2px ${getOpacities(accentDark[9]).opacity60}`,
+      `0 0 0 2px ${alpha(accent[9], 0.6)}`,
+      `0 0 0 2px ${alpha(accentDark[9], 0.6)}`,
     ],
     //::drag
-    opacityEntityBoxDefaultDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityEntityBoxDefaultDrag: [opacity.opacity40.toString(), opacity.opacity40.toString()],
     shadowEntityBoxDefaultDrag: [
-      `0px 8px 12px 0px ${getOpacities(base[12]).opacity10}`,
-      `0px 8px 12px 0px ${getOpacities(baseDark[1]).opacity10}`,
+      `0px 8px 12px 0px ${alpha(base[12], 0.1)}`,
+      `0px 8px 12px 0px ${alpha(baseDark[1], 0.1)}`,
     ],
     // 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}`,
+      `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)}`,
     ],
     // :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}`,
+      `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)}`,
     ],
     //::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}`,
+      `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)}`,
     ],
     // Disabled Entity Box State (done)
-    opacityEntityBoxDisabled: [`${opacity.opacity65}`, `${opacity.opacity65}`],
+    opacityEntityBoxDisabled: [opacity.opacity65.toString(), opacity.opacity65.toString()],
     // :hover
-    opacityEntityBoxDisabledHover: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    opacityEntityBoxDisabledHover: [opacity.opacity75.toString(), opacity.opacity75.toString()],
     // :focus
-    opacityEntityBoxDisabledFocus: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    opacityEntityBoxDisabledFocus: [opacity.opacity75.toString(), opacity.opacity75.toString()],
     // :drag
-    opacityEntityBoxDisabledDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityEntityBoxDisabledDrag: [opacity.opacity40.toString(), opacity.opacity40.toString()],
     // 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],
+    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 ${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}`,
+      `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 ${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}`,
+      `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)}`,
     ],
-    colorBgSegmentedControl: [getOpacities(base[5]).opacity80, getOpacities(baseDark[3]).opacity80],
-    colorBgMenuHeaderAvatar: [white, baseDark[2]],
+    colorBgSegmentedControl: [alpha(base[5], 0.8), alpha(baseDark[3], 0.8)],
+    colorBgMenuHeaderAvatar: surface.level0elevated,
     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}`,
+      `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)}`,
     ],
     // Main Menu Items Styles and States
     // Dragged
-    opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    opacityMenuItemDragged: [opacity.opacity40.toString(), opacity.opacity40.toString()],
     colorBgMenuItemSelectedDragged: [accent[6], accentDark[6]],
     // Default
-    colorTextMenuItem: [getOpacities(base[12]).opacity90, getOpacities(baseDark[12]).opacity90],
+    colorTextMenuItem: [alpha(base[12], 0.9), alpha(baseDark[12], 0.9)],
 
     colorBgMenuItem: [transparent, transparent],
     // :hover
@@ -378,31 +418,31 @@ export function makeThemeDefs({
     // :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]],
     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],
+    mySpaceIconBg: [alpha(swatches["gray-light"], 0.2), alpha(swatches["gray-light"], 0.2)],
     privateIconColor: [swatches.green, swatches.green],
-    privateIconBg: [getOpacities(swatches.green).opacity20, getOpacities(swatches.green).opacity20],
+    privateIconBg: [alpha(swatches.green, 0.2), alpha(swatches.green, 0.2)],
     favoritesIconColor: [swatches.yellow, swatches.yellow],
-    favoritesIconBg: [getOpacities(swatches.yellow).opacity20, getOpacities(swatches.yellow).opacity20],
+    favoritesIconBg: [alpha(swatches.yellow, 0.2), alpha(swatches.yellow, 0.2)],
 
     // 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],
+    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]],
@@ -411,40 +451,37 @@ export function makeThemeDefs({
     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],
+    badgeBgColor: [alpha(base[10], 0.2), alpha(base[10], 0.2)],
     tooltipBgColor: [baseDark[5], baseDark[6]],
     todayMarkerColor: [red[8], redDark[6]],
-    viewBgOverlayColor: [getOpacities(base[8]).opacity20, getOpacities(baseDark[1]).opacity60],
-    floatEditorMenuBg: [base[1], baseDark[6]],
+    viewBgOverlayColor: [alpha(base[8], 0.2), alpha(baseDark[1], 0.6)],
+    floatEditorMenuBg: surface.level1_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],
+    commentColor: [alpha(yellow[6], 0.6), alpha(yellowDark[9], 0.4)],
+    cellBackgroundColor: surface.level2,
+    cellBackgroundHoverColor: [alpha(base[6], 0.3), alpha(baseDark[6], 0.3)],
+    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)],
+    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],
+    warningBgColor: [alpha(yellow[6], 0.6), alpha(yellowDark[8], 0.6)],
     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]],
+    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,
     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: [`${alpha(base[10], 0.1)} 0px 0px 6px`, `${alpha(baseDark[1], 0.4)} 0px 0px 6px`],
+    formEditorFieldBg: surface.level3_4,
+    filterGroup1Bg: surface.level2_6,
+    filterGroup2Bg: surface.level3_7,
     filterGroupBorder: [blackA[3], whiteA[3]],
-    colorBgNotificationHover: [base[3], baseDark[4]],
+    colorBgNotificationHover: surface.level3_4,
     colorBgNotificationSelected: [accent[3], accentDark[4]],
     colorBgNotificationSelectedHover: [accent[4], accentDark[6]],
     disabledInversedTextColor: [shades.opacity25, lights.opacity25],
@@ -452,20 +489,19 @@ export function makeThemeDefs({
     danger: [red[9], redDark[10]],
     active: [red[9], redDark[10]],
     warning: [yellow[9], yellowDark[8]],
-    cardBg: [white, baseDark[6]],
+    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]],
+    progressBg: [base[4], base[4]], // FIXME surface.level4?
     progressText: [base[11], base[11]],
     progressFillBg: [base[11], base[11]],
     progressFillText: [white, white],
-    progressBarFillNeutral: [getOpacities(base[9]).opacity20, getOpacities(baseDark[9]).opacity20],
+    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],
+    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]],
@@ -475,22 +511,22 @@ export function makeThemeDefs({
     colorBgDropLine: [accent[8], accentDark[8]],
 
     // Views
-    viewBg: [base[1], baseDark[1]],
-    viewSecondaryBg: [base[2], baseDark[2]],
+    viewBg: surface.level1,
+    viewSecondaryBg: surface.level2,
     viewHighlightBg: [accent[3], accentDark[3]],
 
     // 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]],
+    gridCellBgColor: surface.level0elevated,
     gridCellBorderColor: [base[5], baseDark[6]],
-    gridDisabledCellBgColor: [base[2], baseDark[3]],
+    gridDisabledCellBgColor: surface.level2_3,
     gridSelectedCellBgColor: [accent[3], accentDark[3]],
     gridHighlightedCellBgColor: [accent[4], accentDark[5]],
     gridSelectedCellBorderColor: [accent[6], accentDark[7]],
@@ -503,25 +539,25 @@ export function makeThemeDefs({
     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]],
+    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]],
     colorBgButtonSolidAccentHover: [accent[11], accentDark[10]],
     colorBgButtonSolidNeutralDefault: [base[12], baseDark[12]],
-    colorBgButtonSolidNeutralHover: [getOpacities(base[12]).opacity85, white],
+    colorBgButtonSolidNeutralHover: [alpha(base[12], 0.85), white],
     colorBgButtonSolidDestructiveDefault: [red[9], redDark[9]],
     colorBgButtonSolidDestructiveHover: [red[11], redDark[10]],
     colorTextButtonSolidAccent: [white, white],
-    colorTextButtonSolidAccentActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
+    colorTextButtonSolidAccentActive: [alpha(white, 0.8), alpha(white, 0.8)],
     colorTextButtonSolidNeutral: [white, baseDark[2]],
-    colorTextButtonSolidNeutralActive: [white, getOpacities(baseDark[2]).opacity80],
+    colorTextButtonSolidNeutralActive: [white, alpha(baseDark[2], 0.8)],
     colorTextButtonSolidDestructive: [white, white],
-    colorTextButtonSolidDestructiveActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
+    colorTextButtonSolidDestructiveActive: [alpha(white, 0.8), alpha(white, 0.8)],
     colorIconButtonSolidAccent: [white, white],
     colorIconButtonSolidNeutral: [white, baseDark[8]],
     colorIconButtonSolidDestructive: [white, white],
@@ -529,18 +565,18 @@ export function makeThemeDefs({
     colorBorderButtonOutlineAccentDefault: [accent[8], accentDark[8]],
     colorBorderButtonOutlineNeutralDefault: [base[8], baseDark[7]],
     colorBorderButtonOutlineDestructiveDefault: [red[7], redDark[7]],
-    colorBgButtonOutlineAccentDefault: [white, baseDark[1]],
+    colorBgButtonOutlineAccentDefault: surface.level0,
     colorBgButtonOutlineAccentHover: [accent[3], accentDark[3]],
-    colorBgButtonOutlineNeutralDefault: [white, baseDark[1]],
-    colorBgButtonOutlineNeutralHover: [base[4], baseDark[4]],
-    colorBgButtonOutlineDestructiveDefault: [white, baseDark[1]],
+    colorBgButtonOutlineNeutralDefault: surface.level0,
+    colorBgButtonOutlineNeutralHover: surface.level4,
+    colorBgButtonOutlineDestructiveDefault: surface.level0,
     colorBgButtonOutlineDestructiveHover: [red[4], redDark[4]],
     colorTextButtonOutlineAccent: [accent[11], accentDark[11]],
-    colorTextButtonOutlineAccentActive: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
+    colorTextButtonOutlineAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
     colorTextButtonOutlineNeutral: [base[11], baseDark[11]],
-    colorTextButtonOutlineNeutralActive: [getOpacities(base[12]).opacity80, getOpacities(baseDark[12]).opacity80],
+    colorTextButtonOutlineNeutralActive: [alpha(base[12], 0.8), alpha(baseDark[12], 0.8)],
     colorTextButtonOutlineDestructive: [red[11], redDark[11]],
-    colorTextButtonOutlineDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
+    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]],
@@ -552,38 +588,38 @@ export function makeThemeDefs({
     colorBgButtonSoftDestructiveDefault: [red[4], redDark[4]],
     colorBgButtonSoftDestructiveHover: [red[6], redDark[6]],
     colorTextButtonSoftAccent: [accent[11], accentDark[11]],
-    colorTextButtonSoftAccentActive: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
+    colorTextButtonSoftAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
     colorTextButtonSoftNeutral: [base[11], baseDark[11]],
-    colorTextButtonSoftNeutralActive: [getOpacities(base[11]).opacity80, getOpacities(baseDark[11]).opacity80],
+    colorTextButtonSoftNeutralActive: [alpha(base[11], 0.8), alpha(baseDark[11], 0.8)],
     colorTextButtonSoftDestructive: [red[11], redDark[11]],
-    colorTextButtonSoftDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
+    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]],
     // ghost
     colorBgButtonGhostAccentDefault: [transparent, transparent],
-    colorBgButtonGhostAccentHover: [getOpacities(accent[4]).opacity80, getOpacities(accentDark[4]).opacity80],
+    colorBgButtonGhostAccentHover: [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)],
     colorBgButtonGhostNeutralDefault: [transparent, transparent],
-    colorBgButtonGhostNeutralHover: [getOpacities(base[7]).opacity50, getOpacities(baseDark[6]).opacity80],
+    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: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
+    colorTextButtonGhostAccentActive: [alpha(accent[11], 0.8), alpha(accentDark[11], 0.8)],
     colorTextButtonGhostNeutral: [base[11], baseDark[11]],
-    colorTextButtonGhostNeutralActive: [getOpacities(base[11]).opacity80, getOpacities(baseDark[11]).opacity80],
+    colorTextButtonGhostNeutralActive: [alpha(base[11], 0.8), alpha(baseDark[11], 0.8)],
     colorTextButtonGhostDestructive: [red[11], redDark[11]],
-    colorTextButtonGhostDestructiveActive: [getOpacities(red[11]).opacity80, getOpacities(redDark[11]).opacity80],
+    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]],
     // #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: [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)],
 
-    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]],
@@ -591,74 +627,76 @@ export function makeThemeDefs({
     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]],
+    colorBgToastDefault: surface.level1,
+    colorBgDbTabHover: surface.level3_4,
     colorBgDbTabFocus: [base[6], baseDark[6]],
-    colorBgTabHover: [getOpacities(base[11]).opacity10, getOpacities(baseDark[11]).opacity10],
+    colorBgTabHover: [alpha(base[11], 0.1), alpha(baseDark[11], 0.1)],
 
     // Chat
     colorBgMessageContainer: [blackA[3], baseDark[6]],
-    colorBgMessageContainerHover: [base[2], baseDark[3]],
+    colorBgMessageContainerHover: surface.level2_3,
     colorBgEntityAvatarDefault: [accent[1], accentDark[1]],
     colorBgEntityAvatarHover: [accent[3], accentDark[3]],
     colorTextEntityAvatarDefault: [accent[8], accentDark[8]],
     colorTextEntityAvatarHover: [accent[9], accentDark[9]],
 
     // Text editor
-    colorBgEditorImageZoomed: [base[3], baseDark[6]],
+    colorBgEditorImageZoomed: surface.level3_6,
     colorMermaidPrimaryColor: [base[2], baseDark[8]],
     colorMermaidPrimaryBorderColor: [base[9], baseDark[9]],
     colorMermaidLineColor: [base[10], baseDark[9]],
 
     //Whiteboard
-    colorBgWhiteboard: [white, baseDark[1]],
+    colorBgWhiteboard: surface.level0,
     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],
+    colorHighlightWhiteboardSelectionLocked: [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)],
+    colorSelectionWhiteboardBorderDisabled: [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)],
+    colorPlaceholderWhiteboardDefault: [alpha(accent[8], 0.2), alpha(accentDark[8], 0.2)],
     colorLinkPointWhiteboardDefault: [accent[8], accentDark[8]],
     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]],
+    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: [base[6], baseDark[6]],
-    colorEmbedWhiteboardEditBorder: [getOpacities(teal[8]).opacity90, getOpacities(tealDark[8]).opacity90],
+    colorEmbedWhiteboardEditBorder: [alpha(teal[8], 0.9), alpha(tealDark[8], 0.9)],
     colorTextWhiteboardDefault: [base[12], baseDark[12]],
     colorTextWhiteboardDisabled: [base[9], baseDark[9]],
-    colorTextWhiteboardAccent: [getOpacities(base[12]).opacity60, getOpacities(baseDark[1]).opacity60],
+    colorTextWhiteboardAccent: [alpha(base[12], 0.6), alpha(baseDark[1], 0.6)],
     colorTextWhiteboardInversedDefault: [white, white],
-    instrumentsMenuBg: [getOpacities(white).opacity100, getOpacities(baseDark[4]).opacity100],
+    instrumentsMenuBg: raised.level2,
     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]],
+      `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
+      )}`,
+    ],
+    commentBubbleBg: raised.level4,
     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}`,
+      `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)}`,
     ],
-    searchFiltersBg: [base[1], baseDark[2]],
-    selectedColorBorder: [getOpacities(base[6]).opacity25, getOpacities(base[6]).opacity25],
+    searchFiltersBg: surface.level1_1,
+    selectedColorBorder: [alpha(base[6], 0.25), alpha(base[6], 0.25)],
 
     // SegmentedControl
-    colorBgSegmentedControlDefault: [base[3], baseDark[1]],
-    colorBgSegmentedControlActive: [base[1], baseDark[6]],
-    colorBgSegmentedControlHover: [base[5], baseDark[4]],
+    colorBgSegmentedControlDefault: surface.level3_1,
+    colorBgSegmentedControlActive: surface.level1_6,
+    colorBgSegmentedControlHover: surface.level5_4,
     colorBorderSegmentedControlDefault: [base[6], baseDark[7]],
 
     // Chargebee info
-    colorBgChargebeeInfoBox: [base[3], baseDark[1]],
+    colorBgChargebeeInfoBox: surface.level3_1,
 
     // Various found direct palette references
     // FIXME: lack of redDark scale usage, same values!
@@ -666,31 +704,31 @@ export function makeThemeDefs({
     colorBgErrorMessage: [red[8], red[8]],
 
     // 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]],
+    colorBgLogoCardTransparent: surface.level0elevated,
     colorBgLogoCardDark: [base[8], baseDark[8]],
-    colorBgLogoCardMedium: [base[4], baseDark[4]],
+    colorBgLogoCardMedium: surface.level4,
 
     // 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 fns = {
     getEnumBackground: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity15, white, 1),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
+      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(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),
+      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(getOpacities(color).opacity95, white, 3),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity95, blackish, 5),
+      light: (color: string) => a11yColor(alpha(color, 0.95), white, 3),
+      dark: (color: string) => a11yColor(alpha(color, 0.95), blackish, 5),
     },
     getLinkedHighlightBackground: {
       light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.3), (c) => setLuminanceChroma(c, 0.6)]),