@fibery/ui-kit 1.0.6 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -35,13 +35,14 @@
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.9.3",
-    "@radix-ui/react-dropdown-menu": "0.1.1",
+    "@radix-ui/react-dropdown-menu": "1.0.0",
     "antd": "4.18.8",
     "chroma-js": "2.1.2",
     "classnames": "2.3.1",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "emoji-mart": "3.0.1",
+    "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
     "moment": "2.20.1",
@@ -63,7 +64,7 @@
   },
   "devDependencies": {
     "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "7.1.0",
+    "@fibery/eslint-config": "8.1.0",
     "@fibery/text-editor": "1.0.0",
     "@linaria/babel-preset": "3.0.0-beta.15",
     "@types/chroma-js": "2.1.3",

package/src/Button.d.ts

@@ -21,4 +21,6 @@ export const ActionsButton: FunctionComponent<{
   color?: string;
   onClick?: Props["onClick"];
 }>;
-export const ActionsButtonCompact: FunctionComponent<{inverted?: boolean; onClick?: Props["onClick"]}>;
+export const ActionsButtonCompact: FunctionComponent<
+  {inverted?: boolean} & Omit<Props, "color" | "borderless" | "Icon" | "size">
+>;

package/src/Button.js

@@ -87,9 +87,6 @@ const getMainColor = ({color, dangerous, theme}) => {
   if (!theme) {
     return colors.primary;
   }
-  if (theme.mode === "old") {
-    return theme.primary;
-  }
   return theme.buttonColor;
 };
 
@@ -347,15 +344,16 @@ export function ActionsButton({onClick, label = ``, disabled}) {
   return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
 }
 
-export function ActionsButtonCompact({inverted, onClick}) {
+export const ActionsButtonCompact = forwardRef(({inverted, ...rest}, ref) => {
   const theme = useTheme();
   return (
     <Button
+      ref={ref}
       size={":button-size/small"}
       Icon={MoreCompactIcon}
-      onClick={onClick}
       color={inverted ? colors.inversedTextColor : theme.buttonColor}
       borderless
+      {...rest}
     />
   );
-}
+});

package/src/Pallete.ts

@@ -11,7 +11,7 @@ export const slate = {
   slate10: "hsl(205, 9.0%, 47.3%)",
   slate11: "hsl(204, 14.0%, 37.3%)",
   slate12: "hsl(200, 7.0%, 8.8%)",
-};
+} as const;
 
 export const slateDark = {
   slate1: "hsl(200, 7.0%, 8.8%)",
@@ -26,7 +26,7 @@ export const slateDark = {
   slate10: "hsl(206, 5.2%, 49.5%)",
   slate11: "hsl(206, 6.0%, 63.0%)",
   slate12: "hsl(210, 6.0%, 93.0%)",
-};
+} as const;
 
 export const sage = {
   sage1: "hsl(155, 30.0%, 98.8%)",
@@ -41,7 +41,7 @@ export const sage = {
   sage10: "hsl(154, 2.8%, 51.7%)",
   sage11: "hsl(155, 3.0%, 43.0%)",
   sage12: "hsl(155, 24.0%, 9.0%)",
-};
+} as const;
 
 export const sageDark = {
   sage1: "hsl(160, 7.0%, 8.4%)",
@@ -56,7 +56,7 @@ export const sageDark = {
   sage10: "hsl(153, 4.8%, 48.2%)",
   sage11: "hsl(155, 5.0%, 61.8%)",
   sage12: "hsl(155, 6.0%, 93.0%)",
-};
+} as const;
 
 export const teal = {
   teal1: "hsl(165, 60.0%, 98.8%)",
@@ -71,7 +71,7 @@ export const teal = {
   teal10: "hsl(173, 83.4%, 32.5%)",
   teal11: "hsl(174, 90.0%, 25.2%)",
   teal12: "hsl(170, 50.0%, 12.5%)",
-};
+} as const;
 
 export const tealDark = {
   teal1: "hsl(168, 48.0%, 6.5%)",
@@ -86,7 +86,7 @@ export const tealDark = {
   teal10: "hsl(174, 83.9%, 38.2%)",
   teal11: "hsl(174, 90.0%, 40.7%)",
   teal12: "hsl(166, 73.0%, 93.1%)",
-};
+} as const;
 
 export const indigo = {
   indigo1: "hsl(225, 60.0%, 99.4%)",
@@ -101,7 +101,7 @@ export const indigo = {
   indigo10: "hsl(226, 58.6%, 51.3%)",
   indigo11: "hsl(226, 55.0%, 45.0%)",
   indigo12: "hsl(226, 62.0%, 17.0%)",
-};
+} as const;
 
 export const indigoDark = {
   indigo1: "hsl(229, 24.0%, 10.0%)",
@@ -116,7 +116,7 @@ export const indigoDark = {
   indigo10: "hsl(227, 75.2%, 61.6%)",
   indigo11: "hsl(228, 100%, 75.9%)",
   indigo12: "hsl(226, 83.0%, 96.3%)",
-};
+} as const;
 
 export const red = {
   red1: "hsl(359, 100%, 99.4%)",
@@ -131,7 +131,7 @@ export const red = {
   red10: "hsl(358, 69.4%, 55.2%)",
   red11: "hsl(358, 65.0%, 48.7%)",
   red12: "hsl(354, 50.0%, 14.6%)",
-};
+} as const;
 
 export const redDark = {
   red1: "hsl(353, 23.0%, 9.8%)",
@@ -146,7 +146,7 @@ export const redDark = {
   red10: "hsl(358, 85.3%, 64.0%)",
   red11: "hsl(358, 100%, 69.5%)",
   red12: "hsl(351, 89.0%, 96.0%)",
-};
+} as const;
 
 export const blue = {
   blue1: "hsl(206, 100%, 99.2%)",
@@ -161,7 +161,7 @@ export const blue = {
   blue10: "hsl(208, 100%, 47.3%)",
   blue11: "hsl(211, 100%, 43.2%)",
   blue12: "hsl(211, 100%, 15.0%)",
-};
+} as const;
 
 export const blueDark = {
   blue1: "hsl(212, 35.0%, 9.2%)",
@@ -176,7 +176,7 @@ export const blueDark = {
   blue10: "hsl(209, 100%, 60.6%)",
   blue11: "hsl(210, 100%, 66.1%)",
   blue12: "hsl(206, 98.0%, 95.8%)",
-};
+} as const;
 
 export const yellow = {
   yellow1: "hsl(60, 54.0%, 98.5%)",
@@ -191,7 +191,7 @@ export const yellow = {
   yellow10: "hsl(50, 100%, 48.5%)",
   yellow11: "hsl(42, 100%, 29.0%)",
   yellow12: "hsl(40, 55.0%, 13.5%)",
-};
+} as const;
 
 export const yellowDark = {
   yellow1: "hsl(45, 100%, 5.5%)",
@@ -206,7 +206,7 @@ export const yellowDark = {
   yellow10: "hsl(54, 100%, 68.0%)",
   yellow11: "hsl(48, 100%, 47.0%)",
   yellow12: "hsl(53, 100%, 91.0%)",
-};
+} as const;
 
 export const blackA = {
   blackA0: "#000000",
@@ -222,7 +222,7 @@ export const blackA = {
   blackA10: "hsla(0, 0%, 0%, 0.478)",
   blackA11: "hsla(0, 0%, 0%, 0.565)",
   blackA12: "hsla(0, 0%, 0%, 0.910)",
-};
+} as const;
 
 export const whiteA = {
   whiteA0: "#FFFFFF",
@@ -238,4 +238,4 @@ export const whiteA = {
   whiteA10: "hsla(0, 0%, 100%, 0.446)",
   whiteA11: "hsla(0, 0%, 100%, 0.592)",
   whiteA12: "hsla(0, 0%, 100%, 0.923)",
-};
+} as const;

