@fibery/ui-kit 1.34.8 → 1.36.0

package/src/date-picker/with-popup-control.tsx

@@ -0,0 +1,61 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import {useCallback, useEffect, useRef, useState} from "react";
+import {ControlledDatePickerProps} from "./types";
+
+const noOutline = css`
+  outline: none;
+`;
+
+export const withPopupControl = <P extends object>(Component: React.ComponentType<P & ControlledDatePickerProps>) =>
+  function WithPopupControl(props: P) {
+    const [open, setOpen] = useState(false);
+    const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const onOpen = useCallback(() => {
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }, []);
+
+    const onClose = useCallback(() => {
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(false);
+        // Input needs to fire onBlur before unmounting
+      }, 0);
+    }, []);
+
+    useEffect(() => {
+      return () => {
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+        }
+      };
+    }, []);
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+      const cmdKeyPressed = event.metaKey || event.ctrlKey;
+      if (event.key === "Enter" && cmdKeyPressed) {
+        event.preventDefault();
+      }
+      if (event.key === "Escape" && open) {
+        event.stopPropagation();
+        setOpen(false);
+      } else if (((event.key === "Enter" && !cmdKeyPressed) || event.key === " ") && !open) {
+        event.preventDefault();
+        setOpen(true);
+      }
+    };
+
+    return (
+      <div
+        onKeyDown={onKeyDown}
+        className={noOutline}
+        onClick={stopPropagation}
+        onMouseDown={stopPropagation}
+        onMouseUp={stopPropagation}
+      >
+        <Component {...props} open={open} onOpen={onOpen} onClose={onClose} />
+      </div>
+    );
+  };

package/src/day-select/day-select.tsx

