@fibery/ui-kit 1.17.0 → 1.18.0

package/src/designSystem.ts

@@ -1,951 +0,0 @@
-/* eslint-disable max-lines */
-import chroma from "chroma-js";
-import {ThemeMode} from "./theme-settings";
-import ColorHash from "color-hash";
-import {
-  blackA,
-  blue,
-  blueDark,
-  indigo,
-  indigoDark,
-  red,
-  redDark,
-  slate,
-  slateDark,
-  whiteA,
-  yellow,
-  yellowDark,
-} from "./Pallete";
-import _ from "lodash";
-import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
-import {a11yColor} from "./a11y-color";
-
-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();
-});
-
-const lightColors = {
-  mode: "light",
-  brandColors,
-  stateColors,
-  primaryBlue: indigo.indigo10,
-  whiteColor: whiteA.whiteA0,
-  blackColor: blackA.blackA0,
-  mainBg: slate.slate2,
-  panelBg: whiteA.whiteA0,
-  panelContentBg: slate.slate2,
-  pageBg: whiteA.whiteA0,
-  pageContentBg: whiteA.whiteA0,
-  sidebarBg: whiteA.whiteA0,
-  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
-  menuBg: slate.slate2,
-  menuTextColor: slate.slate12,
-  menuItemHoverColor: slate.slate4,
-  menuItemSettingsHoverBg: slate.slate5,
-  menuSelectedTextColor: slate.slate2,
-  menuFooterColor: getOpacities(whiteA.whiteA0).opacity20,
-  menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity60,
-  menuIconColor: getOpacities(slate.slate10).opacity90,
-  menuSelectedIconColor: getOpacities(slate.slate1).opacity90,
-  textColor: slateDark.slate3,
-  textSelectionColor: getOpacities(blue.blue10).opacity20,
-  accentTextColor: slate.slate10,
-  disabledTextColor: slate.slate9,
-  inversedTextColor: slate.slate3,
-  linkColor: indigoDark.indigo10,
-  linkBorder: `1px solid ${getOpacities(indigoDark.indigo10).opacity20}`,
-  linkHoverColor: indigo.indigo10,
-  linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
-  codeColor: red.red9,
-  codeBgColor: slate.slate3,
-  codeBlockBgColor: slate.slate3,
-  entityNodeColor: slateDark.slate3,
-  entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
-  entityNodeHoverColor: slateDark.slate7,
-  entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
-  entityNodeBgColor: slate.slate2,
-  shortcutTextColor: slate.slate9,
-  shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity50}`,
-  inputBgColor: whiteA.whiteA0,
-  inputDisabledBgColor: getOpacities(slate.slate6).opacity30,
-  inputDisabledBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity20}`,
-  inputCopyBgColor: slate.slate3,
-  inputBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity70}`,
-  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate7).opacity100}`,
-  inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
-  inputBorderBlendMode: "multiply",
-  inputPlaceholderTextColor: slate.slate9,
-  inputErrorBorderColor: `0 0 0 1px ${red.red11}`,
-  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red11).opacity40}`,
-  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red11).opacity25}`,
-  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
-  buttonPrimaryColor: indigo.indigo10,
-  buttonColor: slate.slate10,
-  buttonPrimaryTextColor: slate.slate2,
-  checkboxColor: slate.slate10,
-  actionMenuBg: whiteA.whiteA0,
-  actionMenuInnerBg: whiteA.whiteA0,
-  actionMenuShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${
-    getOpacities(slate.slate10).opacity30
-  }`,
-  actionMenuHover: slate.slate4,
-  actionMenuInnerHover: slate.slate4,
-  actionMenuButtonColor: whiteA.whiteA0,
-  actionMenuButtonHoverColor: slate.slate1,
-  actionMenuButtonShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slate.slate10).opacity20
-  }`,
-  actionMenuButtonShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${
-    getOpacities(slate.slate10).opacity30
-  }`,
-  separatorColor: getOpacities(slate.slate4).opacity50,
-  separatorBreadcrumbsColor: slate.slate8,
-  iconColor: slate.slate10,
-  appIconColor: getOpacities(slate.slate2).opacity90,
-  appIconBgColor: getOpacities(slate.slate1).opacity90,
-  mentionBgColor: slate.slate3,
-  entityCardBgColor: whiteA.whiteA0,
-  entityCardSelectedColor: getOpacities(slate.slate2).opacity80,
-  entityCardHoverColor: getOpacities(slate.slate2).opacity80,
-  entityCardDoneColor: getOpacities(slate.slate4).opacity30,
-  entityCardShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slate.slate10).opacity20
-  }`,
-  entityCardShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slate.slate10).opacity20
-  }`,
-  allowedDropColor: getOpacities(slate.slate3).opacity80,
-  relationViewBgColor: slate.slate2,
-  unitBg: slate.slate3,
-  unitBgHover: slate.slate4,
-  badgeBgColor: getOpacities(slate.slate10).opacity20,
-  tooltipBgColor: slateDark.slate5,
-  todayMarkerColor: red.red8,
-  viewBgOverlayColor: getOpacities(slate.slate8).opacity20,
-  floatEditorMenuBg: slate.slate1,
-  floatEditorActiveColor: indigoDark.indigo10,
-  planBadgeBgColor: yellow.yellow10,
-  commentColor: getOpacities(yellow.yellow6).opacity60,
-  cellBackgroundColor: slate.slate2,
-  cellBackgroundHoverColor: getOpacities(slate.slate6).opacity30,
-  cellBorderColor: getOpacities(slate.slate8).opacity50,
-  cellPinnedBorderColor: getOpacities(slate.slate8).opacity70,
-  tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
-  errorBgColor: getOpacities(red.red9).opacity20,
-  errorTextColor: red.red11,
-  errorButtonColor: red.red9,
-  warningBgColor: getOpacities(yellow.yellow6).opacity60,
-  warningButtonColor: yellow.yellow11,
-  infoBox: getOpacities(yellow.yellow4).opacity50,
-  appCardBgColor: whiteA.whiteA0,
-  appCardHoverColor: getOpacities(slate.slate1).opacity95,
-  appCardShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slate.slate10).opacity20
-  }`,
-  appCardShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${
-    getOpacities(slate.slate10).opacity30
-  }`,
-  modalBg: getOpacities(slate.slate11).opacity20,
-  modalShadow: `${getOpacities(slate.slate10).opacity20} 0px 16px 70px`,
-  modalContentBg: whiteA.whiteA0,
-  progressIconBg: getOpacities(slate.slate12).opacity10,
-  progressIconFill: getOpacities(slate.slate12).opacity80,
-  progressIconDoneBg: getOpacities(slate.slate12).opacity80,
-  progressIconDoneFill: getOpacities(slate.slate1).opacity95,
-  instrumentsMenuBg: getOpacities(whiteA.whiteA0).opacity85,
-  instrumentsMenuShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slate.slate10).opacity20
-  }`,
-  selectedColorBorder: getOpacities(slate.slate6).opacity50,
-  formBg: slate.slate2,
-  formHeaderShadow: `${getOpacities(slate.slate10).opacity10} 0px 0px 6px`,
-  formEditorFieldBg: slate.slate3,
-  filterGroup1Bg: slate.slate2,
-  filterGroup2Bg: slate.slate3,
-  filterGroupBorder: blackA.blackA3,
-  colorBgNotificationFocusedDefault: indigo.indigo3,
-  colorBgNotificationFocusedHover: indigo.indigo4,
-  //end
-  disabledInversedTextColor: shades.opacity25,
-  danger: red.red9,
-  active: red.red9,
-  warning: "#FFD41E",
-  cardBg: "#FFFFFF",
-  cardSelected: "#FFFB8F",
-  cardSelectedHover: "rgba(240, 244, 247, 0.6)",
-  selectedImageBorder: blackA.blackA8,
-  transparent,
-  shades: lights,
-  lights: shades,
-  separators,
-  inversedSeparators,
-  progressBg: slate.slate4,
-  progressText: slate.slate11,
-  progressFillBg: slate.slate11,
-  progressFillText: whiteA.whiteA0,
-  searchFiltersBg: slate.slate1,
-  colorPickerSwatchBorder: blackA.blackA7,
-  richTextTableBorder: blackA.blackA5,
-  // GRID
-  // header
-  gridHeaderBgColor: slate.slate2,
-  gridHeaderHoverBgColor: slate.slate3,
-  gridHeaderTextColor: slate.slate9,
-  // cell
-  gridCellBgColor: whiteA.whiteA0,
-  gridCellBorderColor: slate.slate5,
-  gridPinnedCellBorderColor: slate.slate8,
-  gridDisabledCellBgColor: slate.slate2,
-  gridSelectedCellBgColor: indigo.indigo3,
-  gridHighlightedCellBgColor: indigo.indigo4,
-  gridSelectedCellBorderColor: indigo.indigo6,
-  gridSelectedPinnedCellBorderColor: indigo.indigo7,
-  gridDisabledSelectedCellBgColor: indigo.indigo4,
-  gridActiveCellBorderColor: indigo.indigo8,
-} as const;
-
-const darkMenu = {
-  menuBg: slateDark.slate2,
-  menuFooterColor: getOpacities(slateDark.slate3).opacity40,
-  menuFooterHoverColor: slateDark.slate4,
-  menuTextColor: slate.slate8,
-  menuIconColor: getOpacities(slate.slate10).opacity90,
-  menuSelectedIconColor: getOpacities(slate.slate1).opacity90,
-  menuSelectedTextColor: slate.slate2,
-  menuItemHoverColor: slateDark.slate6,
-  menuItemSettingsHoverBg: slateDark.slate5,
-  appIconBgColor: getOpacities(slate.slate2).opacity50,
-};
-
-const light2Colors = {
-  ...lightColors,
-  ...darkMenu,
-  mode: "light2",
-} as const;
-
-const darkColors = {
-  mode: "dark",
-  brandColors,
-  stateColors,
-  primaryBlue: indigoDark.indigo10,
-  whiteColor: whiteA.whiteA0,
-  blackColor: blackA.blackA0,
-  mainBg: slateDark.slate1,
-  panelBg: slateDark.slate2,
-  panelContentBg: slateDark.slate2,
-  pageBg: slateDark.slate1,
-  pageContentBg: slateDark.slate2,
-  sidebarBg: slateDark.slate3,
-  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
-  textColor: slate.slate6,
-  textSelectionColor: getOpacities(blueDark.blue10).opacity40,
-  accentTextColor: slateDark.slate10,
-  disabledTextColor: slateDark.slate9,
-  inversedTextColor: slateDark.slate6,
-  linkColor: indigoDark.indigo11,
-  linkBorder: `1px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
-  linkHoverColor: indigoDark.indigo10,
-  linkBorderHover: `1px solid ${getOpacities(indigoDark.indigo10).opacity80}`,
-  codeColor: red.red8,
-  codeBgColor: slateDark.slate4,
-  codeBlockBgColor: slateDark.slate4,
-  entityNodeColor: slate.slate8,
-  entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
-  entityNodeHoverColor: slate.slate7,
-  entityNodeBorderHover: `1px solid ${getOpacities(slate.slate7).opacity80}`,
-  entityNodeBgColor: slateDark.slate3,
-  shortcutTextColor: slateDark.slate11,
-  shortcutBorderColor: `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
-  inputBgColor: slateDark.slate2,
-  inputDisabledBgColor: getOpacities(slateDark.slate6).opacity30,
-  inputDisabledBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity20}`,
-  inputCopyBgColor: slateDark.slate4,
-  inputBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
-  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity100}`,
-  inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
-  inputBorderBlendMode: "lighten",
-  inputPlaceholderTextColor: slateDark.slate9,
-  inputErrorBorderColor: `0 0 0 1px ${red.red7}`,
-  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red7).opacity40}`,
-  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red7).opacity25}`,
-  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
-  buttonPrimaryColor: indigoDark.indigo10,
-  buttonColor: slateDark.slate10,
-  buttonPrimaryTextColor: slate.slate6,
-  checkboxColor: slateDark.slate10,
-  actionMenuBg: slateDark.slate4,
-  actionMenuInnerBg: slateDark.slate5,
-  actionMenuShadow: `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
-    getOpacities(slateDark.slate1).opacity40
-  }`,
-  actionMenuHover: slateDark.slate6,
-  actionMenuInnerHover: getOpacities(slateDark.slate7).opacity50,
-  actionMenuButtonColor: slateDark.slate2,
-  actionMenuButtonHoverColor: slateDark.slate3,
-  actionMenuButtonShadow: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slateDark.slate2).opacity20
-  }`,
-  actionMenuButtonShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 6px 8px -4px ${
-    getOpacities(slateDark.slate2).opacity30
-  }`,
-  separatorColor: getOpacities(slateDark.slate8).opacity50,
-  separatorBreadcrumbsColor: slateDark.slate8,
-  iconColor: slateDark.slate10,
-  appIconColor: getOpacities(slate.slate2).opacity70,
-  mentionBgColor: slateDark.slate5,
-  entityCardBgColor: slateDark.slate5,
-  entityCardSelectedColor: getOpacities(slateDark.slate6).opacity50,
-  entityCardHoverColor: getOpacities(slateDark.slate6).opacity50,
-  entityCardDoneColor: getOpacities(slateDark.slate5).opacity30,
-  entityCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slateDark.slate2).opacity20
-  }`,
-  entityCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
-    getOpacities(slateDark.slate2).opacity20
-  }`,
-  allowedDropColor: getOpacities(slateDark.slate3).opacity80,
-  relationViewBgColor: slateDark.slate3,
-  unitBg: slateDark.slate6,
-  unitBgHover: slateDark.slate7,
-  badgeBgColor: getOpacities(slate.slate10).opacity20,
-  tooltipBgColor: slateDark.slate6,
-  todayMarkerColor: redDark.red6,
-  viewBgOverlayColor: getOpacities(slateDark.slate1).opacity60,
-  floatEditorMenuBg: slateDark.slate6,
-  floatEditorActiveColor: indigoDark.indigo11,
-  planBadgeBgColor: yellowDark.yellow10,
-  commentColor: getOpacities(yellowDark.yellow9).opacity40,
-  cellBackgroundColor: slateDark.slate2,
-  cellBackgroundHoverColor: getOpacities(slateDark.slate6).opacity30,
-  cellBorderColor: getOpacities(slateDark.slate9).opacity50,
-  cellPinnedBorderColor: getOpacities(slateDark.slate9).opacity70,
-  tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
-  errorBgColor: getOpacities(redDark.red9).opacity60,
-  errorTextColor: red.red7,
-  errorButtonColor: redDark.red10,
-  warningBgColor: getOpacities(yellowDark.yellow8).opacity60,
-  warningButtonColor: yellowDark.yellow11,
-  infoBox: getOpacities(yellowDark.yellow9).opacity20,
-  appCardBgColor: slateDark.slate2,
-  appCardHoverColor: slateDark.slate2,
-  appCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity50}, 0 2px 4px -4px ${
-    getOpacities(slateDark.slate1).opacity50
-  }`,
-  appCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity60}, 0 6px 8px -4px ${
-    getOpacities(slateDark.slate1).opacity100
-  }`,
-  modalBg: getOpacities(slateDark.slate2).opacity50,
-  modalShadow: `${getOpacities(slateDark.slate1).opacity40} 0px 16px 70px`,
-  modalContentBg: slateDark.slate3,
-  progressIconBg: getOpacities(slateDark.slate12).opacity10,
-  progressIconFill: getOpacities(slateDark.slate12).opacity80,
-  progressIconDoneBg: getOpacities(slateDark.slate12).opacity90,
-  progressIconDoneFill: getOpacities(slateDark.slate1).opacity80,
-  instrumentsMenuBg: getOpacities(slateDark.slate4).opacity95,
-  instrumentsMenuShadow: `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
-  selectedColorBorder: getOpacities(slate.slate6).opacity20,
-  formBg: slateDark.slate2,
-  formHeaderShadow: `${getOpacities(slateDark.slate1).opacity40} 0px 0px 6px`,
-  formEditorFieldBg: slateDark.slate4,
-  filterGroup1Bg: slateDark.slate6,
-  filterGroup2Bg: slateDark.slate7,
-  filterGroupBorder: whiteA.whiteA3,
-  colorBgNotificationFocusedDefault: getOpacities(indigoDark.indigo11).opacity20,
-  colorBgNotificationFocusedHover: getOpacities(indigoDark.indigo11).opacity30,
-  //end
-  disabledInversedTextColor: lights.opacity25,
-  danger: redDark.red10,
-  active: redDark.red10,
-  warning: "#FFD41E",
-  cardBg: slateDark.slate6,
-  cardSelected: slateDark.slate5,
-  cardSelectedHover: slateDark.slate5,
-  selectedImageBorder: whiteA.whiteA11,
-  transparent,
-  shades,
-  lights,
-  separators: inversedSeparators,
-  inversedSeparators: separators,
-  progressBg: slate.slate4,
-  progressText: slate.slate11,
-  progressFillBg: slate.slate11,
-  progressFillText: whiteA.whiteA0,
-  searchFiltersBg: slateDark.slate2,
-  colorPickerSwatchBorder: blackA.blackA7,
-  richTextTableBorder: whiteA.whiteA7,
-  // GRID
-  // header
-  gridHeaderBgColor: slateDark.slate3,
-  gridHeaderHoverBgColor: slateDark.slate4,
-  gridHeaderTextColor: slateDark.slate10,
-  // cell
-  gridCellBgColor: slateDark.slate2,
-  gridCellBorderColor: slateDark.slate6,
-  gridPinnedCellBorderColor: slateDark.slate8,
-  gridDisabledCellBgColor: slateDark.slate3,
-  gridSelectedCellBgColor: indigoDark.indigo3,
-  gridHighlightedCellBgColor: indigoDark.indigo5,
-  gridSelectedCellBorderColor: indigoDark.indigo7,
-  gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
-  gridDisabledSelectedCellBgColor: indigoDark.indigo5,
-  gridActiveCellBorderColor: indigoDark.indigo9,
-  ...darkMenu,
-} as const;
-
-export function getLightColors(): typeof lightColors {
-  // 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(): typeof darkColors {
-  // 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(): typeof light2Colors {
-  // 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 getEnumBackgroundColor = _.memoize(
-  (mode: ThemeMode, color: string) => {
-    return getThemeValue(mode, {
-      light: a11yColor(getOpacities(color).opacity20, 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
-} as const;
-
-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: 40,
-  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 radius = 3;
-
-export const border = {
-  radius0: 0,
-  radius1: 1,
-  radius2: 2,
-  radius3: 3,
-  radius4: 4,
-  radius5: 5,
-  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: radius,
-  },
-  important: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    border: `1px solid ${themeVars.active}`,
-    borderRadius: radius,
-  },
-} as const;