package/src/Select/components.tsx

@@ -5,8 +5,9 @@ import RemoveIcon from "../icons/react/Remove";
 import {OptionProps, DropdownIndicatorProps, ClearIndicatorProps, MultiValueRemoveProps, GroupBase} from "react-select";
 import {Button} from "../Button";
 import {themeVars, space} from "../designSystem";
-import ArrowBottom from "../icons/react/ArrowBottom";
-import {dropdownIndicatorSize, expanderStyle} from "./styles";
+import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
+import {expanderStyle, expanderExpandedStyle} from "./styles";
+import cn from "classnames";
 
 export const Option = <
   TOption,
@@ -28,13 +29,8 @@ export function DropdownIndicator<
   Group extends GroupBase<TOption> = GroupBase<TOption>
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
   return (
-    <div
-      className={expanderStyle}
-      style={{
-        transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-      }}
-    >
-      <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
+    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
+      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
     </div>
   );
 }

package/src/Select/styles.ts

@@ -4,15 +4,14 @@ import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select"
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
 
-export const dropdownIndicatorSize = 16;
-
 export const expanderStyle = css`
   ${{
     transition: `transform ${transition}`,
-    width: dropdownIndicatorSize,
-    height: dropdownIndicatorSize,
   }}
 `;
+export const expanderExpandedStyle = css`
+  transform: rotate(180deg);
+`;
 
 function createControlStyle({
   isSingleLine,
@@ -128,6 +127,7 @@ export const componentsStyles: StylesConfig = {
   }),
   menu: (provided) => ({
     ...provided,
+    color: themeVars.disabledTextColor,
     zIndex: 1050,
     backgroundColor: themeVars.actionMenuInnerBg,
     boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,

package/src/ThemeProvider.tsx

@@ -1,67 +1,53 @@
-import {createContext, ReactNode, useContext, useEffect, useMemo, useState} from "react";
+import invariant from "invariant";
+import {createContext, ReactNode, useContext, useEffect, useState} from "react";
 import {colors, createInlineTheme, getThemeColors, ThemeColors} from "./designSystem";
 import {
+  subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
   subscribeOnThemePreferenceChange,
+  ThemeMenuPreference,
   ThemeMode,
   ThemePreference,
 } from "./theme-settings";
 
-const FiberyThemeModeContext = createContext<{themeMode: ThemeMode; themePreference: ThemePreference}>({
-  themeMode: "light",
-  themePreference: "auto",
-});
+const FiberyThemePreferenceContext = createContext<ThemePreference | null>(null);
+const FiberyThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
+
 const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue, "light"));
 
 function ThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
   return <FiberyThemeContext.Provider value={theme}>{children}</FiberyThemeContext.Provider>;
 }
 
