@fibery/ui-kit 1.40.3 → 1.40.4

package/src/design-system.colors.ts

@@ -0,0 +1,760 @@
+/* eslint-disable max-lines */
+import {ThemePalette} from "./palette-generator";
+import _ from "lodash";
+import {a11yColor} from "./a11y-color";
+import {darkenChroma, produceColor, setAlpha, setLuminanceChroma} from "./color-utils";
+import {ThemeMode} from "./theme-settings";
+
+const transparent = "rgba(255, 255, 255, 0)";
+
+export const brandColors = {
+  red: "#FF5400",
+  green: "#08BD9F",
+  blue: "#4978D4",
+} as const;
+
+export const cardTypeColors = [
+  "#4A4A4A",
+  "#6A849B",
+  "#99A2AB",
+  "#D40915",
+  "#E72065",
+  "#9C2BAF",
+  "#673DB6",
+  "#3E53B4",
+  "#2978FB",
+  "#199EE3",
+  "#1FBED3",
+  "#159789",
+  "#4FAF54",
+  "#8EC351",
+  "#FBA32F",
+  "#FC551F",
+  "#B04E31",
+] as const;
+
+const swatches = {
+  "gray-light": cardTypeColors[1],
+  yellow: cardTypeColors[14],
+  green: "#69AC5E",
+};
+
+export const opacity = {
+  opacity100: 1,
+  opacity95: 0.95,
+  opacity90: 0.9,
+  opacity85: 0.85,
+  opacity80: 0.8,
+  opacity75: 0.75,
+  opacity70: 0.7,
+  opacity65: 0.65,
+  opacity60: 0.6,
+  opacity55: 0.55,
+  opacity50: 0.5,
+  opacity45: 0.45,
+  opacity40: 0.4,
+  opacity35: 0.35,
+  opacity30: 0.3,
+  opacity25: 0.25,
+  opacity20: 0.2,
+  opacity15: 0.15,
+  opacity10: 0.1,
+  opacity5: 0.05,
+  opacity0: 0,
+} as const;
+
+export const getOpacities = _.memoize((color: string) =>
+  _.mapValues(opacity, (opacityValue) => {
+    if (color === transparent) {
+      return transparent;
+    }
+    return produceColor(color, (c) => setAlpha(c, opacityValue));
+  })
+);
+
+type ThemeColorsDef = Record<
+  string,
+  | readonly [lightColor: string, darkColor: string]
+  | readonly [Record<string, string>, Record<string, string>]
+  | readonly ["light", "dark"]
+>;
+
+type ThemeFnsDef = Record<
+  string,
+  {
+    light: (color: string) => string;
+    dark: (color: string) => string;
+    // light2 is "dark menu on light rest".
+    // defaults to 'light'
+    light2?: (color: string) => string;
+  }
+>;
+
+export function makeThemeDefs({
+  white,
+  black,
+  base,
+  baseDark,
+  accent,
+  accentDark,
+  red,
+  redDark,
+  teal,
+  tealDark,
+  yellow,
+  yellowDark,
+}: ThemePalette) {
+  const shades = getOpacities(black[0]);
+  const separators = {
+    ..._.mapValues(shades, (shade) => `0.5px solid ${shade}`),
+  } as const;
+
+  const lights = getOpacities(white[0]);
+  const inversedSeparators = {
+    ..._.mapValues(lights, (light) => `0.5px solid ${light}`),
+  } as const;
+
+  const colors = {
+    mode: ["light", "dark"],
+    brandColors: [brandColors, brandColors],
+    colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
+    colorBgAI: ["hsla(271, 57%, 61%, 0.09)", "hsla(272, 43%, 50%, 0.2)"],
+    colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
+
+    // Elevations
+    surfaceElevationS: [`0 2px 4px 0 ${black[3]}`, `0 2px 4px 0 ${white[3]}`],
+    surfaceElevationM: [`0 4px 8px 0 ${black[5]}`, `0 4px 8px 0 ${white[5]}`],
+    surfaceElevationL: [`0 8px 12px 0 ${black[5]}`, `0 8px 12px 0 ${white[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}`,
+    ],
+    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}`,
+    ],
+    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}`,
+    ],
+
+    // Rubbish dump
+    primaryBlue: [accent[9], accentDark[9]],
+    whiteColor: [white[0], white[0]],
+    blackColor: [black[0], black[0]],
+    mainBg: [base[3], baseDark[0]],
+    panelBg: [white[0], baseDark[1]],
+    panelContentBg: [base[2], baseDark[1]],
+    colorBgRelationContainer: [base[2], baseDark[1]],
+    colorBgAISidebarContent: [base[1], baseDark[1]],
+    pageContentBg: [white[0], baseDark[2]],
+    colorBgPopup: [white[0], baseDark[4]],
+    menuBg: [base[3], baseDark[0]],
+    menuTextColor: [baseDark[5], base[8]],
+    menuItemHoverColor: [base[5], baseDark[6]],
+    menuSelectedTextColor: [base[2], base[2]],
+    menuIconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
+
+    // Text, links colors
+    textColor: [baseDark[5], base[6]],
+    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: [accentDark[10], accentDark[10]],
+    linkBorder: [
+      `0.5px solid ${getOpacities(accentDark[10]).opacity40}`,
+      `0.5px solid ${getOpacities(accentDark[11]).opacity40}`,
+    ],
+    linkHoverColor: [accent[10], accentDark[11]],
+    linkBorderHover: [
+      `0.5px solid ${getOpacities(accent[10]).opacity80}`,
+      `0.5px solid ${getOpacities(accentDark[10]).opacity70}`,
+    ],
+    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]],
+
+    // Entity
+    entityNodeColor: [baseDark[3], base[8]],
+    entityNodeBorder: [
+      `0.5px solid ${getOpacities(baseDark[3]).opacity30}`,
+      `0.5px solid ${getOpacities(base[8]).opacity40}`,
+    ],
+    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]],
+    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],
+
+    // Input
+    inputBgColor: [white[0], 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}`,
+    ],
+    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]],
+    buttonPrimaryTextColor: [base[2], base[6]],
+    checkboxColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
+    colorBorderBlockQuote: [base[11], baseDark[11]],
+
+    // Actions menu
+    colorBgActionsMenu: [white[0], baseDark[3]],
+    colorBgActionsMenuItemHover: [getOpacities(base[11]).opacity10, getOpacities(baseDark[11]).opacity10],
+    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[0], baseDark[3]],
+    actionMenuInnerBg: [white[0], baseDark[4]],
+    actionMenuHover: [base[4], baseDark[5]],
+    actionMenuInnerHover: [base[4], getOpacities(baseDark[6]).opacity50],
+    actionMenuButtonColor: [white[0], 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}`,
+    ],
+    actionMenuSeparatorColor: [getOpacities(black[0]).opacity10, getOpacities(white[0]).opacity15],
+    separatorColor: [getOpacities(black[0]).opacity10, getOpacities(white[0]).opacity10],
+    separatorColorDimmed: [getOpacities(black[0]).opacity5, getOpacities(white[0]).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}`,
+    ],
+    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]],
+    colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
+    opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+
+    // Search Items
+    colorBgSearchRowHover: [base[4], baseDark[5]],
+    colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
+    opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    // Entity Box Style And States
+    // Basic Entity Box State
+    colorBgEntityBoxDefault: [white[0], 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}`,
+    ],
+    // :hover
+    colorBgEntityBoxDefaultHover: [white[0], baseDark[4]],
+    shadowEntityBoxDefaultHover: [
+      `0px 4px 8px 0px ${getOpacities(base[12]).opacity10}`,
+      `0px 4px 8px 0px ${getOpacities(baseDark[1]).opacity10}`,
+    ],
+    // :focus
+    colorBgEntityBoxDefaultFocus: [white[0], baseDark[3]],
+    colorOverlayEntityBoxDefaultFocus: [accent[9], accentDark[9]],
+    shadowStrokeEntityBoxDefaultFocus: [
+      `0 0 0 2px ${getOpacities(accent[9]).opacity40}`,
+      `0 0 0 2px ${getOpacities(accentDark[9]).opacity40}`,
+    ],
+    // :focus:hover
+    colorBgEntityBoxDefaultFocusHover: [white[0], baseDark[4]],
+    colorOverlayEntityBoxDefaultFocusHover: [accent[9], accentDark[9]],
+    shadowStrokeEntityBoxDefaultFocusHover: [
+      `0 0 0 2px ${getOpacities(accent[9]).opacity60}`,
+      `0 0 0 2px ${getOpacities(accentDark[9]).opacity60}`,
+    ],
+    //::drag
+    opacityEntityBoxDefaultDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    shadowEntityBoxDefaultDrag: [
+      `0px 8px 12px 0px ${getOpacities(base[12]).opacity10}`,
+      `0px 8px 12px 0px ${getOpacities(baseDark[1]).opacity10}`,
+    ],
+    // 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}`,
+    ],
+    // :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}`,
+    ],
+    //::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}`,
+    ],
+    // Disabled Entity Box State (done)
+    opacityEntityBoxDisabled: [`${opacity.opacity65}`, `${opacity.opacity65}`],
+    // :hover
+    opacityEntityBoxDisabledHover: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    // :focus
+    opacityEntityBoxDisabledFocus: [`${opacity.opacity75}`, `${opacity.opacity75}`],
+    // :drag
+    opacityEntityBoxDisabledDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    // Entity Old
+    entityCardBgColor: [white[0], 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[0], 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}`,
+    ],
+    // Main Menu Items Styles and States
+    // Dragged
+    opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+    colorBgMenuItemSelectedDragged: [accent[6], accentDark[6]],
+    // Default
+    colorTextMenuItem: [baseDark[5], getOpacities(baseDark[12]).opacity90],
+    colorBgMenuItem: [transparent, transparent],
+    // :hover
+    colorBgMenuItemHover: [base[5], baseDark[2]],
+    // :focus
+    colorBgMenuItemFocus: [base[6], baseDark[5]],
+    // Selected
+    colorBgMenuItemSelected: [getOpacities(accent[5]).opacity80, accentDark[3]],
+    // :hover
+    colorBgMenuItemSelectedHover: [getOpacities(accent[6]).opacity70, 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]],
+    colorBgFieldEditorLinkEqualSign: [base[6], baseDark[2]],
+    allowedDropColor: [base[4], baseDark[4]],
+    relationViewBgColor: [base[2], baseDark[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],
+
+    // Unit
+    unitBg: [base[3], baseDark[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],
+    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],
+    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[0], baseDark[2]],
+    appCardHoverColor: [getOpacities(base[1]).opacity95, baseDark[2]],
+    modalBg: [getOpacities(base[11]).opacity20, getOpacities(baseDark[2]).opacity50],
+    modalContentBg: [white[0], baseDark[3]],
+    progressIconBg: [black[7], white[7]],
+    progressIconFill: [black[11], white[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]],
+    filterGroupBorder: [black[3], white[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[0], baseDark[6]],
+    selectedImageBorder: [black[8], white[11]],
+    transparent: [transparent, transparent],
+    shades: [lights, shades],
+    lights: [shades, lights],
+    separators: [separators, inversedSeparators],
+    inversedSeparators: [inversedSeparators, separators],
+    // 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[0], white[0]],
+    progressBarFillNeutral: [getOpacities(base[9]).opacity20, getOpacities(baseDark[9]).opacity20],
+    progressBarFill: [accent[9], accentDark[10]],
+    progressBarBg: [getOpacities(accent[9]).opacity25, getOpacities(accentDark[10]).opacity25],
+    // FIXME: lack of inverse scale usage, same values!
+    colorPickerSwatchBorder: [black[7], black[7]],
+    colorBorderRichTextMedia: [black[7], black[7]],
+    richTextTableBorder: [black[5], white[7]],
+
+    // Drag and drop
+    colorBgDropLine: [accent[8], accentDark[8]],
+
+    // Views
+    viewBg: [base[1], baseDark[1]],
+    viewSecondaryBg: [base[2], baseDark[2]],
+    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]],
+
+    // Grid
+    gridHeaderBgColor: [base[2], baseDark[3]],
+    gridHeaderHoverBgColor: [base[3], baseDark[4]],
+    gridHeaderTextColor: [base[10], baseDark[11]],
+    gridCellBgColor: [white[0], baseDark[2]],
+    gridCellBorderColor: [base[5], baseDark[6]],
+    gridDisabledCellBgColor: [base[2], baseDark[3]],
+    gridSelectedCellBgColor: [accent[3], accentDark[3]],
+    gridHighlightedCellBgColor: [accent[4], accentDark[5]],
+    gridSelectedCellBorderColor: [accent[6], accentDark[7]],
+    gridSelectedPinnedCellBorderColor: [accent[7], accentDark[7]],
+    gridDisabledSelectedCellBgColor: [accent[4], accentDark[5]],
+    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]],
+    timelineCellTodayBgColor: [accent[4], accentDark[2]],
+    timelineCreateEntityPlaceholderBgColor: [getOpacities(base[11]).opacity20, 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[0]],
+    colorBgButtonSolidDestructiveDefault: [red[9], redDark[9]],
+    colorBgButtonSolidDestructiveHover: [red[11], redDark[10]],
+    colorTextButtonSolidAccent: [white[0], white[0]],
+    colorTextButtonSolidAccentActive: [getOpacities(white[0]).opacity80, getOpacities(white[0]).opacity80],
+    colorTextButtonSolidNeutral: [white[0], baseDark[2]],
+    colorTextButtonSolidNeutralActive: [white[0], getOpacities(baseDark[2]).opacity80],
+    colorTextButtonSolidDestructive: [white[0], white[0]],
+    colorTextButtonSolidDestructiveActive: [getOpacities(white[0]).opacity80, getOpacities(white[0]).opacity80],
+    colorIconButtonSolidAccent: [white[0], white[0]],
+    colorIconButtonSolidNeutral: [white[0], baseDark[8]],
+    colorIconButtonSolidDestructive: [white[0], white[0]],
+    // outline
+    colorBorderButtonOutlineAccentDefault: [accent[8], accentDark[8]],
+    colorBorderButtonOutlineNeutralDefault: [base[8], baseDark[7]],
+    colorBorderButtonOutlineDestructiveDefault: [red[7], redDark[7]],
+    colorBgButtonOutlineAccentDefault: [white[0], baseDark[1]],
+    colorBgButtonOutlineAccentHover: [accent[3], accentDark[3]],
+    colorBgButtonOutlineNeutralDefault: [white[0], baseDark[1]],
+    colorBgButtonOutlineNeutralHover: [base[4], baseDark[4]],
+    colorBgButtonOutlineDestructiveDefault: [white[0], 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]],
+    // 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]],
+    // 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]],
+    // #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],
+
+    colorBgReactionsDefault: [white[0], baseDark[2]],
+    colorBgReactionsHover: [base[3], baseDark[6]],
+    colorBorderReactionsHover: [base[8], baseDark[9]],
+    colorBgReactionsSelectedDefault: [accent[3], accentDark[8]],
+    colorBorderReactionsSelectedDefault: [accent[8], accentDark[8]],
+    // 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],
+
+    // Chat
+    colorBgMessageContainer: [black[3], baseDark[6]],
+    colorBgMessageContainerHover: [base[2], baseDark[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]],
+    colorMermaidPrimaryColor: [base[2], baseDark[8]],
+    colorMermaidPrimaryBorderColor: [base[9], baseDark[9]],
+    colorMermaidLineColor: [base[10], baseDark[9]],
+
+    //Whiteboard
+    instrumentsMenuBg: [getOpacities(white[0]).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[0], 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],
+
+    // SegmentedControl
+    colorBgSegmentedControlDefault: [base[3], baseDark[1]],
+    colorBgSegmentedControlActive: [base[1], baseDark[6]],
+    colorBgSegmentedControlHover: [base[5], baseDark[4]],
+    colorBorderSegmentedControlDefault: [base[6], baseDark[7]],
+
+    // Chargebee info
+    colorBgChargebeeInfoBox: [base[3], baseDark[1]],
+
+    // Various found direct palette references
+    // FIXME: lack of redDark scale usage, same values!
+    newCommentHorizontalRulerColor: [red[8], red[8]],
+    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]],
+    colorStrokeLogoDashed: [base[6], baseDark[6]],
+    colorBgLogoCardTransparent: [white[0], baseDark[2]],
+    colorBgLogoCardDark: [base[8], baseDark[8]],
+    colorBgLogoCardMedium: [base[4], baseDark[4]],
+  } as const satisfies ThemeColorsDef;
+
+  const fns = {
+    getEnumBackground: {
+      light: (color: string) => a11yColor(getOpacities(color).opacity15, white[0], 1),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
+    },
+    getAppIconBackground: {
+      light: (color: string) => a11yColor(getOpacities(color).opacity15, white[0], 1),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
+      light2: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
+    },
+    getIconColor: {
+      light: (color: string) => a11yColor(getOpacities(color).opacity95, white[0], 3),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity95, baseDark[0], 5),
+    },
+    getLinkedHighlightBackground: {
+      light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.3), (c) => setLuminanceChroma(c, 0.6)]),
+      dark: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.4), (c) => setLuminanceChroma(c, 0.5)]),
+    },
+    getLinkedHighlightDecorationBackground: {
+      light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.9), (c) => setLuminanceChroma(c, 0.5)]),
+      dark: (color: string) =>
+        produceColor(color, [(c) => setAlpha(c, 0.9), (c) => setLuminanceChroma(c, 0.5), (c) => darkenChroma(c, 0.2)]),
+    },
+  } as const satisfies ThemeFnsDef;
+
+  return {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;
+}
+
+type ThemeDefsColors = ThemeDefs["colors"];
+
+type GetThemeColors<idx extends number> = {
+  [k in keyof ThemeDefsColors]: ThemeDefsColors[k][idx];
+};
+
+function pickColorsByIndex<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>;
+}
+
+export function pickLightColors(themeDefs: ThemeDefs) {
+  return pickColorsByIndex(themeDefs.colors, 0);
+}
+
+export function pickDarkColors(themeDefs: ThemeDefs) {
+  return pickColorsByIndex(themeDefs.colors, 1);
+}
+
+export function pickLight2Colors(themeDefs: ThemeDefs) {
+  return {
+    ...pickLightColors(themeDefs),
+    mode: "light2",
+  } as const;
+}