@fibery/ui-kit 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fibery/ui-kit
 
+## 4.3.0
+
+### Minor Changes
+
+- d7293fd: updated banner component styles and colors.ts
+- 8b11936: updated green dot indicator in ui-kit
+- d08e68d: new token for required asterisk in colors.ts
+- e35e5ec: icons refactoring, renaming, deduping
+
+### Patch Changes
+
+- f49a044: icons refactoring, renaming and deduplication
+- 4ac3476: final updates to icons refactoring
+
 ## 4.2.0
 
 ### Minor Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
-    "@linaria/core": "7.0.0",
-    "@linaria/react": "7.0.1",
+    "@linaria/core": "8.0.0",
+    "@linaria/react": "8.0.0",
     "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
@@ -24,7 +24,6 @@
     "@types/react-select-country-list": "2.2.3",
     "@types/setimmediate": "1.0.4",
     "apca-w3": "0.1.9",
-    "apcach": "github:antiflasher/apcach#54077b3",
     "chrono-node": "2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
@@ -43,7 +42,7 @@
     "rc-input": "0.1.4",
     "rc-input-number": "8.5.0",
     "rc-input-number-v7": "npm:rc-input-number@7.3.11",
-    "rc-progress": "3.4.1",
+    "rc-progress": "4.0.0",
     "rc-select": "14.1.18",
     "rc-tabs": "12.5.10",
     "rc-textarea": "0.4.7",
@@ -57,6 +56,7 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
+    "vaul": "1.1.2",
     "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
     "@fibery/helpers": "3.1.0",
@@ -76,15 +76,13 @@
     "@types/react": "18.3.12",
     "@types/react-color": "2.13.5",
     "@types/react-dom": "18.3.1",
-    "@typescript/native-preview": "7.0.0-dev.20260604.1",
-    "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "13.0.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "6.0.3",
+    "typescript": "rc",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.2"
   },
@@ -96,10 +94,10 @@
     "test": "../../scripts/test.sh",
     "test:ci": "../../scripts/test.sh --ci",
     "test:coverage": "../../scripts/test.sh --ci --coverage",
-    "check": "../../scripts/check.sh",
-    "lint": "pnpm -w lint .",
     "generate-icons": "node scripts/generate-icons.mjs",
     "show-colors": "cd ../.. && SHOW_COLORS=1 ./node_modules/.bin/vitest run --project ui-kit --disable-console-intercept -t 'show all current colors'",
-    "typecheck": "../../scripts/typecheck.sh"
+    "lint": "pnpm -w lint .",
+    "typecheck": "../../scripts/typecheck.sh",
+    "check": "../../scripts/check.sh"
   }
 }

package/src/antd/input-number.tsx

@@ -4,8 +4,8 @@ import type {ComponentProps} from "react";
 import {forwardRef} from "react";
 
 import {textStyles, themeVars, transitionDuration} from "../design-system";
-import ArrowBottomIcon from "../icons/react/arrow-bottom";
-import ArrowTopIcon from "../icons/react/arrow-top";
+import ArrowDownIcon from "../icons/react/arrow-down";
+import ArrowUpIcon from "../icons/react/arrow-up";
 import {getWrapper} from "./get-wrapper";
 import {inputOverrides} from "./styles";
 import {wrapWith} from "./utils";
@@ -14,8 +14,8 @@ type InputNumberPropsAny = ComponentProps<typeof InputNumber>;
 
 // rc-input-number renders empty .ant-input-number-handler-up/-down-inner spans unless
 // upNode/downNode are passed. antd's wrapper supplied chevron icons; we do the same.
-const upNode = <ArrowTopIcon className="ant-input-number-handler-up-inner" iconSize={12} />;
-const downNode = <ArrowBottomIcon className="ant-input-number-handler-down-inner" iconSize={12} />;
+const upNode = <ArrowUpIcon className="ant-input-number-handler-up-inner" iconSize={12} />;
+const downNode = <ArrowDownIcon className="ant-input-number-handler-down-inner" iconSize={12} />;
 
 const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(function PrefixedInputNumber(props, ref) {
   return <InputNumber prefixCls="ant-input-number" upHandler={upNode} downHandler={downNode} {...props} ref={ref} />;

package/src/antd/input.tsx

@@ -7,7 +7,7 @@ import type {ResizableTextAreaRef} from "rc-textarea/lib/ResizableTextArea";
 import {forwardRef, useImperativeHandle, useMemo, useRef} from "react";
 
 import {space, tabularNumsOff, textStyles, themeVars} from "../design-system";
-import CloseCircleFilledIcon from "../icons/react/cross-circle";
+import CloseCircleFilledIcon from "../icons/react/circle-cross";
 import {mobileRootSelector} from "../mobile-styles";
 import {getWrapper} from "./get-wrapper";
 import {inputStyles} from "./styles";

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