@fibery/ui-kit 1.0.4 → 1.1.0

package/src/designSystem.ts

@@ -1,7 +1,22 @@
 /* eslint-disable max-lines */
 import chroma from "chroma-js";
+import {ThemeMode} from "./theme-settings";
 import ColorHash from "color-hash";
-import {blackA, indigo, indigoDark, red, redDark, sage, slate, slateDark, whiteA, yellow, yellowDark} from "./Pallete";
+import {
+  blackA,
+  indigo,
+  indigoDark,
+  red,
+  blue,
+  blueDark,
+  redDark,
+  sage,
+  slate,
+  slateDark,
+  whiteA,
+  yellow,
+  yellowDark,
+} from "./Pallete";
 import _ from "lodash";
 import {createInlineTheme as createInlineStyles} from "./create-inline-theme";
 
@@ -114,18 +129,22 @@ const lightColors = {
   pageBg: whiteA.whiteA0,
   pageContentBg: whiteA.whiteA0,
   sidebarBg: whiteA.whiteA0,
-  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(sage.sage2).opacity80}`,
+  sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
   menuBg: sage.sage3,
   menuFooterColor: getOpacities(whiteA.whiteA0).opacity20,
   menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity40,
   textColor: slateDark.slate3,
+  textSelectionColor: getOpacities(blue.blue10).opacity20,
   accentTextColor: slate.slate10,
   disabledTextColor: slate.slate9,
-  inversedTextColor: slateDark.slate3,
+  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: makeChromaColor("#F24461").luminance(0.92).css(),
+  codeBlockBgColor: sage.sage3,
   entityNodeColor: slateDark.slate3,
   entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
   entityNodeHoverColor: slateDark.slate7,
@@ -135,11 +154,14 @@ const lightColors = {
   shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
   inputBgColor: whiteA.whiteA0,
   inputDisabledBgColor: slate.slate2,
+  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.slate6).opacity100}`,
   inputPlaceholderTextColor: slate.slate10,
   buttonColor: slate.slate10,
+  buttonPrimaryTextColor: slate.slate2,
+  checkboxColor: slate.slate10,
   menuTextColor: slate.slate12,
   selectedMenuTextColor: slate.slate2,
   actionMenuBg: whiteA.whiteA0,
@@ -151,6 +173,12 @@ const lightColors = {
   actionMenuInnerHover: slate.slate3,
   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,
   iconColor: slate.slate10,
   menuIconColor: getOpacities(slate.slate10).opacity90,
@@ -164,8 +192,8 @@ const lightColors = {
   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
+  entityCardShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
+    getOpacities(slate.slate10).opacity20
   }`,
   unitBg: slate.slate3,
   unitBgHover: slate.slate4,
@@ -178,8 +206,10 @@ const lightColors = {
   commentColor: getOpacities(yellow.yellow6).opacity60,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
-  warningBgColor: yellow.yellow6,
+  errorBgColor: getOpacities(red.red9).opacity60,
+  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 ${
@@ -189,23 +219,26 @@ const lightColors = {
     getOpacities(slate.slate10).opacity30
   }`,
   modalBg: getOpacities(slate.slate11).opacity20,
+  modalShadow: `${getOpacities(slate.slate10).opacity10} 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,
   //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,
@@ -215,6 +248,22 @@ const lightColors = {
   inversedSeparators,
 } as const;
 
+const darkMenu = {
+  menuBg: slateDark.slate2,
+  menuFooterColor: getOpacities(slateDark.slate3).opacity20,
+  menuFooterHoverColor: getOpacities(slateDark.slate3).opacity40,
+  menuTextColor: slate.slate8,
+  menuIconColor: getOpacities(slate.slate10).opacity90,
+  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
+  selectedMenuTextColor: slate.slate2,
+};
+
+const light2Colors = {
+  ...lightColors,
+  ...darkMenu,
+  mode: "light2",
+} as const;
+
 const darkColors = {
   mode: "dark",
   brandColors,
@@ -227,19 +276,20 @@ const darkColors = {
   panelContentBg: slateDark.slate2,
   pageBg: slateDark.slate1,
   pageContentBg: slateDark.slate2,
-  sidebarBg: slateDark.slate2,
+  sidebarBg: slateDark.slate3,
   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,
+  textSelectionColor: getOpacities(blueDark.blue10).opacity40,
   accentTextColor: slate.slate10,
   disabledTextColor: slateDark.slate9,
-  inversedTextColor: slate.slate6,
+  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: makeChromaColor(redDark.red3).luminance(0.05).darken(0.5).css(),
+  codeBlockBgColor: slateDark.slate3,
   entityNodeColor: slate.slate8,
   entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
   entityNodeHoverColor: slate.slate7,
@@ -249,13 +299,14 @@ const darkColors = {
   shortcutBorderColor: `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
   inputBgColor: slateDark.slate2,
   inputDisabledBgColor: slateDark.slate3,
+  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).opacity70}`,
   inputPlaceholderTextColor: slate.slate10,
-  buttonColor: slate.slate10,
-  menuTextColor: slate.slate8,
-  selectedMenuTextColor: slate.slate2,
+  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 ${
@@ -265,10 +316,14 @@ const darkColors = {
   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,
   iconColor: slate.slate9,
-  menuIconColor: getOpacities(slate.slate10).opacity90,
-  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
   appIconColor: getOpacities(slate.slate2).opacity70,
   mentionBgColor: slateDark.slate5,
   entityCardBgColor: slateDark.slate4,
@@ -278,8 +333,8 @@ const darkColors = {
   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
+  entityCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
+    getOpacities(slateDark.slate2).opacity20
   }`,
   unitBg: slateDark.slate6,
   unitBgHover: slateDark.slate7,
