@fibery/ui-kit 1.17.1 → 1.19.0

package/src/design-system.ts

@@ -0,0 +1,1009 @@
+/* eslint-disable max-lines */
+import chroma from "chroma-js";
+import ColorHash from "color-hash";
+import _ from "lodash";
+import {
+  blackA,
+  blue,
+  blueDark,
+  indigo,
+  indigoDark,
+  red,
+  redDark,
+  slate,
+  slateDark,
+  whiteA,
+  yellow,
+  yellowDark,
+} from "./pallete";
+import {a11yColor} from "./a11y-color";
+import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
+import {ThemeMode} from "./theme-settings";
+
+export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
+
+export const fontWeight = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+const transparent = "rgba(255, 255, 255, 0)";
+
+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;
+
+// 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) => `1px solid ${shade}`),
+} as const;
+
+export const inversedSeparators = {
+  ..._.mapValues(lights, (light) => `1px solid ${light}`),
+} as const;
+
+export const fontFamily =
+  "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+
+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: "#4568FB",
+} as const;
+
+export const getDarkenColor = _.memoize((color: string): string => {
+  return makeChromaColor(color).darken(0.6).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.1)", "hsla(272, 43%, 50%, 0.1)"],
+  actionMenuShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
+      getOpacities(slateDark.slate1).opacity40
+    }`,
+  ],
+  shadowPopup: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
+      getOpacities(slateDark.slate1).opacity40
+    }`,
+  ],
+  shadowModal: [
+    `${getOpacities(slate.slate10).opacity20} 0px 16px 70px`,
+    `${getOpacities(slateDark.slate1).opacity40} 0px 16px 70px`,
+  ],
+  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%)`,
+  ],
+  primaryBlue: [indigo.indigo9, indigoDark.indigo10],
+  whiteColor: [whiteA.whiteA0, whiteA.whiteA0],
+  blackColor: [blackA.blackA0, blackA.blackA0],
+  mainBg: [slate.slate2, slateDark.slate1],
+  panelBg: [whiteA.whiteA0, slateDark.slate2],
+  panelContentBg: [slate.slate2, slateDark.slate2],
+  pageBg: [whiteA.whiteA0, slateDark.slate1],
+  pageContentBg: [whiteA.whiteA0, slateDark.slate2],
+  colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
+  colorBgSidebar: [whiteA.whiteA0, slateDark.slate3],
+  menuBg: [slate.slate2, slateDark.slate2],
+  menuTextColor: [slate.slate12, slate.slate8],
+  menuItemHoverColor: [slate.slate4, 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.slate10).opacity90, getOpacities(slate.slate10).opacity90],
+  menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
+  textColor: [slateDark.slate3, 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.indigo11],
+  linkBorder: [
+    `1px solid ${getOpacities(indigoDark.indigo10).opacity20}`,
+    `1px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
+  ],
+  linkHoverColor: [indigo.indigo10, indigoDark.indigo10],
+  linkBorderHover: [
+    `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
+    `1px solid ${getOpacities(indigoDark.indigo10).opacity80}`,
+  ],
+  codeColor: [red.red9, red.red8],
+  codeBgColor: [slate.slate3, slateDark.slate4],
+  codeBlockBgColor: [slate.slate3, slateDark.slate4],
+  entityNodeColor: [slateDark.slate3, slate.slate8],
+  entityNodeBorder: [
+    `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
+    `1px solid ${getOpacities(slate.slate8).opacity40}`,
+  ],
+  entityNodeHoverColor: [slateDark.slate7, slate.slate7],
+  entityNodeBorderHover: [
+    `1px solid ${getOpacities(slate.slate11).opacity80}`,
+    `1px solid ${getOpacities(slate.slate7).opacity80}`,
+  ],
+  entityNodeBgColor: [slate.slate2, slateDark.slate3],
+  shortcutTextColor: [slate.slate9, slateDark.slate11],
+  shortcutBorderColor: [
+    `1px solid ${getOpacities(slate.slate8).opacity50}`,
+    `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
+  ],
+  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.indigo10, indigoDark.indigo10],
+  buttonColor: [slate.slate10, slateDark.slate10],
+  buttonPrimaryTextColor: [slate.slate2, slate.slate6],
+  checkboxColor: [slate.slate10, slateDark.slate10],
+  colorBgActionsMenu: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity85],
+  colorBgActionsMenuItemHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
+  colorBgActionsMenuItemDangerHover: [getOpacities(red.red9).opacity10, getOpacities(redDark.red10).opacity10],
+  colorBgActionsMenuItemDangerActive: [getOpacities(red.red9).opacity80, getOpacities(redDark.red10).opacity80],
+  actionMenuBg: [whiteA.whiteA0, slateDark.slate4],
+  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate5],
+  actionMenuHover: [slate.slate4, slateDark.slate6],
+  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate7).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}`,
+  ],
+  separatorColor: [getOpacities(slate.slate4).opacity50, getOpacities(slateDark.slate8).opacity50],
+  separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
+  iconColor: [slate.slate10, slateDark.slate10],
+  appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
+  appIconBgColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate2).opacity50],
+  mentionBgColor: [slate.slate3, slateDark.slate5],
+  colorBgSelectMenu: [slate.slate1, slateDark.slate3],
+  shadowSelectMenu: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
+      getOpacities(slateDark.slate1).opacity40
+    }`,
+  ],
+  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
+  colorBgSearchItemHover: [slate.slate4, slateDark.slate4],
+  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],
+  shadowStrokeEntityBoxDefaultFocus: [
+    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity20}`,
+    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity20}`,
+  ],
+  // :focus:hover
+  colorBgEntityBoxDefaultFocusHover: [whiteA.whiteA0, slateDark.slate4],
+  shadowStrokeEntityBoxDefaultFocusHover: [
+    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity40}`,
+  ],
+  //::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}`,
+  ],
+
+  // Main Menu Items Styles and States
+  // Dragged
+  opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+  colorBgMenuItemSelectedDragged: [indigo.indigo6, indigoDark.indigo6],
+  // Default
+  colorTextMenuItem: [slate.slate12, slateDark.slate12],
+  colorBgMenuItem: [transparent, transparent],
+  // :hover
+  colorBgMenuItemHover: [slate.slate4, slateDark.slate4],
+  // :focus
+  colorBgMenuItemFocus: [slate.slate6, slateDark.slate6],
+  // Selected
+  colorBgMenuItemSelected: [indigo.indigo4, indigoDark.indigo4],
+  // :hover
+  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
+  // :focus, :focus:hover
+  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
+  allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
+  relationViewBgColor: [slate.slate2, slateDark.slate3],
+  unitBg: [slate.slate3, slateDark.slate6],
+  unitBgHover: [slate.slate4, slateDark.slate7],
+  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: [indigoDark.indigo10, 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],
+  appCardShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity50}, 0 2px 4px -4px ${getOpacities(slateDark.slate1).opacity50}`,
+  ],
+  appCardShadowHover: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity60}, 0 6px 8px -4px ${
+      getOpacities(slateDark.slate1).opacity100
+    }`,
+  ],
+  modalBg: [getOpacities(slate.slate11).opacity20, getOpacities(slateDark.slate2).opacity50],
+  modalContentBg: [whiteA.whiteA0, slateDark.slate3],
+  progressIconBg: [getOpacities(slate.slate12).opacity10, getOpacities(slateDark.slate12).opacity10],
+  progressIconFill: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
+  progressIconDoneBg: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity90],
+  progressIconDoneFill: [getOpacities(slate.slate1).opacity95, getOpacities(slateDark.slate1).opacity80],
+  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity95],
+  instrumentsMenuShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
+    `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
+  ],
+  selectedColorBorder: [getOpacities(slate.slate6).opacity50, getOpacities(slate.slate6).opacity20],
+  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],
+  danger: [red.red9, redDark.red10],
+  active: [red.red9, redDark.red10],
+  warning: ["#FFD41E", "#FFD41E"],
+  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],
+  searchFiltersBg: [slate.slate1, slateDark.slate2],
+  colorPickerSwatchBorder: [blackA.blackA7, blackA.blackA7],
+  richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
+  gridHeaderBgColor: [slate.slate2, slateDark.slate3],
+  gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
+  gridHeaderTextColor: [slate.slate9, slateDark.slate10],
+  gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
+  gridCellBorderColor: [slate.slate5, slateDark.slate6],
+  gridPinnedCellBorderColor: [slate.slate8, slateDark.slate8],
+  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],
+  colorBgReactionsDefault: [slate.slate3, slateDark.slate6],
+  colorBgReactionsHover: [slate.slate1, slateDark.slate2],
+  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],
+} 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 boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
+
+  const lightTypeColors = {
+    primary: color,
+    opacity: getOpacities(color),
+    darkenPrimary: getDarkenColor(color),
+    brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
+    boardBg: boardBg.hex(),
+    boardBgOverlay: boardBg.alpha(0.8).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(),
+    boardBg: boardBg.hex(),
+    boardBgOverlay: boardBg.alpha(0.8).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 colors = colorsByTheme[theme];
+    return {
+      ...getTypeColors(themeColor, theme),
+      ...colors,
+    };
+  },
+  (themeColor, theme) => themeColor + 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}`
+);
+
+// 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 cardTypeColors = [
+  "#4A4A4A",
+  "#6A849B",
+  "#BEC5CC",
+  "#D40915",
+  "#E72065",
+  "#9C2BAF",
+  "#673DB6",
+  "#3E53B4",
+  "#2978FB",
+  "#199EE3",
+  "#1FBED3",
+  "#159789",
+  "#4FAF54",
+  "#8EC351",
+  "#FBA32F",
+  "#FC551F",
+  "#B04E31",
+] as const;
+
+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 = {
+  xxs: 2, // Not recommended
+  xs: 4,
+  s: 6,
+  m: 8,
+  l: 12,
+  xl: 24,
+  xxl: 48, // Not recommended
+  // new spacing set
+  spaceAuto: "auto",
+  s0: 0,
+  s1: 1,
+  s2: 2,
+  s4: 4,
+  s6: 6,
+  s8: 8,
+  s10: 10,
+  s12: 12,
+  s14: 14,
+  s16: 16,
+  s20: 20,
+  s24: 24,
+  s28: 28,
+  s32: 32,
+  s36: 36,
+  s40: 40,
+  s44: 44,
+  s48: 48,
+  s56: 56,
+  s64: 64,
+  s80: 80,
+  s112: 112,
+  s128: 128,
+} as const;
+/** Token for nested items spacing in nested trees */
+export const spaceNestedTreeLevel = 28;
+export const spaceNestedTreeInterval = 0;
+export const layout = {
+  logoSize: 24,
+  menuDefaultWidth: 243,
+  menuMinWidth: 46, //TODO: make dependency to itemHeight
+  menuMaxWidth: 480,
+  menuItemMinWidth: 80,
+  menuGroupHeaderIndent: 40, // I'm ok
+  menuItemLevelIndent: 24,
+  listItemHeight: 38,
+  itemHeight: 36,
+  itemWithSubtitleHeight: 52,
+  groupTitleHeight: 30,
+  menuItemHeight: 32,
+  newMenuItemHeight: 30, // I'm ok
+  viewHeaderHeight: space.l * 7,
+  viewHeaderCompactHeight: 52,
+  columnMinWidth: 240,
+  columnWidths: {compact: 200, default: 240, list: 280, full: 320},
+  objectEditorMinWidth: 480,
+  typeEditorWidth: "30vw",
+  typeEditorMinWidth: 480,
+  viewSetupWidth: "30vw",
+  viewSetupMinWidth: 525,
+  inputHeight: 36, //TODO: merge input and item height?
+  timelineLineHeight: 46,
+  timelineGroupPadding: 6,
+  timelineItemHeightRatio: 34 / 40,
+  timelineHeaderHeight: 30,
+  calendarEventHeight: 30,
+  calendarHeaderHeight: 30,
+  calendarToolbarHeight: 60,
+  checkboxSize: 17,
+  fakeBoardWidth: 260,
+  fakeBoardHeight: 160,
+  inlineInputHeight: 32,
+  menuHeight: 32,
+  popupTopMargin: 48,
+  unitHeight: 18,
+} as const;
+
+export const border = {
+  radius0: 0,
+  radius1: 1,
+  radius2: 2,
+  radius4: 4,
+  radius6: 6,
+  radius8: 8,
+  radius10: 10,
+  radius12: 12,
+} as const;
+
+export const lineHeight = {
+  text: 1.6,
+  regular: 1.5,
+  heading: 1.25,
+  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.green, "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.003em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
+  heading2: {
+    fontFamily,
+    fontSize: typeSizes[1],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
+  heading3: {
+    fontFamily,
+    fontSize: typeSizes[2],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
+  heading4: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
+  heading5: {
+    fontFamily,
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    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,
+  },
+  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,
+  },
+} as const;