-function ThemeModeProvider({
-  oldTheming = true,
-  initialThemeMode,
-  initialPreference,
-  children,
-}: {
-  oldTheming: boolean;
-  initialThemeMode: ThemeMode;
-  initialPreference: ThemePreference;
-  children: ReactNode;
-}): JSX.Element {
-  const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
-  const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
-  useEffect(() => {
-    if (!oldTheming) {
-      const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
-      const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
-      return () => {
-        unsubscribeMode();
-        unsubscribePreference();
-      };
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [oldTheming]);
-  const value = useMemo(
-    () => ({
-      themeMode,
-      themePreference,
-    }),
-    [themeMode, themePreference]
-  );
-  return <FiberyThemeModeContext.Provider value={value}>{children}</FiberyThemeModeContext.Provider>;
-}
-
 export function useTheme(): ThemeColors {
   return useContext(FiberyThemeContext);
 }
 
 export function useThemeMode(): ThemeMode {
-  return useContext(FiberyThemeModeContext).themeMode;
+  const theme = useTheme();
+  return theme.mode;
 }
 
 export function useThemePreference(): ThemePreference {
-  return useContext(FiberyThemeModeContext).themePreference;
+  const themePreference = useContext(FiberyThemePreferenceContext);
+
+  invariant(
+    themePreference,
+    "could not find theme preference context value; please ensure the component is wrapped in a <FiberyThemePreferenceContext>"
+  );
+
+  return themePreference;
+}
+
+export function useThemeMenuPreference(): ThemeMenuPreference {
+  const themeMenuPreference = useContext(FiberyThemeMenuPreferenceContext);
+
+  invariant(
+    themeMenuPreference,
+    "could not find theme menu preference context value; please ensure the component is wrapped in a <FiberyThemeMenuPreferenceContext>"
+  );
+
+  return themeMenuPreference;
 }
 
 export function applyThemeToRoot(theme: ThemeColors) {
@@ -71,13 +57,64 @@ export function applyThemeToRoot(theme: ThemeColors) {
   });
 }
 
-export function RootThemeProvider({children}: {children: JSX.Element}): JSX.Element {
-  const themeMode = useThemeMode();
+export function RootThemeProvider({
+  initialThemeMode,
+  initialPreference,
+  initialMenuPreference,
+  children,
+}: {
+  initialThemeMode: ThemeMode;
+  initialPreference: ThemePreference;
+  initialMenuPreference: ThemeMenuPreference;
+  children: ReactNode;
+}): JSX.Element {
+  const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
+  const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
+  const [themeMenuPreference, setThemeMenuPreference] = useState<ThemeMenuPreference>(initialMenuPreference);
   const theme = getThemeColors(colors.brandColors.blue, themeMode);
+  useEffect(() => {
+    const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
+    const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
+    const unsubscribeMenuPreference = subscribeOnThemeMenuPreferenceChange(setThemeMenuPreference);
+    return () => {
+      unsubscribeMode();
+      unsubscribePreference();
+      unsubscribeMenuPreference();
+    };
+  }, []);
+  useEffect(() => {
+    const darkThemeClassName = "dark-theme";
+    const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";
+    const meta = document.querySelector('meta[name="color-scheme"]');
+    let colorScheme = "light";
+    const documentElement = document.documentElement;
+    documentElement.classList.remove(darkThemeClassName);
+    documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    if (themeMode === "dark") {
+      documentElement.classList.add(darkThemeClassName);
+      colorScheme = "dark";
+    } else if (themeMode === "light2") {
+      documentElement.classList.add(lightThemeAndDarkMenuClassName);
+    }
+
+    documentElement.style.colorScheme = colorScheme;
+    meta?.setAttribute("content", colorScheme);
+
+    return () => {
+      documentElement.classList.remove(darkThemeClassName);
+      documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    };
+  }, [themeMode]);
   useEffect(() => {
     applyThemeToRoot(theme);
   }, [theme]);
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <FiberyThemePreferenceContext.Provider value={themePreference}>
+      <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </FiberyThemeMenuPreferenceContext.Provider>
+    </FiberyThemePreferenceContext.Provider>
+  );
 }
 
 interface WithThemeModeProps {
@@ -100,4 +137,4 @@ export function withThemeMode<T extends WithThemeModeProps = WithThemeModeProps>
   return ComponentWithThemeMode;
 }
 
-export {ThemeProvider, ThemeModeProvider};
+export {ThemeProvider};

package/src/antd/styles.ts

@@ -32,15 +32,15 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   disabled: {
-    color: `${themeVars.accentTextColor}`,
+    color: `${themeVars.accentTextColor} !important`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: colors.transparent,
-    boxShadow: `${themeVars.inputBorderColor} !important`,
+    boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
     transition: `box-shadow ${transition}`,
     WebkitTextFillColor: "currentColor",
     cursor: "default",
     ":hover": {
-      boxShadow: `${themeVars.inputBorderColor}`,
+      boxShadow: `${themeVars.inputDisabledBorderColor}`,
     },
   },
 };

