@fibery/ui-kit 2.0.1 → 2.1.1

package/src/design-system/vars.ts

@@ -1,40 +1,18 @@
-import {ThemeColors} from "../design-system";
-import {typedObjectEntries} from "@fibery/helpers/utils/object";
 import type {Assert, Equals} from "@fibery/helpers/utils/types";
+import {typedObjectEntries} from "@fibery/helpers/utils/object";
+import type {Theme} from "./theme";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
 
-export type ThemeVars = Omit<ThemeColors, "key" | "fns" | "select">;
+export type ThemeVars = Theme["colors"];
 
-export function makeThemeVars(sample: ThemeColors) {
-  const vars = {} as Record<string, string | {[k: string]: string}>;
+export function varsFromTheme({colors: sample}: Theme) {
+  const vars = {} as Record<string, string>;
   for (const [key, value] of typedObjectEntries(sample)) {
-    // LINT.IfChange("skipMetaKeys")
-    if (key === "key" || key === "fns" || key === "select") {
-      // LINT.ThenChange(["./theme.ts#skipMetaKeys", "./theme.test.ts#skipMetaKeys"])
-    } else if (key === "opacity") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
-      );
-    } else if (key === "shades") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
-      );
-    } else if (key === "lights") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
-      );
-    } else if (key === "separators") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
-      );
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      type _ = Assert<Equals<typeof value, string>>;
-      vars[key] = `var(--${varPrefix}-color-${key})`;
-    }
+    type _ = Assert<Equals<typeof value, string>>;
+    vars[key] = `var(--${varPrefix}-color-${key})`;
   }
   return vars as ThemeVars;
 }
@@ -50,3 +28,41 @@ export const layoutVars = {
   sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
   listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
 };
+
+// -- CSS var guard for color-utils fns --
+
+const colorVarPrefix = `var(--${varPrefix}-color-`;
+const warned = new Set<string>();
+
+function tryResolveFromDOM(value: string): string | undefined {
+  if (typeof document === "undefined") {
+    return undefined;
+  }
+  const propName = value.slice(4, -1); // var(--x) → --x
+  const resolved = getComputedStyle(document.documentElement).getPropertyValue(propName).trim();
+  return resolved || undefined;
+}
+
+export function resolveColorArg(value: string, fnName: string): string;
+export function resolveColorArg(value: string | null | undefined, fnName: string): string | null | undefined;
+export function resolveColorArg(value: string | null | undefined, fnName: string): string | null | undefined {
+  if (!value?.startsWith("var(")) {
+    return value;
+  }
+
+  const resolved = tryResolveFromDOM(value);
+
+  if (process.env.NODE_ENV !== "production") {
+    const cacheKey = `${fnName}\0${value}`;
+    if (!warned.has(cacheKey)) {
+      warned.add(cacheKey);
+      const key =
+        value.startsWith(colorVarPrefix) && value.endsWith(")") ? value.slice(colorVarPrefix.length, -1) : undefined;
+      const hint = key ? `themeVars.${key} — use theme.colors.${key}` : "CSS variable ref — use an actual color value";
+      // oxlint-disable-next-line no-console
+      console.warn(`[theme] ${fnName}(): ${hint}`);
+    }
+  }
+
+  return resolved ?? value;
+}

package/src/design-system.ts

