@fibery/ui-kit 2.1.1 → 3.0.0

package/src/modal-menu/modal-menu-content.tsx

@@ -1,11 +1,12 @@
-import {ReactNode} from "react";
-import {createPortal} from "react-dom";
 import {css} from "@linaria/core";
+import type {ReactNode} from "react";
+import {createPortal} from "react-dom";
+
+import {CommandMenuList, CommandMenuRoot} from "../command-menu";
 import {space, themeVars} from "../design-system";
 import {getPopupContainerElement} from "../dom-utils";
-import {CommandMenuList, CommandMenuRoot} from "../command-menu";
-import {useModalMenu} from "./contexts/modal-menu-context";
 import {MobilePopover} from "../popover/mobile-popover";
+import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuContentProps {
   children?: ReactNode;

package/src/modal-menu/modal-menu-group.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {ReactNode} from "react";
+import type {ReactNode} from "react";
 
 interface ModalMenuGroupProps {
   children?: ReactNode;

package/src/modal-menu/modal-menu-item.tsx

@@ -1,6 +1,7 @@
 import {css, cx} from "@linaria/core";
-import {ComponentProps, ReactNode} from "react";
-import {space, textStyles} from "../design-system";
+import type {ComponentProps, ReactNode} from "react";
+
+import {space, textClasses} from "../design-system";
 import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
@@ -17,9 +18,9 @@ export const ModalMenuItem = ({children, disabled, onSelect, ...otherProps}: Mod
       role="button"
       {...otherProps}
       className={cx(
+        textClasses.big,
         otherProps.className,
         css`
-          ${textStyles.big}
           padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
         `,
         disabled &&

package/src/modal-menu/modal-menu-label.tsx

@@ -1,6 +1,7 @@
-import {css} from "@linaria/core";
-import {ReactNode} from "react";
-import {layoutVars, space, textStyles, themeVars} from "../design-system";
+import {css, cx} from "@linaria/core";
+import type {ReactNode} from "react";
+
+import {layoutVars, space, textClasses, themeVars} from "../design-system";
 
 interface ModalMenuLabelProps {
   children?: ReactNode;
@@ -9,14 +10,16 @@ interface ModalMenuLabelProps {
 export const ModalMenuLabel = ({children}: ModalMenuLabelProps) => {
   return (
     <div
-      className={css`
-        ${textStyles.big}
-        display: flex;
-        align-items: center;
-        padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
-        min-height: ${layoutVars.sidebarMenuItemHeight};
-        color: ${themeVars.accentTextColor} !important;
-      `}
+      className={cx(
+        textClasses.big,
+        css`
+          display: flex;
+          align-items: center;
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+          min-height: ${layoutVars.sidebarMenuItemHeight};
+          color: ${themeVars.accentTextColor} !important;
+        `
+      )}
     >
       {children}
     </div>

package/src/modal-menu/modal-menu-root.tsx

@@ -1,5 +1,8 @@
-import {ReactNode, RefObject, useCallback, useMemo, useState} from "react";
-import {ModalMenuContextProvider, SubmenuItem} from "./contexts/modal-menu-context";
+import type {ReactNode, RefObject} from "react";
+import {useCallback, useMemo, useState} from "react";
+
+import type {SubmenuItem} from "./contexts/modal-menu-context";
+import {ModalMenuContextProvider} from "./contexts/modal-menu-context";
 
 interface ModalMenuRootProps {
   open?: boolean;

package/src/modal-menu/modal-menu-separator.tsx

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {space, themeVars} from "../design-system";
 
 export const ModalMenuSeparator = () => {

package/src/modal-menu/modal-menu-trigger.tsx

@@ -1,5 +1,7 @@
 import {cx} from "@linaria/core";
-import {cloneElement, ComponentProps, ReactHTMLElement, ReactNode} from "react";
+import type {ComponentProps, ReactHTMLElement, ReactNode} from "react";
+import {cloneElement} from "react";
+
 import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuTriggerProps extends ComponentProps<"div"> {

package/src/modal-menu/modal-submenu-content.tsx

@@ -1,6 +1,7 @@
-import {ReactNode} from "react";
-import {createPortal} from "react-dom";
 import {css} from "@linaria/core";
+import type {ReactNode} from "react";
+import {createPortal} from "react-dom";
+
 import {themeVars, transition} from "../design-system";
 import {useModalMenu} from "./contexts/modal-menu-context";
 import {useModalSubmenu} from "./contexts/modal-submenu-context";

package/src/modal-menu/modal-submenu-trigger.tsx

@@ -1,11 +1,12 @@
 import {css, cx} from "@linaria/core";
-import {ComponentProps, ReactHTMLElement} from "react";
-import {space, textStyles} from "../design-system";
+import type {ComponentProps, ReactNode} from "react";
+
+import {space, textClasses} from "../design-system";
 import {useModalMenu} from "./contexts/modal-menu-context";
 import {useModalSubmenu} from "./contexts/modal-submenu-context";
 
 interface ModalSubmenuTriggerProps extends ComponentProps<"div"> {
-  children: ReactHTMLElement<HTMLButtonElement>;
+  children: ReactNode;
 }
 
 export const ModalSubmenuTrigger = ({children, ...otherProps}: ModalSubmenuTriggerProps) => {
@@ -17,9 +18,9 @@ export const ModalSubmenuTrigger = ({children, ...otherProps}: ModalSubmenuTrigg
       role="button"
       {...otherProps}
       className={cx(
+        textClasses.big,
         otherProps.className,
         css`
-          ${textStyles.big}
           padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
         `
       )}

package/src/modal-menu/modal-submenu.tsx

@@ -1,4 +1,6 @@
-import {ReactNode, useId, useMemo} from "react";
+import type {ReactNode} from "react";
+import {useId, useMemo} from "react";
+
 import {ModalSubmenuContextPovider, useModalSubmenu} from "./contexts/modal-submenu-context";
 
 interface ModalSubmenuProps {

package/src/new-badge.tsx

@@ -1,8 +1,8 @@
-import {css} from "@linaria/core";
-import {space, textStyles, themeVars} from "./design-system";
+import {css, cx} from "@linaria/core";
+
+import {space, textClasses, themeVars} from "./design-system";
 
 const newBadgeStyle = css`
-  ${textStyles.heading8}
   display: inline-block;
   padding: ${space.s2}px 5px;
   color: ${themeVars.colorTextBadgeAccent};
@@ -12,4 +12,6 @@ const newBadgeStyle = css`
 `;
 
 type Props = {children: React.ReactNode};
-export const NewBadge: React.FC<Props> = ({children}) => <span className={newBadgeStyle}>{children}</span>;
+export const NewBadge: React.FC<Props> = ({children}) => (
+  <span className={cx(textClasses.heading8, newBadgeStyle)}>{children}</span>
+);

package/src/new-card-placeholder.tsx

@@ -2,14 +2,17 @@ import {useFocusOutside} from "@fibery/react/src/use-focus-outside";
 import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cx from "classnames";
-import {CSSProperties, FC, ReactNode, RefObject, useCallback, useEffect, useState} from "react";
+import type {CSSProperties, FC, ReactNode, RefObject} from "react";
+import {useCallback, useEffect, useState} from "react";
+
 import {AntTransparentInput, AntTransparentTextArea} from "./antd/input";
 import {Box} from "./box";
 import {Button} from "./button/button";
-import {CardContainer, CardSize, titleUnitsContainerClassName} from "./card-container";
+import type {CardSize} from "./card-container";
+import {CardContainer, titleUnitsContainerClassName} from "./card-container";
 import {space, textStyles, themeVars} from "./design-system";
 import {ignoreEnter} from "./form-utils";
-import {$TSFixMe} from "./tsfixme";
+import type {$TSFixMe} from "./tsfixme";
 
 const disabledTextClassName = css`
   ${{color: themeVars.disabledTextColor}}

package/src/notification-dot.tsx

@@ -1,6 +1,7 @@
+import type {CSSProperties} from "react";
+
 import {themeVars} from "./design-system";
 import {Dot} from "./dot";
-import {CSSProperties} from "react";
 
 type Props = {
   big?: boolean;

package/src/number-input/edit-unit-styles.ts

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {themeVars} from "../design-system";
 
 export const invalidInputStyle = {

package/src/number-input/number-input-inline-with-autosize.tsx

@@ -1,15 +1,16 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import {useCallback, useMemo, useRef, useState} from "react";
 import identity from "lodash/identity";
-import {add, sub} from "./decimal";
 import InputNumber from "rc-input-number";
-import {StepButton, ValueWithStepperWrapper} from "./step-button";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {useCallback, useMemo, useRef, useState} from "react";
+
 import {UnitPrimitive} from "../unit/primitive";
+import {add, sub} from "./decimal";
+import {invalidInputStyle} from "./edit-unit-styles";
 import {Stack} from "./stack";
+import {StepButton, ValueWithStepperWrapper} from "./step-button";
 import {hiddenCss, inputStyle, textInlineStyle} from "./styles";
-import {invalidInputStyle} from "./edit-unit-styles";
-import {NumberInputProps, Value} from "./types";
+import type {NumberInputProps, Value} from "./types";
 import {formatValue, getStep, parseValue} from "./utils";
 
 const invalidCss = css``;

package/src/number-input/number-input-inline.tsx

@@ -1,14 +1,16 @@
-import {textStyles, themeVars} from "../../src/design-system";
-import {css} from "@linaria/core";
-import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
-import {add, sub} from "./decimal";
-import InputNumber from "rc-input-number";
-import {StepButton} from "./step-button";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
 import cx from "classnames";
+import InputNumber from "rc-input-number";
+import type {ComponentProps} from "react";
+import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+
+import {textStyles, themeVars} from "../../src/design-system";
+import {add, sub} from "./decimal";
 import {invalidInputStyle} from "./edit-unit-styles";
+import {StepButton} from "./step-button";
+import type {NumberInputProps} from "./types";
 import {formatValue, getStep, parseValue} from "./utils";
-import {NumberInputProps} from "./types";
 
 const invalidCss = css``;
 

package/src/number-input/number-input.test.tsx

@@ -1,15 +1,16 @@
-import {useState} from "react";
-import {NumberInput} from "./number-input";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import {useState} from "react";
+
 import {TooltipProvider} from "../tooltip";
+import {NumberInput} from "./number-input";
 
 describe("number input", () => {
   const getArrowUp = () => screen.getByRole("button", {name: "Increase Value"});
   const getArrowDown = () => screen.getByRole("button", {name: "Decrease Value"});
 
   const makePercentFormatter = (precision: number) =>
-    jest.fn().mockImplementation((value) => {
+    vi.fn().mockImplementation((value) => {
       const formatter = new Intl.NumberFormat("en-US", {
         style: "percent",
         useGrouping: true,

package/src/number-input/number-input.tsx

@@ -1,8 +1,9 @@
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {useCallback, useMemo, useState} from "react";
+
 import {AntInputNumber} from "../antd/input-number";
 import {add, sub} from "./decimal";
-import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
-import {NumberInputProps} from "./types";
+import type {NumberInputProps} from "./types";
 import {formatValue, getStep, isEmpty, parseValue} from "./utils";
 
 export const NumberInput = ({

package/src/number-input/stack.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import {ReactNode} from "react";
+import type {ReactNode} from "react";
 
 const wrapperCss = css`
   display: grid;

package/src/number-input/step-button.tsx

@@ -1,6 +1,7 @@
-import {border, themeVars} from "../../src/design-system";
-import {css, cx} from "@linaria/core";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css, cx} from "@linaria/core";
+
+import {border, themeVars} from "../../src/design-system";
 
 type StepType = "up" | "down";
 export const stepButtonWidth = 16;

package/src/number-input/styles.ts

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {border, space, textStyles, themeVars} from "../design-system";
 
 export const hiddenCss = css`

package/src/number-input/text-area-auto-sized.tsx

@@ -1,9 +1,10 @@
-import {useEffect, useMemo, useRef} from "react";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {hiddenCss, inputCss, textAreaCss} from "./styles";
 import {css, cx} from "@linaria/core";
-import {Stack} from "./stack";
+import {useEffect, useMemo, useRef} from "react";
+
 import {invalidInputClass} from "./edit-unit-styles";
+import {Stack} from "./stack";
+import {hiddenCss, inputCss, textAreaCss} from "./styles";
 
 type Props = {
   width?: number;

package/src/number-input/text-input-auto-sized.tsx

@@ -1,10 +1,11 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {Stack} from "./stack";
 import {cx} from "@linaria/core";
-import {hiddenCss, inputCss, textInlineCss} from "./styles";
-import {invalidInputClass} from "./edit-unit-styles";
 import {useEffect, useMemo, useRef} from "react";
 
+import {invalidInputClass} from "./edit-unit-styles";
+import {Stack} from "./stack";
+import {hiddenCss, inputCss, textInlineCss} from "./styles";
+
 type Props = {
   value?: string;
   width?: number;

package/src/number-input/utils.ts

@@ -1,5 +1,5 @@
-import {NumberFormat, Value} from "./types";
 import {divideByHundred, multiplyByHundred} from "./decimal";
+import type {NumberFormat, Value} from "./types";
 
 export const isEmpty = (value: Value) => {
   return value === null || value === undefined || value === "";

package/src/online-users.tsx

@@ -1,10 +1,11 @@
 import {css, cx} from "@linaria/core";
 import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
+
 import {AvatarImage} from "./avatar";
 import {border, getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
-import {useTheme} from "./theme-provider";
 import {Popover} from "./popover";
+import {useTheme} from "./theme-provider";
 import {Tooltip} from "./tooltip";
 
 const offset = [0, space.s6] as [number, number];
@@ -151,7 +152,7 @@ export function OnlineUsers({
         </div>
 
         {take(users, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1).map(
-          ({avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
+          ({id, avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
             const tooltipDescription = callBack ? "Click to follow" : "";
             const tooltipTitle = hasAccess ? name : "Private User";
             const userBorderColor = theme.fns.deneutralize(getObjectColorMemoized(name));
@@ -175,7 +176,13 @@ export function OnlineUsers({
                       }
                     }}
                   >
-                    <AvatarImage size={22} disableNativeTitle title={name} avatarUrl={avatarUrl} />
+                    <AvatarImage
+                      size={22}
+                      disableNativeTitle
+                      title={hasAccess ? name : id}
+                      avatarUrl={avatarUrl}
+                      hasAccess={hasAccess}
+                    />
                   </div>
                 </Tooltip>
               </div>
@@ -199,7 +206,7 @@ export function OnlineUsers({
                   color: ${themeVars.textColor};
                 `}
               >
-                {users.map(({avatarUrl, name, callBack}, index) => (
+                {users.map(({id, avatarUrl, name, hasAccess, callBack}, index) => (
                   <li
                     className={css`
                       display: flex;
@@ -222,7 +229,13 @@ export function OnlineUsers({
                         user-select: none;
                       `}
                     >
-                      <AvatarImage size={20} disableNativeTitle title={name} avatarUrl={avatarUrl} />
+                      <AvatarImage
+                        size={20}
+                        disableNativeTitle
+                        title={hasAccess ? name : id}
+                        avatarUrl={avatarUrl}
+                        hasAccess={hasAccess}
+                      />
                     </div>
                     <div>{name}</div>
                   </li>

package/src/open-popover-tracker.tsx

@@ -1,5 +1,6 @@
 import {createContext} from "@fibery/react/src/create-context";
-import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
+import type {ReactNode} from "react";
+import {useCallback, useEffect, useId, useMemo, useState} from "react";
 
 type ContextValue = {
   openPopovers: Set<string>;

package/src/palette-generator.test.ts

@@ -1,29 +1,24 @@
-import {getAlpha, oklchFrom} from "./color-utils";
-import {makeThematicPalette, selectPalette} from "./palette-generator";
-import {zeroBasedFromOneBased} from "./scale-generator";
+import {parse} from "culori";
+
+import {oklchFrom} from "./color-utils";
 import type {ColorScale} from "./design-system/types";
+import {makeThematicPalette, selectPalette} from "./palette-generator";
+import {base0FromScale} from "./scale-generator";
 
-function roundToThreeDigits(number: number) {
-  return Math.round(number * 1000) / 1000;
-}
+const frac3 = (number: number) => Number(number.toFixed(3));
+const percents = (number: number) => 100 * number;
 
-function getOklch(color: string): {l: number; c: number; h: number} {
-  const oklch = oklchFrom(color)!;
-  return {
-    l: roundToThreeDigits(100 * (oklch.l ?? 0)),
-    c: oklch.c ?? 0,
-    h: oklch.h ?? 0,
-  };
-}
+const lFromCss = (color: string) => oklchFrom(color)!.l;
+const cFromCss = (color: string) => oklchFrom(color)!.c;
+const hFromCss = (color: string) => oklchFrom(color)!.h;
+const alphaFromCss = (color: string): number => parse(color)!.alpha ?? 1;
 
-function extractLightness(scale: ColorScale): number[] {
-  return zeroBasedFromOneBased(scale).map((color) => getOklch(color).l);
-}
+const extractLightness = (scale: ColorScale) => base0FromScale(scale).map(lFromCss).map(percents).map(frac3);
 
 function extractChromaNormalized(scale: ColorScale): number[] {
-  const chromas = zeroBasedFromOneBased(scale).map((color) => getOklch(color).c);
+  const chromas = base0FromScale(scale).map(cFromCss);
   const maxChroma = Math.max(...chromas);
-  return chromas.map((c) => roundToThreeDigits(c / maxChroma));
+  return chromas.map((c) => c / maxChroma).map(frac3);
 }
 
 describe("palette-generator", () => {
@@ -95,7 +90,7 @@ describe("palette-generator", () => {
         ]
       `);
       // Extract hue from step 9 (primary yellow)
-      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.46939874406455`);
+      expect(hFromCss(palette.yellow[9])).toMatchInlineSnapshot(`99.46939874406455`);
     });
 
     it("extracts SLATE curves", () => {
@@ -211,7 +206,7 @@ describe("palette-generator", () => {
         accentChroma: 0.16,
       });
 
-      expect(zeroBasedFromOneBased(generated.whiteA)).toMatchInlineSnapshot(`
+      expect(base0FromScale(generated.whiteA)).toMatchInlineSnapshot(`
         [
           "rgba(255, 255, 255, 0)",
           "rgba(255, 255, 255, 0.01)",
@@ -227,7 +222,7 @@ describe("palette-generator", () => {
           "rgba(255, 255, 255, 0.92)",
         ]
       `);
-      expect(zeroBasedFromOneBased(generated.blackA)).toMatchInlineSnapshot(`
+      expect(base0FromScale(generated.blackA)).toMatchInlineSnapshot(`
         [
           "rgba(0, 0, 0, 0.01)",
           "rgba(0, 0, 0, 0.03)",
@@ -244,18 +239,18 @@ describe("palette-generator", () => {
         ]
       `);
 
-      const whiteADefault = zeroBasedFromOneBased(defaultPalette.whiteA);
-      const blackADefault = zeroBasedFromOneBased(defaultPalette.blackA);
-      const whiteAGenerated = zeroBasedFromOneBased(generated.whiteA);
-      const blackAGenerated = zeroBasedFromOneBased(generated.blackA);
+      const whiteADefault = base0FromScale(defaultPalette.whiteA);
+      const blackADefault = base0FromScale(defaultPalette.blackA);
+      const whiteAGenerated = base0FromScale(generated.whiteA);
+      const blackAGenerated = base0FromScale(generated.blackA);
       // default palette uses hsla strings, generated uses rgba — compare parsed alpha values
       for (let i = 0; i < 12; i++) {
-        const defWhiteAlpha = getAlpha(whiteADefault[i]);
-        const genWhiteAlpha = getAlpha(whiteAGenerated[i]);
+        const defWhiteAlpha = alphaFromCss(whiteADefault[i]);
+        const genWhiteAlpha = alphaFromCss(whiteAGenerated[i]);
         expect(genWhiteAlpha).toBeCloseTo(defWhiteAlpha, 2);
 
-        const defBlackAlpha = getAlpha(blackADefault[i]);
-        const genBlackAlpha = getAlpha(blackAGenerated[i]);
+        const defBlackAlpha = alphaFromCss(blackADefault[i]);
+        const genBlackAlpha = alphaFromCss(blackAGenerated[i]);
         expect(genBlackAlpha).toBeCloseTo(defBlackAlpha, 2);
       }
     });

package/src/palette-generator.ts

@@ -1,7 +1,12 @@
-import {neutralUserPalette} from "./palettes/neutral-user";
+import {type ColorFilterSpec} from "./color-filter";
+import {Swatch} from "./design-system/colors-swatches";
+import type {HighlightDefs, ModeDef, ThemePalette, ZeroBasedScale} from "./design-system/types";
+import {common} from "./palettes/common";
+import {neutralCore} from "./palettes/neutral";
 import {neutralArchPalette} from "./palettes/neutral-arch";
-import {warmUserPalette} from "./palettes/warm-user";
+import {neutralUserPalette} from "./palettes/neutral-user";
 import {warmArchPalette} from "./palettes/warm-arch";
+import {warmUserPalette} from "./palettes/warm-user";
 import {
   DEFAULT_DARK_CURVES,
   DEFAULT_LIGHT_CURVES,
@@ -18,9 +23,6 @@ import {
   type ScaleConfig,
   type ScaleCurves,
 } from "./scale-generator";
-import {type ColorFilterSpec} from "./color-filter";
-import {common} from "./palettes/common";
-import type {HighlightDefs, ModeDef, ThemePalette, ZeroBasedScale} from "./design-system/types";
 
 export function selectPalette({
   warmLook = false,
@@ -94,22 +96,29 @@ export function makeThematicPalette(config: Omit<ThematicPrefs, "highlight"> & P
 
   return {
     key: JSON.stringify(config),
-    white,
-    black,
-    whiteA,
-    blackA,
-    base,
-    baseDark,
-    accent,
+    swatchDefault: Swatch.Blue,
+    white: white,
+    black: black,
+    blackish: neutralCore.blackish,
+    whiteA: whiteA,
+    blackA: blackA,
+    base: base,
+    baseDark: baseDark,
+    accent: accent,
     accentDark,
-    red,
-    redDark,
-    teal,
-    tealDark,
-    yellow,
-    yellowDark,
+    red: red,
+    redDark: redDark,
+    teal: teal,
+    tealDark: tealDark,
+    yellow: yellow,
+    yellowDark: yellowDark,
+    blue_9_: neutralCore.blue_9_,
+    blueDark_9_: neutralCore.blueDark_9_,
+    purple_9_: neutralCore.purple_9_,
+    purpleDark_9_: neutralCore.purpleDark_9_,
     deneutralize: config.filter,
     highlight,
+    enum: common.enum,
   };
 }
 

package/src/palettes/common.ts

@@ -1,6 +1,25 @@
 import type {ThemePaletteBase} from "../design-system/types";
 
 export const common: ThemePaletteBase = {
+  enum: {
+    // Per-side bg parameters, expressed in designer-visible terms:
+    //   swatchAlpha   — swatch's share when overlaid over surface
+    //                   (bg = mixSrgb(surface, swatch, swatchAlpha)).
+    //   minC          — visible chroma kept on faint pastels *after* the blend
+    //                   (pre-blend amplification = minC / swatchAlpha, applied
+    //                   internally).
+    //   surfaceLc     — APCA contrast floor vs bare surface.
+    //   colorCodingLc — APCA contrast floor vs the painted card surface; if bg
+    //                   drops below this on a color-coded card, lift L (keep
+    //                   c+h). Bg is never blended with the card coding — only
+    //                   its Lc target is re-checked.
+    bg: [
+      {swatchAlpha: 0.15, minC: 0.02, surfaceLc: 4, colorCodingLc: 4},
+      {swatchAlpha: 0.3, minC: 0.025, surfaceLc: 2, colorCodingLc: 2},
+    ],
+    // Swatch's share in fg = mixSrgb(textColor, swatch, swatchAlpha).
+    fg: {swatchAlpha: 0.4},
+  },
   highlight: {
     hues: {
       yellow: 85,