@fibery/ui-kit 4.2.0 → 5.0.0

package/src/design-system/fns.avatarPlaceholder.dark.neutral.test.ts

@@ -0,0 +1,52 @@
+import {avatarColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(false).themes[1];
+
+describe("avatarPlaceholder.bg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.bg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#54687A   | hsl( 208  18%  40%) | oklch(0.51 0.04 246 )",
+        "swatches[ 3] aka Swatch.Red       ": "#B92E28   | hsl(   2  64%  44%) | oklch(0.52 0.18  28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#B92753   | hsl( 342  65%  44%) | oklch(0.52 0.18   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9542A4   | hsl( 291  43%  45%) | oklch(0.53 0.17 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#7054B3   | hsl( 258  38%  52%) | oklch(0.52 0.15 294 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4C61AE   | hsl( 227  39%  49%) | oklch(0.51 0.12 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#2561C5   | hsl( 218  68%  46%) | oklch(0.51 0.17 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#006B9D   | hsl( 199 100%  31%) | oklch(0.5  0.11 239 )",
+        "swatches[10] aka Swatch.Turquoise ": "#006F7D   | hsl( 187 100%  25%) | oklch(0.5  0.09 210 )",
+        "swatches[11] aka Swatch.GreenDark ": "#127167   | hsl( 174  73%  26%) | oklch(0.5  0.08 184 )",
+        "swatches[12] aka Swatch.Green     ": "#2A732F   | hsl( 124  46%  31%) | oklch(0.49 0.13 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#4A7015   | hsl(  85  68%  26%) | oklch(0.5  0.12 130 )",
+        "swatches[14] aka Swatch.Yellow    ": "#915800   | hsl(  36 100%  28%) | oklch(0.51 0.11  67 )",
+        "swatches[15] aka Swatch.Orange    ": "#B43609   | hsl(  16  90%  37%) | oklch(0.52 0.17  37 )",
+        "swatches[16] aka Swatch.Brown     ": "#9C4F39   | hsl(  13  46%  42%) | oklch(0.52 0.11  37 )",
+      }
+    `);
+  });
+});
+
+describe("avatarPlaceholder.fg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.fg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#C4E1FA   | hsl( 208  84%  87%) | oklch(0.9  0.05 244 )",
+        "swatches[ 3] aka Swatch.Red       ": "#FFD3CD   | hsl(   7 100%  90%) | oklch(0.9  0.05  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FFD2D8   | hsl( 352 100%  91%) | oklch(0.9  0.05   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F8D0FF   | hsl( 291 100%  91%) | oklch(0.91 0.08 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#E0D8FF   | hsl( 252 100%  92%) | oklch(0.9  0.05 295 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#D1DCFF   | hsl( 226 100%  91%) | oklch(0.9  0.05 272 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#CBDFFF   | hsl( 217 100%  90%) | oklch(0.9  0.05 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#BAE2FF   | hsl( 205 100%  86%) | oklch(0.89 0.06 240 )",
+        "swatches[10] aka Swatch.Turquoise ": "#7BEDFF   | hsl( 188 100%  74%) | oklch(0.89 0.11 209 )",
+        "swatches[11] aka Swatch.GreenDark ": "#82F0DF   | hsl( 171  79%  73%) | oklch(0.88 0.1  183 )",
+        "swatches[12] aka Swatch.Green     ": "#92F394   | hsl( 121  80%  76%) | oklch(0.88 0.16 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#B6ED7B   | hsl(  89  76%  71%) | oklch(0.88 0.16 130 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FFD6AB   | hsl(  31 100%  84%) | oklch(0.9  0.07  68 )",
+        "swatches[15] aka Swatch.Orange    ": "#FFD3C7   | hsl(  13 100%  89%) | oklch(0.9  0.05  36 )",
+        "swatches[16] aka Swatch.Brown     ": "#FFD3C6   | hsl(  14 100%  89%) | oklch(0.9  0.05  37 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.avatarPlaceholder.dark.warm.test.ts

@@ -0,0 +1,52 @@
+import {avatarColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[1];
+
+describe("avatarPlaceholder.bg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.bg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#596878   | hsl( 211  15%  41%) | oklch(0.51 0.03 250 )",
+        "swatches[ 3] aka Swatch.Red       ": "#AB413A   | hsl(   4  49%  45%) | oklch(0.52 0.14  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#A9405F   | hsl( 342  45%  46%) | oklch(0.52 0.14   5 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#8D4C98   | hsl( 291  33%  45%) | oklch(0.52 0.13 322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#7057A7   | hsl( 259  31%  50%) | oklch(0.52 0.12 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4F61A9   | hsl( 228  36%  49%) | oklch(0.51 0.12 271 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#3C64AE   | hsl( 219  49%  46%) | oklch(0.51 0.13 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#2D6A98   | hsl( 206  54%  39%) | oklch(0.51 0.1  244 )",
+        "swatches[10] aka Swatch.Turquoise ": "#206F75   | hsl( 184  57%  29%) | oklch(0.5  0.07 202 )",
+        "swatches[11] aka Swatch.GreenDark ": "#2A7063   | hsl( 169  45%  30%) | oklch(0.5  0.07 179 )",
+        "swatches[12] aka Swatch.Green     ": "#3B7237   | hsl( 116  35%  33%) | oklch(0.5  0.11 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#506F27   | hsl(  86  48%  29%) | oklch(0.5  0.11 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#895C16   | hsl(  37  72%  31%) | oklch(0.51 0.1   73 )",
+        "swatches[15] aka Swatch.Orange    ": "#A64929   | hsl(  15  60%  41%) | oklch(0.52 0.13  39 )",
+        "swatches[16] aka Swatch.Brown     ": "#935542   | hsl(  14  38%  42%) | oklch(0.52 0.09  38 )",
+      }
+    `);
+  });
+});
+
+describe("avatarPlaceholder.fg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.fg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#C8E0F9   | hsl( 211  80%  88%) | oklch(0.9  0.04 249 )",
+        "swatches[ 3] aka Swatch.Red       ": "#FBD5CF   | hsl(   8  85%  90%) | oklch(0.9  0.04  29 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FCD4D9   | hsl( 353  87%  91%) | oklch(0.91 0.05  10 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F8D0FF   | hsl( 291 100%  91%) | oklch(0.91 0.08 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#E0D8FC   | hsl( 253  86%  92%) | oklch(0.9  0.05 296 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#D1DCFF   | hsl( 226 100%  91%) | oklch(0.9  0.05 272 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#C9DCFD   | hsl( 218  93%  89%) | oklch(0.89 0.05 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#BDE3FF   | hsl( 205 100%  87%) | oklch(0.9  0.06 240 )",
+        "swatches[10] aka Swatch.Turquoise ": "#85EDF7   | hsl( 185  88%  75%) | oklch(0.89 0.1  204 )",
+        "swatches[11] aka Swatch.GreenDark ": "#8CEFDC   | hsl( 168  76%  74%) | oklch(0.89 0.1  180 )",
+        "swatches[12] aka Swatch.Green     ": "#9FF09A   | hsl( 117  74%  77%) | oklch(0.88 0.14 143 )",
+        "swatches[13] aka Swatch.GreenLight": "#BBEB84   | hsl(  88  72%  72%) | oklch(0.88 0.14 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FCD7AD   | hsl(  32  93%  83%) | oklch(0.9  0.07  70 )",
+        "swatches[15] aka Swatch.Orange    ": "#FBD5CB   | hsl(  13  86%  89%) | oklch(0.9  0.04  35 )",
+        "swatches[16] aka Swatch.Brown     ": "#FBD5CA   | hsl(  13  86%  89%) | oklch(0.9  0.05  37 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.avatarPlaceholder.light.neutral.test.ts

@@ -0,0 +1,52 @@
+import {avatarColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(false).themes[0];
+
+describe("avatarPlaceholder.bg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.bg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#B7D4ED   | hsl( 208  60%  82%) | oklch(0.86 0.05 244 )",
+        "swatches[ 3] aka Swatch.Red       ": "#FFC1B9   | hsl(   7 100%  86%) | oklch(0.86 0.07  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#FFC0C9   | hsl( 351 100%  88%) | oklch(0.87 0.07   9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F5BDFF   | hsl( 291 100%  87%) | oklch(0.87 0.11 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#D5C9FF   | hsl( 253 100%  89%) | oklch(0.86 0.08 295 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#BFCFFF   | hsl( 225 100%  87%) | oklch(0.86 0.07 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#B6D1FF   | hsl( 218 100%  86%) | oklch(0.86 0.07 261 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#9DD7FF   | hsl( 204 100%  81%) | oklch(0.85 0.08 239 )",
+        "swatches[10] aka Swatch.Turquoise ": "#55E2F7   | hsl( 188  91%  65%) | oklch(0.85 0.12 209 )",
+        "swatches[11] aka Swatch.GreenDark ": "#74E2D2   | hsl( 171  65%  67%) | oklch(0.84 0.1  183 )",
+        "swatches[12] aka Swatch.Green     ": "#85E587   | hsl( 121  65%  71%) | oklch(0.84 0.16 144 )",
+        "swatches[13] aka Swatch.GreenLight": "#AAE06E   | hsl(  88  65%  65%) | oklch(0.84 0.16 130 )",
+        "swatches[14] aka Swatch.Yellow    ": "#FFC587   | hsl(  31 100%  76%) | oklch(0.86 0.1   68 )",
+        "swatches[15] aka Swatch.Orange    ": "#FFC2B1   | hsl(  13 100%  85%) | oklch(0.86 0.07  36 )",
+        "swatches[16] aka Swatch.Brown     ": "#FFC2B0   | hsl(  14 100%  85%) | oklch(0.86 0.07  37 )",
+      }
+    `);
+  });
+});
+
+describe("avatarPlaceholder.fg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.fg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#4D667C   | hsl( 208  23%  39%) | oklch(0.5  0.05 245 )",
+        "swatches[ 3] aka Swatch.Red       ": "#BD000E   | hsl( 356 100%  37%) | oklch(0.5  0.2   28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#BA004C   | hsl( 335 100%  36%) | oklch(0.5  0.2    9 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#9B2AAE   | hsl( 291  61%  42%) | oklch(0.52 0.21 321 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#7149C3   | hsl( 260  50%  53%) | oklch(0.52 0.18 294 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#445ABC   | hsl( 229  47%  50%) | oklch(0.5  0.16 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#0058D7   | hsl( 215 100%  42%) | oklch(0.5  0.21 260 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#006798   | hsl( 199 100%  30%) | oklch(0.49 0.11 239 )",
+        "swatches[10] aka Swatch.Turquoise ": "#006D7A   | hsl( 186 100%  24%) | oklch(0.49 0.08 209 )",
+        "swatches[11] aka Swatch.GreenDark ": "#006E64   | hsl( 175 100%  22%) | oklch(0.48 0.09 184 )",
+        "swatches[12] aka Swatch.Green     ": "#007218   | hsl( 133 100%  22%) | oklch(0.48 0.15 145 )",
+        "swatches[13] aka Swatch.GreenLight": "#456E00   | hsl(  82 100%  22%) | oklch(0.49 0.13 131 )",
+        "swatches[14] aka Swatch.Yellow    ": "#8D5600   | hsl(  37 100%  28%) | oklch(0.5  0.11  68 )",
+        "swatches[15] aka Swatch.Orange    ": "#B13200   | hsl(  17 100%  35%) | oklch(0.51 0.17  37 )",
+        "swatches[16] aka Swatch.Brown     ": "#A44326   | hsl(  14  62%  40%) | oklch(0.51 0.14  37 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.avatarPlaceholder.light.warm.test.ts

@@ -0,0 +1,52 @@
+import {avatarColorChoices} from "../palettes/testkit";
+import {locateThemeBundle} from "../theme-styles";
+
+const theme = locateThemeBundle(true).themes[0];
+
+describe("avatarPlaceholder.bg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.bg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#BAD1E7   | hsl( 209  48%  82%) | oklch(0.85 0.04 247 )",
+        "swatches[ 3] aka Swatch.Red       ": "#F7C2BA   | hsl(   8  79%  85%) | oklch(0.86 0.06  28 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#F7C0CA   | hsl( 349  77%  86%) | oklch(0.86 0.06   6 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#F5BAFE   | hsl( 292  97%  86%) | oklch(0.86 0.11 322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#D2C8F9   | hsl( 252  80%  88%) | oklch(0.86 0.07 294 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#BCCDFF   | hsl( 225 100%  87%) | oklch(0.85 0.07 270 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#B7CFFA   | hsl( 219  87%  85%) | oklch(0.85 0.07 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#9FD4FF   | hsl( 207 100%  81%) | oklch(0.85 0.08 243 )",
+        "swatches[10] aka Swatch.Turquoise ": "#6ADFE6   | hsl( 183  71%  66%) | oklch(0.84 0.11 201 )",
+        "swatches[11] aka Swatch.GreenDark ": "#82DFCB   | hsl( 167  59%  69%) | oklch(0.84 0.09 178 )",
+        "swatches[12] aka Swatch.Green     ": "#96E08F   | hsl( 115  57%  72%) | oklch(0.84 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#B0DC7B   | hsl(  87  58%  67%) | oklch(0.84 0.13 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#F7C689   | hsl(  33  87%  75%) | oklch(0.86 0.1   72 )",
+        "swatches[15] aka Swatch.Orange    ": "#F6C2B2   | hsl(  14  79%  83%) | oklch(0.86 0.06  38 )",
+        "swatches[16] aka Swatch.Brown     ": "#F6C2B2   | hsl(  14  79%  83%) | oklch(0.86 0.06  38 )",
+      }
+    `);
+  });
+});
+
+describe("avatarPlaceholder.fg", () => {
+  test("snapshot", () => {
+    expect(avatarColorChoices((c) => theme.fns.avatarPlaceholder.fg(c))).toMatchInlineSnapshot(`
+      {
+        "neutral aka Swatch.Grey (no-access)": "#506376   | hsl( 210  19%  39%) | oklch(0.49 0.04 249 )",
+        "swatches[ 3] aka Swatch.Red       ": "#AE2D2A   | hsl(   1  61%  42%) | oklch(0.5  0.17  27 )",
+        "swatches[ 4] aka Swatch.Magenta   ": "#A83159   | hsl( 340  55%  43%) | oklch(0.5  0.16   4 )",
+        "swatches[ 5] aka Swatch.Purple    ": "#8F3C9C   | hsl( 292  44%  42%) | oklch(0.51 0.17 322 )",
+        "swatches[ 6] aka Swatch.Violet    ": "#6F4CB0   | hsl( 261  40%  49%) | oklch(0.5  0.15 297 )",
+        "swatches[ 7] aka Swatch.BlueDark  ": "#4659B3   | hsl( 230  44%  49%) | oklch(0.5  0.14 271 )",
+        "swatches[ 8] aka Swatch.Blue      ": "#2F5CB5   | hsl( 220  59%  45%) | oklch(0.49 0.15 262 )",
+        "swatches[ 9] aka Swatch.BlueSky   ": "#2A6591   | hsl( 206  55%  37%) | oklch(0.49 0.09 244 )",
+        "swatches[10] aka Swatch.Turquoise ": "#1E6A6F   | hsl( 184  57%  28%) | oklch(0.48 0.07 201 )",
+        "swatches[11] aka Swatch.GreenDark ": "#1F6B5D   | hsl( 169  55%  27%) | oklch(0.48 0.08 178 )",
+        "swatches[12] aka Swatch.Green     ": "#2A6D25   | hsl( 116  49%  29%) | oklch(0.48 0.13 142 )",
+        "swatches[13] aka Swatch.GreenLight": "#4B6A1B   | hsl(  84  59%  26%) | oklch(0.48 0.11 129 )",
+        "swatches[14] aka Swatch.Yellow    ": "#825815   | hsl(  37  72%  30%) | oklch(0.49 0.1   74 )",
+        "swatches[15] aka Swatch.Orange    ": "#A04221   | hsl(  16  66%  38%) | oklch(0.5  0.13  39 )",
+        "swatches[16] aka Swatch.Brown     ": "#954B32   | hsl(  15  50%  39%) | oklch(0.5  0.11  39 )",
+      }
+    `);
+  });
+});

