@fibery/ui-kit 1.40.4 → 1.42.0

package/src/{design-system.colors.ts → design-system/colors.ts}

@@ -1,17 +1,10 @@
 /* eslint-disable max-lines */
-import {ThemePalette} from "./palette-generator";
-import _ from "lodash";
-import {a11yColor} from "./a11y-color";
-import {darkenChroma, produceColor, setAlpha, setLuminanceChroma} from "./color-utils";
-import {ThemeMode} from "./theme-settings";
-
-const transparent = "rgba(255, 255, 255, 0)";
-
-export const brandColors = {
-  red: "#FF5400",
-  green: "#08BD9F",
-  blue: "#4978D4",
-} as const;
+import {ThemePalette} from "../palette-generator";
+import mapValues from "lodash/mapValues";
+import {a11yColor} from "../a11y-color";
+import {darkenChroma, produceColor, set, setAlpha, setLuminanceChroma} from "../color-utils";
+import {ThemeMode} from "../theme-settings";
+import {getOpacities, opacity, transparent} from "./alpha";
 
 export const cardTypeColors = [
   "#4A4A4A",
@@ -39,39 +32,6 @@ const swatches = {
   green: "#69AC5E",
 };
 
-export const opacity = {
-  opacity100: 1,
-  opacity95: 0.95,
-  opacity90: 0.9,
-  opacity85: 0.85,
-  opacity80: 0.8,
-  opacity75: 0.75,
-  opacity70: 0.7,
-  opacity65: 0.65,
-  opacity60: 0.6,
-  opacity55: 0.55,
-  opacity50: 0.5,
-  opacity45: 0.45,
-  opacity40: 0.4,
-  opacity35: 0.35,
-  opacity30: 0.3,
-  opacity25: 0.25,
-  opacity20: 0.2,
-  opacity15: 0.15,
-  opacity10: 0.1,
-  opacity5: 0.05,
-  opacity0: 0,
-} as const;
-
-export const getOpacities = _.memoize((color: string) =>
-  _.mapValues(opacity, (opacityValue) => {
-    if (color === transparent) {
-      return transparent;
-    }
-    return produceColor(color, (c) => setAlpha(c, opacityValue));
-  })
-);
-
 type ThemeColorsDef = Record<
   string,
   | readonly [lightColor: string, darkColor: string]
@@ -93,6 +53,8 @@ type ThemeFnsDef = Record<
 export function makeThemeDefs({
   white,
   black,
+  whiteA,
+  blackA,
   base,
   baseDark,
   accent,
@@ -104,27 +66,25 @@ export function makeThemeDefs({
   yellow,
   yellowDark,
 }: ThemePalette) {
-  const shades = getOpacities(black[0]);
+  const blackish = produceColor(black, (x) => set(x, "hsl.l", (x) => x + 5));
+
+  const shades = getOpacities(black);
   const separators = {
-    ..._.mapValues(shades, (shade) => `0.5px solid ${shade}`),
+    ...mapValues(shades, (shade) => `0.5px solid ${shade}`),
   } as const;
 
-  const lights = getOpacities(white[0]);
+  const lights = getOpacities(white);
   const inversedSeparators = {
-    ..._.mapValues(lights, (light) => `0.5px solid ${light}`),
+    ...mapValues(lights, (light) => `0.5px solid ${light}`),
   } as const;
 
   const colors = {
     mode: ["light", "dark"],
-    brandColors: [brandColors, brandColors],
-    colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
-    colorBgAI: ["hsla(271, 57%, 61%, 0.09)", "hsla(272, 43%, 50%, 0.2)"],
-    colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
 
     // Elevations
-    surfaceElevationS: [`0 2px 4px 0 ${black[3]}`, `0 2px 4px 0 ${white[3]}`],
-    surfaceElevationM: [`0 4px 8px 0 ${black[5]}`, `0 4px 8px 0 ${white[5]}`],
-    surfaceElevationL: [`0 8px 12px 0 ${black[5]}`, `0 8px 12px 0 ${white[5]}`],
+    surfaceElevationS: [`0 2px 4px 0 ${blackA[3]}`, `0 2px 4px 0 ${whiteA[3]}`],
+    surfaceElevationM: [`0 4px 8px 0 ${blackA[5]}`, `0 4px 8px 0 ${whiteA[5]}`],
+    surfaceElevationL: [`0 8px 12px 0 ${blackA[5]}`, `0 8px 12px 0 ${whiteA[5]}`],
 
     // Shadows and effects / Elevation
     shadow50: [
@@ -178,38 +138,39 @@ export function makeThemeDefs({
 
     // Rubbish dump
     primaryBlue: [accent[9], accentDark[9]],
-    whiteColor: [white[0], white[0]],
-    blackColor: [black[0], black[0]],
-    mainBg: [base[3], baseDark[0]],
-    panelBg: [white[0], baseDark[1]],
+    whiteColor: [white, white],
+    blackColor: [black, black],
+    mainBg: [base[3], blackish],
+    panelBg: [white, baseDark[1]],
     panelContentBg: [base[2], baseDark[1]],
     colorBgRelationContainer: [base[2], baseDark[1]],
+    // AI colors
+    colorAI: ["rgb(157, 99, 212)", "rgb(131, 73, 182)"],
+    colorBgAI: ["rgba(157, 99, 212, 0.1)", "rgba(131, 73, 182, 0.1)"],
+    colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
+    colorBgAIFloatingLauncher: [base[1], baseDark[4]],
+    colorBgAIFloatingPanelContent: [base[1], baseDark[3]],
     colorBgAISidebarContent: [base[1], baseDark[1]],
-    pageContentBg: [white[0], baseDark[2]],
-    colorBgPopup: [white[0], baseDark[4]],
-    menuBg: [base[3], baseDark[0]],
-    menuTextColor: [baseDark[5], base[8]],
+    // Other colors
+    pageContentBg: [white, baseDark[2]],
+    colorBgPopup: [white, baseDark[4]],
+    menuBg: [base[3], blackish],
+    menuTextColor: [base[12], baseDark[12]],
     menuItemHoverColor: [base[5], baseDark[6]],
     menuSelectedTextColor: [base[2], base[2]],
     menuIconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
 
     // Text, links colors
-    textColor: [baseDark[5], base[6]],
+    textColor: [base[12], baseDark[12]],
     textSelectionColor: [getOpacities(accent[9]).opacity20, getOpacities(accentDark[9]).opacity40],
     accentTextColor: [base[10], baseDark[10]],
     disabledTextColor: [base[9], baseDark[9]],
     inversedTextColor: [base[3], baseDark[6]],
     colorTextSecondary: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity65],
-    linkColor: [accentDark[10], accentDark[10]],
-    linkBorder: [
-      `0.5px solid ${getOpacities(accentDark[10]).opacity40}`,
-      `0.5px solid ${getOpacities(accentDark[11]).opacity40}`,
-    ],
-    linkHoverColor: [accent[10], accentDark[11]],
-    linkBorderHover: [
-      `0.5px solid ${getOpacities(accent[10]).opacity80}`,
-      `0.5px solid ${getOpacities(accentDark[10]).opacity70}`,
-    ],
+    linkColor: ["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"],
+    linkBorder: [`0.5px solid "rgba(56, 105, 204, 0.4)"`, `0.5px solid "rgba(151, 177, 237, 0.4)"`],
+    linkHoverColor: ["rgba(56, 105, 204, 1)", "rgba(151, 177, 237, 1)"],
+    linkBorderHover: [`0.5px solid "rgba(56, 105, 204, 0.8)"`, `0.5px solid "rgba(151, 177, 237, 0.7)"`],
     codeColor: [red[9], red[8]],
     codeBgColor: [base[3], baseDark[4]],
     codeBlockBgColor: [base[3], baseDark[4]],
@@ -236,7 +197,7 @@ export function makeThemeDefs({
     shortcutBorderColor: [getOpacities(base[8]).opacity50, getOpacities(baseDark[10]).opacity20],
 
     // Input
-    inputBgColor: [white[0], baseDark[2]],
+    inputBgColor: [white, baseDark[2]],
     inputDisabledBgColor: [getOpacities(base[6]).opacity30, getOpacities(baseDark[6]).opacity30],
     inputDisabledBorderColor: [
       `0 0 0 1px ${getOpacities(base[6]).opacity20}`,
@@ -277,25 +238,25 @@ export function makeThemeDefs({
     colorBorderBlockQuote: [base[11], baseDark[11]],
 
     // Actions menu
-    colorBgActionsMenu: [white[0], baseDark[3]],
-    colorBgActionsMenuItemHover: [getOpacities(base[11]).opacity10, getOpacities(baseDark[11]).opacity10],
+    colorBgActionsMenu: [white, baseDark[3]],
+    colorBgActionsMenuItemHover: [base[4], baseDark[5]],
     colorBgActionsMenuItemSelected: [getOpacities(accent[4]).opacity80, getOpacities(accentDark[4]).opacity80],
     colorBgActionsMenuItemSelectedHover: [getOpacities(accent[5]).opacity80, getOpacities(accentDark[6]).opacity80],
     colorBgActionsMenuItemDangerHover: [getOpacities(red[9]).opacity10, getOpacities(redDark[10]).opacity10],
     colorBgActionsMenuItemDangerActive: [getOpacities(red[9]).opacity80, getOpacities(redDark[10]).opacity80],
-    actionMenuBg: [white[0], baseDark[3]],
-    actionMenuInnerBg: [white[0], baseDark[4]],
+    actionMenuBg: [white, baseDark[3]],
+    actionMenuInnerBg: [white, baseDark[4]],
     actionMenuHover: [base[4], baseDark[5]],
     actionMenuInnerHover: [base[4], getOpacities(baseDark[6]).opacity50],
-    actionMenuButtonColor: [white[0], baseDark[2]],
+    actionMenuButtonColor: [white, baseDark[2]],
     actionMenuButtonHoverColor: [base[1], baseDark[3]],
     actionMenuButtonShadow: [
       `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
       `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
     ],
-    actionMenuSeparatorColor: [getOpacities(black[0]).opacity10, getOpacities(white[0]).opacity15],
-    separatorColor: [getOpacities(black[0]).opacity10, getOpacities(white[0]).opacity10],
-    separatorColorDimmed: [getOpacities(black[0]).opacity5, getOpacities(white[0]).opacity5],
+    actionMenuSeparatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity15],
+    separatorColor: [getOpacities(black).opacity10, getOpacities(white).opacity10],
+    separatorColorDimmed: [getOpacities(black).opacity5, getOpacities(white).opacity5],
     separatorBreadcrumbsColor: [base[8], baseDark[8]],
     iconColor: [getOpacities(base[12]).opacity70, getOpacities(baseDark[12]).opacity70],
     appIconColor: [getOpacities(base[2]).opacity90, getOpacities(base[2]).opacity70],
@@ -327,27 +288,27 @@ export function makeThemeDefs({
     opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
     // Entity Box Style And States
     // Basic Entity Box State
-    colorBgEntityBoxDefault: [white[0], baseDark[3]],
+    colorBgEntityBoxDefault: [white, baseDark[3]],
     shadowStrokeEntityBoxDefault: [`0 0 0 1px ${base[5]}`, `0 0 0 1px ${baseDark[5]}`],
     shadowEntityBoxDefault: [
       `0px 2px 4px 0px ${getOpacities(base[12]).opacity5}`,
       `0px 2px 4px 0px ${getOpacities(baseDark[1]).opacity5}`,
     ],
     // :hover
-    colorBgEntityBoxDefaultHover: [white[0], baseDark[4]],
+    colorBgEntityBoxDefaultHover: [white, baseDark[4]],
     shadowEntityBoxDefaultHover: [
       `0px 4px 8px 0px ${getOpacities(base[12]).opacity10}`,
       `0px 4px 8px 0px ${getOpacities(baseDark[1]).opacity10}`,
     ],
     // :focus
-    colorBgEntityBoxDefaultFocus: [white[0], baseDark[3]],
+    colorBgEntityBoxDefaultFocus: [white, baseDark[3]],
     colorOverlayEntityBoxDefaultFocus: [accent[9], accentDark[9]],
     shadowStrokeEntityBoxDefaultFocus: [
       `0 0 0 2px ${getOpacities(accent[9]).opacity40}`,
       `0 0 0 2px ${getOpacities(accentDark[9]).opacity40}`,
     ],
     // :focus:hover
-    colorBgEntityBoxDefaultFocusHover: [white[0], baseDark[4]],
+    colorBgEntityBoxDefaultFocusHover: [white, baseDark[4]],
     colorOverlayEntityBoxDefaultFocusHover: [accent[9], accentDark[9]],
     shadowStrokeEntityBoxDefaultFocusHover: [
       `0 0 0 2px ${getOpacities(accent[9]).opacity60}`,
@@ -386,7 +347,7 @@ export function makeThemeDefs({
     // :drag
     opacityEntityBoxDisabledDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
     // Entity Old
-    entityCardBgColor: [white[0], baseDark[5]],
+    entityCardBgColor: [white, baseDark[5]],
     entityCardSelectedColor: [getOpacities(base[2]).opacity80, getOpacities(baseDark[6]).opacity50],
     entityCardHoverColor: [getOpacities(base[2]).opacity80, getOpacities(baseDark[6]).opacity50],
     entityCardDoneColor: [getOpacities(base[4]).opacity30, getOpacities(baseDark[5]).opacity30],
@@ -399,7 +360,7 @@ export function makeThemeDefs({
       `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
     ],
     colorBgSegmentedControl: [getOpacities(base[5]).opacity80, getOpacities(baseDark[3]).opacity80],
-    colorBgMenuHeaderAvatar: [white[0], baseDark[2]],
+    colorBgMenuHeaderAvatar: [white, baseDark[2]],
     shadowMenuHeaderAvatar: [
       `0px 1px 4px ${getOpacities(base[11]).opacity10}, 0 0 0 0.5px ${getOpacities(base[5]).opacity50}`,
       `0 0 0 1px ${getOpacities(baseDark[9]).opacity20}`,
@@ -409,7 +370,8 @@ export function makeThemeDefs({
     opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
     colorBgMenuItemSelectedDragged: [accent[6], accentDark[6]],
     // Default
-    colorTextMenuItem: [baseDark[5], getOpacities(baseDark[12]).opacity90],
+    colorTextMenuItem: [getOpacities(base[12]).opacity90, getOpacities(baseDark[12]).opacity90],
+
     colorBgMenuItem: [transparent, transparent],
     // :hover
     colorBgMenuItemHover: [base[5], baseDark[2]],
@@ -467,12 +429,12 @@ export function makeThemeDefs({
     warningBgColor: [getOpacities(yellow[6]).opacity60, getOpacities(yellowDark[8]).opacity60],
     warningButtonColor: [yellow[11], yellowDark[11]],
     infoBox: [getOpacities(yellow[4]).opacity50, getOpacities(yellowDark[9]).opacity20],
-    appCardBgColor: [white[0], baseDark[2]],
+    appCardBgColor: [white, baseDark[2]],
     appCardHoverColor: [getOpacities(base[1]).opacity95, baseDark[2]],
     modalBg: [getOpacities(base[11]).opacity20, getOpacities(baseDark[2]).opacity50],
-    modalContentBg: [white[0], baseDark[3]],
-    progressIconBg: [black[7], white[7]],
-    progressIconFill: [black[11], white[11]],
+    modalContentBg: [white, baseDark[3]],
+    progressIconBg: [blackA[7], whiteA[7]],
+    progressIconFill: [blackA[11], whiteA[11]],
     formBg: [base[2], baseDark[2]],
     formHeaderShadow: [
       `${getOpacities(base[10]).opacity10} 0px 0px 6px`,
@@ -481,7 +443,7 @@ export function makeThemeDefs({
     formEditorFieldBg: [base[3], baseDark[4]],
     filterGroup1Bg: [base[2], baseDark[6]],
     filterGroup2Bg: [base[3], baseDark[7]],
-    filterGroupBorder: [black[3], white[3]],
+    filterGroupBorder: [blackA[3], whiteA[3]],
     colorBgNotificationHover: [base[3], baseDark[4]],
     colorBgNotificationSelected: [accent[3], accentDark[4]],
     colorBgNotificationSelectedHover: [accent[4], accentDark[6]],
@@ -490,25 +452,24 @@ export function makeThemeDefs({
     danger: [red[9], redDark[10]],
     active: [red[9], redDark[10]],
     warning: [yellow[9], yellowDark[8]],
-    cardBg: [white[0], baseDark[6]],
-    selectedImageBorder: [black[8], white[11]],
+    cardBg: [white, baseDark[6]],
+    selectedImageBorder: [blackA[8], whiteA[11]],
     transparent: [transparent, transparent],
     shades: [lights, shades],
     lights: [shades, lights],
     separators: [separators, inversedSeparators],
-    inversedSeparators: [inversedSeparators, separators],
     // FIXME: lack of baseDark scale usage, same values!
     progressBg: [base[4], base[4]],
     progressText: [base[11], base[11]],
     progressFillBg: [base[11], base[11]],
-    progressFillText: [white[0], white[0]],
+    progressFillText: [white, white],
     progressBarFillNeutral: [getOpacities(base[9]).opacity20, getOpacities(baseDark[9]).opacity20],
     progressBarFill: [accent[9], accentDark[10]],
     progressBarBg: [getOpacities(accent[9]).opacity25, getOpacities(accentDark[10]).opacity25],
     // FIXME: lack of inverse scale usage, same values!
-    colorPickerSwatchBorder: [black[7], black[7]],
-    colorBorderRichTextMedia: [black[7], black[7]],
-    richTextTableBorder: [black[5], white[7]],
+    colorPickerSwatchBorder: [blackA[7], blackA[7]],
+    colorBorderRichTextMedia: [blackA[7], blackA[7]],
+    richTextTableBorder: [blackA[5], whiteA[7]],
 
     // Drag and drop
     colorBgDropLine: [accent[8], accentDark[8]],
@@ -527,7 +488,7 @@ export function makeThemeDefs({
     gridHeaderBgColor: [base[2], baseDark[3]],
     gridHeaderHoverBgColor: [base[3], baseDark[4]],
     gridHeaderTextColor: [base[10], baseDark[11]],
-    gridCellBgColor: [white[0], baseDark[2]],
+    gridCellBgColor: [white, baseDark[2]],
     gridCellBorderColor: [base[5], baseDark[6]],
     gridDisabledCellBgColor: [base[2], baseDark[3]],
     gridSelectedCellBgColor: [accent[3], accentDark[3]],
@@ -552,27 +513,27 @@ export function makeThemeDefs({
     colorBgButtonSolidAccentDefault: [accent[9], accentDark[9]],
     colorBgButtonSolidAccentHover: [accent[11], accentDark[10]],
     colorBgButtonSolidNeutralDefault: [base[12], baseDark[12]],
-    colorBgButtonSolidNeutralHover: [getOpacities(base[12]).opacity85, white[0]],
+    colorBgButtonSolidNeutralHover: [getOpacities(base[12]).opacity85, white],
     colorBgButtonSolidDestructiveDefault: [red[9], redDark[9]],
     colorBgButtonSolidDestructiveHover: [red[11], redDark[10]],
-    colorTextButtonSolidAccent: [white[0], white[0]],
-    colorTextButtonSolidAccentActive: [getOpacities(white[0]).opacity80, getOpacities(white[0]).opacity80],
-    colorTextButtonSolidNeutral: [white[0], baseDark[2]],
-    colorTextButtonSolidNeutralActive: [white[0], getOpacities(baseDark[2]).opacity80],
-    colorTextButtonSolidDestructive: [white[0], white[0]],
-    colorTextButtonSolidDestructiveActive: [getOpacities(white[0]).opacity80, getOpacities(white[0]).opacity80],
-    colorIconButtonSolidAccent: [white[0], white[0]],
-    colorIconButtonSolidNeutral: [white[0], baseDark[8]],
-    colorIconButtonSolidDestructive: [white[0], white[0]],
+    colorTextButtonSolidAccent: [white, white],
+    colorTextButtonSolidAccentActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
+    colorTextButtonSolidNeutral: [white, baseDark[2]],
+    colorTextButtonSolidNeutralActive: [white, getOpacities(baseDark[2]).opacity80],
+    colorTextButtonSolidDestructive: [white, white],
+    colorTextButtonSolidDestructiveActive: [getOpacities(white).opacity80, getOpacities(white).opacity80],
+    colorIconButtonSolidAccent: [white, white],
+    colorIconButtonSolidNeutral: [white, baseDark[8]],
+    colorIconButtonSolidDestructive: [white, white],
     // outline
     colorBorderButtonOutlineAccentDefault: [accent[8], accentDark[8]],
     colorBorderButtonOutlineNeutralDefault: [base[8], baseDark[7]],
     colorBorderButtonOutlineDestructiveDefault: [red[7], redDark[7]],
-    colorBgButtonOutlineAccentDefault: [white[0], baseDark[1]],
+    colorBgButtonOutlineAccentDefault: [white, baseDark[1]],
     colorBgButtonOutlineAccentHover: [accent[3], accentDark[3]],
-    colorBgButtonOutlineNeutralDefault: [white[0], baseDark[1]],
+    colorBgButtonOutlineNeutralDefault: [white, baseDark[1]],
     colorBgButtonOutlineNeutralHover: [base[4], baseDark[4]],
-    colorBgButtonOutlineDestructiveDefault: [white[0], baseDark[1]],
+    colorBgButtonOutlineDestructiveDefault: [white, baseDark[1]],
     colorBgButtonOutlineDestructiveHover: [red[4], redDark[4]],
     colorTextButtonOutlineAccent: [accent[11], accentDark[11]],
     colorTextButtonOutlineAccentActive: [getOpacities(accent[11]).opacity80, getOpacities(accentDark[11]).opacity80],
@@ -621,7 +582,7 @@ export function makeThemeDefs({
     colorBorderNeutralFocusRing: [getOpacities(base[9]).opacity30, getOpacities(base[9]).opacity30],
     colorBorderDestructiveFocusRing: [getOpacities(red[9]).opacity30, getOpacities(red[9]).opacity30],
 
-    colorBgReactionsDefault: [white[0], baseDark[2]],
+    colorBgReactionsDefault: [white, baseDark[2]],
     colorBgReactionsHover: [base[3], baseDark[6]],
     colorBorderReactionsHover: [base[8], baseDark[9]],
     colorBgReactionsSelectedDefault: [accent[3], accentDark[8]],
@@ -636,7 +597,7 @@ export function makeThemeDefs({
     colorBgTabHover: [getOpacities(base[11]).opacity10, getOpacities(baseDark[11]).opacity10],
 
     // Chat
-    colorBgMessageContainer: [black[3], baseDark[6]],
+    colorBgMessageContainer: [blackA[3], baseDark[6]],
     colorBgMessageContainerHover: [base[2], baseDark[3]],
     colorBgEntityAvatarDefault: [accent[1], accentDark[1]],
     colorBgEntityAvatarHover: [accent[3], accentDark[3]],
@@ -650,7 +611,30 @@ export function makeThemeDefs({
     colorMermaidLineColor: [base[10], baseDark[9]],
 
     //Whiteboard
-    instrumentsMenuBg: [getOpacities(white[0]).opacity100, getOpacities(baseDark[4]).opacity100],
+    colorBgWhiteboard: [white, baseDark[1]],
+    colorGridDotWhiteboard: [base[6], baseDark[6]],
+    colorSelectionWhiteboardBorderEnabled: [accent[8], accentDark[8]],
+    colorHighlightWhiteboardSelection: [accent[8], accentDark[8]],
+    colorHighlightWhiteboardSelectionLocked: [getOpacities(base[9]).opacity50, getOpacities(baseDark[9]).opacity50],
+    colorSelectionWhiteboardBorderDisabled: [getOpacities(base[9]).opacity50, getOpacities(baseDark[9]).opacity50],
+    colorPlaceholderWhiteboardDefault: [getOpacities(accent[8]).opacity20, getOpacities(accentDark[8]).opacity20],
+    colorLinkPointWhiteboardDefault: [accent[8], accentDark[8]],
+    colorLinkPointWhiteboardFillDefault: [white, blackish],
+    colorMapWhiteboardPreviewDefault: [getOpacities(accent[8]).opacity40, getOpacities(accentDark[8]).opacity40],
+    colorCardWhiteboardShadowDefault: [getOpacities(base[11]).opacity5, getOpacities(baseDark[11]).opacity5],
+    colorCardWhiteboardBgDefault: [white, baseDark[5]],
+    colorCardWhiteboardBorderDefault: [getOpacities(base[12]).opacity20, getOpacities(baseDark[12]).opacity20],
+    colorUnitHeaderWhiteboardDefault: [getOpacities(base[12]).opacity60, getOpacities(baseDark[12]).opacity60],
+    colorUnitWhiteboardBgDefault: [base[3], baseDark[6]],
+    colorUnitWhiteboardBorderDefault: [getOpacities(base[12]).opacity20, getOpacities(baseDark[12]).opacity25],
+    colorSectionWhiteboardBgInactive: [base[2], baseDark[2]],
+    colorSectionWhiteboardBorderInactive: [base[6], baseDark[6]],
+    colorEmbedWhiteboardEditBorder: [getOpacities(teal[8]).opacity90, getOpacities(tealDark[8]).opacity90],
+    colorTextWhiteboardDefault: [base[12], baseDark[12]],
+    colorTextWhiteboardDisabled: [base[9], baseDark[9]],
+    colorTextWhiteboardAccent: [getOpacities(base[12]).opacity60, getOpacities(baseDark[1]).opacity60],
+    colorTextWhiteboardInversedDefault: [white, white],
+    instrumentsMenuBg: [getOpacities(white).opacity100, getOpacities(baseDark[4]).opacity100],
     instrumentsMenuShadow: [
       `0px 0px 1px 0px ${getOpacities(base[11]).opacity20}, 0px 4px 6px 0px ${
         getOpacities(base[11]).opacity5
@@ -659,7 +643,7 @@ export function makeThemeDefs({
         getOpacities(baseDark[1]).opacity5
       }, 0px 3px 12px 0px ${getOpacities(baseDark[1]).opacity15}`,
     ],
-    commentBubbleBg: [white[0], baseDark[6]],
+    commentBubbleBg: [white, baseDark[6]],
     commentsPanelShadow: [
       `0 0 0 1px ${getOpacities(base[10]).opacity10}, 0 2px 4px -4px ${getOpacities(base[10]).opacity20}`,
       `0 0 0 1px ${getOpacities(baseDark[2]).opacity10}, 0 2px 4px -4px ${getOpacities(baseDark[2]).opacity20}`,
@@ -685,25 +669,28 @@ export function makeThemeDefs({
     colorBorderLogoGrid: [base[4], baseDark[4]],
     colorBorderLogoGridSubtle: [getOpacities(base[4]).opacity20, baseDark[4]],
     colorBorderLogoGridMedium: [getOpacities(base[4]).opacity40, baseDark[4]],
-    colorStrokeLogoDashed: [base[6], baseDark[6]],
-    colorBgLogoCardTransparent: [white[0], baseDark[2]],
+    colorStrokeLogoDashed: [base[6], baseDark[8]],
+    colorBgLogoCardTransparent: [white, baseDark[2]],
     colorBgLogoCardDark: [base[8], baseDark[8]],
     colorBgLogoCardMedium: [base[4], baseDark[4]],
+
+    // Preloader / chrome
+    scrollbar: [getOpacities(base[9]).opacity50, getOpacities(baseDark[7]).opacity50],
   } as const satisfies ThemeColorsDef;
 
   const fns = {
     getEnumBackground: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity15, white[0], 1),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
+      light: (color: string) => a11yColor(getOpacities(color).opacity15, white, 1),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
     },
     getAppIconBackground: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity15, white[0], 1),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
-      light2: (color: string) => a11yColor(getOpacities(color).opacity30, baseDark[0], 1.3),
+      light: (color: string) => a11yColor(getOpacities(color).opacity15, white, 1),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
+      light2: (color: string) => a11yColor(getOpacities(color).opacity30, blackish, 1.3),
     },
     getIconColor: {
-      light: (color: string) => a11yColor(getOpacities(color).opacity95, white[0], 3),
-      dark: (color: string) => a11yColor(getOpacities(color).opacity95, baseDark[0], 5),
+      light: (color: string) => a11yColor(getOpacities(color).opacity95, white, 3),
+      dark: (color: string) => a11yColor(getOpacities(color).opacity95, blackish, 5),
     },
     getLinkedHighlightBackground: {
       light: (color: string) => produceColor(color, [(c) => setAlpha(c, 0.3), (c) => setLuminanceChroma(c, 0.6)]),
@@ -744,17 +731,29 @@ function pickColorsByIndex<I extends 0 | 1>(colors: ThemeDefsColors, idx: I): Ge
   ) as GetThemeColors<I>;
 }
 
-export function pickLightColors(themeDefs: ThemeDefs) {
+function pickLightColors(themeDefs: ThemeDefs) {
   return pickColorsByIndex(themeDefs.colors, 0);
 }
 
-export function pickDarkColors(themeDefs: ThemeDefs) {
+function pickDarkColors(themeDefs: ThemeDefs) {
   return pickColorsByIndex(themeDefs.colors, 1);
 }
 
-export function pickLight2Colors(themeDefs: ThemeDefs) {
+function pickLight2Colors(themeDefs: ThemeDefs) {
   return {
     ...pickLightColors(themeDefs),
     mode: "light2",
   } as const;
 }
+
+export function pickColors(themeDefs: ThemeDefs, mode: ThemeMode) {
+  if (mode === "dark") {
+    return pickDarkColors(themeDefs);
+  }
+  if (mode === "light2") {
+    return pickLight2Colors(themeDefs);
+  }
+  return pickLightColors(themeDefs);
+}
+
+export type Colors = ReturnType<typeof pickColors>;

package/src/design-system/date.ts

@@ -0,0 +1,3 @@
+export const dateFormat = "MMM D, YYYY";
+export const dateTimeFormat = "MMM D, YYYY HH:mm";
+export const timeFormat = "HH:mm";

package/src/design-system/layout.ts

@@ -0,0 +1,106 @@
+export const iconSize = 20;
+export const viewBoxSize = "0 0 20 20";
+
+export const minPanelWidth = 490;
+
+/** Token for nested items spacing in nested trees */
+export const spaceNestedTreeLevel = 12;
+export const spaceNestedTreeInterval = 0;
+
+export const space = {
+  spaceAuto: "auto",
+  s0: 0,
+  s1: 1,
+  s2: 2,
+  s3: 3,
+  s4: 4,
+  s5: 5,
+  s6: 6,
+  s8: 8,
+  s10: 10,
+  s12: 12,
+  s14: 14,
+  s16: 16,
+  s18: 18,
+  s20: 20,
+  s24: 24,
+  s28: 28,
+  s32: 32,
+  s36: 36,
+  s40: 40,
+  s44: 44,
+  s48: 48,
+  s56: 56,
+  s60: 60,
+  s64: 64,
+  s80: 80,
+  s96: 96,
+  s112: 112,
+  s128: 128,
+} as const;
+
+export const layout = {
+  logoSize: 18,
+  menuDefaultWidth: 243,
+  fiberyAiSidebarDefaultWidth: 420,
+  fiberyAiSidebarMaxWidth: 920,
+  desktopToolbarHeight: 32,
+  desktopMenuMinWidth: 240,
+  collapsedMenuMinWidth: 47,
+  menuMinWidth: 284,
+  menuMaxWidth: 480,
+  menuItemMinWidth: 80,
+  menuGroupHeaderIndent: 28, // I'm ok
+  menuItemLevelIndent: 24,
+  listItemHeight: 38,
+  mobileListItemHeight: 44,
+  itemHeight: 36,
+  itemWithSubtitleHeight: 52,
+  groupTitleHeight: 30,
+  enumItemHeight: 32,
+  menuItemHeight: 32,
+  mobileMenuItemHeight: 44,
+  newMenuItemHeight: 28, // I'm ok
+  mobileSidebarMenuItemHeight: 44,
+  newMenuIconSize: 18,
+  mobileSidebarIconSize: 20,
+  viewHeaderHeight: space.s12 * 7,
+  viewHeaderCompactHeight: 52,
+  columnMinWidth: 240,
+  columnWidths: {compact: 200, default: 240, list: 280, full: 320},
+  objectEditorMinWidth: 480,
+  typeEditorWidth: "30vw",
+  typeEditorMinWidth: 480,
+  viewSetupWidth: "30vw",
+  viewSetupMinWidth: 380,
+  inputHeight: 36, //TODO: merge input and item height?
+  timelineToolbarHeight: 48,
+  timelineLineHeight: 40,
+  timelineItemHeight: 32,
+  timelineGroupPadding: 0,
+  timelineHeaderHeight: 48,
+  calendarEventHeight: 30,
+  calendarHeaderHeight: 30,
+  calendarToolbarHeight: 48,
+  checkboxSize: 15,
+  fakeBoardWidth: 260,
+  fakeBoardHeight: 160,
+  inlineInputHeight: 32,
+  menuHeight: 32,
+  popupTopMargin: 48,
+  unitHeight: 18,
+} as const;
+
+export const border = {
+  radius0: 0,
+  radius1: 1,
+  radius2: 2,
+  radius4: 4,
+  radius5: 5,
+  radius6: 6,
+  radius8: 8,
+  radius10: 10,
+  radius12: 12,
+  radius16: 16,
+  radius9999: 9999,
+} as const;