@fibery/ui-kit 1.0.0

package/src/designSystem.ts

@@ -0,0 +1,877 @@
+/* eslint-disable max-lines */
+import chroma from "chroma-js";
+import ColorHash from "color-hash";
+import {blackA, indigo, indigoDark, red, redDark, sage, slate, slateDark, whiteA, yellow, yellowDark} from "./Pallete";
+import _ from "lodash";
+import {createInlineTheme as createInlineStyles} from "./create-inline-theme";
+
+export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
+
+export const fontWeight = {
+  regular: 400,
+  bold: 500,
+  bolder: 600,
+} as const;
+
+const transparent = "rgba(255, 255, 255, 0)";
+
+export const opacity = {
+  opaque: 1,
+  overlay: 0.9,
+  tiny: 0.8,
+  tiniest: 0.7,
+  half: 0.5,
+  regular: 0.4,
+  light: 0.25,
+  notSoThin: 0.14,
+  thin: 0.1,
+  thinner: 0.07,
+  hairline: 0.04,
+  transparent: 0,
+  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.green);
+  }
+};
+
+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 =
+  "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid 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: "#4568FB",
+} as const;
+
+export const getDarkenColor = (color: string): string => {
+  return makeChromaColor(color).darken(0.4).css();
+};
+
+const lightColors = {
+  mode: "light",
+  brandColors,
+  stateColors,
+  //light theme
+  whiteColor: whiteA.whiteA0,
+  blackColor: blackA.blackA0,
+  mainBg: sage.sage3,
+  panelBg: whiteA.whiteA0,
+  panelContentBg: sage.sage2,
+  pageBg: whiteA.whiteA0,
+  pageContentBg: whiteA.whiteA0,
+  sidebarBg: whiteA.whiteA0,
+  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(sage.sage2).opacity80}`,
+  menuBg: sage.sage3,
+  menuFooterColor: getOpacities(whiteA.whiteA0).opacity20,
+  menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity40,
+  textColor: slateDark.slate3,
+  accentTextColor: slate.slate10,
+  disabledTextColor: slate.slate9,
+  inversedTextColor: slateDark.slate3,
+  linkColor: indigoDark.indigo10,
+  linkBorder: `1px solid ${getOpacities(indigoDark.indigo10).opacity20}`,
+  linkHoverColor: indigo.indigo10,
+  linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
+  entityNodeColor: slateDark.slate3,
+  entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
+  entityNodeHoverColor: slateDark.slate7,
+  entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
+  entityNodeBgColor: getOpacities(slate.slate3).opacity80,
+  shortcutTextColor: slate.slate9,
+  shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
+  inputBgColor: whiteA.whiteA0,
+  inputDisabledBgColor: slate.slate2,
+  inputCopyBgColor: slate.slate3,
+  inputBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity70}`,
+  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity100}`,
+  inputPlaceholderTextColor: slate.slate10,
+  buttonColor: slate.slate10,
+  menuTextColor: slate.slate12,
+  selectedMenuTextColor: slate.slate2,
+  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.slate3,
+  actionMenuInnerHover: slate.slate3,
+  actionMenuButtonColor: whiteA.whiteA0,
+  actionMenuButtonHoverColor: slate.slate1,
+  separatorColor: getOpacities(slate.slate4).opacity50,
+  iconColor: slate.slate10,
+  menuIconColor: getOpacities(slate.slate10).opacity90,
+  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
+  appIconColor: getOpacities(slate.slate1).opacity90,
+  mentionBgColor: slate.slate3,
+  entityCardBgColor: whiteA.whiteA0,
+  entityCardSelectedColor: whiteA.whiteA0,
+  entityCardHoverColor: getOpacities(slate.slate1).opacity95,
+  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 6px 8px -4px ${
+    getOpacities(slate.slate10).opacity30
+  }`,
+  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,
+  commentColor: getOpacities(yellow.yellow6).opacity60,
+  cellBorderColor: getOpacities(slate.slate8).opacity50,
+  tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
+  warningBgColor: yellow.yellow6,
+  warningButtonColor: yellow.yellow11,
+  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,
+  //end
+  placeholderTextColor: "#65788B",
+  disabledInversedTextColor: shades.light,
+  codeColor: "#F24461",
+  codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
+  danger: brandColors.red,
+  active: brandColors.red,
+  warning: "#FFD41E",
+  cardBg: "#FFFFFF",
+  cardSelected: "#FFFB8F",
+  cardSelectedHover: "rgba(240, 244, 247, 0.6)",
+  menuSelected: "rgba(240, 244, 247, 1)",
+  menuSelectedHover: "rgba(240, 244, 247, 1)",
+  menuBg1: "hsl(151, 10.6%, 95.2%)",
+  menuBg2: "rgba(255, 255, 255, 0.1)",
+  menuBg3: "rgba(255, 255, 255, 0.3)",
+  infoBox: "rgba(255, 212, 0, 0.2)",
+  errorBg: "rgba(255, 241, 240, 1)",
+  timelineCard: "#FCE07D",
+  transparent,
+  shades: lights,
+  lights: shades,
+  separators,
+  inversedSeparators,
+} as const;
+
+const darkColors = {
+  mode: "dark",
+  brandColors,
+  stateColors,
+  //dark theme
+  whiteColor: whiteA.whiteA0,
+  blackColor: blackA.blackA0,
+  mainBg: slateDark.slate1,
+  panelBg: slateDark.slate2,
+  panelContentBg: slateDark.slate2,
+  pageBg: slateDark.slate1,
+  pageContentBg: slateDark.slate2,
+  sidebarBg: slateDark.slate2,
+  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
+  menuBg: slateDark.slate2,
+  menuFooterColor: getOpacities(slateDark.slate3).opacity20,
+  menuFooterHoverColor: getOpacities(slateDark.slate3).opacity40,
+  textColor: slate.slate6,
+  accentTextColor: slate.slate10,
+  disabledTextColor: slateDark.slate9,
+  inversedTextColor: slate.slate6,
+  linkColor: indigoDark.indigo11,
+  linkBorder: `1px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
+  linkHoverColor: indigoDark.indigo10,
+  linkBorderHover: `1px solid ${getOpacities(indigoDark.indigo10).opacity80}`,
+  entityNodeColor: slate.slate8,
+  entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
+  entityNodeHoverColor: slate.slate7,
+  entityNodeBorderHover: `1px solid ${getOpacities(slate.slate7).opacity80}`,
+  entityNodeBgColor: getOpacities(slateDark.slate6).opacity80,
+  shortcutTextColor: slateDark.slate11,
+  shortcutBorderColor: `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
+  inputBgColor: slateDark.slate2,
+  inputDisabledBgColor: slateDark.slate3,
+  inputCopyBgColor: slateDark.slate4,
+  inputBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
+  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
+  inputPlaceholderTextColor: slate.slate10,
+  buttonColor: slate.slate10,
+  menuTextColor: slate.slate8,
+  selectedMenuTextColor: slate.slate2,
+  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,
+  separatorColor: getOpacities(slateDark.slate8).opacity50,
+  iconColor: slate.slate9,
+  menuIconColor: getOpacities(slate.slate10).opacity90,
+  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
+  appIconColor: getOpacities(slate.slate2).opacity70,
+  mentionBgColor: slateDark.slate5,
+  entityCardBgColor: slateDark.slate4,
+  entityCardSelectedColor: slateDark.slate5,
+  entityCardHoverColor: getOpacities(slateDark.slate5).opacity95,
+  entityCardDoneColor: slateDark.slate3,
+  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 6px 8px -4px ${
+    getOpacities(slateDark.slate2).opacity30
+  }`,
+  unitBg: slateDark.slate6,
+  unitBgHover: slateDark.slate7,
+  badgeBgColor: getOpacities(slate.slate10).opacity20,
+  tooltipBgColor: slateDark.slate7,
+  todayMarkerColor: redDark.red6,
+  viewBgOverlayColor: getOpacities(slateDark.slate1).opacity60,
+  floatEditorMenuBg: slateDark.slate6,
+  floatEditorActiveColor: indigoDark.indigo11,
+  commentColor: getOpacities(yellowDark.yellow9).opacity40,
+  cellBorderColor: getOpacities(slateDark.slate9).opacity50,
+  tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
+  warningBgColor: getOpacities(yellowDark.yellow9).opacity40,
+  warningButtonColor: yellowDark.yellow11,
+  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.slate8).opacity20,
+  //end
+  placeholderTextColor: "#65788B",
+  disabledInversedTextColor: lights.light,
+  codeColor: "#F24461",
+  codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
+  danger: brandColors.red,
+  active: brandColors.red,
+  warning: "#FFD41E",
+  cardBg: slateDark.slate6,
+  cardSelected: slateDark.slate5,
+  cardSelectedHover: slateDark.slate5,
+  menuSelected: "rgba(240, 244, 247, 1)",
+  menuSelectedHover: "rgba(240, 244, 247, 1)",
+  menuBg1: "#132331",
+  menuBg2: "rgba(255, 255, 255, 0.05)",
+  menuBg3: "rgba(255, 255, 255, 0.08)",
+  infoBox: "rgba(255, 212, 0, 0.2)",
+  errorBg: "rgba(255, 241, 240, 1)",
+  timelineCard: "#FCE07D",
+  transparent,
+  shades,
+  lights,
+  separators: inversedSeparators,
+  inversedSeparators: separators,
+} as const;
+
+const oldColors = {
+  mode: "old",
+  brandColors,
+  stateColors,
+  //old theme
+  whiteColor: whiteA.whiteA0,
+  blackColor: blackA.blackA0,
+  mainBg: sage.sage3,
+  panelBg: whiteA.whiteA0,
+  panelContentBg: sage.sage2,
+  pageBg: whiteA.whiteA0,
+  pageContentBg: whiteA.whiteA0,
+  sidebarBg: whiteA.whiteA0,
+  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(sage.sage2).opacity80}`,
+  menuBg: "#132331",
+  menuFooterColor: "rgba(255, 255, 255, 0.05)",
+  menuFooterHoverColor: "rgba(255, 255, 255, 0.08)",
+  textColor: "#2A3844",
+  accentTextColor: "#65788B",
+  disabledTextColor: shades.regular,
+  inversedTextColor: "#FFFFFF",
+  linkColor: indigoDark.indigo10,
+  linkBorder: `1px solid ${getOpacities(indigoDark.indigo10).opacity30}`,
+  linkHoverColor: indigo.indigo10,
+  linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
+  entityNodeColor: slateDark.slate3,
+  entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
+  entityNodeHoverColor: slateDark.slate7,
+  entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
+  entityNodeBgColor: getOpacities(slate.slate3).opacity80,
+  shortcutTextColor: slate.slate9,
+  shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
+  inputBgColor: whiteA.whiteA0,
+  inputDisabledBgColor: slate.slate2,
+  inputCopyBgColor: slate.slate2,
+  inputBorderColor: `0 0 0 1px ${shades.thin}`,
+  inputBorderHoverColor: `0 0 0 1px ${shades.light}`,
+  inputPlaceholderTextColor: "#65788B",
+  buttonColor: slate.slate10,
+  menuTextColor: "#FFFFFF",
+  selectedMenuTextColor: "#FFFFFF",
+  actionMenuBg: whiteA.whiteA0,
+  actionMenuInnerBg: whiteA.whiteA0,
+  actionMenuShadow: `0 0 0 1px rgba(17, 33, 58, 0.05), 0 16px 24px -8px rgba(17, 33, 58, 0.32)`,
+  actionMenuHover: "rgba(240, 244, 247, 1)",
+  actionMenuInnerHover: "rgba(240, 244, 247, 1)",
+  actionMenuButtonColor: whiteA.whiteA0,
+  actionMenuButtonHoverColor: slate.slate1,
+  separatorColor: slate.slate3,
+  iconColor: "#65788B",
+  menuIconColor: "#65788B",
+  selectedMenuIconColor: whiteA.whiteA0,
+  appIconColor: getOpacities(whiteA.whiteA0).opacity90,
+  mentionBgColor: slate.slate3,
+  entityCardBgColor: "#FFFFFF",
+  entityCardSelectedColor: "#FFFB8F",
+  entityCardHoverColor: "#FFFFFF",
+  entityCardDoneColor: lights.regular,
+  entityCardShadow: `0 0 0 1px rgba(17, 33, 58, .08), 0 4px 4px -4px rgba(17, 33, 58, .40)`,
+  entityCardShadowHover: `0 0 0 1px rgba(17, 33, 58, .1), 0 4px 8px -4px rgba(17, 33, 58, .68)`,
+  unitBg: "rgba(220, 224, 228, 0.33)",
+  unitBgHover: "rgba(220, 224, 228, 0.63)",
+  badgeBgColor: getOpacities("#65788B").regular,
+  tooltipBgColor: slateDark.slate5,
+  todayMarkerColor: red.red8,
+  viewBgOverlayColor: getOpacities(slate.slate8).opacity20,
+  floatEditorMenuBg: slate.slate1,
+  floatEditorActiveColor: indigoDark.indigo10,
+  commentColor: getOpacities(yellow.yellow6).opacity60,
+  cellBorderColor: getOpacities(slate.slate4).opacity50,
+  tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
+  warningBgColor: yellow.yellow6,
+  warningButtonColor: yellow.yellow11,
+  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,
+  //end
+  placeholderTextColor: "#65788B",
+  disabledInversedTextColor: lights.light,
+  codeColor: "#F24461",
+  codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
+  danger: brandColors.red,
+  active: brandColors.red,
+  warning: "#FFD41E",
+  cardBg: "#FFFFFF",
+  cardSelected: "#FFFB8F",
+  cardSelectedHover: "rgba(240, 244, 247, 0.6)",
+  menuSelected: "rgba(240, 244, 247, 1)",
+  menuSelectedHover: "rgba(240, 244, 247, 1)",
+  menuBg1: "#132331",
+  menuBg2: "rgba(255, 255, 255, 0.05)",
+  menuBg3: "rgba(255, 255, 255, 0.08)",
+  infoBox: "rgba(255, 212, 0, 0.2)",
+  errorBg: "rgba(255, 241, 240, 1)",
+  timelineCard: "#FCE07D",
+  transparent,
+  shades,
+  lights,
+  separators: inversedSeparators,
+  inversedSeparators: separators,
+} as const;
+
+export function getLightColors(): typeof lightColors {
+  if (process.env.NODE_ENV !== "test") {
+    throw new Error("Only for test purpose");
+  }
+  return lightColors;
+}
+
+export function getDarkColors(): typeof darkColors {
+  if (process.env.NODE_ENV !== "test") {
+    throw new Error("Only for test purpose");
+  }
+  return darkColors;
+}
+
+export function getOldColors(): typeof oldColors {
+  if (process.env.NODE_ENV !== "test") {
+    throw new Error("Only for test purpose");
+  }
+  return oldColors;
+}
+
+const getDefaultTheme = () => {
+  if (typeof URLSearchParams !== "undefined" && typeof document !== "undefined") {
+    let theme = null;
+    try {
+      const flagsValue = localStorage.getItem("persist:flags");
+      const local = flagsValue ? JSON.parse(flagsValue) : {};
+      theme = local["not-light-theme"] ? null : "light";
+    } catch (e) {
+      // sl
+    }
+    return new URLSearchParams(document.location.search).get("theme") || theme || "old";
+  }
+  return "old";
+};
+
+type Mode = "dark" | "light" | "old";
+
+export function getThemeValue<T>(mode: Mode, values: Record<Mode, T>): T {
+  return values[mode];
+}
+
+function getTypeColors(themeColor: string) {
+  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");
+  return {
+    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).luminance(0.85).hex(),
+    focus: chroma(color).alpha(0.25).css(),
+    separator: chroma(color).alpha(0.3).css(),
+  };
+}
+
+type DesignColor = typeof darkColors | typeof lightColors | typeof oldColors;
+
+export type ThemeColors = ReturnType<typeof getTypeColors> & DesignColor;
+
+const colorsByTheme: Record<string, DesignColor> = {
+  dark: darkColors,
+  light: lightColors,
+  old: oldColors,
+};
+
+export const getThemeColors = _.memoize((themeColor: string, theme: string = getDefaultTheme()): ThemeColors => {
+  const colors = colorsByTheme[theme];
+  return {
+    ...getTypeColors(themeColor),
+    ...colors,
+  };
+});
+
+export const getTextColor = (color: string): string => {
+  return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
+};
+
+export const getBrightenColor = (color: string): string => {
+  return makeChromaColor(color).brighten(0.15).hex();
+};
+
+export const getLinkedHighlightBackgroundColor = (color: string): string => {
+  return makeChromaColor(color).luminance(0.85).hex();
+};
+
+export const cardTypeColors = [
+  "#D40915",
+  "#E72065",
+  "#9C2BAF",
+  "#673DB6",
+  "#3E53B4",
+  "#2978FB",
+  "#199EE3",
+  "#1FBED3",
+  "#159789",
+  "#4FAF54",
+  "#8EC351",
+  "#FBA32F",
+  "#FC551F",
+  "#B04E31",
+  "#6A849B",
+  "#4A4A4A",
+] as const;
+
+export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
+
+export const colors = {
+  ...getTypeColors(brandColors.green),
+  brandColors,
+  stateColors,
+  textColor: "#2A3844",
+  placeholderTextColor: "#65788B",
+  disabledTextColor: shades.regular,
+  inversedTextColor: "#FFFFFF",
+  disabledInversedTextColor: lights.light,
+  linkColor: brandColors.blue,
+  codeColor: "#F24461",
+  codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
+  danger: brandColors.red,
+  active: brandColors.red,
+  warning: "#FFD41E",
+  cardBg: "#FFFFFF",
+  cardSelected: "#FFFB8F",
+  cardSelectedHover: "rgba(240, 244, 247, 0.6)",
+  menuSelected: "rgba(240, 244, 247, 1)",
+  menuSelectedHover: "rgba(240, 244, 247, 1)",
+  unitBg: "rgba(220, 224, 228, 0.33)",
+  menuBg1: "#132331",
+  menuBg2: "rgba(255, 255, 255, 0.075)",
+  menuBg3: "rgba(81, 182, 157, 0.2)",
+  infoBox: "rgba(255, 212, 0, 0.2)",
+  modalBg: "rgba(26, 42, 94, 0.3)",
+  errorBg: "rgba(255, 241, 240, 1)",
+  timelineCard: "#FCE07D",
+  timelineScaleSelectBorderColor: chroma("#FFFFFF").alpha(opacity.regular).css(),
+  transparent,
+  shades,
+  lights,
+} 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,
+  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,
+  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.225,
+  nowrap: 1,
+} as const;
+
+export const tooltipDelay = {
+  enter: 0.4,
+  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 = {
+  light: `0 1px 3px ${shades.hairline}`,
+  lightReverted: `0 -1px 3px ${shades.hairline}`,
+  border: `0 0 0 1px ${shades.thin}`,
+  inversedBorder: `0 0 0 1px ${lights.thin}`,
+  cardRegular: "0 0 0 1px rgba(17, 33, 58, .08), 0 4px 4px -4px rgba(17, 33, 58, .40)",
+  cardHover: "0 0 0 1px rgba(17, 33, 58, .1), 0 4px 8px -4px rgba(17, 33, 58, .68)",
+  dragging: "0 0 0 1px rgba(17, 33, 58, .08), 0 4px 4px -4px rgba(17, 33, 58, .40)",
+  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.4, 0.5, 0.6],
+    saturation: [0.6, 0.7, 0.8, 0.9, 1],
+  });
+  return colorHash.hex(name);
+});
+
+export const themeVars = Object.keys(getThemeColors("#FFFFFF")).reduce((vars, key) => {
+  if (key === "opacity") {
+    vars[key] = Object.fromEntries(
+      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--fibery-opacity-${opacityKey})`])
+    );
+  } else if (key === "stateColors") {
+    vars[key] = Object.fromEntries(
+      Object.keys(stateColors).map((stateColorKey) => [stateColorKey, `var(--fibery-state-colors-${stateColorKey})`])
+    );
+  } else if (key === "brandColors") {
+    vars[key] = Object.fromEntries(
+      Object.keys(brandColors).map((brandColorKey) => [brandColorKey, `var(--fibery-brand-colors-${brandColorKey})`])
+    );
+  } else if (key === "shades") {
+    vars[key] = Object.fromEntries(
+      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--fibery-shades-${shadeKey})`])
+    );
+  } else if (key === "lights") {
+    vars[key] = Object.fromEntries(
+      Object.keys(lights).map((lightKey) => [lightKey, `var(--fibery-lights-${lightKey})`])
+    );
+  } else if (key === "separators") {
+    vars[key] = Object.fromEntries(
+      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--fibery-separator-${separatorKey})`])
+    );
+  } else if (key === "inversedSeparators") {
+    vars[key] = Object.fromEntries(
+      Object.keys(inversedSeparators).map((separatorKey) => [
+        separatorKey,
+        `var(--fibery-inversed-separator-${separatorKey})`,
+      ])
+    );
+  } else {
+    vars[key] = `var(--fibery-color-${key})`;
+  }
+  return vars;
+}, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;
+
+export const createInlineTheme = (theme: ThemeColors) => createInlineStyles<ThemeColors>(theme);
+
+export const textStyles = {
+  heading1: {
+    fontFamily,
+    fontSize: typeSizes[0],
+    letterSpacing: "-0.003em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.bold,
+    color: themeVars.textColor,
+  },
+  heading2: {
+    fontFamily,
+    fontSize: typeSizes[1],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.bold,
+    color: themeVars.textColor,
+  },
+  heading3: {
+    fontFamily,
+    fontSize: typeSizes[2],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.bold,
+    color: themeVars.textColor,
+  },
+  heading4: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.bold,
+    color: themeVars.textColor,
+  },
+  heading5: {
+    fontFamily,
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.bold,
+    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: "Consolas, Menlo, Courier, monospace",
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+  },
+  fake: {
+    fontFamily,
+    fontSize: typeSizes[7],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: colors.shades.light,
+  },
+  link: {
+    color: themeVars.linkColor,
+    borderBottom: themeVars.linkBorder,
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: `border ${transition}`,
+  },
+  inversedLink: {
+    color: colors.inversedTextColor,
+    cursor: "pointer",
+    textDecoration: "underline",
+    textDecorationColor: lights.light,
+  },
+  note: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    backgroundColor: colors.timelineCard,
+    border: `1px solid ${colors.timelineCard}`,
+    borderRadius: radius,
+  },
+  important: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    border: `1px solid ${colors.active}`,
+    borderRadius: radius,
+  },
+} as const;