@@ -0,0 +1,94 @@
+import {ChangeEvent} from "react";
+import {css} from "@linaria/core";
+import {colors, themeVars} from "../design-system";
+import {inputOverrides} from "../antd/styles";
+
+export type Props<T extends number> = {
+  value: Array<T>;
+  onChange: (v: Array<T>) => void;
+  days: Array<{key: string; title: string; value: T}>;
+  allowEmpty?: boolean;
+};
+
+const daySize = "28px";
+
+const checkboxInput = css`
+  position: absolute;
+  appearance: none;
+`;
+
+const checkbox = css`
+  position: absolute;
+  border-radius: 50%;
+  font-size: 14px;
+  width: ${daySize};
+  height: ${daySize};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${themeVars.accentTextColor};
+  background-color: ${themeVars.unitBg};
+  .${checkboxInput}:checked + & {
+    color: ${colors.inversedTextColor};
+    background-color: ${themeVars.primary};
+  }
+  .${checkboxInput}:focus-visible + & {
+    ${inputOverrides.focus}
+  }
+`;
+
+function Day<T extends number>({
+  value,
+  onChange,
+  checked,
+  title,
+}: {
+  value: T;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  checked: boolean;
+  title: string;
+}): JSX.Element {
+  return (
+    <label
+      className={css`
+        cursor: pointer;
+        position: relative;
+        width: ${daySize};
+        height: ${daySize};
+      `}
+    >
+      <input className={checkboxInput} onChange={onChange} checked={checked} type="checkbox" value={value} />
+      <div className={checkbox}>{title}</div>
+    </label>
+  );
+}
+
+export function DaySelect<T extends number>({value = [], onChange, days, allowEmpty = false}: Props<T>): JSX.Element {
+  return (
+    <div
+      className={css`
+        grid-template-columns: repeat(7, min-content);
+        gap: 4px;
+        display: grid;
+      `}
+    >
+      {days.map(({key, value: v, title}) => {
+        return (
+          <Day
+            checked={value.includes(v)}
+            onChange={({currentTarget: {checked}}) => {
+              if (checked) {
+                onChange(value.concat(v));
+              } else if (allowEmpty || value.length > 1) {
+                onChange(value.filter((val) => val !== v));
+              }
+            }}
+            key={key}
+            title={title}
+            value={v}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/day-select/iso-week-day-select.tsx

@@ -0,0 +1,15 @@
+import _ from "lodash";
+import {DaySelect, Props} from "./day-select";
+import moment from "moment";
+
+const isoWeekDays = _.range(1, 8).map((day) => {
+  return {
+    key: String(day),
+    title: moment().isoWeekday(day).format("dd").charAt(0),
+    value: day,
+  };
+});
+
+export function IsoWeekdaySelect({value, onChange, allowEmpty}: Omit<Props<number>, "days">): JSX.Element {
+  return <DaySelect value={value} onChange={onChange} days={isoWeekDays} allowEmpty={allowEmpty} />;
+}

package/src/day-select/mount-day-select.tsx

@@ -0,0 +1,11 @@
+import {DaySelect, Props} from "./day-select";
+
+const days = Array.from({length: 28}).map((_, index) => {
+  const value = index + 1;
+  const key = String(value);
+  return {key: String(value), title: key, value};
+});
+
+export function MonthdaySelect({value = [], onChange}: Omit<Props<number>, "days">): JSX.Element {
+  return <DaySelect value={value} onChange={onChange} days={days} />;
+}

package/src/day-select/week-day-select.test.tsx

@@ -0,0 +1,48 @@
+import {getDays} from "./week-day-select";
+
+describe("getDays", () => {
+  it("monday", () => {
+    expect(getDays(0)).toEqual([
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+    ]);
+  });
+  it("wednesday", () => {
+    expect(getDays(2)).toEqual([
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+    ]);
+  });
+  it("saturday", () => {
+    expect(getDays(5)).toEqual([
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+    ]);
+  });
+  it("sunday", () => {
+    expect(getDays(6)).toEqual([
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+    ]);
+  });
+});

package/src/day-select/week-day-select.tsx

@@ -0,0 +1,42 @@
+import _ from "lodash";
+import {DaySelect, Props} from "./day-select";
+
+export enum Days {
+  MO = 0,
+  TU = 1,
+  WE = 2,
+  TH = 3,
+  FR = 4,
+  SA = 5,
+  SU = 6,
+}
+
+const WeekDayMap = {
+  MO: Days.MO,
+  TU: Days.TU,
+  WE: Days.WE,
+  TH: Days.TH,
+  FR: Days.FR,
+  SA: Days.SA,
+  SU: Days.SU,
+};
+
+export const getDays = _.memoize((firstDay) => {
+  const entries = Object.entries(WeekDayMap);
+  const firstDayIndex = entries.findIndex((entry) => entry[1] === firstDay);
+  const partA = entries.slice(firstDayIndex);
+  const partB = firstDayIndex === 0 ? [] : entries.slice(0, firstDayIndex);
+  const sortedArr = [...partA, ...partB];
+  return sortedArr.map(([key, v]) => {
+    return {key: key, title: key[0], value: v};
+  });
+});
+
+export function WeekdaySelect({
+  value = [],
+  onChange,
+  firstDay,
+}: Omit<Props<Days>, "days"> & {firstDay: number}): JSX.Element {
+  const days = getDays(firstDay);
+  return <DaySelect value={value} onChange={onChange} days={days} />;
+}

package/src/delayed.tsx

@@ -0,0 +1,26 @@
+import React, {useEffect, useState} from "react";
+
+export const defaultLoaderDelay = 1000;
+
+export const Delayed: React.FC<React.PropsWithChildren<{delayMs: number}>> = ({children, delayMs}) => {
+  const [isVisible, setVisible] = useState(delayMs === 0);
+
+  useEffect(() => {
+    if (!delayMs) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+
+    const timeout = window.setTimeout(() => {
+      setVisible(true);
+    }, delayMs);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006
+  return isVisible ? (children as React.ReactElement) : null;
+};

package/src/design-system.test.ts

@@ -0,0 +1,24 @@
+import {getLightColors, getDarkColors, getLight2Colors} from "./design-system";
+
+function getKeys(colors: Record<string, string | Record<string, string>>) {
+  const keys = [];
+  for (const [key, value] of Object.entries(colors)) {
+    if (typeof value === "string") {
+      keys.push(key);
+    } else {
+      const nestedKeys: Record<string, string[]> = {[key]: []};
+      for (const [nestedKey] of Object.entries(value)) {
+        nestedKeys[key].push(nestedKey);
+      }
+      keys.push(nestedKeys);
+    }
+  }
+  return keys.sort();
+}
+it("dark and light color should have the same keys", () => {
+  const lKeys = getKeys(getLightColors());
+  const dKeys = getKeys(getDarkColors());
+  const l2Keys = getKeys(getLight2Colors());
+  expect(lKeys).toEqual(dKeys);
+  expect(l2Keys).toEqual(dKeys);
+});

package/src/design-system.ts

@@ -22,11 +22,11 @@ import {
 } from "./palette";
 import {ThemeMode} from "./theme-settings";
 
-export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
+export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
-  light: 300,
-  regular: 400,
+  light: 310, // 300 basic, 310 experiment with a variable Inter
+  regular: 410, // 400 basic, 410 experiment with a variable Inter
   medium: 500,
   semibold: 600,
   bold: 700,
@@ -106,15 +106,15 @@ const shades = getOpacities("#000000");
 const lights = getOpacities("#FFFFFF");
 
 export const separators = {
-  ..._.mapValues(shades, (shade) => `1px solid ${shade}`),
+  ..._.mapValues(shades, (shade) => `0.5px solid ${shade}`),
 } as const;
 
 export const inversedSeparators = {
-  ..._.mapValues(lights, (light) => `1px solid ${light}`),
+  ..._.mapValues(lights, (light) => `0.5px solid ${light}`),
 } as const;
 
 export const fontFamily =
-  "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+  '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
 
 const stateColors = {
   success: "rgba(8, 189, 159, 1)",
@@ -143,6 +143,12 @@ export const themeColors = {
   colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
 
   // Shadows and effects / Elevation
+  shadow50: [
+    `
+    0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}
+    `,
+    `0px 0px 0px 0.5px ${getOpacities(slateDark.slate12).opacity15}`,
+  ],
   shadow100: [
     `
     0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}
@@ -226,15 +232,15 @@ export const themeColors = {
   primaryBlue: [indigo.indigo9, indigoDark.indigo9],
   whiteColor: [whiteA.whiteA0, whiteA.whiteA0],
   blackColor: [blackA.blackA0, blackA.blackA0],
-  mainBg: [slate.slate3, slateDark.slate1],
-  panelBg: [whiteA.whiteA0, slateDark.slate2],
-  panelContentBg: [slate.slate2, slateDark.slate2],
+  mainBg: [slate.slate3, slateDark.slateBase],
+  panelBg: [whiteA.whiteA0, slateDark.slate1],
+  panelContentBg: [slate.slate2, slateDark.slate1],
   colorBgRelationContainer: [slate.slate2, slateDark.slate1],
   pageBg: [whiteA.whiteA0, slateDark.slate1],
   pageContentBg: [whiteA.whiteA0, slateDark.slate2],
   colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
   colorBgSidebar: [whiteA.whiteA0, slateDark.slate3],
-  menuBg: [slate.slate3, slateDark.slate1],
+  menuBg: [slate.slate3, slateDark.slateBase],
   menuTextColor: [slateDark.slate5, slate.slate8],
   menuItemHoverColor: [slate.slate5, slateDark.slate6],
   menuSelectedTextColor: [slate.slate2, slate.slate2],
@@ -322,7 +328,7 @@ export const themeColors = {
   colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
 
   // Actions menu
-  colorBgActionsMenu: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity85],
+  colorBgActionsMenu: [whiteA.whiteA0, slateDark.slate3],
   colorBgActionsMenuItemHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
   colorBgActionsMenuItemSelected: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
   colorBgActionsMenuItemSelectedHover: [
@@ -332,10 +338,10 @@ export const themeColors = {
   colorBgActionsMenuItemDangerHover: [getOpacities(red.red9).opacity10, getOpacities(redDark.red10).opacity10],
 
   colorBgActionsMenuItemDangerActive: [getOpacities(red.red9).opacity80, getOpacities(redDark.red10).opacity80],
-  actionMenuBg: [whiteA.whiteA0, slateDark.slate4],
-  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate5],
-  actionMenuHover: [slate.slate4, slateDark.slate6],
-  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate7).opacity50],
+  actionMenuBg: [whiteA.whiteA0, slateDark.slate3],
+  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate4],
+  actionMenuHover: [slate.slate4, slateDark.slate5],
+  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate6).opacity50],
   actionMenuButtonColor: [whiteA.whiteA0, slateDark.slate2],
   actionMenuButtonHoverColor: [slate.slate1, slateDark.slate3],
   actionMenuButtonShadow: [
@@ -346,7 +352,8 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 6px 8px -4px ${getOpacities(slateDark.slate2).opacity30}`,
   ],
-  separatorColor: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
+  actionMenuSeparatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity15],
+  separatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity10],
   separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
   iconColor: [slate.slate10, slateDark.slate10],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
@@ -463,17 +470,17 @@ export const themeColors = {
   colorTextMenuItem: [slateDark.slate5, getOpacities(slateDark.slate12).opacity90],
   colorBgMenuItem: [transparent, transparent],
   // :hover
-  colorBgMenuItemHover: [slate.slate5, slateDark.slate4],
+  colorBgMenuItemHover: [slate.slate5, slateDark.slate2],
   // :focus
-  colorBgMenuItemFocus: [slate.slate6, slateDark.slate6],
+  colorBgMenuItemFocus: [slate.slate6, slateDark.slate5],
   // Selected
-  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo4],
+  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo3],
   // :hover
-  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
+  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo5],
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
+  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo5],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
@@ -540,7 +547,7 @@ export const themeColors = {
   success: [teal.teal9, tealDark.teal9],
   danger: [red.red9, redDark.red10],
   active: [red.red9, redDark.red10],
-  warning: ["#FFD41E", "#FFD41E"],
+  warning: [yellow.yellow9, yellowDark.yellow8],
   cardBg: ["#FFFFFF", slateDark.slate6],
   cardSelected: ["#FFFB8F", slateDark.slate5],
   cardSelectedHover: ["rgba(240, 244, 247, 0.6)", slateDark.slate5],
@@ -568,7 +575,6 @@ export const themeColors = {
   gridHeaderTextColor: [slate.slate10, slateDark.slate11],
   gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
   gridCellBorderColor: [slate.slate5, slateDark.slate6],
-  gridPinnedCellBorderColor: [slate.slate8, slateDark.slate8],
   gridDisabledCellBgColor: [slate.slate2, slateDark.slate3],
   gridSelectedCellBgColor: [indigo.indigo3, indigoDark.indigo3],
   gridHighlightedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
@@ -582,6 +588,9 @@ export const themeColors = {
   timelineDependencyHoverBgColor: [indigo.indigo8, indigoDark.indigo8],
   timelineDependencyOverlapBgColor: [red.red9, redDark.red9],
   timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
+  timelineCellBgColor: [slate.slate1, slateDark.slate1],
+  timelineCellWeekendBgColor: [slate.slate2, slateDark.slate2],
+  timelineCellTodayBgColor: [indigo.indigo2, indigoDark.indigo2],
 
   // #region buttons
   // solid
@@ -600,9 +609,12 @@ export const themeColors = {
     getOpacities(whiteA.whiteA0).opacity80,
     getOpacities(whiteA.whiteA0).opacity80,
   ],
+  colorIconButtonSolidAccent: [whiteA.whiteA0, whiteA.whiteA0],
+  colorIconButtonSolidNeutral: [whiteA.whiteA0, slateDark.slate8],
+  colorIconButtonSolidDestructive: [whiteA.whiteA0, whiteA.whiteA0],
   // outline
   colorBorderButtonOutlineAccentDefault: [indigo.indigo8, indigoDark.indigo8],
-  colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate8],
+  colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate7],
   colorBorderButtonOutlineDestructiveDefault: [red.red7, redDark.red7],
   colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
   colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo3],
@@ -622,6 +634,9 @@ export const themeColors = {
   ],
   colorTextButtonOutlineDestructive: [red.red11, redDark.red11],
   colorTextButtonOutlineDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonOutlineAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonOutlineNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonOutlineDestructive: [red.red11, redDark.red11],
   // soft
   colorBgButtonSoftAccentDefault: [indigo.indigo3, indigoDark.indigo4],
   colorBgButtonSoftAccentHover: [indigo.indigo5, indigoDark.indigo6],
@@ -638,11 +653,14 @@ export const themeColors = {
   colorTextButtonSoftNeutralActive: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
   colorTextButtonSoftDestructive: [red.red11, redDark.red11],
   colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonSoftNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonSoftDestructive: [red.red11, redDark.red11],
   // ghost
   colorBgButtonGhostAccentDefault: [transparent, transparent],
-  colorBgButtonGhostAccentHover: [indigo.indigo3, indigoDark.indigo3],
+  colorBgButtonGhostAccentHover: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
   colorBgButtonGhostNeutralDefault: [transparent, transparent],
-  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate6).opacity60, getOpacities(slateDark.slate6).opacity80],
+  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate7).opacity50, getOpacities(slateDark.slate6).opacity80],
   colorBgButtonGhostDestructiveDefault: [transparent, transparent],
   colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
   colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -654,6 +672,9 @@ export const themeColors = {
   colorTextButtonGhostNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
   colorTextButtonGhostDestructive: [red.red11, redDark.red11],
   colorTextButtonGhostDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonGhostNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonGhostDestructive: [red.red11, redDark.red11],
   // #endregion
 
   colorBorderAccentFocusRing: [getOpacities(indigo.indigo9).opacity30, getOpacities(indigo.indigo9).opacity30],
@@ -685,14 +706,20 @@ export const themeColors = {
   colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
 
   //Whiteboard
-  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
+  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],
   instrumentsMenuShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 10px 16px -8px ${getOpacities(slate.slate10).opacity30}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 10px 16px -8px ${
-      getOpacities(slateDark.slate1).opacity30
-    }`,
+    `0px 0px 1px 0px ${getOpacities(slate.slate11).opacity20}, 0px 4px 6px 0px ${
+      getOpacities(slate.slate11).opacity5
+    }, 0px 3px 12px 0px ${getOpacities(slate.slate11).opacity10}`,
+    `0px 0px 1px 0px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
+      getOpacities(slateDark.slate1).opacity5
+    }, 0px 3px 12px 0px ${getOpacities(slateDark.slate1).opacity15}`,
   ],
   commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
+  commentsPanelShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
+  ],
 
   // SegmentedControl
   colorBgSegmentedControlDefault: [slate.slate3, slateDark.slate1],
@@ -828,14 +855,15 @@ const colorsByTheme: Record<string, DesignColor> = {
 };
 
 export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColors = _.memoize(
-  (themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
+  (_themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
+    const cl = brandColors.blue;
     const colors = colorsByTheme[theme];
     return {
-      ...getTypeColors(themeColor, theme),
+      ...getTypeColors(cl, theme),
       ...colors,
     };
   },
-  (themeColor, theme) => themeColor + theme
+  (_themeColor, theme) => theme
 );
 
 export const getTextColor = _.memoize((color: string): string => {
@@ -947,7 +975,7 @@ export const layout = {
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
   collapsedMenuMinWidth: 47,
-  menuMinWidth: 240, //TODO: make dependency to itemHeight
+  menuMinWidth: 284,
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 28, // I'm ok
@@ -971,9 +999,9 @@ export const layout = {
   viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
   timelineToolbarHeight: 48,
-  timelineLineHeight: 48,
+  timelineLineHeight: 40,
   timelineGroupPadding: 0,
-  timelineItemHeightRatio: 36 / 48,
+  timelineItemHeightRatio: 32 / 40,
   timelineHeaderHeight: 48,
   calendarEventHeight: 30,
   calendarHeaderHeight: 30,
@@ -1053,7 +1081,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
   return colorHash.hex(name);
 });
 
-export const themeVars = Object.keys(getThemeColors(brandColors.green, "light")).reduce((vars, key) => {
+export const themeVars = Object.keys(getThemeColors(brandColors.blue, "light")).reduce((vars, key) => {
   if (key === "opacity") {
     vars[key] = Object.fromEntries(
       Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
@@ -1114,7 +1142,7 @@ export const textStyles = {
     fontSize: typeSizes[0],
     letterSpacing: "-0.01em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading2: {
@@ -1226,4 +1254,14 @@ export const textStyles = {
     border: `1px solid ${themeVars.active}`,
     borderRadius: border.radius6,
   },
+  numeric: {
+    tabularOn: {
+      fontVariantNumeric: "tabular-nums",
+      fontFeatureSettings: '"tnum" 1',
+    },
+    tabularOff: {
+      fontVariantNumeric: "normal",
+      fontFeatureSettings: '"tnum" 0',
+    },
+  },
 } as const;

package/src/dnd.tsx

@@ -0,0 +1,55 @@
+import {css, cx} from "@linaria/core";
+import {FC, HTMLAttributes, PropsWithChildren} from "react";
+import {border, space, themeVars} from "./design-system";
+import DragHandleIcon from "./icons/react/DragHandle";
+
+export const draggingStyle = {
+  backgroundColor: themeVars.actionMenuBg,
+  borderRadius: border.radius6,
+  boxShadow: themeVars.entityCardShadowHover,
+};
+
+const dragHandlerStyle = css`
+  ${{
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    borderRadius: border.radius4,
+    display: "flex",
+    alignItems: "center",
+    "&:focus-visible": {outline: "none", backgroundColor: themeVars.opacity.opacity15},
+  }}
+`;
+
+export const DragHandler: FC<{disabled?: boolean; preserveOnHide?: boolean} & HTMLAttributes<HTMLDivElement>> = ({
+  disabled = false,
+  preserveOnHide = false,
+  className,
+  ...rest
+}) => {
+  return (
+    <div
+      style={{visibility: disabled ? "hidden" : "visible", width: disabled && !preserveOnHide ? "0" : "auto"}}
+      className={cx(dragHandlerStyle, className)}
+      {...rest}
+    >
+      <DragHandleIcon containerSize={16} color={themeVars.iconColor} />
+    </div>
+  );
+};
+const dragContainerStyle = css`
+  ${{
+    padding: space.s6,
+  }}
+`;
+
+export const DragContainer: FC<PropsWithChildren<{isDragging: boolean; className?: string}>> = ({
+  isDragging,
+  children,
+  className,
+}) => {
+  return (
+    <div className={cx(dragContainerStyle, className)} style={isDragging ? draggingStyle : undefined}>
+      {children}
+    </div>
+  );
+};