package/src/design-system/fns.enum.ts

@@ -63,6 +63,8 @@ export function makeEnumFn(
     // and only lift its L if Lc against the painted card surface (box.tsx
     // renders `color-mix(card, surface 90%)`) falls below `colorCodingLc`.
     // Hue + chroma stay from bgFromNeutral.
+    // DESIGN TODO: enum badges on color-coded Boxes may sit on default/hover/focus surfaces.
+    // Decide whether these should preserve old subtlety or guarantee a small APCA separation.
     const bgFromBlend = memoizeColor(
       (neutralColor: string, cardColorCoding: string) => {
         const bare = bgFromNeutral(neutralColor);

package/src/design-system/fns.icon.ts

@@ -87,7 +87,7 @@ export function makeIconSide(
         c = Math.min(boosted, saturationCap);
         hOut = h;
       }
-      const wantedL = lightnessFromLc(surface, targetLc, c, hOut);
+      const wantedL = lightnessFromLc(surface, surfaceIsLight ? targetLc : -targetLc, c, hOut);
       const clampToward = (kind === "bg") === surfaceIsLight ? Math.max(inputL, wantedL) : Math.min(inputL, wantedL);
       return {mode: "oklch", l: clampToward, c, h: hOut};
     });

package/src/design-system/fns.ts

@@ -2,7 +2,8 @@ import {a11yColor} from "../a11y-color";
 import {colorFromLcCompensated, lightnessFromLc} from "../apca";
 import {colorFromUnsafe, oklchFrom, produceColor} from "../color-utils";
 import {memoizeColor} from "../memoize";
-import {alpha, type AlphaValue} from "./alpha";
+import {alpha, type AlphaCoefficient} from "./alpha";
+import {alphaCoefficients as A} from "./alpha-coefficients";
 import {getDarkenColor} from "./colors-js";
 import {mapDef} from "./def";
 import {makeEnumFn} from "./fns.enum";
@@ -13,7 +14,7 @@ function makeAdaptiveSide(
   surface: string,
   bgContrast = 1,
   fgContrast = 3,
-  [bg, focus, hover, fg]: [bg: AlphaValue, focus: AlphaValue, hover: AlphaValue, fg: AlphaValue]
+  [bg, focus, hover, fg]: [bg: AlphaCoefficient, focus: AlphaCoefficient, hover: AlphaCoefficient, fg: AlphaCoefficient]
 ) {
   return {
     bg: (color: string) => a11yColor(alpha(color, bg), surface, bgContrast),
@@ -24,14 +25,33 @@ function makeAdaptiveSide(
 }
 
 export const makeAdapt = (surface: Def, fgContrasts: [light: number, dark: number] = [3, 5]) => {
-  const light = makeAdaptiveSide(surface[0], 1, fgContrasts[0], [0.15, 0.25, 0.4, 0.95]);
-  const dark = makeAdaptiveSide(surface[1], 1.3, fgContrasts[1], [0.3, 0.4, 0.6, 0.95]);
+  const {bg, focus, hover, fg} = A.adaptiveUserColor;
+  const light = makeAdaptiveSide(surface[0], 1, fgContrasts[0], [bg[0], focus[0], hover[0], fg[0]]);
+  const dark = makeAdaptiveSide(surface[1], 1.3, fgContrasts[1], [bg[1], focus[1], hover[1], fg[1]]);
   return [light, dark] satisfies ModeDef<ReturnType<typeof makeAdaptiveSide>>;
 };
 
+export const makeAvatarPlaceholder = (
+  deneutralizeFilterDef: ModeDef<(color: string) => string>,
+  surface: Def,
+  bgLcs: [light: number, dark: number] = [25, -22],
+  fgLcs: [light: number, dark: number] = [80, -85],
+  bgChromaScales: [light: number, dark: number] = [1.0, 0.8]
+) =>
+  mapDef(deneutralizeFilterDef, (deneutralize, side) => {
+    const solve = (color: string, lc: number, chromaScale: number) => {
+      const o = oklchFrom(colorFromUnsafe(color));
+      return colorFromLcCompensated(surface[side], lc, (o?.c ?? 0) * chromaScale, o?.h ?? 0, deneutralize);
+    };
+    return {
+      bg: memoizeColor((color: string) => solve(color, bgLcs[side], bgChromaScales[side])),
+      fg: memoizeColor((color: string) => solve(color, fgLcs[side], 1)),
+    };
+  });
+
 export function createColorFns(
   deneutralizeFilterDef: ModeDef<(color: string) => string>,
-  defs: {icon: Def; adapt: Def; callout: Def; highlight: Def; enum: EnumDefs}
+  defs: {icon: Def; adapt: Def; avatarPlaceholder: Def; callout: Def; highlight: Def; enum: EnumDefs}
 ) {
   const adapt = makeAdapt(defs.adapt);
 
@@ -55,6 +75,8 @@ export function createColorFns(
 
     adapt,
 
+    avatarPlaceholder: makeAvatarPlaceholder(deneutralizeFilterDef, defs.avatarPlaceholder),
+
     typeLabelFg: mapDef(deneutralizeFilterDef, (deneutralize, side) =>
       memoizeColor((neutralColor: string) => typeLabelFgAdapt[side].fg(deneutralize(neutralColor)))
     ),
@@ -66,7 +88,8 @@ export function createColorFns(
           const deneutralized = neutralColor ? deneutralize(neutralColor) : defs.icon[side];
           const darken = getDarkenColor(deneutralized);
           const bg = icon[side](neutralColor ?? defs.icon[side]).fg;
-          const fg = colorFromLcCompensated(bg, 90, oklch.c, oklch.h ?? 0, deneutralize);
+          const bgL = oklchFrom(colorFromUnsafe(bg))?.l ?? 0;
+          const fg = colorFromLcCompensated(bg, bgL > 0.8 ? 90 : -90, oklch.c, oklch.h ?? 0, deneutralize);
 
           return {
             fg,
@@ -94,11 +117,15 @@ export function createColorFns(
       const surface = defs.callout[side];
       return memoizeColor((neutralColor: string) => {
         const deneutralized = deneutralize(neutralColor);
-        const blended = a11yColor(alpha(deneutralized, side === 0 ? 0.1 : 0.3), surface, side === 0 ? 1 : 1.3);
+        const blended = a11yColor(
+          alpha(deneutralized, A.adaptiveUserColor.calloutBg[side]),
+          surface,
+          side === 0 ? 1 : 1.3
+        );
         return {
           bg: produceColor(blended, ({l, c, h}) => {
-            const lFloor = lightnessFromLc(surface, 2, c, h);
-            const lCap = lightnessFromLc(surface, 20, c, h);
+            const lFloor = lightnessFromLc(surface, side === 0 ? 2 : -2, c, h);
+            const lCap = lightnessFromLc(surface, side === 0 ? 20 : -20, c, h);
             const [lo, hi] = side === 0 ? [lCap, lFloor] : [lFloor, lCap];
             return {mode: "oklch", l: Math.max(lo, Math.min(hi, l)), c, h};
           }),
@@ -114,13 +141,16 @@ export function createColorFns(
         return {
           bg: produceColor(adjusted, (oklch) => ({
             ...oklch,
-            l: lightnessFromLc(surface, side === 0 ? 28 : 65, oklch.c, oklch.h),
-            alpha: side === 0 ? 0.3 : 0.4,
+            l: lightnessFromLc(surface, side === 0 ? 28 : -65, oklch.c, oklch.h),
+            alpha: A.adaptiveUserColor.highlightBg[side],
           })),
           bgDecor: produceColor(adjusted, (oklch) => ({
             ...oklch,
-            l: Math.max(0, lightnessFromLc(surface, side === 0 ? 35 : 65, oklch.c, oklch.h) - (side === 1 ? 0.036 : 0)),
-            alpha: 0.9,
+            l: Math.max(
+              0,
+              lightnessFromLc(surface, side === 0 ? 35 : -65, oklch.c, oklch.h) - (side === 1 ? 0.036 : 0)
+            ),
+            alpha: A.adaptiveUserColor.highlightDecor[side],
           })),
         };
       });

package/src/design-system/theme.test.ts

@@ -22,18 +22,16 @@ test("makeTheme memoization", () => {
   expect(new Set(themes.map((theme) => getKeys(theme.colors).join(",")))).toMatchObject({size: 1});
 });
 
-describe("makeThemeStyles", () => {
+describe("stylesFromTheme", () => {
   it("maps provided theme to css props", () => {
     const colors = {
-      mode: "light",
       transparent: "rgba(255, 255, 255, 0)",
       colorAI: "rgb(157, 99, 212)",
     } satisfies Partial<Theme["colors"]> as Theme["colors"];
-    expect(stylesFromTheme({key: "key", colors}, "fibery")).toMatchInlineSnapshot(`
+    expect(stylesFromTheme({colors, varname: (x) => `test(${x})`})).toMatchInlineSnapshot(`
       {
-        "--fibery-color-colorAI": "rgb(157, 99, 212)",
-        "--fibery-color-mode": "light",
-        "--fibery-color-transparent": "rgba(255, 255, 255, 0)",
+        "test(colorAI)": "rgb(157, 99, 212)",
+        "test(transparent)": "rgba(255, 255, 255, 0)",
       }
     `);
   });

package/src/design-system/theme.ts

@@ -1,4 +1,4 @@
-import {memoize} from "@fibery/helpers/src/_";
+import {memoize, memoizeWeak} from "@fibery/helpers/src/_";
 import {typedObjectEntries} from "@fibery/helpers/utils/object";
 import {LRUCache} from "lru-cache";
 
@@ -8,8 +8,16 @@ import {defsFromPalette, sideFromDefs} from "./colors";
 import {makeSelect} from "./colors-js";
 import type {ThemePalette} from "./types";
 
+function makeVarnameFn(ns?: string): (key: keyof ThemeDefs["colors"]) => string {
+  if (ns === undefined) {
+    return (key) => `--${key}`;
+  } else {
+    return (key) => `--${ns}-${key}`;
+  }
+}
+
 // intentionally non-memoized implementation detail for theme-styles use-case
-export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode) {
+export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode, ns?: string) {
   const {colors, fns} = sideFromDefs(defs, mode);
   return {
     key: `${defs.key}-${mode}`,
@@ -17,30 +25,31 @@ export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode) {
     select: makeSelect(mode),
     colors,
     fns,
+    /** @deprecated consider extracting token, internal use only */
+    varname: makeVarnameFn(ns),
   };
 }
 
 export type Theme = ReturnType<typeof themeFromDefs>;
 
-function themeFromPaletteImpl(palette: ThemePalette, mode: ThemeMode) {
+function themeFromPaletteImpl(palette: ThemePalette, mode: ThemeMode, ns?: string) {
   const defs = defsFromPalette(palette);
-  return themeFromDefs(defs, mode);
+  return themeFromDefs(defs, mode, ns);
 }
 
-export const themeFromPalette = memoize(themeFromPaletteImpl, (palette, mode) => `${palette.key}-${mode}`);
+export const themeFromPalette = memoize(
+  themeFromPaletteImpl,
+  (palette, mode, ns?: string) => `${palette.key}-${mode}-${ns}`
+);
 themeFromPalette.cache = new LRUCache({max: 4});
 
 export type Styles = Record<string, string>;
 
-function stylesFromThemeImpl({colors: themes}: Pick<Theme, "colors">, prefix: string): Styles {
-  return typedObjectEntries(themes).reduce<Styles>((inlineTheme, [key, value]) => {
-    inlineTheme[`--${prefix}-color-${key}`] = value;
+function stylesFromThemeImpl(theme: Pick<Theme, "colors" | "varname">): Styles {
+  return typedObjectEntries(theme.colors).reduce<Styles>((inlineTheme, [key, value]) => {
+    inlineTheme[theme.varname(key)] = value;
     return inlineTheme;
   }, {});
 }
 
-export const stylesFromTheme = memoize(
-  (theme: Pick<Theme, "key" | "colors">, prefix: string) => stylesFromThemeImpl(theme, prefix),
-  (theme, prefix) => `${theme.key}#${prefix}`
-);
-stylesFromTheme.cache = new LRUCache({max: 8});
+export const stylesFromTheme = memoizeWeak(stylesFromThemeImpl);

package/src/design-system/vars.test.ts

@@ -5,8 +5,8 @@ import {resolveColorArg, varsFromTheme} from "./vars";
 
 test("varsFromTheme", () => {
   const palette = selectPalette();
-  const theme = themeFromPalette(palette, "light");
-  const themeVars = varsFromTheme(theme, "fibery");
+  const theme = themeFromPalette(palette, "light", "fibery-color");
+  const themeVars = varsFromTheme(theme);
 
   expect(themeVars.mainBg).toEqual("var(--fibery-color-mainBg)"); // var(--fibery-bg-main)
   expect(themeVars.shadow100).toEqual("var(--fibery-color-shadow100)"); // var(--fibery-shadow(-?)100)

package/src/design-system/vars.ts

@@ -5,11 +5,11 @@ import type {Theme} from "./theme";
 
 export type ThemeVars = Theme["colors"];
 
-export function varsFromTheme({colors: sample}: Theme, prefix: string) {
+export function varsFromTheme(theme: Theme) {
   const vars = {} as Record<string, string>;
-  for (const [key, value] of typedObjectEntries(sample)) {
+  for (const [key, value] of typedObjectEntries(theme.colors)) {
     type _ = Assert<Equals<typeof value, string>>;
-    vars[key] = `var(--${prefix}-color-${key})`;
+    vars[key] = `var(${theme.varname(key)})`;
   }
   return vars as ThemeVars;
 }

package/src/design-system.ts

@@ -1,5 +1,7 @@
 export type * from "./design-system/types";
-export {opacity, alpha} from "./design-system/alpha";
+export {opacity, alpha, defineAlphaCoefficient} from "./design-system/alpha";
+export {Swatch} from "./design-system/colors-swatches";
+export {alphaCoefficients} from "./design-system/alpha-coefficients";
 export {transition, durations, tooltipDelay, transitionDuration, transitions} from "./design-system/animation";
 export {cardTypeColors, type ThemeDefs} from "./design-system/colors";
 export {swatches} from "./design-system/colors-swatches";

package/src/dot.tsx

@@ -7,6 +7,7 @@ import {border, space, themeVars} from "./design-system";
 const dotColorVar = "--fibery-dot-color";
 
 const dotCss = css`
+  flex-shrink: 0;
   background-color: var(${dotColorVar});
   border-radius: ${border.radiusFull};
 

package/src/double-apply.ts

@@ -1,7 +1,7 @@
 export const makeDoubleApplyDetector = () => {
   const __outputs = process.env.NODE_ENV !== "production" ? new Set<string>() : undefined;
   const __reported = process.env.NODE_ENV !== "production" ? new Set<string>() : undefined;
-  return function check(input: string, output: string) {
+  return function check(input: string, output: string, recordOutput = true) {
     if (__outputs?.has(input)) {
       if (!__reported?.has(input)) {
         __reported?.add(input);
@@ -12,7 +12,7 @@ export const makeDoubleApplyDetector = () => {
         );
       }
     }
-    if (__outputs && output !== input) {
+    if (__outputs && recordOutput && output !== input) {
       __outputs.add(output);
     }
   };

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

@@ -5,7 +5,7 @@ import {mobileRootSelector} from "../../mobile-styles";
 
 const footerCss = css`
   position: relative;
-  border-top: 1px solid var(--fibery-color-separatorColor);
+  border-top: 1px solid var(--separatorColor);
   padding: ${space.s6}px ${space.s12}px;
   height: 40px;
 

package/src/emoji-picker/utils/frequently.ts

@@ -73,7 +73,7 @@ export function get(perLine: number) {
 
   const last = store.get("last");
 
-  if (last && sliced.indexOf(last) === -1) {
+  if (last && !sliced.includes(last)) {
     sliced.pop();
     sliced.push(last);
   }

package/src/favorites-icon.tsx

@@ -7,7 +7,7 @@ import type {ButtonSize} from "./button/base-button";
 import {IconButton} from "./button/icon-button";
 import {makeButtonColors} from "./button/make-button-colors";
 import Favorites from "./icons/react/favorites";
-import FavoritesCheckedIcon from "./icons/react/favorites-checked";
+import FavoritesFilledIcon from "./icons/react/favorites-filled";
 import {useTheme} from "./theme-provider";
 
 const checkedStyle = css``;
@@ -81,7 +81,7 @@ export const FavoritesIcon = ({
         color="neutral"
         variant="ghost"
       >
-        {checked ? <FavoritesCheckedIcon /> : <Favorites />}
+        {checked ? <FavoritesFilledIcon /> : <Favorites />}
       </IconButton>
     </div>
   );