@fibery/ui-kit 1.40.3 → 1.41.0

package/src/design-system.ts

@@ -1,1339 +1,25 @@
-/* eslint-disable max-lines */
-import chroma from "chroma-js";
-import ColorHash from "color-hash";
-import _ from "lodash";
-import {a11yColor} from "./a11y-color";
-import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
-import {
-  blackA,
-  blue,
-  blueDark,
-  indigo,
-  indigoDark,
-  red,
-  redDark,
-  slate,
-  slateDark,
-  teal,
-  tealDark,
-  whiteA,
-  yellow,
-  yellowDark,
-} from "./palette";
-import {ThemeMode} from "./theme-settings";
-
-export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
-
-export const fontWeight = {
-  light: 310, // 300 basic, 310 experiment with a variable Inter
-  regular: 410, // 400 basic, 410 experiment with a variable Inter
-  mediumLight: 450,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-} as const;
-
-// 300 basic, 310 experiment with a variable Inter
-export const fontSize = {
-  xxl: 30,
-  xl: 24,
-  lg: 18,
-  md: 16,
-  sm: 15,
-  xs: 14,
-  xxs: 13,
-  xxxs: 12,
-  tiny: 11,
-  mini: 10,
-  micro: 9,
-  nano: 8,
-} as const;
-
-const transparent = "rgba(255, 255, 255, 0)";
-
-export const minPanelWidth = 490;
-
-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 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",
-};
-
-// switch to chroma.valid once we start using 2.0.1
-const makeChromaColor = (color: string) => {
-  try {
-    return chroma(color);
-  } catch (e) {
-    return chroma(brandColors.blue);
-  }
-};
-
-export const getOpacities = _.memoize((color: string) =>
-  _.mapValues(opacity, (opacity) => {
-    if (color === transparent) {
-      return transparent;
-    }
-    return makeChromaColor(color).alpha(opacity).css();
-  })
-);
-
-const shades = getOpacities("#000000");
-const lights = getOpacities("#FFFFFF");
-
-export const separators = {
-  ..._.mapValues(shades, (shade) => `0.5px solid ${shade}`),
-} as const;
-
-export const inversedSeparators = {
-  ..._.mapValues(lights, (light) => `0.5px solid ${light}`),
-} as const;
-
-export const fontFamily =
-  '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
-
-const stateColors = {
-  success: "rgba(8, 189, 159, 1)",
-  error: "rgba(234, 105, 63, 1)",
-  progress: "rgba(74, 126, 244, 1)",
-  canceled: "rgba(233, 163, 76, 1)",
-  unknown: "rgba(147, 157, 168, 1)",
-};
-
-const brandColors = {
-  red: "#FF5400",
-  green: "#08BD9F",
-  blue: "#4978D4",
-} as const;
-
-export const getDarkenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).darken(0.5).desaturate(0.8).css();
-});
-
-export const themeColors = {
-  mode: ["light", "dark"],
-  brandColors: [brandColors, brandColors],
-  stateColors: [stateColors, stateColors],
-  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 ${blackA.blackA3}`, `0 2px 4px 0 ${whiteA.whiteA3}`],
-  surfaceElevationM: [`0 4px 8px 0 ${blackA.blackA5}`, `0 4px 8px 0 ${whiteA.whiteA5}`],
-  surfaceElevationL: [`0 8px 12px 0 ${blackA.blackA5}`, `0 8px 12px 0 ${whiteA.whiteA5}`],
-
-  // Shadows and effects / Elevation
-  shadow50: [
-    `0px 0px 0px 1px ${getOpacities(slate.slate12).opacity5}`,
-    `0px 0px 0px 1px ${getOpacities(slateDark.slate12).opacity10}`,
-  ],
-  shadow100: [
-    `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}`,
-    `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity10}`,
-  ],
-  shadow200: [
-    `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity5}`,
-    `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity10}`,
-  ],
-  shadow300: [
-    `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-    `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-  ],
-  shadow400: [
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-  ],
-  shadow500: [
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
-      getOpacities(slate.slate12).opacity15
-    }`,
-  ],
-  shadow600: [
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
-      getOpacities(slate.slate12).opacity20
-    }`,
-    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
-      getOpacities(slate.slate12).opacity20
-    }`,
-  ],
-  actionMenuShadow: [
-    `0px 0px 2px 0px ${getOpacities(slate.slate11).opacity30}, 0px 4px 6px 0px ${
-      getOpacities(slate.slate11).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slate.slate11).opacity15}`,
-    `0px 0px 0px 1px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
-      getOpacities(slateDark.slate1).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slateDark.slate1).opacity15}`,
-  ],
-  shadowPopup: [
-    `0px 0px 2px 0px ${getOpacities(slate.slate11).opacity30}, 0px 4px 6px 0px ${
-      getOpacities(slate.slate11).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slate.slate11).opacity15}`,
-    `0px 0px 0px 1px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
-      getOpacities(slateDark.slate1).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slateDark.slate1).opacity15}`,
-  ],
-  shadowSidebar: [
-    `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
-    `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
-  ],
-  effectBgActionsMenu: [
-    `blur(12px) saturate(190%) contrast(50%) brightness(130%)`,
-    `blur(12px) saturate(180%) contrast(60%) brightness(70%)`,
-  ],
-  effectBgPopup: [
-    `blur(24px) saturate(190%) contrast(50%) brightness(130%)`,
-    `blur(24px) saturate(180%) contrast(60%) brightness(70%)`,
-  ],
-
-  // Rubbish dump
-  primaryBlue: [indigo.indigo9, indigoDark.indigo9],
-  whiteColor: [whiteA.whiteA0, whiteA.whiteA0],
-  blackColor: [blackA.blackA0, blackA.blackA0],
-  mainBg: [slate.slate3, slateDark.slateBase],
-  panelBg: [whiteA.whiteA0, slateDark.slate1],
-  panelContentBg: [slate.slate2, slateDark.slate1],
-  panelContentBgOpacity80: [getOpacities(slate.slate2).opacity80, getOpacities(slateDark.slate1).opacity80],
-  colorBgRelationContainer: [slate.slate2, slateDark.slate1],
-  colorBgAISidebarContent: [slate.slate1, slateDark.slate1],
-  pageBg: [whiteA.whiteA0, slateDark.slate1],
-  pageContentBg: [whiteA.whiteA0, slateDark.slate2],
-  colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
-  colorBgSidebar: [whiteA.whiteA0, slateDark.slate3],
-  menuBg: [slate.slate3, slateDark.slateBase],
-  menuTextColor: [slateDark.slate5, slate.slate8],
-  menuItemHoverColor: [slate.slate5, slateDark.slate6],
-  menuSelectedTextColor: [slate.slate2, slate.slate2],
-  menuFooterColor: [getOpacities(whiteA.whiteA0).opacity20, getOpacities(slateDark.slate3).opacity40],
-  menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
-  menuIconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
-  menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
-
-  // Text, links colors
-  textColor: [slateDark.slate5, slate.slate6],
-  textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
-  accentTextColor: [slate.slate10, slateDark.slate10],
-  disabledTextColor: [slate.slate9, slateDark.slate9],
-  inversedTextColor: [slate.slate3, slateDark.slate6],
-  colorTextSecondary: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity65],
-  linkColor: [indigoDark.indigo10, indigoDark.indigo10],
-  linkBorder: [
-    `0.5px solid ${getOpacities(indigoDark.indigo10).opacity40}`,
-    `0.5px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
-  ],
-  linkHoverColor: [indigo.indigo10, indigoDark.indigo11],
-  linkBorderHover: [
-    `0.5px solid ${getOpacities(indigo.indigo10).opacity80}`,
-    `0.5px solid ${getOpacities(indigoDark.indigo10).opacity70}`,
-  ],
-  codeColor: [red.red9, red.red8],
-  codeBgColor: [slate.slate3, slateDark.slate4],
-  codeBlockBgColor: [slate.slate3, slateDark.slate4],
-  addedDiffTextColor: [teal.teal9, tealDark.teal11],
-  removedDiffTextColor: [red.red11, redDark.red11],
-
-  // Entity
-  entityNodeColor: [slateDark.slate3, slate.slate8],
-  entityNodeBorder: [
-    `0.5px solid ${getOpacities(slateDark.slate3).opacity30}`,
-    `0.5px solid ${getOpacities(slate.slate8).opacity40}`,
-  ],
-  entityNodeHoverColor: [slateDark.slate7, slate.slate7],
-  entityNodeBorderHover: [
-    `0.5px solid ${getOpacities(slate.slate11).opacity80}`,
-    `0.5px solid ${getOpacities(slate.slate7).opacity80}`,
-  ],
-  entityNodeBgColor: [slate.slate2, slateDark.slate3],
-  shortcutTextColor: [slate.slate9, slateDark.slate11],
-  shortcutBorder: [
-    `1px solid ${getOpacities(slate.slate8).opacity50}`,
-    `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
-  ],
-  shortcutBorderColor: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
-
-  // Input
-  inputBgColor: [whiteA.whiteA0, slateDark.slate2],
-  inputDisabledBgColor: [getOpacities(slate.slate6).opacity30, getOpacities(slateDark.slate6).opacity30],
-  inputDisabledBorderColor: [
-    `0 0 0 1px ${getOpacities(slate.slate6).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity20}`,
-  ],
-  inputCopyBgColor: [slate.slate3, slateDark.slate4],
-  inputBorderColor: [
-    `0 0 0 1px ${getOpacities(slate.slate6).opacity70}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
-  ],
-  inputBorderHoverColor: [
-    `0 0 0 1px ${getOpacities(slate.slate7).opacity100}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity100}`,
-  ],
-  inputBorderFocusColor: [
-    `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
-  ],
-  inputBorderBlendMode: ["multiply", "lighten"],
-  inputPlaceholderTextColor: [slate.slate9, slateDark.slate9],
-  inputErrorBorderColor: [`0 0 0 1px ${red.red11}`, `0 0 0 1px ${red.red7}`],
-  inputErrorBorderHoverColor: [
-    `0 0 0 1px ${getOpacities(red.red11).opacity40}`,
-    `0 0 0 1px ${getOpacities(red.red7).opacity40}`,
-  ],
-  inputErrorBorderFocusColor: [
-    `0 0 0 1px ${getOpacities(red.red11).opacity25}`,
-    `0 0 0 1px ${getOpacities(red.red7).opacity25}`,
-  ],
-  inputErrorBorderFocusShadow: [
-    `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
-    `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
-  ],
-  buttonPrimaryColor: [indigo.indigo9, indigoDark.indigo9],
-  buttonColor: [slate.slate10, slateDark.slate10],
-  buttonPrimaryTextColor: [slate.slate2, slate.slate6],
-  checkboxColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
-  colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
-
-  // Actions menu
-  colorBgActionsMenu: [whiteA.whiteA0, slateDark.slate3],
-  colorBgActionsMenuItemHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
-  colorBgActionsMenuItemSelected: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
-  colorBgActionsMenuItemSelectedHover: [
-    getOpacities(indigo.indigo5).opacity80,
-    getOpacities(indigoDark.indigo6).opacity80,
-  ],
-  colorBgActionsMenuItemDangerHover: [getOpacities(red.red9).opacity10, getOpacities(redDark.red10).opacity10],
-
-  colorBgActionsMenuItemDangerActive: [getOpacities(red.red9).opacity80, getOpacities(redDark.red10).opacity80],
-  actionMenuBg: [whiteA.whiteA0, slateDark.slate3],
-  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate4],
-  actionMenuHover: [slate.slate4, slateDark.slate5],
-  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate6).opacity50],
-  actionMenuButtonColor: [whiteA.whiteA0, slateDark.slate2],
-  actionMenuButtonHoverColor: [slate.slate1, slateDark.slate3],
-  actionMenuButtonShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
-  ],
-  actionMenuButtonShadowHover: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 6px 8px -4px ${getOpacities(slateDark.slate2).opacity30}`,
-  ],
-  actionMenuSeparatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity15],
-  separatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity10],
-  separatorColorDimmed: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
-  separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
-  iconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
-  appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
-  appIconBgColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate2).opacity50],
-  mentionBgColor: [getOpacities(slate.slate7).opacity30, getOpacities(slateDark.slate7).opacity40],
-  colorBgSelectMenu: [slate.slate1, slateDark.slate3],
-  shadowSelectMenu: [
-    `0px 0px 2px 0px ${getOpacities(slate.slate11).opacity30}, 0px 4px 6px 0px ${
-      getOpacities(slate.slate11).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slate.slate11).opacity15}`,
-    `0px 0px 0px 1px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
-      getOpacities(slateDark.slate1).opacity5
-    }, 0px 10px 26px 0px ${getOpacities(slateDark.slate1).opacity15}`,
-  ],
-  colorBgListItemGeneral: [transparent, transparent],
-  colorBgListItemGeneralHover: [slate.slate3, slateDark.slate4],
-  colorBgListItemGeneralFocus: [slate.slate4, slateDark.slate6],
-  colorBgListItemGeneralSelected: [indigo.indigo3, indigoDark.indigo4],
-  colorBgListItemGeneralSelectedHover: [indigo.indigo4, indigoDark.indigo6],
-  colorBgListItemGeneralSelectedFocus: [indigo.indigo4, indigoDark.indigo6],
-  colorBgListItemGeneralDisabled: [transparent, transparent],
-  colorTextListItemGeneralDisabled: [slate.slate9, slateDark.slate9],
-  colorBgListItemGeneralSelectedDisabled: [indigo.indigo5, indigoDark.indigo5],
-  opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
-
-  // Search Items
-  colorBgSearchRowHover: [slate.slate4, slateDark.slate5],
-  colorBgSearchRowCreateHover: [indigo.indigo4, indigoDark.indigo4],
-  opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
-  // Entity Box Style And States
-  // Basic Entity Box State
-  colorBgEntityBoxDefault: [whiteA.whiteA0, slateDark.slate3],
-  shadowStrokeEntityBoxDefault: [`0 0 0 1px ${slate.slate5}`, `0 0 0 1px ${slateDark.slate5}`],
-  shadowEntityBoxDefault: [
-    `0px 2px 4px 0px ${getOpacities(slate.slate12).opacity5}`,
-    `0px 2px 4px 0px ${getOpacities(slateDark.slate1).opacity5}`,
-  ],
-  // :hover
-  colorBgEntityBoxDefaultHover: [whiteA.whiteA0, slateDark.slate4],
-  shadowEntityBoxDefaultHover: [
-    `0px 4px 8px 0px ${getOpacities(slate.slate12).opacity10}`,
-    `0px 4px 8px 0px ${getOpacities(slateDark.slate1).opacity10}`,
-  ],
-  // :focus
-  colorBgEntityBoxDefaultFocus: [whiteA.whiteA0, slateDark.slate3],
-  colorOverlayEntityBoxDefaultFocus: [indigo.indigo9, indigoDark.indigo9],
-  shadowStrokeEntityBoxDefaultFocus: [
-    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity40}`,
-    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity40}`,
-  ],
-  // :focus:hover
-  colorBgEntityBoxDefaultFocusHover: [whiteA.whiteA0, slateDark.slate4],
-  colorOverlayEntityBoxDefaultFocusHover: [indigo.indigo9, indigoDark.indigo9],
-  shadowStrokeEntityBoxDefaultFocusHover: [
-    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity60}`,
-    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity60}`,
-  ],
-  //::drag
-  opacityEntityBoxDefaultDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
-  shadowEntityBoxDefaultDrag: [
-    `0px 8px 12px 0px ${getOpacities(slate.slate12).opacity10}`,
-    `0px 8px 12px 0px ${getOpacities(slateDark.slate1).opacity10}`,
-  ],
-  // Selected Entity Box State
-  colorBgEntityBoxSelected: [indigo.indigo2, indigoDark.indigo3],
-  shadowStrokeEntityBoxSelected: [
-    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
-    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
-  ],
-  // :hover
-  colorBgEntityBoxSelectedHover: [indigo.indigo3, indigoDark.indigo3],
-  shadowStrokeEntityBoxSelectedHover: [
-    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity60}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
-    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
-  ],
-  //::drag
-  colorBgEntityBoxSelectedDrag: [indigo.indigo3, indigoDark.indigo3],
-  shadowStrokeEntityBoxSelectedDrag: [
-    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
-    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).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: [whiteA.whiteA0, slateDark.slate5],
-  entityCardSelectedColor: [getOpacities(slate.slate2).opacity80, getOpacities(slateDark.slate6).opacity50],
-  entityCardHoverColor: [getOpacities(slate.slate2).opacity80, getOpacities(slateDark.slate6).opacity50],
-  entityCardDoneColor: [getOpacities(slate.slate4).opacity30, getOpacities(slateDark.slate5).opacity30],
-  entityCardShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
-  ],
-  entityCardShadowHover: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
-  ],
-  colorBgSegmentedControl: [getOpacities(slate.slate5).opacity80, getOpacities(slateDark.slate3).opacity80],
-  colorBgMenuHeaderAvatar: [whiteA.whiteA0, slateDark.slate2],
-  shadowMenuHeaderAvatar: [
-    `0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 0.5px ${getOpacities(slate.slate5).opacity50}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate9).opacity20}`,
-  ],
-  // Main Menu Items Styles and States
-  // Dragged
-  opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
-  colorBgMenuItemSelectedDragged: [indigo.indigo6, indigoDark.indigo6],
-  // Default
-  colorTextMenuItem: [slateDark.slate5, getOpacities(slateDark.slate12).opacity90],
-  colorBgMenuItem: [transparent, transparent],
-  // :hover
-  colorBgMenuItemHover: [slate.slate5, slateDark.slate2],
-  // :focus
-  colorBgMenuItemFocus: [slate.slate6, slateDark.slate5],
-  // Selected
-  colorBgMenuItemSelected: [getOpacities(indigo.indigo5).opacity80, indigoDark.indigo3],
-  // :hover
-  colorBgMenuItemSelectedHover: [getOpacities(indigo.indigo6).opacity70, indigoDark.indigo5],
-  // :focus, :focus:hover
-  colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
-  colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo5],
-  colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
-  colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
-  allowedDropColor: [slate.slate4, slateDark.slate4],
-  relationViewBgColor: [slate.slate2, slateDark.slate3],
-
-  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: [slate.slate3, slateDark.slate6],
-  unitBgHover: [slate.slate4, slateDark.slate7],
-
-  // Badges
-  colorBgBadgeNeutral: [getOpacities(indigo.indigo5).opacity70, getOpacities(indigoDark.indigo4).opacity80],
-  colorBgBadgeSuccess: [teal.teal5, tealDark.teal5],
-  colorBgBadgeWarning: [yellow.yellow5, yellowDark.yellow5],
-  colorBgBadgeError: [red.red5, redDark.red5],
-  colorTextBadgeNeutral: [indigo.indigo11, indigoDark.indigo11],
-  colorTextBadgeSuccess: [teal.teal11, tealDark.teal11],
-  colorTextBadgeWarning: [yellow.yellow11, yellowDark.yellow11],
-  colorTextBadgeError: [red.red11, redDark.red11],
-  badgeBgColor: [getOpacities(slate.slate10).opacity20, getOpacities(slate.slate10).opacity20],
-  panelBadgeBgColor: [getOpacities(slate.slate10).opacity20, getOpacities(slate.slate10).opacity20],
-  tooltipBgColor: [slateDark.slate5, slateDark.slate6],
-  todayMarkerColor: [red.red8, redDark.red6],
-  viewBgOverlayColor: [getOpacities(slate.slate8).opacity20, getOpacities(slateDark.slate1).opacity60],
-  floatEditorMenuBg: [slate.slate1, slateDark.slate6],
-  floatEditorActiveColor: [indigo.indigo11, indigoDark.indigo11],
-  planBadgeBgColor: [yellow.yellow10, yellowDark.yellow10],
-  commentColor: [getOpacities(yellow.yellow6).opacity60, getOpacities(yellowDark.yellow9).opacity40],
-  cellBackgroundColor: [slate.slate2, slateDark.slate2],
-  cellBackgroundHoverColor: [getOpacities(slate.slate6).opacity30, getOpacities(slateDark.slate6).opacity30],
-  cellBorderColor: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate9).opacity50],
-  cellPinnedBorderColor: [getOpacities(slate.slate8).opacity70, getOpacities(slateDark.slate9).opacity70],
-  tableRowWarningColor: [getOpacities(yellow.yellow6).opacity60, getOpacities(yellowDark.yellow9).opacity40],
-  errorBgColor: [getOpacities(red.red9).opacity20, getOpacities(redDark.red9).opacity60],
-  errorTextColor: [red.red11, red.red7],
-  errorButtonColor: [red.red9, redDark.red10],
-  warningBgColor: [getOpacities(yellow.yellow6).opacity60, getOpacities(yellowDark.yellow8).opacity60],
-  warningButtonColor: [yellow.yellow11, yellowDark.yellow11],
-  infoBox: [getOpacities(yellow.yellow4).opacity50, getOpacities(yellowDark.yellow9).opacity20],
-  appCardBgColor: [whiteA.whiteA0, slateDark.slate2],
-  appCardHoverColor: [getOpacities(slate.slate1).opacity95, slateDark.slate2],
-  modalBg: [getOpacities(slate.slate11).opacity20, getOpacities(slateDark.slate2).opacity50],
-  modalContentBg: [whiteA.whiteA0, slateDark.slate3],
-  progressIconBg: [blackA.blackA7, whiteA.whiteA7],
-  progressIconFill: [blackA.blackA11, whiteA.whiteA11],
-  selectedColorBorder: [getOpacities(slate.slate6).opacity25, getOpacities(slate.slate6).opacity25],
-  formBg: [slate.slate2, slateDark.slate2],
-  formHeaderShadow: [
-    `${getOpacities(slate.slate10).opacity10} 0px 0px 6px`,
-    `${getOpacities(slateDark.slate1).opacity40} 0px 0px 6px`,
-  ],
-  formEditorFieldBg: [slate.slate3, slateDark.slate4],
-  filterGroup1Bg: [slate.slate2, slateDark.slate6],
-  filterGroup2Bg: [slate.slate3, slateDark.slate7],
-  filterGroupBorder: [blackA.blackA3, whiteA.whiteA3],
-  colorBgNotificationHover: [slate.slate3, slateDark.slate4],
-  colorBgNotificationSelected: [indigo.indigo3, indigoDark.indigo4],
-  colorBgNotificationSelectedHover: [indigo.indigo4, indigoDark.indigo6],
-  disabledInversedTextColor: [shades.opacity25, lights.opacity25],
-  success: [teal.teal9, tealDark.teal9],
-  danger: [red.red9, redDark.red10],
-  active: [red.red9, redDark.red10],
-  warning: [yellow.yellow9, yellowDark.yellow8],
-  cardBg: ["#FFFFFF", slateDark.slate6],
-  cardSelected: ["#FFFB8F", slateDark.slate5],
-  cardSelectedHover: ["rgba(240, 244, 247, 0.6)", slateDark.slate5],
-  selectedImageBorder: [blackA.blackA8, whiteA.whiteA11],
-  transparent: [transparent, transparent],
-  shades: [lights, shades],
-  lights: [shades, lights],
-  separators: [separators, inversedSeparators],
-  inversedSeparators: [inversedSeparators, separators],
-  progressBg: [slate.slate4, slate.slate4],
-  progressText: [slate.slate11, slate.slate11],
-  progressFillBg: [slate.slate11, slate.slate11],
-  progressFillText: [whiteA.whiteA0, whiteA.whiteA0],
-  progressBarFillNeutral: [getOpacities(slate.slate9).opacity20, getOpacities(slateDark.slate9).opacity20],
-  progressBarFill: [indigo.indigo9, indigoDark.indigo10],
-  progressBarBg: [getOpacities(indigo.indigo9).opacity25, getOpacities(indigoDark.indigo10).opacity25],
-  searchFiltersBg: [slate.slate1, slateDark.slate2],
-  colorPickerSwatchBorder: [blackA.blackA7, blackA.blackA7],
-  colorBorderRichTextMedia: [blackA.blackA7, blackA.blackA7],
-  richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
-
-  // Drag and drop
-  colorBgDropLine: [indigo.indigo8, indigoDark.indigo8],
-
-  // Views
-  viewBg: [slate.slate1, slateDark.slate1],
-  viewSecondaryBg: [slate.slate2, slateDark.slate2],
-  viewHighlightBg: [indigo.indigo3, indigoDark.indigo3],
-
-  // Board
-  boardBg: [slate.slate1, slateDark.slate1],
-  boardBgWithOpacity80: [getOpacities(slate.slate1).opacity80, getOpacities(slateDark.slate1).opacity80],
-  boardAxisBgHover: [slate.slate4, slateDark.slate4],
-
-  // Grid
-  gridHeaderBgColor: [slate.slate2, slateDark.slate3],
-  gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
-  gridHeaderTextColor: [slate.slate10, slateDark.slate11],
-  gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
-  gridCellBorderColor: [slate.slate5, slateDark.slate6],
-  gridDisabledCellBgColor: [slate.slate2, slateDark.slate3],
-  gridSelectedCellBgColor: [indigo.indigo3, indigoDark.indigo3],
-  gridHighlightedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
-  gridSelectedCellBorderColor: [indigo.indigo6, indigoDark.indigo7],
-  gridSelectedPinnedCellBorderColor: [indigo.indigo7, indigoDark.indigo7],
-  gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
-  gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
-
-  //timeline
-  timelineEntityHandleColor: [indigo.indigo7, indigoDark.indigo7],
-  timelineDependencyHoverBgColor: [indigo.indigo8, indigoDark.indigo8],
-  timelineDependencyOverlapBgColor: [red.red9, redDark.red9],
-  timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
-  timelineCellBgColor: [slate.slate1, slateDark.slate1],
-  timelineCellWeekendBgColor: [slate.slate2, slateDark.slate2],
-  timelineCellTodayBgColor: [indigo.indigo4, indigoDark.indigo2],
-  timelineCreateEntityPlaceholderBgColor: [getOpacities(slate.slate11).opacity20, slateDark.slate7],
-
-  // #region buttons
-  // solid
-  colorBgButtonSolidAccentDefault: [indigo.indigo9, indigoDark.indigo9],
-  colorBgButtonSolidAccentHover: [indigo.indigo11, indigoDark.indigo10],
-  colorBgButtonSolidNeutralDefault: [slate.slate12, slateDark.slate12],
-  colorBgButtonSolidNeutralHover: [getOpacities(slate.slate12).opacity85, whiteA.whiteA0],
-  colorBgButtonSolidDestructiveDefault: [red.red9, redDark.red9],
-  colorBgButtonSolidDestructiveHover: [red.red11, redDark.red10],
-  colorTextButtonSolidAccent: [whiteA.whiteA0, whiteA.whiteA0],
-  colorTextButtonSolidAccentActive: [getOpacities(whiteA.whiteA0).opacity80, getOpacities(whiteA.whiteA0).opacity80],
-  colorTextButtonSolidNeutral: [whiteA.whiteA0, slateDark.slate2],
-  colorTextButtonSolidNeutralActive: [whiteA.whiteA0, getOpacities(slateDark.slate2).opacity80],
-  colorTextButtonSolidDestructive: [whiteA.whiteA0, whiteA.whiteA0],
-  colorTextButtonSolidDestructiveActive: [
-    getOpacities(whiteA.whiteA0).opacity80,
-    getOpacities(whiteA.whiteA0).opacity80,
-  ],
-  colorIconButtonSolidAccent: [whiteA.whiteA0, whiteA.whiteA0],
-  colorIconButtonSolidNeutral: [whiteA.whiteA0, slateDark.slate8],
-  colorIconButtonSolidDestructive: [whiteA.whiteA0, whiteA.whiteA0],
-  // outline
-  colorBorderButtonOutlineAccentDefault: [indigo.indigo8, indigoDark.indigo8],
-  colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate7],
-  colorBorderButtonOutlineDestructiveDefault: [red.red7, redDark.red7],
-  colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
-  colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo3],
-  colorBgButtonOutlineNeutralDefault: [whiteA.whiteA0, slateDark.slate1],
-  colorBgButtonOutlineNeutralHover: [slate.slate4, slateDark.slate4],
-  colorBgButtonOutlineDestructiveDefault: [whiteA.whiteA0, slateDark.slate1],
-  colorBgButtonOutlineDestructiveHover: [red.red4, redDark.red4],
-  colorTextButtonOutlineAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorTextButtonOutlineAccentActive: [
-    getOpacities(indigo.indigo11).opacity80,
-    getOpacities(indigoDark.indigo11).opacity80,
-  ],
-  colorTextButtonOutlineNeutral: [slate.slate11, slateDark.slate11],
-  colorTextButtonOutlineNeutralActive: [
-    getOpacities(slate.slate12).opacity80,
-    getOpacities(slateDark.slate12).opacity80,
-  ],
-  colorTextButtonOutlineDestructive: [red.red11, redDark.red11],
-  colorTextButtonOutlineDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
-  colorIconButtonOutlineAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorIconButtonOutlineNeutral: [slate.slate11, slateDark.slate11],
-  colorIconButtonOutlineDestructive: [red.red11, redDark.red11],
-  // soft
-  colorBgButtonSoftAccentDefault: [indigo.indigo3, indigoDark.indigo4],
-  colorBgButtonSoftAccentHover: [indigo.indigo5, indigoDark.indigo6],
-  colorBgButtonSoftNeutralDefault: [slate.slate3, slateDark.slate3],
-  colorBgButtonSoftNeutralHover: [slate.slate7, slateDark.slate7],
-  colorBgButtonSoftDestructiveDefault: [red.red4, redDark.red4],
-  colorBgButtonSoftDestructiveHover: [red.red6, redDark.red6],
-  colorTextButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorTextButtonSoftAccentActive: [
-    getOpacities(indigo.indigo11).opacity80,
-    getOpacities(indigoDark.indigo11).opacity80,
-  ],
-  colorTextButtonSoftNeutral: [slate.slate11, slateDark.slate11],
-  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
-  colorTextButtonSoftDestructive: [red.red11, redDark.red11],
-  colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
-  colorIconButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorIconButtonSoftNeutral: [slate.slate11, slateDark.slate11],
-  colorIconButtonSoftDestructive: [red.red11, redDark.red11],
-  // ghost
-  colorBgButtonGhostAccentDefault: [transparent, transparent],
-  colorBgButtonGhostAccentHover: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
-  colorBgButtonGhostNeutralDefault: [transparent, transparent],
-  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate7).opacity50, getOpacities(slateDark.slate6).opacity80],
-  colorBgButtonGhostDestructiveDefault: [transparent, transparent],
-  colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
-  colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorTextButtonGhostAccentActive: [
-    getOpacities(indigo.indigo11).opacity80,
-    getOpacities(indigoDark.indigo11).opacity80,
-  ],
-  colorTextButtonGhostNeutral: [slate.slate11, slateDark.slate11],
-  colorTextButtonGhostNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
-  colorTextButtonGhostDestructive: [red.red11, redDark.red11],
-  colorTextButtonGhostDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
-  colorIconButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
-  colorIconButtonGhostNeutral: [slate.slate11, slateDark.slate11],
-  colorIconButtonGhostDestructive: [red.red11, redDark.red11],
-  // #endregion
-
-  colorBorderAccentFocusRing: [getOpacities(indigo.indigo9).opacity30, getOpacities(indigo.indigo9).opacity30],
-  colorBorderNeutralFocusRing: [getOpacities(slate.slate9).opacity30, getOpacities(slate.slate9).opacity30],
-  colorBorderDestructiveFocusRing: [getOpacities(red.red9).opacity30, getOpacities(red.red9).opacity30],
-
-  colorBgReactionsDefault: [whiteA.whiteA0, slateDark.slate2],
-  colorBgReactionsHover: [slate.slate3, slateDark.slate6],
-  colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
-  colorBgReactionsSelectedDefault: [indigo.indigo3, indigoDark.indigo8],
-  colorBorderReactionsSelectedDefault: [indigo.indigo8, indigoDark.indigo8],
-  colorBgReactionsSelectedHover: [indigo.indigo2, indigo.indigo10],
-  colorBorderReactionsSelectedHover: [indigo.indigo9, indigo.indigo10],
-  colorTextReactionsSelected: [indigo.indigo10, slateDark.slate12],
-  colorBgToastDefault: [slate.slate1, slateDark.slate1],
-  colorBgDbTabHover: [slate.slate3, slateDark.slate4],
-  colorBgDbTabFocus: [slate.slate6, slateDark.slate6],
-  colorBgTabHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
-
-  // Chat
-  colorBgMessageContainer: [blackA.blackA3, slateDark.slate6],
-  colorBgMessageContainerHover: [slate.slate2, slateDark.slate3],
-  colorBgEntityAvatarDefault: [indigo.indigo1, indigoDark.indigo1],
-  colorBgEntityAvatarHover: [indigo.indigo3, indigoDark.indigo3],
-  colorTextEntityAvatarDefault: [indigo.indigo8, indigoDark.indigo8],
-  colorTextEntityAvatarHover: [indigo.indigo9, indigoDark.indigo9],
-
-  // Text editor
-  colorBgEditorImageZoomed: [slate.slate3, slateDark.slate6],
-  colorMermaidPrimaryColor: [slate.slate2, slateDark.slate8],
-  colorMermaidPrimaryBorderColor: [slate.slate9, slateDark.slate9],
-  colorMermaidLineColor: [slate.slate10, slateDark.slate9],
-
-  //Whiteboard
-  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],
-  instrumentsMenuShadow: [
-    `0px 0px 1px 0px ${getOpacities(slate.slate11).opacity20}, 0px 4px 6px 0px ${
-      getOpacities(slate.slate11).opacity5
-    }, 0px 3px 12px 0px ${getOpacities(slate.slate11).opacity10}`,
-    `0px 0px 1px 0px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
-      getOpacities(slateDark.slate1).opacity5
-    }, 0px 3px 12px 0px ${getOpacities(slateDark.slate1).opacity15}`,
-  ],
-  commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
-  commentsPanelShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
-  ],
-
-  // SegmentedControl
-  colorBgSegmentedControlDefault: [slate.slate3, slateDark.slate1],
-  colorBgSegmentedControlActive: [slate.slate1, slateDark.slate6],
-  colorBgSegmentedControlHover: [slate.slate5, slateDark.slate4],
-  colorBorderSegmentedControlDefault: [slate.slate6, slateDark.slate7],
-
-  // Chargebee info
-  colorBgChargebeeInfoBox: [slate.slate3, slateDark.slate1],
-} as const;
-
-type ThemeDefs = typeof themeColors;
-
-type GetThemeColors<idx extends number> = {
-  [k in keyof ThemeDefs]: ThemeDefs[k][idx];
-};
-
-type LightColors = GetThemeColors<0>;
-type DarkColors = GetThemeColors<1>;
-
-const lightColors = Object.fromEntries(
-  Object.entries(themeColors).map(([key, value]) => {
-    return [key, value[0]];
-  })
-) as LightColors;
-
-const light2Colors = {
-  ...lightColors,
-  mode: "light2",
-} as const;
-
-const darkColors = Object.fromEntries(
-  Object.entries(themeColors).map(([key, value]) => {
-    return [key, value[1]];
-  })
-) as DarkColors;
-
-export function getLightColors() {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  if (process.env.NODE_ENV !== "test") {
-    throw new Error("Only for test purpose");
-  }
-  return lightColors;
-}
-
-export function getDarkColors() {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  if (process.env.NODE_ENV !== "test") {
-    throw new Error("Only for test purpose");
-  }
-  return darkColors;
-}
-
-export function getLight2Colors() {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  if (process.env.NODE_ENV !== "test") {
-    throw new Error("Only for test purpose");
-  }
-  return light2Colors;
-}
-
-const getDefaultTheme = (): never => {
-  throw Error("Please specify theme mode");
-};
-
-export function getThemeValue<T>(theme: ThemeMode, values: {light: T; light2?: T; dark: T}): T {
-  if (theme in values) {
-    return values[theme] as T;
-  }
-  return values.light;
-}
-
-function getTypeColors(themeColor: string, theme: ThemeMode) {
-  let color;
-  // switch to chroma.valid once we start using 2.0.1
-  try {
-    chroma(themeColor);
-    color = themeColor;
-  } catch (e) {
-    color = brandColors.green;
-  }
-
-  const lightTypeColors = {
-    primary: color,
-    opacity: getOpacities(color),
-    darkenPrimary: getDarkenColor(color),
-    brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
-    detailsBg: chroma(color).alpha(0.5).luminance(0.85).hex(),
-    focus: chroma(color).alpha(0.25).css(),
-    separator: chroma(color).alpha(0.3).css(),
-  };
-
-  const darkTypeColors = {
-    primary: color,
-    opacity: getOpacities(color),
-    darkenPrimary: getDarkenColor(color),
-    brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
-    detailsBg: chroma(color).alpha(0.03).luminance(0.8).desaturate(0.8).darken(0.1).hex(),
-    focus: chroma(color).alpha(0.25).css(),
-    separator: chroma(color).alpha(0.3).css(),
-  };
-
-  switch (theme) {
-    case "light":
-      return lightTypeColors;
-    case "dark":
-      return darkTypeColors;
-    case "light2":
-      return lightTypeColors;
-    default:
-      return lightTypeColors;
-  }
-}
-
-type DesignColor = typeof darkColors | typeof lightColors | typeof light2Colors;
-
-export type ThemeColors = ReturnType<typeof getTypeColors> & DesignColor;
-
-const colorsByTheme: Record<string, DesignColor> = {
-  dark: darkColors,
-  light: lightColors,
-  light2: light2Colors,
-};
-
-export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColors = _.memoize(
-  (_themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
-    const cl = brandColors.blue;
-    const colors = colorsByTheme[theme];
-    return {
-      ...getTypeColors(cl, theme),
-      ...colors,
-    };
-  },
-  (_themeColor, theme) => theme
-);
-
-export const getTextColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).hex();
-});
-
-export const getLinkedHighlightBackgroundColor = _.memoize(
-  (themeColors: ThemeColors, color: string): string => {
-    switch (themeColors.mode) {
-      case "dark":
-        return makeChromaColor(color).alpha(0.4).luminance(0.5).css();
-      case "light":
-        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
-      default:
-        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
-    }
-  },
-  (themeMode, color) => `${themeMode}-${color}`
-);
-
-export const getLinkedHighlightDecorationBackgroundColor = _.memoize(
-  (themeColors: ThemeColors, color: string): string => {
-    switch (themeColors.mode) {
-      case "dark":
-        return makeChromaColor(color).alpha(0.9).luminance(0.5).darken(0.2).css();
-      case "light":
-        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
-      default:
-        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
-    }
-  },
-  (themeMode, color) => `${themeMode}-${color}`
-);
-
-export const getEnumBackgroundColor = _.memoize(
-  (mode: ThemeMode, color: string) => {
-    return getThemeValue(mode, {
-      light: a11yColor(getOpacities(color).opacity15, lightColors.whiteColor, 1),
-      dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
-    });
-  },
-  (themeMode, color) => `${themeMode}-${color}`
-);
-
-export const getEnumTextColor = (color: string) => {
-  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
-};
-
-// TODO: fix color for light2. It should same as 'dark' only on dark menu but same as 'light' on other parts of application
-export const getAppIconBackgroundColor = (mode: ThemeMode, color: string) =>
-  getThemeValue(mode, {
-    dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
-    light: a11yColor(getOpacities(color).opacity15, lightColors.whiteColor, 1),
-    light2: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
-  });
-
-export const getIconColor = _.memoize(
-  (mode: ThemeMode, color: string) =>
-    getThemeValue(mode, {
-      light: a11yColor(getOpacities(color).opacity95, lightColors.whiteColor, 3),
-      dark: a11yColor(getOpacities(color).opacity95, darkColors.menuBg, 5),
-    }),
-  (themeMode, color) => `${themeMode}-${color}`
-);
-
-export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
-export const colors = {
-  ...getTypeColors(brandColors.green, "light"),
-  brandColors,
-  stateColors,
-  transparent,
-  shades,
-  lights,
-  inversedTextColor: "#FFFFFF",
-  disabledInversedTextColor: lights.opacity25,
-} as const;
-
-export const space = {
-  spaceAuto: "auto",
-  s0: 0,
-  s1: 1,
-  s2: 2,
-  s3: 3,
-  s4: 4,
-  s5: 5,
-  s6: 6,
-  s8: 8,
-  s10: 10,
-  s12: 12,
-  s14: 14,
-  s16: 16,
-  s18: 18,
-  s20: 20,
-  s24: 24,
-  s28: 28,
-  s32: 32,
-  s36: 36,
-  s40: 40,
-  s44: 44,
-  s48: 48,
-  s56: 56,
-  s60: 60,
-  s64: 64,
-  s80: 80,
-  s96: 96,
-  s112: 112,
-  s128: 128,
-} as const;
-/** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 12;
-export const spaceNestedTreeInterval = 0;
-export const layout = {
-  logoSize: 18,
-  menuDefaultWidth: 243,
-  fiberyAiSidebarDefaultWidth: 420,
-  fiberyAiSidebarMaxWidth: 920,
-  desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 240,
-  collapsedMenuMinWidth: 47,
-  menuMinWidth: 284,
-  menuMaxWidth: 480,
-  menuItemMinWidth: 80,
-  menuGroupHeaderIndent: 28, // I'm ok
-  menuItemLevelIndent: 24,
-  listItemHeight: 38,
-  mobileListItemHeight: 44,
-  itemHeight: 36,
-  itemWithSubtitleHeight: 52,
-  groupTitleHeight: 30,
-  enumItemHeight: 32,
-  menuItemHeight: 32,
-  mobileMenuItemHeight: 44,
-  newMenuItemHeight: 28, // I'm ok
-  mobileSidebarMenuItemHeight: 44,
-  newMenuIconSize: 18,
-  mobileSidebarIconSize: 20,
-  viewHeaderHeight: space.s12 * 7,
-  viewHeaderCompactHeight: 52,
-  columnMinWidth: 240,
-  columnWidths: {compact: 200, default: 240, list: 280, full: 320},
-  objectEditorMinWidth: 480,
-  typeEditorWidth: "30vw",
-  typeEditorMinWidth: 480,
-  viewSetupWidth: "30vw",
-  viewSetupMinWidth: 380,
-  inputHeight: 36, //TODO: merge input and item height?
-  timelineToolbarHeight: 48,
-  timelineLineHeight: 40,
-  timelineGroupPadding: 0,
-  timelineItemHeightRatio: 32 / 40,
-  timelineHeaderHeight: 48,
-  calendarEventHeight: 30,
-  calendarHeaderHeight: 30,
-  calendarToolbarHeight: 48,
-  checkboxSize: 15,
-  fakeBoardWidth: 260,
-  fakeBoardHeight: 160,
-  inlineInputHeight: 32,
-  menuHeight: 32,
-  popupTopMargin: 48,
-  unitHeight: 18,
-} as const;
-
-export const menuItemHeightVar = `--${varPrefix}-layout-menuItemHeight`;
-export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
-export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
-export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
-
-export const layoutVars = {
-  menuItemHeight: `var(${menuItemHeightVar})`,
-  sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
-  sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
-  listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
-};
-
-export const border = {
-  radius0: 0,
-  radius1: 1,
-  radius2: 2,
-  radius4: 4,
-  radius5: 5,
-  radius6: 6,
-  radius8: 8,
-  radius10: 10,
-  radius12: 12,
-  radius16: 16,
-  radius9999: 9999,
-} as const;
-
-export const lineHeight = {
-  text: 1.6,
-  regular: 1.5,
-  narrow: 1.4,
-  heading: 1.3,
-  nowrap: 1,
-} as const;
-
-export const tooltipDelay = {
-  enter: 500,
-  leave: 0,
-} as const;
-
-export const duration = 120;
-export const easing = "ease-in-out";
-export const transition = `${duration}ms ${easing}`;
-
-export const iconSize = 20;
-export const viewBoxSize = "0 0 20 20";
-export const avatarSize = 24;
-
-export const shadows = {
-  border: `0 0 0 1px ${shades.opacity10}`,
-  inversedBorder: `0 0 0 1px ${lights.opacity10}`,
-  videoPreview: "0 4px 30px 4px rgba(0, 0, 0, .15)",
-} as const;
-
-export const dateFormat = "MMM D, YYYY";
-export const dateTimeFormat = "MMM D, YYYY HH:mm";
-export const timeFormat = "HH:mm";
-
-export const getLinearGradient = (backgroundColors: Array<string>): string => {
-  const parts = _.flatMap(
-    backgroundColors.map((color, index, arr) => [
-      `${color} ${(index / arr.length) * 100}%`,
-      `${color} ${((index + 1) / arr.length) * 100}%`,
-    ])
-  );
-  return `linear-gradient(to bottom, ${parts.join(", ")})`;
-};
-
-export const getObjectColorMemoized = _.memoize((name) => {
-  if (!name) {
-    return "#999999";
-  }
-  const colorHash = new ColorHash({
-    lightness: [0.5, 0.6, 0.7],
-    saturation: [0.6, 0.7, 0.8, 0.9, 1],
-  });
-  return colorHash.hex(name);
-});
-
-export const themeVars = Object.keys(getThemeColors(brandColors.blue, "light")).reduce((vars, key) => {
-  if (key === "opacity") {
-    vars[key] = Object.fromEntries(
-      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
-    );
-  } else if (key === "stateColors") {
-    vars[key] = Object.fromEntries(
-      Object.keys(stateColors).map((stateColorKey) => [
-        stateColorKey,
-        `var(--${varPrefix}-state-colors-${stateColorKey})`,
-      ])
-    );
-  } else if (key === "brandColors") {
-    vars[key] = Object.fromEntries(
-      Object.keys(brandColors).map((brandColorKey) => [
-        brandColorKey,
-        `var(--${varPrefix}-brand-colors-${brandColorKey})`,
-      ])
-    );
-  } else if (key === "shades") {
-    vars[key] = Object.fromEntries(
-      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
-    );
-  } else if (key === "lights") {
-    vars[key] = Object.fromEntries(
-      Object.keys(lights).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
-    );
-  } else if (key === "separators") {
-    vars[key] = Object.fromEntries(
-      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
-    );
-  } else if (key === "inversedSeparators") {
-    vars[key] = Object.fromEntries(
-      Object.keys(inversedSeparators).map((separatorKey) => [
-        separatorKey,
-        `var(--${varPrefix}-inversed-separator-${separatorKey})`,
-      ])
-    );
-  } else {
-    vars[key] = `var(--${varPrefix}-color-${key})`;
-  }
-  return vars;
-}, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;
-
-const DEFAULT_REJECT_KEYS = Object.keys(lightColors);
-export const createInlineTheme = _.memoize(
-  (theme: ThemeColors, rejectKeys = DEFAULT_REJECT_KEYS) => {
-    return createInlineStyles<ThemeColors>(theme, rejectKeys);
-  },
-  (theme, rejectKeys = DEFAULT_REJECT_KEYS) => {
-    const rejectKeysLabel = rejectKeys === DEFAULT_REJECT_KEYS ? "DEFAULT_REJECT_KEYS" : JSON.stringify(rejectKeys);
-    return `${theme.mode}__${theme.primary}__${rejectKeysLabel}`;
-  }
-);
-
-export const textStyles = {
-  heading1: {
-    fontFamily,
-    fontSize: typeSizes[0],
-    letterSpacing: "-0.01em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading2: {
-    fontFamily,
-    fontSize: typeSizes[1],
-    letterSpacing: "-0.002em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading3: {
-    fontFamily,
-    fontSize: typeSizes[2],
-    letterSpacing: "-0.002em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading4: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading5: {
-    fontFamily,
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading6: {
-    fontFamily,
-    fontSize: typeSizes[5],
-    lineHeight: lineHeight.heading,
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  heading7: {
-    fontFamily,
-    fontSize: typeSizes[6],
-    lineHeight: lineHeight.heading,
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  heading8: {
-    fontFamily,
-    fontSize: typeSizes[6],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
-    color: themeVars.textColor,
-  },
-  big: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  regular: {
-    fontFamily,
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    textTransform: "none",
-    letterSpacing: "normal",
-  },
-  small: {
-    fontFamily,
-    fontSize: typeSizes[5],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    textTransform: "none",
-  },
-  code: {
-    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  link: {
-    color: themeVars.linkColor,
-    borderBottom: themeVars.linkBorder,
-    textDecoration: "none",
-    cursor: "pointer",
-    transition: `border ${transition}`,
-  },
-  inversedLink: {
-    color: colors.inversedTextColor,
-    cursor: "pointer",
-    textDecoration: "underline",
-    textDecorationColor: lights.opacity25,
-  },
-  note: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    borderRadius: border.radius6,
-  },
-  important: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    border: `1px solid ${themeVars.active}`,
-    borderRadius: border.radius6,
-  },
-  numeric: {
-    tabularOn: {
-      fontVariantNumeric: "tabular-nums",
-      fontFeatureSettings: '"tnum" 1',
-    },
-    tabularOff: {
-      fontVariantNumeric: "normal",
-      fontFeatureSettings: '"tnum" 0',
-    },
-  },
-  inherit: {
-    fontFamily: "inherit",
-    fontSize: "inherit",
-    lineHeight: "inherit",
-    fontWeight: "inherit",
-    color: "inherit",
-  },
-} as const;
+export {opacity, getOpacities} from "./design-system/alpha";
+export {transition, easing, duration, tooltipDelay} from "./design-system/animation";
+export {cardTypeColors} from "./design-system/colors";
+export {getLinearGradient, getEnumTextColor, dropCursorColor, shadows} from "./design-system/colors-css";
+export {getDarkenColor, getTextColor, getObjectColorMemoized} from "./design-system/colors-js";
+export {dateFormat, dateTimeFormat, timeFormat} from "./design-system/date";
+export {
+  iconSize,
+  border,
+  space,
+  layout,
+  spaceNestedTreeInterval,
+  spaceNestedTreeLevel,
+  viewBoxSize,
+  minPanelWidth,
+} from "./design-system/layout";
+export {type ThemeColors, getThemeColors, createInlineStyles, themeVars, type ThemeStyles} from "./design-system/theme";
+export {typeSizes, fontSize, fontFamily, fontWeight, lineHeight, textStyles} from "./design-system/typography";
+export {
+  layoutVars,
+  menuItemHeightVar,
+  listRowSurfaceFontSizeVar,
+  sidebarMenuItemHeightVar,
+  sidebarMenuIconSizeVar,
+} from "./design-system/vars";