@@ -292,8 +347,10 @@ const darkColors = {
   commentColor: getOpacities(yellowDark.yellow9).opacity40,
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
-  warningBgColor: getOpacities(yellowDark.yellow9).opacity40,
+  errorBgColor: getOpacities(redDark.red9).opacity60,
+  warningBgColor: getOpacities(yellowDark.yellow8).opacity60,
   warningButtonColor: yellowDark.yellow11,
+  infoBox: getOpacities(yellowDark.yellow8).opacity40,
   appCardBgColor: slateDark.slate2,
   appCardHoverColor: slateDark.slate2,
   appCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity50}, 0 2px 4px -4px ${
@@ -302,132 +359,25 @@ const darkColors = {
   appCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity60}, 0 6px 8px -4px ${
     getOpacities(slateDark.slate1).opacity100
   }`,
-  modalBg: getOpacities(slateDark.slate8).opacity20,
+  modalBg: getOpacities(slateDark.slate2).opacity50,
+  modalShadow: `${getOpacities(slateDark.slate1).opacity40} 0px 16px 70px`,
+  modalContentBg: slateDark.slate3,
+  progressIconBg: getOpacities(slate.slate1).opacity10,
+  progressIconFill: getOpacities(slate.slate1).opacity60,
+  progressIconDoneBg: getOpacities(slate.slate1).opacity10,
+  progressIconDoneFill: getOpacities(slate.slate1).opacity80,
+  instrumentsMenuBg: getOpacities(slateDark.slate4).opacity95,
+  instrumentsMenuShadow: `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
+  selectedColorBorder: getOpacities(slate.slate6).opacity20,
   //end
   placeholderTextColor: "#65788B",
   disabledInversedTextColor: lights.light,
-  codeColor: "#F24461",
-  codeBgColor: makeChromaColor("#F24461").luminance(0.88).desaturate(0.1).css(),
-  danger: brandColors.red,
+  danger: redDark.red9,
   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,
@@ -435,6 +385,7 @@ const oldColors = {
   lights,
   separators: inversedSeparators,
   inversedSeparators: separators,
+  ...darkMenu,
 } as const;
 
 export function getLightColors(): typeof lightColors {
@@ -451,35 +402,25 @@ export function getDarkColors(): typeof darkColors {
   return darkColors;
 }
 
-export function getOldColors(): typeof oldColors {
+export function getLight2Colors(): typeof light2Colors {
   if (process.env.NODE_ENV !== "test") {
     throw new Error("Only for test purpose");
   }
-  return oldColors;
+  return light2Colors;
 }
 
-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";
+const getDefaultTheme = (): never => {
+  throw Error("Please specify theme mode");
 };
 
-type Mode = "dark" | "light" | "old";
-
-export function getThemeValue<T>(mode: Mode, values: Record<Mode, T>): T {
-  return values[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) {
+function getTypeColors(themeColor: string, theme: ThemeMode) {
   let color;
   // switch to chroma.valid once we start using 2.0.1
   try {
@@ -489,7 +430,21 @@ function getTypeColors(themeColor: string) {
     color = brandColors.green;
   }
   const boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
-  return {
+
+  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.6).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),
@@ -497,29 +452,43 @@ function getTypeColors(themeColor: string) {
     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(),
+    detailsBg: chroma(color).alpha(0.03).luminance(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 oldColors;
+type DesignColor = typeof darkColors | typeof lightColors | typeof light2Colors;
 
 export type ThemeColors = ReturnType<typeof getTypeColors> & DesignColor;
 
 const colorsByTheme: Record<string, DesignColor> = {
   dark: darkColors,
   light: lightColors,
-  old: oldColors,
+  light2: light2Colors,
 };
 
-export const getThemeColors = _.memoize((themeColor: string, theme: string = getDefaultTheme()): ThemeColors => {
-  const colors = colorsByTheme[theme];
-  return {
-    ...getTypeColors(themeColor),
-    ...colors,
-  };
-});
+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 = (color: string): string => {
   return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
@@ -529,8 +498,24 @@ 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 getLinkedHighlightBackgroundColor = (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();
+  }
+};
+
+export const getEnumBackgroundColor = (themeMode: ThemeMode, color: string) => {
+  switch (themeMode) {
+    case "dark":
+      return makeChromaColor(color).darken(2.2).alpha(0.5).saturate(1).css();
+    default:
+      return color;
+  }
 };
 
 export const cardTypeColors = [
@@ -555,7 +540,7 @@ export const cardTypeColors = [
 export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
 
 export const colors = {
-  ...getTypeColors(brandColors.green),
+  ...getTypeColors(brandColors.green, "light"),
   brandColors,
   stateColors,
   textColor: "#2A3844",
@@ -564,22 +549,14 @@ export const colors = {
   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(),
@@ -672,13 +649,8 @@ 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;
 
@@ -707,7 +679,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
   return colorHash.hex(name);
 });
 
-export const themeVars = Object.keys(getThemeColors("#FFFFFF")).reduce((vars, key) => {
+export const themeVars = Object.keys(getThemeColors("#FFFFFF", "light")).reduce((vars, key) => {
   if (key === "opacity") {
     vars[key] = Object.fromEntries(
       Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--fibery-opacity-${opacityKey})`])

package/src/error-alert.tsx

@@ -0,0 +1,55 @@
+import {css} from "@linaria/core";
+import {colors, getOpacities, layout, radius, space, textStyles} from "./designSystem";
+import {Button} from "./Button";
+import CloseIcon from "./icons/react/Close";
+
+const errorAlert = css`
+  border: 1px solid ${colors.stateColors.error};
+  background-color: ${colors.errorBg};
+  padding: 0 ${space.l}px;
+  min-height: ${layout.itemHeight}px;
+  border-radius: ${radius}px;
+  display: flex;
+  gap: ${space.s}px;
+  align-items: center;
+`;
+
+const messageStyle = css`
+  ${textStyles.heading5}
+`;
+
+const descriptionStyle = css`
+  ${textStyles.regular}
+`;
+
+const buttonColor = getOpacities(colors.placeholderTextColor).overlay;
+
+export function ErrorAlert({
+  message,
+  description,
+  closable,
+  onClose,
+}: {
+  message: string;
+  description?: string;
+  closable?: boolean;
+  onClose?: () => void;
+}): JSX.Element {
+  return (
+    <div className={errorAlert}>
+      <div
+        className={css`
+          flex-grow: 2;
+        `}
+      >
+        <div className={messageStyle}>{message}</div>
+        {description ? <div className={descriptionStyle}>{description}</div> : null}
+      </div>
+      {closable && onClose ? (
+        <div>
+          <Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={26} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/icons/Icon.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {colors, iconSize as defaultIconSize, radius, viewBoxSize} from "../designSystem";
+import {themeVars, iconSize as defaultIconSize, radius, viewBoxSize} from "../designSystem";
 import {generateIconFromAst} from "./generateIconFromAst";
 import {IconProps} from "./types";
 import {getShiftStyle} from "./getShiftStyle";
@@ -37,7 +37,7 @@ export function Icon({
           style={getShiftStyle({containerSize, elementSize: iconSize})}
           className={iconStyle}
         >
-          <g style={color === null ? {} : {fill: color || colors.textColor}}>{children}</g>
+          <g style={color === null ? {} : {fill: color || themeVars.textColor}}>{children}</g>
         </svg>
       ) : (
         generateIconFromAst(icon.icon.children[0], `svg-${icon.name}`, {

package/src/icons/ast/AppStoreOneColor.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AppStoreOneColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.73 8.229v4.488a.9.9 0 0 1-.9.9h-4.5a.9.9 0 1 1 0-1.8h2.328L5.794 6.954A.9.9 0 0 1 7.067 5.68l4.863 4.863V8.23a.9.9 0 0 1 1.8 0Z","fill":"#51B69D"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M1.03 5.7c0-4.113.588-4.7 4.7-4.7 4.113 0 4.7.587 4.7 4.7 0 .43-.006.821-.022 1.177l-1.59-1.59c-.01-.718-.046-1.24-.12-1.631-.084-.45-.197-.602-.259-.665-.062-.062-.215-.174-.664-.26-.462-.086-1.108-.121-2.045-.121-.937 0-1.582.035-2.044.122-.45.085-.602.197-.665.26-.062.062-.174.214-.259.664-.087.462-.122 1.107-.122 2.044s.035 1.582.122 2.044c.085.45.197.602.26.665.062.062.214.174.664.26.408.076.959.112 1.727.12l1.584 1.584c-.38.02-.8.027-1.267.027-4.113 0-4.7-.587-4.7-4.7ZM13.56 18.295c-3.555 0-4.48-.245-4.663-3.022h1.619c.018.213.046.203.076.366.085.45.197.602.26.665.062.062.214.174.664.259.462.087 1.108.122 2.045.122.937 0 1.582-.035 2.044-.122.45-.085.602-.197.664-.26.063-.062.175-.214.26-.664.087-.462.122-1.107.122-2.044s-.035-1.583-.122-2.045c-.085-.45-.197-.602-.26-.664-.062-.062-.214-.175-.664-.26-.163-.03-.157-.035-.37-.054V8.953c2.778.184 3.026 1.085 3.026 4.642 0 4.112-.588 4.7-4.7 4.7Z","fill":"#51B69D"},"children":[]}]}],"metadata":""}]},"name":"app-store-one-color"};
+const AppStoreOneColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fill":"#51B69D"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.73 8.229v4.488a.9.9 0 0 1-.9.9h-4.5a.9.9 0 1 1 0-1.8h2.328L5.794 6.954A.9.9 0 0 1 7.067 5.68l4.863 4.863V8.23a.9.9 0 0 1 1.8 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M1.03 5.7c0-4.113.588-4.7 4.7-4.7 4.113 0 4.7.587 4.7 4.7 0 .43-.006.821-.022 1.177l-1.59-1.59c-.01-.718-.046-1.24-.12-1.631-.084-.45-.197-.602-.259-.665-.062-.062-.215-.174-.664-.26-.462-.086-1.108-.121-2.045-.121-.937 0-1.582.035-2.044.122-.45.085-.602.197-.665.26-.062.062-.174.214-.259.664-.087.462-.122 1.107-.122 2.044s.035 1.582.122 2.044c.085.45.197.602.26.665.062.062.214.174.664.26.408.076.959.112 1.727.12l1.584 1.584c-.38.02-.8.027-1.267.027-4.113 0-4.7-.587-4.7-4.7ZM13.56 18.295c-3.555 0-4.48-.245-4.663-3.022h1.619c.018.213.046.203.076.366.085.45.197.602.26.665.062.062.214.174.664.259.462.087 1.108.122 2.045.122.937 0 1.582-.035 2.044-.122.45-.085.602-.197.664-.26.063-.062.175-.214.26-.664.087-.462.122-1.107.122-2.044s-.035-1.583-.122-2.045c-.085-.45-.197-.602-.26-.664-.062-.062-.214-.175-.664-.26-.163-.03-.157-.035-.37-.054V8.953c2.778.184 3.026 1.085 3.026 4.642 0 4.112-.588 4.7-4.7 4.7Z"},"children":[]}]}],"metadata":""}]},"name":"app-store-one-color"};
 
 export default AppStoreOneColor;