@fibery/ui-kit 4.1.0 → 4.3.0

package/src/antd/tabs.tsx

@@ -16,16 +16,16 @@ const PrefixedTabs = forwardRef<HTMLDivElement, TabsPropsAny>(function PrefixedT
 export const tabsStyles = css`
   ${{
     width: "100%",
-    "& .ant-tabs": {
+    ":where(&) .ant-tabs": {
       boxSizing: "border-box",
       display: "flex",
       overflow: "visible",
       width: "100%",
     },
-    "& .ant-tabs-top, & .ant-tabs-bottom": {
+    ":where(&) .ant-tabs-top, :where(&) .ant-tabs-bottom": {
       flexDirection: "column",
     },
-    "& .ant-tabs-nav": {
+    ":where(&) .ant-tabs-nav": {
       display: "flex",
       flex: "none",
       alignItems: "center",
@@ -41,7 +41,7 @@ export const tabsStyles = css`
         content: "''",
       },
     },
-    "& .ant-tabs-nav-wrap": {
+    ":where(&) .ant-tabs-nav-wrap": {
       display: "flex",
       flex: "auto",
       overflow: "hidden",
@@ -53,7 +53,7 @@ export const tabsStyles = css`
       marginLeft: space.s12,
       marginRight: space.s12,
     },
-    "& .ant-tabs-nav-wrap::before, & .ant-tabs-nav-wrap::after": {
+    ":where(&) .ant-tabs-nav-wrap::before, :where(&) .ant-tabs-nav-wrap::after": {
       position: "absolute",
       zIndex: 1,
       opacity: 0,
@@ -61,27 +61,27 @@ export const tabsStyles = css`
       content: "''",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-list": {
+    ":where(&) .ant-tabs-nav-list": {
       position: "relative",
       display: "flex",
       transition: `transform ${transitions.normal}`,
     },
-    "& .ant-tabs-nav-operations": {
+    ":where(&) .ant-tabs-nav-operations": {
       display: "flex",
       alignSelf: "stretch",
     },
-    "& .ant-tabs-nav-operations-hidden": {
+    ":where(&) .ant-tabs-nav-operations-hidden": {
       position: "absolute",
       visibility: "hidden",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-more": {
+    ":where(&) .ant-tabs-nav-more": {
       position: "relative",
       padding: `${space.s8}px ${space.s16}px`,
       backgroundColor: themeVars.transparent,
       border: 0,
     },
-    "& .ant-tabs-nav-more::after": {
+    ":where(&) .ant-tabs-nav-more::after": {
       position: "absolute",
       right: 0,
       bottom: 0,
@@ -90,13 +90,13 @@ export const tabsStyles = css`
       transform: "translateY(100%)",
       content: "''",
     },
-    "& .ant-tabs-extra-content": {
+    ":where(&) .ant-tabs-extra-content": {
       flex: "none",
     },
-    "& .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
+    ":where(&) .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
       justifyContent: "center",
     },
-    "& .ant-tabs-ink-bar": {
+    ":where(&) .ant-tabs-ink-bar": {
       position: "absolute",
       bottom: 0,
       backgroundColor: themeVars.colorAccent,
@@ -104,12 +104,12 @@ export const tabsStyles = css`
       pointerEvents: "none",
       transition: `left ${transitions.faster}, right ${transitions.faster}, width ${transitions.faster}`,
     },
-    "& .ant-tabs-tab, & .ant-tabs-tab:hover, & .ant-tabs-tab-btn:active, & .ant-tabs-tabpane, & .ant-tabs-tab-active .ant-tabs-tab-btn":
+    ":where(&) .ant-tabs-tab, :where(&) .ant-tabs-tab:hover, :where(&) .ant-tabs-tab-btn:active, :where(&) .ant-tabs-tabpane, :where(&) .ant-tabs-tab-active .ant-tabs-tab-btn":
       {
         ...textStyles.regular,
         textShadow: "none",
       },
-    "& .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab": {
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
@@ -118,53 +118,53 @@ export const tabsStyles = css`
       cursor: "pointer",
       outline: "none",
     },
-    "& .ant-tabs-tab + .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab + .ant-tabs-tab": {
       margin: `0 ${space.s8}px 0 0`,
     },
-    "& .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-btn": {
       outline: "none",
       transition: `all ${transitions.slow}`,
     },
-    "& .ant-tabs-tab-active .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-active .ant-tabs-tab-btn": {
       color: themeVars.colorAccent,
     },
-    "& .ant-tabs-content-holder": {
+    ":where(&) .ant-tabs-content-holder": {
       flex: "auto",
       minWidth: 0,
       minHeight: 0,
     },
-    "& .ant-tabs-content": {
+    ":where(&) .ant-tabs-content": {
       position: "relative",
       display: "flex",
       width: "100%",
     },
-    "& .ant-tabs-tabpane": {
+    ":where(&) .ant-tabs-tabpane": {
       flex: "none",
       width: "100%",
       outline: "none",
     },
-    "& .ant-tabs-tabpane-hidden": {
+    ":where(&) .ant-tabs-tabpane-hidden": {
       display: "none",
     },
-    "& .ant-tabs-switch-appear, & .ant-tabs-switch-enter": {
+    ":where(&) .ant-tabs-switch-appear, :where(&) .ant-tabs-switch-enter": {
       transition: "none",
     },
-    "& .ant-tabs-switch-appear-start, & .ant-tabs-switch-enter-start": {
+    ":where(&) .ant-tabs-switch-appear-start, :where(&) .ant-tabs-switch-enter-start": {
       opacity: 0,
     },
-    "& .ant-tabs-switch-appear-active, & .ant-tabs-switch-enter-active": {
+    ":where(&) .ant-tabs-switch-appear-active, :where(&) .ant-tabs-switch-enter-active": {
       opacity: 1,
       transition: `opacity ${transitions.slow}`,
     },
-    "& .ant-tabs-switch-leave": {
+    ":where(&) .ant-tabs-switch-leave": {
       position: "absolute",
       inset: 0,
       transition: "none",
     },
-    "& .ant-tabs-switch-leave-start": {
+    ":where(&) .ant-tabs-switch-leave-start": {
       opacity: 1,
     },
-    "& .ant-tabs-switch-leave-active": {
+    ":where(&) .ant-tabs-switch-leave-active": {
       opacity: 0,
       transition: `opacity ${transitions.slow}`,
     },

package/src/apca.lc-low.test.ts

@@ -5,9 +5,7 @@ import {userColorChoices} from "./palettes/testkit";
 const SURFACE = "#FFFFFF";
 const TARGETS = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
 // Tolerance bound for the round-trip (target Lc → setter → calcLc) in the
-// formerly-bridged Lc range, against pure white. Dominated by 8-bit hex
-// quantization inside apcach's solver — will tighten when storage moves
-// to OKLCH/P3.
+// formerly-bridged Lc range, against pure white. TODO Tighten when storage moves to OKLCH/P3 from hex 0..255
 const MAX_LC_ROUNDTRIP_ERR = 1;
 
 const fmtRow = (errors: number[]) => errors.map((e) => (e >= 0 ? "+" : "") + e.toFixed(1)).join(" ");

package/src/apca.test.ts

@@ -1,29 +1,6 @@
-import {calcContrast} from "apcach";
-
 import {calcLc, colorFromLc, solveNearIdentity} from "./apca";
 
 describe("calcLc", () => {
-  // With the apca-w3 patch, calcLc is continuous from 0 across the full range
-  // and matches stock APCA wherever stock returns non-zero.
-  describe("matches stock apcach.calcContrast on high-contrast pairs", () => {
-    const pairs: [fg: string, bg: string][] = [
-      ["#000000", "#ffffff"],
-      ["#ffffff", "#000000"],
-      ["#222222", "#ffffff"],
-      ["#ff0000", "#ffffff"],
-      ["#0000ff", "#ffffff"],
-      ["#0080ff", "#ffffff"],
-      ["#ffffff", "#1d1d1d"],
-      ["#888888", "#ffffff"],
-      ["#444444", "#ffffff"],
-    ];
-    it.each(pairs)("Lc(%s, %s)", (fg, bg) => {
-      const ours = calcLc(fg, bg);
-      const stock = Math.abs(Number(calcContrast(fg, bg, "apca", "srgb")));
-      expect(Math.abs(ours - stock)).toBeLessThan(0.01);
-    });
-  });
-
   describe("near-zero contrast (former dead zone)", () => {
     it("returns exactly 0 when fg === bg", () => {
       expect(calcLc("#888888", "#888888")).toBe(0);
@@ -31,21 +8,21 @@ describe("calcLc", () => {
       expect(calcLc("#ffffff", "#ffffff")).toBe(0);
     });
 
-    it("monotonically increases as fg diverges from bg", () => {
+    it("monotonically increases as fg diverges from bg (dark to light)", () => {
       // Use a wider sweep — adjacent 8-bit greys may both fall below the
       // loOffset noise floor and tie at 0.
       const bg = "#888888";
       const lcs = ["#888888", "#aaaaaa", "#cccccc", "#eeeeee", "#ffffff"].map((fg) => calcLc(fg, bg));
       for (let i = 1; i < lcs.length; i++) {
-        expect(lcs[i]).toBeGreaterThan(lcs[i - 1]);
+        expect(lcs[i]).toBeLessThan(lcs[i - 1]);
       }
       expect(lcs).toMatchInlineSnapshot(`
         [
           0,
-          16.897864551748565,
-          36.33194143878067,
-          57.418767755407885,
-          68.54146436644962,
+          -16.897864551748565,
+          -36.33194143878067,
+          -57.418767755407885,
+          -68.54146436644962,
         ]
       `);
     });
@@ -57,27 +34,26 @@ describe("calcLc", () => {
     });
   });
 
-  it("polarity: dark-on-light and light-on-dark are both reported as positive Lc", () => {
+  it("polarity: dark-on-light", () => {
     expect(calcLc("#000000", "#ffffff")).toBeGreaterThan(0);
-    expect(calcLc("#ffffff", "#000000")).toBeGreaterThan(0);
-    // APCA's normal vs reverse exponents make these unequal in magnitude.
-    expect(calcLc("#000000", "#ffffff")).not.toBeCloseTo(calcLc("#ffffff", "#000000"), 1);
+  });
+
+  it("polarity: light-on-dark", () => {
+    expect(calcLc("#ffffff", "#000000")).toBeLessThan(0);
   });
 
   // Mirror property: colorFromLc is the right-inverse of calcLc. Pick a target
   // Lc against a surface, generate a color at that Lc, then re-measure — the
   // result must match the input within hex-output quantization.
   describe("colorFromLc ↔ calcLc round-trip", () => {
-    // White and black give every target Lc up to ~106 at chroma=0 in sRGB.
-    const surfaces = ["#ffffff", "#000000"];
-    // Bound dominated by 8-bit sRGB hex quantization (apcach's solver snaps
-    // candidates to integer channels). Targets below ~5 against extreme
-    // surfaces aren't reachable on the 8-bit grid; will tighten and extend
-    // when storage moves to OKLCH/P3.
-    const TOLERANCE = 1;
-    const targets = [5, 8, 10, 20, 30, 45, 60, 75, 90];
-    const cases = surfaces.flatMap((surface) => targets.map((target) => ({surface, target})));
-    it.each(cases)("$surface @ Lc=$target round-trips within ±1", ({surface, target}) => {
+    const TOLERANCE = 0.4;
+    it.each([5, 8, 10, 20, 30, 45, 60, 75, 90])("Lc=%o round-trips within ±1 dark-on-light", (target) => {
+      const surface = "#ffffff";
+      const out = colorFromLc(surface, target, 0, 0);
+      expect(Math.abs(calcLc(out, surface) - target)).toBeLessThan(TOLERANCE);
+    });
+    it.each([-5, -8, -10, -20, -30, -45, -60, -75, -90])("Lc=%o round-trips within ±1 light-on-dark", (target) => {
+      const surface = "#000000";
       const out = colorFromLc(surface, target, 0, 0);
       expect(Math.abs(calcLc(out, surface) - target)).toBeLessThan(TOLERANCE);
     });
@@ -97,6 +73,29 @@ describe("calcLc", () => {
       }
     });
   });
+
+  describe("colorFromSignedLc ↔ calcLc round-trip", () => {
+    const TOLERANCE = 1;
+    const cases = [
+      {surface: "#ffffff", target: 30},
+      {surface: "#ffffff", target: 75},
+      {surface: "#000000", target: -30},
+      {surface: "#000000", target: -75},
+      {surface: "#7f7f7f", target: 20},
+      {surface: "#7f7f7f", target: -20},
+    ];
+
+    it.each(cases)("$surface @ signed Lc=$target round-trips within ±1", ({surface, target}) => {
+      const out = colorFromLc(surface, target, 0, 0);
+      expect(Math.abs(calcLc(out, surface) - target)).toBeLessThan(TOLERANCE);
+    });
+
+    it("preserves target sign instead of deriving polarity from surface mode", () => {
+      const surface = "#7f7f7f";
+      expect(calcLc(colorFromLc(surface, 20, 0, 0), surface)).toBeGreaterThan(0);
+      expect(calcLc(colorFromLc(surface, -20, 0, 0), surface)).toBeLessThan(0);
+    });
+  });
 });
 
 describe("solveNearIdentity", () => {

package/src/apca.ts

@@ -9,64 +9,59 @@
  * to `loBoWoffset`, eliminating the [0, ~7.3) Lc dead zone in stock APCA.
  * Setter and measurer are now mutual inverses across the full Lc range — no
  * separate bridge logic needed.
- *
- * The setter (`lightnessFromLc`) hand-rolls a bisection rather than delegating
- * to `apcach` because apcach's solver caps at 20 iterations and returns the
- * surface lightness when the target seems unreachable, silently failing on
- * Lc < ~8 even when the target is achievable in sRGB hex.
- *
- * eslint pins `apca-w3` imports to this file via `no-restricted-imports`.
  */
 
 import {APCAcontrast, sRGBtoY} from "apca-w3";
-import {clampChroma, formatRgb} from "culori";
+import {clampChroma, formatRgb, type Rgb} from "culori";
 
 import {colorFromUnsafe, oklchFrom, rgbFrom} from "./color-utils";
 
 const CLAMP_GAMUT = "rgb"; // TODO p3 when oklch-defs
+const format = formatRgb;
+function clampedOklch(l: number, c: number, h: number) {
+  return clampChroma({mode: "oklch", l, c, h}, "oklch", CLAMP_GAMUT);
+}
+
+function yFromRgb(rgb: Rgb) {
+  if (process.env.NODE_ENV !== "production") {
+    if (rgb.alpha !== undefined && rgb.alpha !== 1) {
+      // oxlint-disable-next-line no-console
+      console.warn("color %o alpha must be flattened on surface\ne.g. via alphaBlend from apca-w3 or color-mix", rgb);
+    }
+  }
+  return sRGBtoY([rgb.r * 255, rgb.g * 255, rgb.b * 255]);
+}
+
 // 10 bisection halvings give L precision ~10⁻³ — below the 1/256 step that
 // any 8-bit RGB channel can resolve, so the hex output is already saturated.
 // Doubling iterations doubles cost without changing the rendered color.
 const BISECT_ITERATIONS = 10;
 
-function yFromColor(color: string) {
-  const {r = 0, g = 0, b = 0} = rgbFrom(colorFromUnsafe(color));
-  return sRGBtoY([r * 255, g * 255, b * 255]);
-}
-
-/** Y of OKLCH(L, c, h) clamping chroma into sRGB at this L (matching what the renderer will produce). */
-function yFromOklch(L: number, c: number, hue: number): number {
-  const oklch =
-    c === 0
-      ? {mode: "oklch" as const, l: L, c: 0, h: hue}
-      : clampChroma({mode: "oklch", l: L, c, h: hue}, "oklch", CLAMP_GAMUT);
-  const {r = 0, g = 0, b = 0} = rgbFrom(oklch);
-  return sRGBtoY([r * 255, g * 255, b * 255]);
-}
-
-function strictOklch(L: number, c: number, hue: number) {
-  return formatRgb(clampChroma({mode: "oklch", l: L, c, h: hue}, "oklch", CLAMP_GAMUT));
+/** APCA Lc with polarity. Use for target recipes and diagnostics. */
+export function calcLc(fg: string, bg: string): number {
+  const fgColor = colorFromUnsafe(fg);
+  const bgColor = colorFromUnsafe(bg);
+  return APCAcontrast(yFromRgb(rgbFrom(fgColor)), yFromRgb(rgbFrom(bgColor))) as number;
 }
 
-/** APCA Lc magnitude. With the apca-w3 patch, this is continuous from 0 across the full range. */
-export function calcLc(fg: string, bg: string): number {
-  return Math.abs(APCAcontrast(yFromColor(fg), yFromColor(bg)) as number);
+/** Pick black or white — whichever has the higher APCA (Lc) contrast against `bg`. */
+export function blackOrWhiteFor(bg: string): "#000" | "#FFF" {
+  return Math.abs(calcLc("#000", bg)) >= Math.abs(calcLc("#FFF", bg)) ? "#000" : "#FFF";
 }
 
-/** OKLCH lightness that achieves target APCA Lc contrast against a surface. */
 export function lightnessFromLc(surface: string, Lc: number, c: number, hue: number = 0) {
   const surfaceL = oklchFrom(surface)?.l ?? 0;
-  if (Lc <= 0) {
+  if (Lc === 0) {
     return surfaceL;
   }
-  const surfaceY = yFromColor(surface);
-  const goDarker = surfaceL > 0.8;
-  let lo = goDarker ? 0 : surfaceL;
-  let hi = goDarker ? surfaceL : 1;
+
+  const surfaceY = yFromRgb(rgbFrom(colorFromUnsafe(surface)));
+  let lo = Lc > 0 ? 0 : surfaceL;
+  let hi = Lc > 0 ? surfaceL : 1;
   for (let i = 0; i < BISECT_ITERATIONS; i++) {
     const mid = (lo + hi) / 2;
-    const measured = Math.abs(APCAcontrast(yFromOklch(mid, c, hue), surfaceY) as number);
-    if (measured > Lc === goDarker) {
+    const measured = APCAcontrast(yFromRgb(rgbFrom(clampedOklch(mid, c, hue))), surfaceY) as number;
+    if (measured > Lc) {
       lo = mid;
     } else {
       hi = mid;
@@ -96,7 +91,7 @@ export function solveNearIdentity(
 
 export function colorFromLc(surfaceColor: string, Lc: number, c: number, hue: number, referenceC?: number) {
   const lcChroma = referenceC !== undefined && c < referenceC ? referenceC : c;
-  return strictOklch(lightnessFromLc(surfaceColor, Lc, lcChroma, hue), c, hue);
+  return format(clampedOklch(lightnessFromLc(surfaceColor, Lc, lcChroma, hue), c, hue));
 }
 
 /**
@@ -121,10 +116,14 @@ export function colorFromLcCompensated(
 /** Adjust only OKLCH lightness so `color` reaches `targetLc` against `surface`, preserving its chroma + hue. */
 export function liftLightnessToLc(color: string, surface: string, targetLc: number): string {
   const {c = 0, h = 0} = oklchFrom(colorFromUnsafe(color));
-  return strictOklch(lightnessFromLc(surface, targetLc, c, h), c, h);
+  return colorFromLc(surface, targetLc, c, h);
 }
 
 /** Pass-through when `color` already clears `targetLc` against `surface`; otherwise {@link liftLightnessToLc}. */
 export function ensureLcFloor(color: string, surface: string, targetLc: number): string {
-  return calcLc(color, surface) >= targetLc ? color : liftLightnessToLc(color, surface, targetLc);
+  const lc = calcLc(color, surface);
+  if (targetLc === 0 || (targetLc > 0 ? lc >= targetLc : lc <= targetLc)) {
+    return color;
+  }
+  return liftLightnessToLc(color, surface, targetLc);
 }

package/src/app-icon-with-fallback.tsx

@@ -3,7 +3,7 @@ import type {FC} from "react";
 import {lazy, Suspense} from "react";
 
 import {AppIconWrapper} from "./app-icon-wrapper";
-import {alpha, iconSize, layout} from "./design-system";
+import {alpha, alphaCoefficients as A, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -147,7 +147,11 @@ export const AppIcon: FC<AppIconProps> = ({icon, color: neutralColor, isSelected
   const {fg} = theme.fns.icon(neutralColor);
 
   return (
-    <AppIconWrapper color={alpha(fg, 0.2)} borderless={isSelected} containerSize={containerSize}>
+    <AppIconWrapper
+      color={alpha(fg, A.utility.appIconWrapper[0])}
+      borderless={isSelected}
+      containerSize={containerSize}
+    >
       <AppIconWithFallback name={icon} color={fg} colorProcessed containerSize={containerSize} iconSize={iconSize} />
     </AppIconWrapper>
   );

package/src/avatar-colors.ts

@@ -0,0 +1,71 @@
+import {produceColor} from "./color-utils";
+import type {Theme} from "./design-system";
+import {Swatch} from "./design-system";
+import {memoizeColor} from "./memoize";
+
+export const cyrb53 = (str: string, seed = 0) => {
+  let h1 = 0xdeadbeef ^ seed;
+  let h2 = 0x41c6ce57 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+};
+
+export const avatarSwatches = [
+  Swatch.Red,
+  Swatch.Magenta,
+  Swatch.Purple,
+  Swatch.Violet,
+  Swatch.BlueDark,
+  Swatch.Blue,
+  Swatch.BlueSky,
+  Swatch.Turquoise,
+  Swatch.GreenDark,
+  Swatch.Green,
+  Swatch.GreenLight,
+  Swatch.Yellow,
+  Swatch.Orange,
+  Swatch.Brown,
+] as const;
+
+export type AvatarColors = {
+  fg: string;
+  bg: string;
+  bgStart: string;
+  bgEnd: string;
+};
+
+const GRADIENT_SPREAD = 0.05;
+
+const clamp01 = (n: number) => Math.max(0, Math.min(1, n));
+
+const fromBase = (base: string, fg: string): AvatarColors => {
+  const bgStart = produceColor(base, (o) => ({...o, l: clamp01((o.l ?? 0) + GRADIENT_SPREAD)}));
+  const bgEnd = produceColor(base, (o) => ({...o, l: clamp01((o.l ?? 0) - GRADIENT_SPREAD)}));
+  return {fg, bg: `linear-gradient(180deg, ${bgStart} 0%, ${bgEnd} 100%)`, bgStart, bgEnd};
+};
+
+export const getAvatarColors = memoizeColor(
+  (seed: string, theme: Theme): AvatarColors => {
+    const idx = Math.min(avatarSwatches.length - 1, Math.floor((cyrb53(seed) / 2 ** 53) * avatarSwatches.length));
+    const swatch = avatarSwatches[idx];
+    const {avatarPlaceholder} = theme.fns;
+    return fromBase(avatarPlaceholder.bg(swatch), avatarPlaceholder.fg(swatch));
+  },
+  (seed, theme) => `${theme.key}::${seed}`
+);
+
+export const getAvatarNeutralColors = memoizeColor(
+  (theme: Theme): AvatarColors => {
+    const {avatarPlaceholder} = theme.fns;
+    return fromBase(avatarPlaceholder.bg(Swatch.Grey), avatarPlaceholder.fg(Swatch.Grey));
+  },
+  (theme) => theme.key
+);

package/src/avatar.tsx

@@ -85,6 +85,7 @@ type AvatarImageProps = {
   avatarUrl?: string | null;
   radius?: number;
   hasAccess?: boolean;
+  /** @deprecated no longer applied — the placeholder derives its color from the seed/theme. */
   backgroundColor?: string;
   disableNativeTitle?: boolean;
   placeholder?: React.ReactNode;
@@ -98,7 +99,6 @@ const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   avatarUrl,
   radius,
   hasAccess = true,
-  backgroundColor,
   disableNativeTitle = false,
   placeholder,
 }) {
@@ -142,15 +142,7 @@ const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
           />
         )}
         {(!avatarUrl || fetchState !== ":fetch-state/success") &&
-          (placeholder || (
-            <AvatarPlaceholder
-              size={size}
-              title={title}
-              radius={radius}
-              hasAccess={hasAccess}
-              backgroundColor={backgroundColor}
-            />
-          ))}
+          (placeholder || <AvatarPlaceholder size={size} title={title} radius={radius} hasAccess={hasAccess} />)}
         {badges &&
           badges.map((badge, index) => {
             return (

package/src/banner/banner.tsx

@@ -26,7 +26,7 @@ const bannerVariants: Record<BannerVariant, LinariaClassName> = {
     color: ${themeVars.colorTextBannerNeutral};
   `,
   primary: css`
-    background-color: ${themeVars.colorBgBannerPrimary};
+    background-color: ${themeVars.colorBgBannerAccent};
     ${iconColorVar}: ${themeVars.colorIconBannerAccent};
     color: ${themeVars.colorTextBannerAccent};
   `,
@@ -79,7 +79,6 @@ const bannerDescription = css`
     font-weight: ${fontWeight.regular};
     line-height: ${lineHeight.heading};
     color: inherit;
-    opacity: 0.8;
   }
 `;
 

package/src/box.tsx

@@ -4,7 +4,16 @@ import cx from "classnames";
 import type {CSSProperties, HTMLProps, ReactNode, Ref} from "react";
 import {createContext, forwardRef, useCallback, useContext, useMemo, useState} from "react";
 
-import {alpha, border, getLinearGradient, space, textClasses, themeVars, transition} from "./design-system";
+import {
+  alpha,
+  alphaCoefficients as A,
+  border,
+  getLinearGradient,
+  space,
+  textClasses,
+  themeVars,
+  transition,
+} from "./design-system";
 import {CARD_COLOR_CODING_SURFACE_PERCENT} from "./design-system/fns.enum";
 import {useClickOutside} from "./popover/use-click-outside";
 
@@ -263,6 +272,8 @@ const CardBgColorContext = createContext<string | null>(null);
 export const CardBgColorProvider = CardBgColorContext.Provider;
 export const useCardBgColor = () => useContext(CardBgColorContext);
 
+type EntityBoxColorCodingAlpha = (typeof A.entityBoxColorCoding)[keyof typeof A.entityBoxColorCoding];
+
 export function getBoxColorCoding({backgroundColors}: {backgroundColors: string[] | null | undefined}) {
   if (!backgroundColors || !backgroundColors.length) {
     return {
@@ -270,21 +281,20 @@ export function getBoxColorCoding({backgroundColors}: {backgroundColors: string[
       colorCodingStyle: emptyColorCodingStyle,
     };
   }
-  const colorCodingColor = backgroundColors?.[0];
-  const colorCodingStyle = colorCodingColor
-    ? ({
-        [colorCodingBackgroundCustomProperty]: colorCodingColor,
-        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${alpha(colorCodingColor, 0.1)}`,
-        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${alpha(colorCodingColor, 0.3)}`,
-        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${alpha(colorCodingColor, 0.1)}`,
-        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.4)}`,
-        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.6)}`,
-        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${alpha(
-          colorCodingColor,
-          0.6
-        )}, 0 0 0 3px ${alpha(colorCodingColor, 0.4)}`,
-      } as CSSProperties)
-    : {};
+  const colorCodingColor = backgroundColors[0];
+  const boxAlpha = A.entityBoxColorCoding;
+  const alphaColor = (alphaValue: EntityBoxColorCodingAlpha) => alpha(colorCodingColor, alphaValue[0]);
+  const stroke = (width: number, alphaValue: EntityBoxColorCodingAlpha) => `0 0 0 ${width}px ${alphaColor(alphaValue)}`;
+  const elevation = (y: number, blur: number) => `0px ${y}px ${blur}px 0px ${alphaColor(boxAlpha.elevation)}`;
+  const colorCodingStyle = {
+    [colorCodingBackgroundCustomProperty]: colorCodingColor,
+    [colorCodingShadowEntityBoxDefaultCustomProperty]: elevation(2, 4),
+    [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: stroke(1, boxAlpha.stroke),
+    [colorCodingBackgroundHoverShadowCustomProperty]: elevation(4, 8),
+    [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: stroke(2, boxAlpha.focusStroke),
+    [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: stroke(2, boxAlpha.focusHoverStroke),
+    [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `${stroke(1, boxAlpha.focusHoverStroke)}, ${stroke(3, boxAlpha.focusStroke)}`,
+  } as CSSProperties;
   return {
     colorCodingClassName,
     colorCodingStyle,

package/src/button/back-button.tsx

@@ -1,13 +1,13 @@
 import {forwardRef} from "react";
 
-import BackIcon from "../icons/react/back";
+import ArrowBackIcon from "../icons/react/arrow-back";
 import type {ButtonProps} from "./button";
 import {Button} from "./button";
 
 type Props = ButtonProps;
 
 export const BackButton = forwardRef<HTMLButtonElement, Props>(
-  ({iconStart = <BackIcon />, className, ...rest}, forwardedRef) => {
+  ({iconStart = <ArrowBackIcon />, className, ...rest}, forwardedRef) => {
     return (
       <Button ref={forwardedRef} iconStart={iconStart} variant="ghost" color="neutral" className={className} {...rest}>
         Back