package/src/designSystem.ts

@@ -129,7 +129,7 @@ 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,
@@ -137,7 +137,7 @@ const lightColors = {
   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,
@@ -154,12 +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,
@@ -171,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,
@@ -184,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,
@@ -198,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 ${
@@ -209,6 +219,17 @@ 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,
@@ -218,7 +239,6 @@ const lightColors = {
   cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
-  infoBox: "rgba(255, 212, 0, 0.2)",
   errorBg: "rgba(255, 241, 240, 1)",
   timelineCard: "#FCE07D",
   transparent,
@@ -228,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,
@@ -240,16 +276,13 @@ 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,
@@ -266,14 +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: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
-  menuTextColor: slate.slate8,
-  selectedMenuTextColor: slate.slate2,
+  checkboxColor: slateDark.slate10,
   actionMenuBg: slateDark.slate4,
   actionMenuInnerBg: slateDark.slate5,
   actionMenuShadow: `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
@@ -283,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,
@@ -296,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,
@@ -310,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 ${
@@ -320,7 +359,16 @@ 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,
@@ -330,113 +378,6 @@ const darkColors = {
   cardBg: slateDark.slate6,
   cardSelected: slateDark.slate5,
   cardSelectedHover: slateDark.slate5,
-  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",
-  textSelectionColor: getOpacities(blue.blue10).opacity20,
-  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}`,
-  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,
-  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,
-  buttonPrimaryTextColor: slate.slate6,
-  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,
-  danger: brandColors.red,
-  active: brandColors.red,
-  warning: "#FFD41E",
-  cardBg: "#FFFFFF",
-  cardSelected: "#FFFB8F",
-  cardSelectedHover: "rgba(240, 244, 247, 0.6)",
-  infoBox: "rgba(255, 212, 0, 0.2)",
   errorBg: "rgba(255, 241, 240, 1)",
   timelineCard: "#FCE07D",
   transparent,
@@ -444,6 +385,7 @@ const oldColors = {
   lights,
   separators: inversedSeparators,
   inversedSeparators: separators,
+  ...darkMenu,
 } as const;
 
 export function getLightColors(): typeof lightColors {
@@ -460,19 +402,22 @@ 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 = (): never => {
   throw Error("Please specify theme mode");
 };
 
-export function getThemeValue<T>(theme: ThemeMode, values: Record<ThemeMode, T>): T {
-  return values[theme];
+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) {
@@ -486,19 +431,6 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
   }
   const boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
 
-  const oldTypeColors = {
-    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(),
-  };
-
   const lightTypeColors = {
     primary: color,
     opacity: getOpacities(color),
@@ -530,21 +462,21 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
       return lightTypeColors;
     case "dark":
       return darkTypeColors;
-    case "old":
-      return oldTypeColors;
+    case "light2":
+      return lightTypeColors;
     default:
-      return oldTypeColors;
+      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: (themeColor: string, theme: ThemeMode) => ThemeColors = _.memoize(
@@ -569,11 +501,20 @@ export const getBrightenColor = (color: string): string => {
 export const getLinkedHighlightBackgroundColor = (themeColors: ThemeColors, color: string): string => {
   switch (themeColors.mode) {
     case "dark":
-      return makeChromaColor(color).alpha(0.4).luminance(0.5).css("hsl");
+      return makeChromaColor(color).alpha(0.4).luminance(0.5).css();
     case "light":
-      return makeChromaColor(color).alpha(0.3).luminance(0.6).css("hsl");
+      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 makeChromaColor(color).alpha(0.3).luminance(0.6).css("hsl");
+      return color;
   }
 };
 
@@ -616,7 +557,6 @@ export const colors = {
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
   unitBg: "rgba(220, 224, 228, 0.33)",
   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(),
@@ -709,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;
 

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":{"fill":"hsl(205, 9.0%, 47.3%)"},"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"};
+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;

package/src/icons/ast/Email.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Email: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M4.74 16H15.4c1.32 0 2.1-.79 2.1-2.268V6.268C17.5 4.79 16.72 4 15.26 4H4.595C3.273 4 2.5 4.79 2.5 6.268v7.464C2.5 15.217 3.28 16 4.74 16Zm4.543-5.831L4.593 5.43c.054-.007.113-.007.173-.007h10.462c.066 0 .132 0 .191.014l-4.69 4.73c-.27.27-.488.385-.726.385-.23 0-.449-.121-.72-.384ZM3.867 6.47l3.468 3.49-3.468 3.51v-7Zm8.811 3.483 3.448-3.463v6.966l-3.448-3.503Zm-7.912 4.63a1.21 1.21 0 0 1-.225-.02l3.672-3.72.317.318c.49.492.965.702 1.473.702.515 0 .991-.21 1.473-.702l.317-.317 3.673 3.718c-.073.014-.152.02-.238.02H4.766Z"},"children":[]}],"metadata":""}]},"name":"email"};
+
+export default Email;

package/src/icons/ast/SidebarFields.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SidebarFields: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.237 7.492h-1.601a.516.516 0 0 1-.508-.5c0-.265.234-.492.508-.492h1.601a.51.51 0 0 1 .516.492c0 .266-.234.5-.516.5ZM15.237 9.586h-1.601a.516.516 0 0 1-.508-.5c0-.266.234-.492.508-.492h1.601a.51.51 0 0 1 .516.492c0 .266-.234.5-.516.5ZM13.636 11.672h1.601a.51.51 0 0 0 .516-.492.51.51 0 0 0-.516-.492h-1.601a.509.509 0 0 0-.508.492c0 .265.234.492.508.492Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.447 17H4.553C2.872 17 2 16.143 2 14.492V5.508C2 3.857 2.872 3 4.553 3h10.894C17.128 3 18 3.857 18 5.508v8.984C18 16.136 17.128 17 15.447 17ZM3.525 14.36c0 .75.397 1.127 1.121 1.127h6.233V4.513H4.646c-.724 0-1.12.37-1.12 1.119v8.729Zm12.95-8.728c0-.749-.405-1.12-1.121-1.12h-3.027v10.975h3.027c.716 0 1.12-.378 1.12-1.127V5.633Z"},"children":[]}],"metadata":""}]},"name":"sidebar-fields"};
+
+export default SidebarFields;

package/src/icons/ast/SidebarFieldsOpened.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SidebarFieldsOpened: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.553 17h10.894C17.128 17 18 16.136 18 14.492V5.508C18 3.857 17.128 3 15.447 3H4.553C2.872 3 2 3.857 2 5.508v8.984C2 16.143 2.872 17 4.553 17Zm.093-1.513c-.724 0-1.12-.378-1.12-1.127V5.633c0-.749.396-1.12 1.12-1.12h6.233v10.975H4.646Zm10.591-7.995h-1.601a.516.516 0 0 1-.508-.5c0-.265.234-.492.508-.492h1.601a.51.51 0 0 1 .516.492c0 .266-.234.5-.516.5Zm0 2.094h-1.601a.516.516 0 0 1-.508-.5c0-.266.234-.492.508-.492h1.601a.51.51 0 0 1 .516.492c0 .266-.234.5-.516.5Zm0 2.086h-1.601a.509.509 0 0 1-.508-.492c0-.266.234-.492.508-.492h1.601a.51.51 0 0 1 .516.492.51.51 0 0 1-.516.492Z"},"children":[]}],"metadata":""}]},"name":"sidebar-fields-opened"};
+
+export default SidebarFieldsOpened;

package/src/icons/ast/SlackIcon.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SlackIcon: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M7.597 3.107a1.404 1.404 0 0 1 1.527.304 1.398 1.398 0 0 1 .41.99V5.8h-1.4a1.404 1.404 0 0 1-1.4-1.4 1.396 1.396 0 0 1 .863-1.293ZM4.4 6.733h3.733a1.404 1.404 0 0 1 1.4 1.4 1.396 1.396 0 0 1-.863 1.293c-.17.07-.353.107-.537.107H4.4a1.404 1.404 0 0 1-1.294-.864 1.396 1.396 0 0 1 .304-1.525 1.402 1.402 0 0 1 .99-.41Zm12.494.865a1.395 1.395 0 0 1 0 1.07 1.398 1.398 0 0 1-1.294.865h-1.4v-1.4a1.395 1.395 0 0 1 .864-1.293 1.404 1.404 0 0 1 1.526.304c.13.13.234.284.304.454ZM13.267 4.4v3.733a1.397 1.397 0 0 1-1.4 1.4 1.403 1.403 0 0 1-1.4-1.4V4.4a1.395 1.395 0 0 1 .864-1.293 1.403 1.403 0 0 1 1.526.304 1.398 1.398 0 0 1 .41.99Zm-1.4 12.6a1.404 1.404 0 0 0 1.4-1.4 1.397 1.397 0 0 0-1.4-1.4h-1.4v1.4a1.395 1.395 0 0 0 .864 1.293c.17.07.352.107.536.107Zm0-3.733H15.6a1.405 1.405 0 0 0 1.294-.865 1.395 1.395 0 0 0 0-1.07 1.4 1.4 0 0 0-1.294-.865h-3.733a1.403 1.403 0 0 0-1.4 1.4 1.397 1.397 0 0 0 1.4 1.4Zm-8.76-.865a1.396 1.396 0 0 1 .302-1.525 1.402 1.402 0 0 1 .991-.41h1.4v1.4a1.396 1.396 0 0 1-1.4 1.4 1.405 1.405 0 0 1-1.294-.865ZM3 11.867ZM6.733 15.6v-3.733a1.396 1.396 0 0 1 1.4-1.4 1.402 1.402 0 0 1 1.4 1.4V15.6a1.396 1.396 0 0 1-1.4 1.4 1.403 1.403 0 0 1-1.4-1.4Z"},"children":[]}],"metadata":""}]},"name":"slack-icon"};
+
+export default SlackIcon;

package/src/icons/ast/SlideMenu.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SlideMenu: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.331 7.877H4.984c-.233 0-.384-.143-.384-.368V6.176c0-.233.143-.376.384-.376H6.33c.226 0 .369.143.369.376V7.51c0 .225-.15.368-.369.368ZM6.331 10.956H4.984c-.233 0-.384-.15-.384-.369v-1.34c0-.225.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.34c0 .218-.15.369-.369.369ZM4.984 14.02H6.33c.218 0 .369-.144.369-.37v-1.332c0-.226-.143-.376-.369-.376H4.984c-.241 0-.384.15-.384.376v1.333c0 .225.15.368.384.368Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.447 17H4.553C2.872 17 2 16.136 2 14.492V5.508C2 3.857 2.872 3 4.553 3h10.894C17.128 3 18 3.857 18 5.508v8.984C18 16.143 17.128 17 15.447 17Zm-.093-1.513c.724 0 1.12-.378 1.12-1.127V5.633c0-.749-.396-1.12-1.12-1.12H9.12v10.975h6.233ZM4.646 4.513c-.716 0-1.12.37-1.12 1.119v8.729c0 .748.404 1.126 1.12 1.126h3.028V4.513H4.646Z"},"children":[]}],"metadata":""}]},"name":"slide-menu"};
+
+export default SlideMenu;

package/src/icons/ast/SlideMenuOpened.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SlideMenuOpened: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.553 17h10.894C17.128 17 18 16.143 18 14.492V5.508C18 3.857 17.128 3 15.447 3H4.553C2.872 3 2 3.857 2 5.508v8.984C2 16.136 2.872 17 4.553 17Zm11.922-2.64c0 .75-.397 1.127-1.121 1.127H9.12V4.513h6.233c.724 0 1.12.37 1.12 1.119v8.729ZM6.33 7.878H4.984c-.233 0-.384-.143-.384-.368V6.176c0-.233.143-.376.384-.376H6.33c.226 0 .369.143.369.376V7.51c0 .225-.15.368-.369.368Zm0 3.079H4.984c-.233 0-.384-.15-.384-.369v-1.34c0-.225.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.34c0 .218-.15.369-.369.369Zm0 3.063H4.984c-.233 0-.384-.143-.384-.368v-1.333c0-.226.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.333c0 .225-.15.368-.369.368Z"},"children":[]}],"metadata":""}]},"name":"slide-menu-opened"};
+
+export default SlideMenuOpened;

package/src/icons/ast/index.tsx

@@ -40,6 +40,7 @@ export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
+export { default as Email } from './Email';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -131,8 +132,13 @@ export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
+export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
+export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
+export { default as SlackIcon } from './SlackIcon';
 export { default as Slack } from './Slack';
+export { default as SlideMenuOpened } from './SlideMenuOpened';
+export { default as SlideMenu } from './SlideMenu';
 export { default as SmartFolder } from './SmartFolder';
 export { default as SortOnBottom } from './SortOnBottom';
 export { default as SortOnTop } from './SortOnTop';

package/src/icons/react/Email.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import EmailSvg from '../ast/Email';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Email = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={EmailSvg} />;
+
+Email.displayName = 'Email';
+export default Email;

package/src/icons/react/SidebarFields.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SidebarFieldsSvg from '../ast/SidebarFields';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SidebarFields = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SidebarFieldsSvg} />;
+
+SidebarFields.displayName = 'SidebarFields';
+export default SidebarFields;

package/src/icons/react/SidebarFieldsOpened.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SidebarFieldsOpenedSvg from '../ast/SidebarFieldsOpened';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SidebarFieldsOpened = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SidebarFieldsOpenedSvg} />;
+
+SidebarFieldsOpened.displayName = 'SidebarFieldsOpened';
+export default SidebarFieldsOpened;

package/src/icons/react/SlackIcon.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SlackIconSvg from '../ast/SlackIcon';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SlackIcon = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SlackIconSvg} />;
+
+SlackIcon.displayName = 'SlackIcon';
+export default SlackIcon;

package/src/icons/react/SlideMenu.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SlideMenuSvg from '../ast/SlideMenu';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SlideMenu = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SlideMenuSvg} />;
+
+SlideMenu.displayName = 'SlideMenu';
+export default SlideMenu;

package/src/icons/react/SlideMenuOpened.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import SlideMenuOpenedSvg from '../ast/SlideMenuOpened';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SlideMenuOpened = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={SlideMenuOpenedSvg} />;
+
+SlideMenuOpened.displayName = 'SlideMenuOpened';
+export default SlideMenuOpened;

package/src/icons/react/index.tsx

@@ -40,6 +40,7 @@ export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
+export { default as Email } from './Email';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -131,8 +132,13 @@ export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
+export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
+export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
+export { default as SlackIcon } from './SlackIcon';
 export { default as Slack } from './Slack';
+export { default as SlideMenuOpened } from './SlideMenuOpened';
+export { default as SlideMenu } from './SlideMenu';
 export { default as SmartFolder } from './SmartFolder';
 export { default as SortOnBottom } from './SortOnBottom';
 export { default as SortOnTop } from './SortOnTop';

package/src/loading-sausage.tsx

@@ -139,7 +139,7 @@ type SausageListProps = {
   amount?: number;
   minAmount?: number;
   maxAmount?: number;
-  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element;
+  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element | null;
 } & Omit<Props, "index">;
 export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
   amount,

package/src/theme-settings.ts

@@ -2,12 +2,15 @@ import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} fro
 
 const listenersThemeMode = new Map();
 const listenersThemePreference = new Map();
+const listenersThemeMenuPreference = new Map();
 
 const themePreferenceKey = "theme-preference";
+const themeMenuPreferenceKey = "theme-menu-preference";
 
 export type ThemePreference = "dark" | "light" | "auto";
+export type ThemeMenuPreference = "dark" | "auto";
 
-export type ThemeMode = "dark" | "light" | "old";
+export type ThemeMode = "dark" | "light" | "light2";
 
 export function getThemePreference(): ThemePreference {
   try {
@@ -19,6 +22,18 @@ export function getThemePreference(): ThemePreference {
     } else if (item === "light") {
       return "light";
     }
+  } catch (e) {
+    return "light";
+  }
+  return "light";
+}
+
+export function getThemeMenuPreference(): ThemeMenuPreference {
+  try {
+    const item = localStorage.getItem(themeMenuPreferenceKey);
+    if (item === "dark") {
+      return "dark";
+    }
   } catch (e) {
     return "auto";
   }
@@ -33,15 +48,42 @@ function getDarkMediaQuery() {
 
 export function getThemeMode(): ThemeMode {
   const preference = getThemePreference();
+  const menuPreference = getThemeMenuPreference();
 
   if (preference === "auto") {
-    return getDarkMediaQuery().matches ? "dark" : "light";
+    const matches = getDarkMediaQuery().matches;
+    if (matches) {
+      return "dark";
+    }
+    if (menuPreference === "dark") {
+      return "light2";
+    }
+    return "light";
   } else if (preference === "dark") {
     return "dark";
   }
+  if (menuPreference === "dark") {
+    return "light2";
+  }
   return "light";
 }
 
+export function setThemeMenuPreference(menuPreference: ThemeMenuPreference) {
+  try {
+    if (getThemeMenuPreference() !== menuPreference) {
+      localStorage.setItem(themeMenuPreferenceKey, menuPreference);
+      listenersThemeMode.forEach((cb) => {
+        cb(getThemeMode());
+      });
+      listenersThemeMenuPreference.forEach((cb) => {
+        cb(menuPreference);
+      });
+    }
+  } catch (e) {
+    // skip error
+  }
+}
+
 export function setThemePreference(preference: ThemePreference) {
   try {
     if (getThemePreference() !== preference) {
@@ -58,6 +100,25 @@ export function setThemePreference(preference: ThemePreference) {
   }
 }
 
+export function subscribeOnThemeMenuPreferenceChange(
+  cb: (themeMenuPreference: ThemeMenuPreference) => void
+): () => void {
+  listenersThemeMenuPreference.set(cb, cb);
+  let currentPref = getThemeMenuPreference();
+  const storageListener = () => {
+    const newMenuPref = getThemeMenuPreference();
+    if (currentPref !== newMenuPref) {
+      currentPref = newMenuPref;
+      cb(newMenuPref);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    listenersThemeMenuPreference.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
 export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePreference) => void): () => void {
   listenersThemePreference.set(cb, cb);
   let currentPref = getThemePreference();
@@ -78,11 +139,14 @@ export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePref
 export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void): () => void {
   listenersThemeMode.set(cb, cb);
   let currentPref = getThemePreference();
+  let currentMenuPref = getThemeMenuPreference();
   const darkMediaQuery = getDarkMediaQuery();
   const storageListener = () => {
     const newPref = getThemePreference();
-    if (currentPref !== newPref) {
+    const newMenuPref = getThemeMenuPreference();
+    if (currentPref !== newPref || currentMenuPref !== newMenuPref) {
       currentPref = newPref;
+      currentMenuPref = newMenuPref;
       cb(getThemeMode());
     }
   };