@fibery/ui-kit 1.4.1 → 1.7.0

package/src/antd/styles.ts

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
+import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
 
 export const inputOverrides = {
   main: {
@@ -20,19 +20,18 @@ export const inputOverrides = {
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
-      opacity: 1,
     },
   },
   hover: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.regular} !important`,
+    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity40} !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.light}, 0 0 0 3px ${themeVars.focus} !important`,
+    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus} !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {
-    color: `${themeVars.accentTextColor} !important`,
+    color: `${themeVars.accentTextColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: colors.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
@@ -110,8 +109,7 @@ export const inputStyles = css`
     "&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
       inputOverrides.disabled,
     "&& input::placeholder, && textarea::placeholder": {
-      color: themeVars.textColor,
-      opacity: opacity.regular,
+      color: themeVars.inputPlaceholderTextColor,
     },
     "& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s},
     "& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s + space.xl + space.m}, // Match TitlePreview spacing

package/src/designSystem.ts

@@ -10,7 +10,6 @@ import {
   indigoDark,
   red,
   redDark,
-  sage,
   slate,
   slateDark,
   whiteA,
@@ -31,18 +30,6 @@ export const fontWeight = {
 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,
@@ -96,7 +83,7 @@ export const inversedSeparators = {
 } as const;
 
 export const fontFamily =
-  "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+  "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
 
 const stateColors = {
   success: "rgba(8, 189, 159, 1)",
@@ -112,27 +99,32 @@ const brandColors = {
   blue: "#4568FB",
 } as const;
 
-export const getDarkenColor = (color: string): string => {
+export const getDarkenColor = _.memoize((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,
+  mainBg: slate.slate2,
   panelBg: whiteA.whiteA0,
-  panelContentBg: sage.sage2,
+  panelContentBg: slate.slate2,
   pageBg: whiteA.whiteA0,
   pageContentBg: whiteA.whiteA0,
   sidebarBg: whiteA.whiteA0,
   sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
-  menuBg: sage.sage3,
+  menuBg: slate.slate2,
+  menuTextColor: slate.slate12,
+  menuItemHoverColor: slate.slate4,
+  menuItemSettingsHoverBg: slate.slate5,
+  menuSelectedTextColor: slate.slate2,
   menuFooterColor: getOpacities(whiteA.whiteA0).opacity20,
-  menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity40,
+  menuFooterHoverColor: getOpacities(whiteA.whiteA0).opacity60,
+  menuIconColor: getOpacities(slate.slate10).opacity90,
+  menuSelectedIconColor: getOpacities(slate.slate1).opacity90,
   textColor: slateDark.slate3,
   textSelectionColor: getOpacities(blue.blue10).opacity20,
   accentTextColor: slate.slate10,
@@ -143,15 +135,15 @@ const lightColors = {
   linkHoverColor: indigo.indigo10,
   linkBorderHover: `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
   codeColor: red.red9,
-  codeBgColor: makeChromaColor("#F24461").luminance(0.92).css(),
-  codeBlockBgColor: sage.sage3,
+  codeBgColor: slate.slate3,
+  codeBlockBgColor: slate.slate3,
   entityNodeColor: slateDark.slate3,
   entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
   entityNodeHoverColor: slateDark.slate7,
   entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
   entityNodeBgColor: slate.slate2,
   shortcutTextColor: slate.slate9,
-  shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
+  shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity50}`,
   inputBgColor: whiteA.whiteA0,
   inputDisabledBgColor: getOpacities(slate.slate6).opacity30,
   inputDisabledBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity20}`,
@@ -160,19 +152,17 @@ const lightColors = {
   inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate7).opacity100}`,
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
-  inputPlaceholderTextColor: slate.slate10,
+  inputPlaceholderTextColor: slate.slate9,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
   checkboxColor: 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,
+  actionMenuHover: slate.slate4,
+  actionMenuInnerHover: slate.slate4,
   actionMenuButtonColor: whiteA.whiteA0,
   actionMenuButtonHoverColor: slate.slate1,
   actionMenuButtonShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
@@ -182,14 +172,14 @@ const lightColors = {
     getOpacities(slate.slate10).opacity30
   }`,
   separatorColor: getOpacities(slate.slate4).opacity50,
+  separatorBreadcrumbsColor: slate.slate8,
   iconColor: slate.slate10,
-  menuIconColor: getOpacities(slate.slate10).opacity90,
-  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
-  appIconColor: getOpacities(slate.slate1).opacity90,
+  appIconColor: getOpacities(slate.slate2).opacity90,
+  appIconBgColor: getOpacities(slate.slate1).opacity90,
   mentionBgColor: slate.slate3,
   entityCardBgColor: whiteA.whiteA0,
-  entityCardSelectedColor: whiteA.whiteA0,
-  entityCardHoverColor: getOpacities(slate.slate1).opacity95,
+  entityCardSelectedColor: getOpacities(slate.slate2).opacity80,
+  entityCardHoverColor: getOpacities(slate.slate2).opacity80,
   entityCardDoneColor: getOpacities(slate.slate4).opacity30,
   entityCardShadow: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
     getOpacities(slate.slate10).opacity20
@@ -197,6 +187,7 @@ const lightColors = {
   entityCardShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
     getOpacities(slate.slate10).opacity20
   }`,
+  allowedDropColor: getOpacities(slate.slate3).opacity80,
   relationViewBgColor: slate.slate2,
   unitBg: slate.slate3,
   unitBgHover: slate.slate4,
@@ -206,13 +197,14 @@ const lightColors = {
   viewBgOverlayColor: getOpacities(slate.slate8).opacity20,
   floatEditorMenuBg: slate.slate1,
   floatEditorActiveColor: indigoDark.indigo10,
+  planBadgeBgColor: yellow.yellow10,
   commentColor: getOpacities(yellow.yellow6).opacity60,
-  cellBackgroundColor: sage.sage2,
-  cellBackgroundHoverColor: getOpacities(sage.sage6).opacity30,
+  cellBackgroundColor: slate.slate2,
+  cellBackgroundHoverColor: getOpacities(slate.slate6).opacity30,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
-  errorBgColor: getOpacities(red.red9).opacity60,
-  errorTextColor: red.red12,
+  errorBgColor: getOpacities(red.red9).opacity20,
+  errorTextColor: red.red11,
   errorButtonColor: red.red9,
   warningBgColor: getOpacities(yellow.yellow6).opacity60,
   warningButtonColor: yellow.yellow11,
@@ -226,7 +218,7 @@ const lightColors = {
     getOpacities(slate.slate10).opacity30
   }`,
   modalBg: getOpacities(slate.slate11).opacity20,
-  modalShadow: `${getOpacities(slate.slate10).opacity10} 0px 16px 70px`,
+  modalShadow: `${getOpacities(slate.slate10).opacity20} 0px 16px 70px`,
   modalContentBg: whiteA.whiteA0,
   progressIconBg: getOpacities(slate.slate12).opacity10,
   progressIconFill: getOpacities(slate.slate12).opacity80,
@@ -237,29 +229,44 @@ const lightColors = {
     getOpacities(slate.slate10).opacity20
   }`,
   selectedColorBorder: getOpacities(slate.slate6).opacity50,
+  formBg: slate.slate2,
+  formHeaderShadow: `${getOpacities(slate.slate10).opacity10} 0px 0px 6px`,
+  formEditorFieldBg: slate.slate3,
+  filterGroup1Bg: slate.slate2,
+  filterGroup2Bg: slate.slate3,
+  filterGroupBorder: blackA.blackA3,
   //end
-  disabledInversedTextColor: shades.light,
+  disabledInversedTextColor: shades.opacity25,
   danger: brandColors.red,
   active: brandColors.red,
   warning: "#FFD41E",
   cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
+  selectedImageBorder: blackA.blackA8,
   transparent,
   shades: lights,
   lights: shades,
   separators,
   inversedSeparators,
+  progressBg: slate.slate4,
+  progressText: slate.slate11,
+  progressFillBg: slate.slate11,
+  progressFillText: whiteA.whiteA0,
+  searchFiltersBg: slate.slate1,
 } as const;
 
 const darkMenu = {
   menuBg: slateDark.slate2,
-  menuFooterColor: getOpacities(slateDark.slate3).opacity20,
-  menuFooterHoverColor: getOpacities(slateDark.slate3).opacity40,
+  menuFooterColor: getOpacities(slateDark.slate3).opacity40,
+  menuFooterHoverColor: slateDark.slate4,
   menuTextColor: slate.slate8,
   menuIconColor: getOpacities(slate.slate10).opacity90,
-  selectedMenuIconColor: getOpacities(slate.slate1).opacity90,
-  selectedMenuTextColor: slate.slate2,
+  menuSelectedIconColor: getOpacities(slate.slate1).opacity90,
+  menuSelectedTextColor: slate.slate2,
+  menuItemHoverColor: slateDark.slate6,
+  menuItemSettingsHoverBg: slateDark.slate5,
+  appIconBgColor: getOpacities(slate.slate2).opacity50,
 };
 
 const light2Colors = {
@@ -272,7 +279,6 @@ const darkColors = {
   mode: "dark",
   brandColors,
   stateColors,
-  //dark theme
   whiteColor: whiteA.whiteA0,
   blackColor: blackA.blackA0,
   mainBg: slateDark.slate1,
@@ -292,8 +298,8 @@ const darkColors = {
   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,
+  codeBgColor: slateDark.slate4,
+  codeBlockBgColor: slateDark.slate4,
   entityNodeColor: slate.slate8,
   entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
   entityNodeHoverColor: slate.slate7,
@@ -309,7 +315,7 @@ const darkColors = {
   inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity100}`,
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
-  inputPlaceholderTextColor: slate.slate10,
+  inputPlaceholderTextColor: slateDark.slate9,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
   checkboxColor: slateDark.slate10,
@@ -329,11 +335,12 @@ const darkColors = {
     getOpacities(slateDark.slate2).opacity30
   }`,
   separatorColor: getOpacities(slateDark.slate8).opacity50,
+  separatorBreadcrumbsColor: slateDark.slate8,
   iconColor: slate.slate9,
   appIconColor: getOpacities(slate.slate2).opacity70,
   mentionBgColor: slateDark.slate5,
   entityCardBgColor: slateDark.slate5,
-  entityCardSelectedColor: slateDark.slate5,
+  entityCardSelectedColor: getOpacities(slateDark.slate6).opacity50,
   entityCardHoverColor: getOpacities(slateDark.slate6).opacity50,
   entityCardDoneColor: getOpacities(slateDark.slate5).opacity30,
   entityCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
@@ -342,22 +349,24 @@ const darkColors = {
   entityCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
     getOpacities(slateDark.slate2).opacity20
   }`,
+  allowedDropColor: getOpacities(slateDark.slate3).opacity80,
   relationViewBgColor: slateDark.slate3,
   unitBg: slateDark.slate6,
   unitBgHover: slateDark.slate7,
   badgeBgColor: getOpacities(slate.slate10).opacity20,
-  tooltipBgColor: slateDark.slate7,
+  tooltipBgColor: slateDark.slate6,
   todayMarkerColor: redDark.red6,
   viewBgOverlayColor: getOpacities(slateDark.slate1).opacity60,
   floatEditorMenuBg: slateDark.slate6,
   floatEditorActiveColor: indigoDark.indigo11,
+  planBadgeBgColor: yellowDark.yellow10,
   commentColor: getOpacities(yellowDark.yellow9).opacity40,
   cellBackgroundColor: slateDark.slate2,
   cellBackgroundHoverColor: getOpacities(slateDark.slate6).opacity30,
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
   errorBgColor: getOpacities(redDark.red9).opacity60,
-  errorTextColor: redDark.red12,
+  errorTextColor: red.red7,
   errorButtonColor: redDark.red10,
   warningBgColor: getOpacities(yellowDark.yellow8).opacity60,
   warningButtonColor: yellowDark.yellow11,
@@ -373,26 +382,38 @@ const darkColors = {
   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,
+  progressIconBg: getOpacities(slateDark.slate12).opacity10,
+  progressIconFill: getOpacities(slateDark.slate12).opacity80,
+  progressIconDoneBg: getOpacities(slateDark.slate12).opacity90,
+  progressIconDoneFill: getOpacities(slateDark.slate1).opacity80,
   instrumentsMenuBg: getOpacities(slateDark.slate4).opacity95,
   instrumentsMenuShadow: `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
   selectedColorBorder: getOpacities(slate.slate6).opacity20,
+  formBg: slateDark.slate2,
+  formHeaderShadow: `${getOpacities(slateDark.slate1).opacity40} 0px 0px 6px`,
+  formEditorFieldBg: slateDark.slate4,
+  filterGroup1Bg: slateDark.slate6,
+  filterGroup2Bg: slateDark.slate7,
+  filterGroupBorder: whiteA.whiteA3,
   //end
-  disabledInversedTextColor: lights.light,
+  disabledInversedTextColor: lights.opacity25,
   danger: redDark.red9,
   active: brandColors.red,
   warning: "#FFD41E",
   cardBg: slateDark.slate6,
   cardSelected: slateDark.slate5,
   cardSelectedHover: slateDark.slate5,
+  selectedImageBorder: whiteA.whiteA11,
   transparent,
   shades,
   lights,
   separators: inversedSeparators,
   inversedSeparators: separators,
+  progressBg: slate.slate4,
+  progressText: slate.slate11,
+  progressFillBg: slate.slate11,
+  progressFillText: whiteA.whiteA0,
+  searchFiltersBg: slateDark.slate2,
   ...darkMenu,
 } as const;
 
@@ -498,33 +519,39 @@ export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColo
   (themeColor, theme) => themeColor + theme
 );
 
-export const getTextColor = (color: string): string => {
+export const getTextColor = _.memoize((color: string): string => {
   return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
-};
+});
 
-export const getBrightenColor = (color: string): string => {
+export const getBrightenColor = _.memoize((color: string): string => {
   return makeChromaColor(color).brighten(0.15).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 getLinkedHighlightBackgroundColor = _.memoize(
+  (themeColors: ThemeColors, color: string): string => {
+    switch (themeColors.mode) {
+      case "dark":
+        return makeChromaColor(color).alpha(0.4).luminance(0.5).css();
+      case "light":
+        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
+      default:
+        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
 
-export const getEnumBackgroundColor = (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 getEnumBackgroundColor = _.memoize(
+  (themeMode: ThemeMode, color: string) => {
+    switch (themeMode) {
+      case "dark":
+        return makeChromaColor(color).darken(2.2).alpha(0.5).saturate(1).css();
+      default:
+        return color;
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
 
 export const cardTypeColors = [
   "#D40915",
@@ -547,25 +574,26 @@ export const cardTypeColors = [
 
 export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
 
+export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
 export const colors = {
   ...getTypeColors(brandColors.green, "light"),
   brandColors,
   stateColors,
   textColor: "#2A3844",
-  disabledTextColor: shades.regular,
+  disabledTextColor: shades.opacity40,
   inversedTextColor: "#FFFFFF",
-  disabledInversedTextColor: lights.light,
-  linkColor: brandColors.blue,
+  disabledInversedTextColor: lights.opacity25,
   danger: brandColors.red,
   active: brandColors.red,
   warning: "#FFD41E",
   cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
+  selectedImageBorder: "rgba(42, 56, 68, 0.3)",
   unitBg: "rgba(220, 224, 228, 0.33)",
   infoBox: "rgba(255, 212, 0, 0.2)",
   errorBg: "rgba(255, 241, 240, 1)",
-  timelineScaleSelectBorderColor: chroma("#FFFFFF").alpha(opacity.regular).css(),
+  timelineScaleSelectBorderColor: chroma("#FFFFFF").alpha(opacity.opacity40).css(),
   transparent,
   shades,
   lights,
@@ -589,6 +617,7 @@ export const layout = {
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 40, // I'm ok
   menuItemLevelIndent: 24,
+  listItemHeight: 38,
   itemHeight: 36,
   itemWithSubtitleHeight: 52,
   groupTitleHeight: 30,
@@ -614,6 +643,7 @@ export const layout = {
   checkboxSize: 17,
   fakeBoardWidth: 260,
   fakeBoardHeight: 160,
+  inlineInputHeight: 32,
   menuHeight: 32,
   popupTopMargin: 48,
   unitHeight: 18,
@@ -637,12 +667,12 @@ export const border = {
 export const lineHeight = {
   text: 1.6,
   regular: 1.5,
-  heading: 1.225,
+  heading: 1.25,
   nowrap: 1,
 } as const;
 
 export const tooltipDelay = {
-  enter: 0.4,
+  enter: 500,
   leave: 0,
 } as const;
 
@@ -655,8 +685,8 @@ export const viewBoxSize = "0 0 20 20";
 export const avatarSize = 24;
 
 export const shadows = {
-  border: `0 0 0 1px ${shades.thin}`,
-  inversedBorder: `0 0 0 1px ${lights.thin}`,
+  border: `0 0 0 1px ${shades.opacity10}`,
+  inversedBorder: `0 0 0 1px ${lights.opacity10}`,
   videoPreview: "0 4px 30px 4px rgba(0, 0, 0, .15)",
 } as const;
 
@@ -729,8 +759,16 @@ export const themeVars = Object.keys(getThemeColors(brandColors.green, "light"))
   return vars;
 }, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;
 
-export const createInlineTheme = (theme: ThemeColors, rejectKeys = Object.keys(lightColors)) =>
-  createInlineStyles<ThemeColors>(theme, rejectKeys);
+const DEFAULT_REJECT_KEYS = Object.keys(lightColors);
+export const createInlineTheme = _.memoize(
+  (theme: ThemeColors, rejectKeys = DEFAULT_REJECT_KEYS) => {
+    return createInlineStyles<ThemeColors>(theme, rejectKeys);
+  },
+  (theme, rejectKeys = DEFAULT_REJECT_KEYS) => {
+    const rejectKeysLabel = rejectKeys === DEFAULT_REJECT_KEYS ? "DEFAULT_REJECT_KEYS" : JSON.stringify(rejectKeys);
+    return `${theme.mode}__${theme.primary}__${rejectKeysLabel}`;
+  }
+);
 
 export const textStyles = {
   heading1: {
@@ -814,7 +852,7 @@ export const textStyles = {
     textTransform: "none",
   },
   code: {
-    fontFamily: "Consolas, Menlo, Courier, monospace",
+    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
     fontSize: typeSizes[4],
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
@@ -825,7 +863,7 @@ export const textStyles = {
     fontSize: typeSizes[7],
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
-    color: colors.shades.light,
+    color: colors.shades.opacity25,
   },
   link: {
     color: themeVars.linkColor,
@@ -838,7 +876,7 @@ export const textStyles = {
     color: colors.inversedTextColor,
     cursor: "pointer",
     textDecoration: "underline",
-    textDecorationColor: lights.light,
+    textDecorationColor: lights.opacity25,
   },
   note: {
     fontFamily,

package/src/error-alert.tsx

@@ -1,8 +1,8 @@
 import {css} from "@linaria/core";
 import {layout, border, space, textStyles, themeVars} from "./designSystem";
-import {Button} from "./Button";
+import {Button} from "./Button/button";
 import CloseIcon from "./icons/react/Close";
-import {useTheme} from "@fibery/ui-kit/src/ThemeProvider";
+import {useTheme} from "./ThemeProvider";
 
 const errorAlert = css`
   background-color: ${themeVars.errorBgColor};

package/src/icons/Icon.tsx

@@ -4,25 +4,30 @@ import {generateIconFromAst} from "./generateIconFromAst";
 import {IconProps} from "./types";
 import {getShiftStyle} from "./getShiftStyle";
 import {getIconContainerStyle} from "./getIconContainerStyle";
+import {forwardRef} from "react";
 
 const iconStyle = css`
   shape-rendering: geometricprecision;
   border-radius: ${radius}px;
 `;
 
-export function Icon({
-  icon,
-  containerSize,
-  color,
-  viewBox = viewBoxSize,
-  iconSize = defaultIconSize,
-  onMouseDown,
-  onMouseEnter,
-  onMouseLeave,
-  children,
-}: IconProps): JSX.Element {
+export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(
+  {
+    icon,
+    containerSize,
+    color,
+    viewBox = viewBoxSize,
+    iconSize = defaultIconSize,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    children,
+  },
+  ref
+): JSX.Element {
   return (
     <span
+      ref={ref}
       style={getIconContainerStyle(containerSize || iconSize, color)}
       onMouseDown={onMouseDown}
       onMouseEnter={onMouseEnter}
@@ -53,4 +58,4 @@ export function Icon({
       )}
     </span>
   );
-}
+});

package/src/icons/ast/AddGroup.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddGroup: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M9.25 6.75a.75.75 0 0 1 1.5 0v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm2-.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5Z"},"children":[]}],"metadata":""}]},"name":"add-group"};
+
+export default AddGroup;

package/src/icons/ast/AiAssistant.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AiAssistant: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M3.27.185a.29.29 0 0 0-.54 0l-.522 1.358c-.09.235-.12.305-.16.36a.614.614 0 0 1-.144.146c-.056.04-.126.069-.36.159L.184 2.73a.29.29 0 0 0 0 .54l1.358.522c.235.09.305.12.36.16.057.04.106.088.146.144.04.056.069.126.159.36l.522 1.359a.29.29 0 0 0 .54 0l.522-1.358c.09-.235.12-.305.16-.36a.614.614 0 0 1 .144-.146c.056-.04.126-.069.36-.159l1.359-.522a.29.29 0 0 0 0-.54l-1.358-.522c-.235-.09-.305-.12-.36-.16a.614.614 0 0 1-.146-.144c-.04-.056-.069-.126-.159-.36L3.27.184Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.833 1.7a.8.8 0 0 1 .747.513l1.445 3.757c.25.65.33.842.44.997.11.155.246.29.4.4.156.111.349.191.998.441l3.757 1.445a.8.8 0 0 1 0 1.494l-3.757 1.445c-.65.25-.842.33-.997.44-.155.11-.29.246-.4.4-.111.156-.191.348-.441.998l-1.445 3.757a.8.8 0 0 1-1.494 0L8.641 14.03c-.25-.65-.33-.842-.44-.997a1.699 1.699 0 0 0-.4-.4c-.156-.111-.348-.191-.998-.441l-3.757-1.445a.8.8 0 0 1 0-1.494l3.757-1.445c.65-.25.842-.33.998-.44a1.7 1.7 0 0 0 .4-.4c.11-.156.19-.349.44-.998l1.445-3.757a.8.8 0 0 1 .747-.513Zm0 3.028-.73 1.9c-.204.53-.356.926-.598 1.266a3.3 3.3 0 0 1-.777.778c-.341.242-.737.394-1.267.598l-1.9.73 1.901.73c.53.204.925.356 1.266.598.3.214.563.477.777.777.242.341.394.736.597 1.266l.731 1.9.731-1.9c.204-.53.355-.925.598-1.266.213-.3.476-.563.777-.777.34-.242.735-.394 1.265-.597l1.9-.731-1.898-.73c-.53-.204-.926-.356-1.267-.598a3.302 3.302 0 0 1-.777-.778c-.243-.34-.395-.736-.598-1.266l-.73-1.9Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M3 14a.29.29 0 0 1 .27.185l.522 1.358c.09.235.12.305.16.36.04.057.088.106.144.146.056.04.126.069.36.159l1.359.522a.29.29 0 0 1 0 .54l-1.358.522c-.235.09-.305.12-.36.16a.616.616 0 0 0-.146.144c-.04.056-.069.126-.159.36l-.522 1.359a.29.29 0 0 1-.54 0l-.522-1.359c-.09-.234-.12-.304-.16-.36a.616.616 0 0 0-.144-.145c-.056-.04-.126-.069-.36-.159L.184 17.27a.29.29 0 0 1 0-.54l1.358-.522c.235-.09.305-.12.36-.16a.614.614 0 0 0 .146-.144c.04-.056.069-.126.159-.36l.522-1.359A.29.29 0 0 1 3 14Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant"};
+
+export default AiAssistant;

package/src/icons/ast/AiAvatar.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AiAvatar: 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":"M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Zm0-15.833a.562.562 0 0 1 .525.36l1.016 2.64c.175.457.232.592.309.701.077.11.173.204.281.281.11.078.245.135.701.31l2.64 1.016a.562.562 0 0 1 0 1.05l-2.64 1.015c-.456.176-.591.232-.7.31a1.198 1.198 0 0 0-.281.28c-.078.11-.135.245-.31.702l-1.016 2.64a.562.562 0 0 1-1.05 0l-1.015-2.64c-.176-.457-.232-.592-.31-.7a1.194 1.194 0 0 0-.28-.282c-.11-.078-.245-.134-.702-.31l-2.64-1.015a.562.562 0 0 1 0-1.05l2.64-1.016c.457-.175.592-.232.701-.309.11-.077.204-.172.281-.281.078-.11.134-.245.31-.701l1.015-2.64A.562.562 0 0 1 10 4.166Zm0 2.128-.514 1.34c-.143.37-.25.647-.42.885-.15.211-.334.396-.545.546-.239.17-.516.277-.886.42L6.295 10l1.336.513c.372.143.65.25.89.42.21.15.396.335.546.546.17.24.277.517.42.89L10 13.704l.518-1.345c.141-.368.247-.642.416-.88.15-.21.335-.395.546-.546.24-.17.517-.277.89-.42L13.704 10l-1.338-.515c-.37-.142-.648-.25-.887-.419a2.321 2.321 0 0 1-.546-.546c-.17-.24-.277-.518-.42-.89L10 6.295Z"},"children":[]}],"metadata":""}]},"name":"ai-avatar"};
+
+export default AiAvatar;

package/src/icons/ast/ArrowBottom.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const ArrowBottom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M17.354 8.354a.5.5 0 1 0-.708-.708l.708.708ZM10.5 14.5l-.354.354a.5.5 0 0 0 .708 0L10.5 14.5ZM4.354 7.646a.5.5 0 0 0-.708.708l.708-.708Zm12.292 0-6.5 6.5.708.708 6.5-6.5-.708-.708Zm-5.792 6.5-6.5-6.5-.708.708 6.5 6.5.708-.708Z"},"children":[]}],"metadata":""}]},"name":"arrow-bottom"};
+const ArrowBottom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.434 7.434a.8.8 0 0 1 1.132 0L10 10.87l3.434-3.435a.8.8 0 0 1 1.132 1.132l-4 4a.8.8 0 0 1-1.132 0l-4-4a.8.8 0 0 1 0-1.132Z"},"children":[]}],"metadata":""}]},"name":"arrow-bottom"};
 
 export default ArrowBottom;

package/src/icons/ast/ArrowCollapse.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const ArrowCollapse: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M12.08 9.42a.7.7 0 0 1 0 .99l-3.67 3.67a.7.7 0 0 1-.99 0L7.24 13.9a.7.7 0 0 1 0-.99l2.649-2.642a.5.5 0 0 0 0-.708L7.242 6.919a.7.7 0 0 1-.001-.99l.179-.18a.7.7 0 0 1 .99 0l3.67 3.67Z"},"children":[]}],"metadata":""}]},"name":"arrow-collapse"};
+const ArrowCollapse: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M7.434 14.566a.8.8 0 0 1 0-1.132L10.87 10 7.434 6.566a.8.8 0 1 1 1.132-1.132l4 4a.8.8 0 0 1 0 1.132l-4 4a.8.8 0 0 1-1.132 0Z"},"children":[]}],"metadata":""}]},"name":"arrow-collapse"};
 
 export default ArrowCollapse;