@@ -1,7 +1,15 @@
-export {opacity, getOpacities, alpha} from "./design-system/alpha";
-export {transition, easing, duration, tooltipDelay} from "./design-system/animation";
-export {cardTypeColors} from "./design-system/colors";
-export {getLinearGradient, getEnumTextColor, dropCursorColor, shadows} from "./design-system/colors-css";
+export type * from "./design-system/types";
+export {opacity, alpha} from "./design-system/alpha";
+export {transition, durations, tooltipDelay, transitionDuration, transitions} from "./design-system/animation";
+export {cardTypeColors, type ThemeDefs} from "./design-system/colors";
+export {
+  getLinearGradient,
+  getEnumTextColor,
+  getBgSwatchBorderColor,
+  getBgSwatchFillColor,
+  dropCursorColor,
+  shadows,
+} from "./design-system/colors-css";
 export {getDarkenColor, getTextColor, getObjectColorMemoized} from "./design-system/colors-js";
 export {dateFormat, dateTimeFormat, timeFormat} from "./design-system/date";
 export {
@@ -14,7 +22,7 @@ export {
   viewBoxSize,
   minPanelWidth,
 } from "./design-system/layout";
-export {type ThemeColors, getThemeColors, createInlineStyles, themeVars, type ThemeStyles} from "./design-system/theme";
+export {type Theme, stylesFromTheme, themeFromPalette, themeVars, type Styles} from "./design-system/theme";
 export {typeSizes, fontSize, fontFamily, fontWeight, lineHeight, textStyles} from "./design-system/typography";
 export {
   layoutVars,

package/src/dnd.tsx

@@ -16,7 +16,7 @@ const dragHandlerStyle = css`
     borderRadius: border.radius4,
     display: "flex",
     alignItems: "center",
-    "&:focus-visible": {outline: "none", backgroundColor: themeVars.opacity.opacity15},
+    "&:focus-visible": {outline: "none", backgroundColor: themeVars.colorAccentBgMild},
   }}
 `;
 

package/src/{utils-dom.ts → dom-utils.ts}

@@ -24,3 +24,22 @@ export function shouldProcessLinkClick(event: LimitedMouseEvent, target?: string
     !isModifiedEvent(event) // Ignore clicks with modifier keys
   );
 }
+
+const isScrollableOverflow = (overflow: string) => overflow === "scroll" || overflow === "auto";
+
+function isScrollableElement(element: Element) {
+  const computedStyle = window.getComputedStyle(element);
+  return (
+    isScrollableOverflow(computedStyle.overflow) ||
+    isScrollableOverflow(computedStyle.overflowY) ||
+    isScrollableOverflow(computedStyle.overflowX)
+  );
+}
+
+export const findScrollParent = (element: Element | null): Element | null => {
+  if (!element) {
+    return null;
+  }
+
+  return isScrollableElement(element) || element === document.body ? element : findScrollParent(element.parentElement);
+};

package/src/dot.tsx

@@ -1,12 +1,12 @@
 import {css, CSSProperties, cx} from "@linaria/core";
-import {space, themeVars} from "./design-system";
+import {border, space, themeVars} from "./design-system";
 import {useMemo} from "react";
 
 const dotColorVar = "--fibery-dot-color";
 
 const dotCss = css`
   background-color: var(${dotColorVar});
-  border-radius: 50%;
+  border-radius: ${border.radiusFull};
 
   &[data-size="small"] {
     width: ${space.s4}px;

package/src/emoji-picker/app-icon-picker.tsx

@@ -39,7 +39,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
           display: "block",
           width: emojiSize,
           height: emojiSize,
-          fill: color ? theme.fns.getIconColor(color) : undefined,
+          fill: color ? theme.fns.getIconColor(theme.fns.deneutralize(color)) : undefined,
         }}
         viewBox="0 0 24 24"
       >
@@ -57,6 +57,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
             color={color}
             colors={colors}
             getHoverColor={getHoverColor}
+            getColorOverrideFn={theme.fns.deneutralize}
             onColorSelect={onColorSelect}
             searchAutofocus={autoFocus}
             renderEmoji={renderEmoji}

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -19,7 +19,7 @@ type ColorPickerCollapsibleTrigger = {opened: boolean; color?: string};
 
 const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = ({opened, color}) => {
   const theme = useTheme();
-  const iconColor = color ? theme.fns.getIconColor(color) : undefined;
+  const iconColor = color ? theme.fns.getIconColor(theme.fns.deneutralize(color)) : undefined;
 
   const label = opened ? "Hide color picker" : "Show color picker";
 
@@ -41,6 +41,7 @@ const collapsibleWrapperCss = css`
 export type EmojiPickerContentWithColorProps = {
   color?: string;
   getHoverColor?: (color: string) => string | undefined;
+  getColorOverrideFn?: (color: string) => string;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
 
@@ -54,6 +55,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
   color,
   onColorSelect,
   getHoverColor,
+  getColorOverrideFn,
   searchAutofocus = true,
   renderEmoji,
 }) => {
@@ -82,9 +84,10 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
             <div className={colorPickerWrapperCss}>
               <ColorPicker
                 colors={colors}
-                getSwatchHoverColor={getHoverColor}
-                color={color}
-                onChangeComplete={onColorSelect}
+                getSwatchHoverColor={getHoverColor!}
+                getColorOverrideFn={getColorOverrideFn}
+                color={color!}
+                onChangeComplete={onColorSelect!}
               />
             </div>
           </CollapsibleContent>

package/src/emoji-picker/emoji-picker.tsx

@@ -1,5 +1,6 @@
 import {EmojiItem} from "@fibery/emoji-data";
 import {cardTypeColors} from "../design-system";
+import {useTheme} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
 import {EmojiPickerPreviewFooter} from "./emoji-picker-preview-footer";
@@ -34,6 +35,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   searchAutofocus,
   emojiSize = 20,
 }) => {
+  const theme = useTheme();
   const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
 
   return (
@@ -43,6 +45,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
           color={color}
           colors={colors}
           getHoverColor={getHoverColor}
+          getColorOverrideFn={theme.fns.deneutralize}
           onColorSelect={onColorSelect}
           searchRef={searchRef}
           searchAutofocus={searchAutofocus}

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -11,7 +11,7 @@ import {useState} from "react";
 
 const tabNavRootStyle = css`
   padding: ${space.s4}px ${space.s12}px 0 ${space.s12}px;
-  box-shadow: inset 0 -1px ${themeVars.shades.opacity5};
+  box-shadow: inset 0 -1px ${themeVars.colorShadowInsetEdge};
 `;
 
 type TabKey = "icons" | "emojis";

package/src/emoji-picker/primitives/emoji.tsx

@@ -8,8 +8,9 @@ import {traceError} from "@fibery/helpers/utils/trace";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Twemoji Mozilla",
-    "Noto Color Emoji", "Android Emoji";
+  font-family:
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Twemoji Mozilla", "Noto Color Emoji",
+    "Android Emoji";
   line-height: 1;
 `;
 const emojiWrapperSizedCss = css`

package/src/favorites-icon.tsx

@@ -74,7 +74,7 @@ export const FavoritesIcon = ({
       onClick={onClick}
     >
       <IconButton
-        style={checked ? makeButtonColors(theme.favoritesIconColor, "ghost", theme) : {}}
+        style={checked ? makeButtonColors(theme.colors.favoritesIconColor, "ghost", theme) : {}}
         size={size || "medium"}
         onClick={handleChange}
         color="neutral"

package/src/fibermoji-placeholder.tsx

@@ -3,6 +3,7 @@ import {css} from "@linaria/core";
 import {FC, useEffect, useRef} from "react";
 import {textStyles} from "./design-system";
 import {useFeatures} from "./features";
+import {useTheme} from "./theme-provider";
 import {abbreviateName} from "./abbreviate-name";
 
 const cyrb53 = (str: string, seed = 0) => {
@@ -58,7 +59,11 @@ interface FibermojiPlaceholderProps {
 
 export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({size, radius = "50%", title}) => {
   const eyes = useRef<HTMLDivElement>(null);
-  const [fg, bg] = getColors(title ?? "unknown");
+  const theme = useTheme();
+  const dn = theme.fns.deneutralize;
+  const [rawFg, rawBg] = getColors(title ?? "unknown");
+  const fg = dn(rawFg);
+  const bg = rawBg.replace(/#[0-9A-Fa-f]{6}/g, (hex) => dn(hex));
   const mouth = getMouth(title ?? "unknown");
   const letters = abbreviateName(title).split("");
 

package/src/file-item/add-query-param.ts

@@ -0,0 +1,13 @@
+export function addQueryParam<T extends string | null | undefined>(url: T, param: string, value: string) {
+  if (!url) {
+    return url;
+  }
+
+  const resolved = new URL(url, window.location.href);
+  if (resolved.searchParams.has(param)) {
+    throw new Error(`url already has param ${param} with value ${resolved.searchParams.get(param)}`);
+  }
+
+  resolved.searchParams.set(param, value);
+  return resolved.toString();
+}

package/src/file-item/file-menu-items.tsx

@@ -9,6 +9,7 @@ import FileDownload from "../icons/react/FileDownload";
 import Pencil from "../icons/react/Pencil";
 import Delete from "../icons/react/Delete";
 import {UploadFileWithContent} from "./types";
+import {addQueryParam} from "./add-query-param";
 
 export function FileMenuItems({
   file,
@@ -47,7 +48,7 @@ export function FileMenuItems({
           Download
         </ActionsMenuItem>
       ) : (
-        <a download={file.name} href={`${file.url}?attachment`}>
+        <a download={file.name} href={addQueryParam(file.url, "attachment", "true")}>
           <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
         </a>
       )}

package/src/file-item/file-preview-actions.tsx

@@ -1,16 +1,20 @@
 import {isPhoneApp} from "../use-is-phone";
-import {ActionsMenuItem} from "../actions-menu";
+import {ActionsMenuItem, ActionsMenuSeparator, AsyncActionsMenuItem} from "../actions-menu";
 import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
 import FileDownload from "../icons/react/FileDownload";
+import Delete from "../icons/react/Delete";
+import {addQueryParam} from "./add-query-param";
 
 export function FilePreviewActions({
   url,
   name,
   onDownloadClick,
+  onDeleteClick,
 }: {
   url: string;
   name: string;
   onDownloadClick?: () => void;
+  onDeleteClick?: () => void | Promise<void>;
 }) {
   if (isPhoneApp()) {
     return (
@@ -30,9 +34,17 @@ export function FilePreviewActions({
       <a href={url} target="_blank" rel="noopener noreferrer">
         <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
       </a>
-      <a download={name} href={`${url}?attachment`}>
+      <a download={name} href={addQueryParam(url, "attachment", "true")}>
         <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
       </a>
+      {onDeleteClick ? (
+        <>
+          <ActionsMenuSeparator />
+          <AsyncActionsMenuItem Icon={Delete} onSelect={onDeleteClick} dangerous>
+            Delete
+          </AsyncActionsMenuItem>
+        </>
+      ) : null}
     </>
   );
 }

package/src/file-item.tsx

@@ -26,11 +26,11 @@ const fileItemStyle = css`
 `;
 
 const thumbnailStyle = css`
-  border: 1px solid ${themeVars.separatorColor};
+  border: ${themeVars.borderSolidSeparator};
 `;
 
 const iconOnlyStyle = css`
-  border: 1px solid ${themeVars.colorBorderButtonOutlineNeutralDefault};
+  border: ${themeVars.borderSolidOutlineNeutral};
 `;
 
 const overlayStyle = css`
@@ -104,7 +104,7 @@ export function FileItem(props: FileItemProps) {
                 opacity: 1;
                 background-position: 0 0;
                 color: ${themeVars.whiteColor};
-                background-color: rgba(0, 0, 0, 0.6);
+                background-color: ${themeVars.colorBgFileOverlay};
               }
             `,
           isBackgroundReady &&
@@ -114,7 +114,7 @@ export function FileItem(props: FileItemProps) {
                 opacity: 1;
                 background-position: 0 0;
                 color: ${themeVars.whiteColor};
-                background-color: rgba(0, 0, 0, 0.6);
+                background-color: ${themeVars.colorBgFileOverlay};
               }
             `,
           !isBackgroundReady &&
@@ -250,7 +250,7 @@ export function FileItem(props: FileItemProps) {
                     data={props.data}
                     disabled={props.disabled}
                     actionsButtonStyle={
-                      isBackgroundReady ? makeButtonColors(themeVars.inversedTextColor, "ghost", theme) : undefined
+                      isBackgroundReady ? makeButtonColors(theme.colors.inversedTextColor, "ghost", theme) : undefined
                     }
                     onDownloadClick={onDownloadClick}
                     onRemoveClick={props.onRemoveClick}

package/src/flags.ts

@@ -0,0 +1,3 @@
+// FIXME consolidate as common util
+export const isFlagPresent = (flag: string) =>
+  globalThis.window && new RegExp(`[?&]${flag}\\b`).test(window.location.search);

package/src/header-layout.tsx

@@ -7,7 +7,7 @@ const containerStyle = css`
   padding: ${space.s8}px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${themeVars.separatorColor};
+  border-bottom: ${themeVars.borderSolidSeparator};
   ${mobileRootSelector} & {
     padding: ${space.s12}px;
     min-height: ${space.s60}px;
@@ -28,6 +28,7 @@ export function HeaderLayout({actions, children}: {actions?: ReactNode; children
       <div className={topGridCompactStyle}>
         <div
           className={css`
+            min-width: 200px;
             ${textStyles.heading4}
             position: relative;
             ${mobileRootSelector} & {
@@ -37,7 +38,13 @@ export function HeaderLayout({actions, children}: {actions?: ReactNode; children
         >
           {children}
         </div>
-        <div>{actions}</div>
+        <div
+          className={css`
+            flex-shrink: 0;
+          `}
+        >
+          {actions}
+        </div>
       </div>
     </div>
   );

package/src/heat.ts

@@ -0,0 +1,8 @@
+import {interpolate, type Oklch} from "culori";
+
+export function adjustHeat(color: Oklch, amount: number): Oklch {
+  const source = color;
+  const target = {...source, h: amount < 0 ? 264 : 70};
+
+  return interpolate([source, target], "oklch")(Math.abs(amount));
+}

package/src/highlight-colors.test.ts

@@ -0,0 +1,68 @@
+import {converter, parse} from "culori";
+import {calcContrast} from "apcach";
+import {bgKeyFrom, fgOnBgKeyFrom, highlightColors, highlightHueNames} from "./highlight-colors";
+import {common} from "./palettes/common";
+import {locateThemeBundle} from "./theme-styles";
+import {oklchFrom} from "./color-utils";
+
+const highlight = common.highlight;
+const surface = locateThemeBundle(false).defs.colors.panelBg;
+const generated = highlightColors(highlight, surface);
+
+function calcLc(fg: string, bg: string) {
+  return Math.abs(calcContrast(fg, bg, "apca"));
+}
+
+function withBgLc(Lc: number) {
+  return highlightColors({...highlight, bg: highlight.bg.map((x) => ({...x, Lc})) as typeof highlight.bg}, surface);
+}
+
+describe("highlight-colors", () => {
+  it("all values are parseable sRGB colors", () => {
+    for (const [, [light, dark]] of Object.entries(generated)) {
+      expect(parse(light)).toBeDefined();
+      expect(parse(dark)).toBeDefined();
+    }
+  });
+
+  const tolerance = 1.5;
+  it("fg Lc contrast from bg within ±" + tolerance, () => {
+    for (const name of highlightHueNames) {
+      const bg = generated[bgKeyFrom(name)];
+      const fg = generated[fgOnBgKeyFrom(name)];
+      const targetL = highlight.overrides?.[name]?.fg?.[0]?.Lc ?? highlight.fg[0].Lc;
+      const targetD = highlight.overrides?.[name]?.fg?.[1]?.Lc ?? highlight.fg[1].Lc;
+      expect(calcLc(fg[0], bg[0])).toBeGreaterThan(targetL - tolerance);
+      expect(calcLc(fg[0], bg[0])).toBeLessThan(targetL + tolerance);
+      expect(calcLc(fg[1], bg[1])).toBeGreaterThan(targetD - tolerance);
+      expect(calcLc(fg[1], bg[1])).toBeLessThan(targetD + tolerance);
+    }
+  });
+
+  it("light bg colors are distinct per hue (not all white)", () => {
+    const lightBgs = highlightHueNames.map((n) => generated[bgKeyFrom(n)][0]);
+    const unique = new Set(lightBgs);
+    expect(unique.size).toBeGreaterThan(1);
+    for (const bg of lightBgs) {
+      expect(bg).not.toBe("#ffffff");
+      expect(bg).not.toBe("rgb(255, 255, 255)");
+    }
+  });
+
+  it("bridge is continuous at Lc=8 boundary", () => {
+    const below = withBgLc(7.9);
+    const above = withBgLc(8.1);
+    for (const name of highlightHueNames) {
+      const bgBelow = oklchFrom(parse(below[bgKeyFrom(name)][0])!);
+      const bgAbove = oklchFrom(parse(above[bgKeyFrom(name)][0])!);
+      expect(Math.abs((bgBelow?.l ?? 0) - (bgAbove?.l ?? 0))).toBeLessThan(0.01);
+    }
+  });
+
+  it("grey bg is near-neutral (c < 0.025)", () => {
+    const lightBg = converter("oklch")(parse(generated.highlightBgGrey[0])!);
+    const darkBg = converter("oklch")(parse(generated.highlightBgGrey[1])!);
+    expect(lightBg?.c).toBeLessThan(0.025);
+    expect(darkBg?.c).toBeLessThan(0.025);
+  });
+});

package/src/highlight-colors.ts

@@ -0,0 +1,91 @@
+import {apcach, crToBg} from "apcach";
+import {clampChroma, formatRgb} from "culori";
+import {oklchFrom} from "./color-utils";
+import type {Def, HighlightDefs, HighlightHueName, HighlightHueNameCap, ModeDef} from "./design-system/types";
+
+function pairFrom<T>(def: ModeDef<T>, mapper: (_: T, idx: number) => string) {
+  return def.map(mapper) as Def;
+}
+
+function merge<T>(base: ModeDef<T>, override?: ModeDef<Partial<T>>): ModeDef<T> {
+  return override ? (override.map((o, i) => ({...base[i], ...o})) as ModeDef<T>) : base;
+}
+
+const LC_BRIDGE = 8;
+
+function strictOklch(L: number, c: number, hue: number) {
+  return formatRgb(clampChroma({mode: "oklch", l: L, c, h: hue}, "oklch", "rgb"));
+}
+
+function colorFromLc(surfaceColor: string, Lc: number, c: number, hue: number, referenceC?: number) {
+  const lcChroma = referenceC !== undefined && c < referenceC ? referenceC : c;
+  return strictOklch(colorLightnessFromLc(surfaceColor, Lc, lcChroma, hue), c, hue);
+}
+
+function colorLightnessFromLc(surfaceColor: string, Lc: number, c: number, hue: number) {
+  if (Lc >= LC_BRIDGE) {
+    return apcach(crToBg(surfaceColor, Lc), c, hue, 100, "srgb").lightness;
+  }
+  const surfaceL = oklchFrom(surfaceColor)?.l ?? 0;
+  if (Lc <= 0) {
+    return surfaceL;
+  }
+  const atBridge = apcach(crToBg(surfaceColor, LC_BRIDGE), c, hue, 100, "srgb").lightness;
+  return surfaceL + (atBridge - surfaceL) * (Lc / LC_BRIDGE);
+}
+
+const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);
+
+type Colors = Record<`highlightFgOnBg${HighlightHueNameCap}`, Def> &
+  Record<`highlightBg${HighlightHueNameCap}`, Def> &
+  Record<`highlightFg${HighlightHueNameCap}`, Def>;
+type Key = keyof Colors;
+
+export function bgKeyFrom(hueName: HighlightHueName) {
+  return `highlightBg${capitalize(hueName)}` as Key;
+}
+
+export function fgOnBgKeyFrom(hueName: HighlightHueName) {
+  return `highlightFgOnBg${capitalize(hueName)}` as Key;
+}
+
+export function fgKeyFrom(hueName: HighlightHueName) {
+  return `highlightFg${capitalize(hueName)}` as Key;
+}
+
+export const highlightHueNames: HighlightHueName[] = [
+  "yellow",
+  "green",
+  "aquamarine",
+  "aqua",
+  "blue",
+  "purple",
+  "pink",
+  "red",
+  "grey",
+];
+
+export function highlightColors({bg, fg, hues, overrides}: HighlightDefs, surface: Def) {
+  const defs: Partial<Colors> = {};
+
+  for (const hueName of highlightHueNames) {
+    const hue = hues[hueName];
+    const ov = overrides?.[hueName];
+    const mergedBg = merge(bg, ov?.bg);
+    const bgs = pairFrom(mergedBg, (b, i) => {
+      return colorFromLc(surface[i], b.Lc, b.c, hue, bg[i].c);
+    });
+    defs[bgKeyFrom(hueName)] = bgs;
+
+    const mergedFg = merge(fg, ov?.fg);
+    defs[fgKeyFrom(hueName)] = pairFrom(mergedFg, (fg, i) => {
+      return colorFromLc(surface[i], fg.Lc, fg.c, hue);
+    });
+
+    defs[fgOnBgKeyFrom(hueName)] = pairFrom(mergedFg, (fg, i) => {
+      return colorFromLc(bgs[i], fg.Lc, fg.c, hue);
+    });
+  }
+
+  return defs as Colors;
+}

package/src/html-styles.ts

@@ -127,7 +127,7 @@ const htmlStyles = {
     paddingBottom: 0,
     paddingLeft: space.s12,
     paddingRight: space.s12,
-    borderLeft: `${space.s3}px solid ${themeVars.colorBorderBlockQuote}`,
+    borderLeft: themeVars.borderBlockQuote,
     "& p": {
       fontSize: typeSizes[3],
     },
@@ -336,7 +336,7 @@ const smallHtmlStyles = {
     paddingBottom: 0,
     paddingLeft: space.s10,
     paddingRight: space.s10,
-    borderLeft: `3px solid ${themeVars.colorBorderBlockQuote}`,
+    borderLeft: themeVars.borderBlockQuote,
     "& p": {
       fontSize: typeSizes[4],
     },
@@ -528,7 +528,7 @@ const chatHtmlStyles = {
     paddingBottom: 0,
     paddingLeft: space.s10,
     paddingRight: space.s10,
-    borderLeft: `3px solid ${themeVars.colorBorderBlockQuote}`,
+    borderLeft: themeVars.borderBlockQuote,
     "& p": {
       fontSize: typeSizes[4],
     },