@fibery/ui-kit 2.1.1 → 3.0.0

package/src/design-system/fns.ts

@@ -0,0 +1,109 @@
+import {a11yColor} from "../a11y-color";
+import {colorFromLcCompensated, lightnessFromLc} from "../apca";
+import {produceColor, colorFromUnsafe, oklchFrom} from "../color-utils";
+import {memoizeColor} from "../memoize";
+import {alpha, type AlphaValue} from "./alpha";
+import {getDarkenColor} from "./colors-js";
+import {mapDef} from "./def";
+import {makeEnumFn} from "./fns.enum";
+import {makeIconFn} from "./fns.icon";
+import type {Def, EnumDefs, ModeDef} from "./types";
+
+function makeAdaptiveSide(
+  surface: string,
+  bgContrast = 1,
+  fgContrast = 3,
+  [bg, focus, hover, fg]: [bg: AlphaValue, focus: AlphaValue, hover: AlphaValue, fg: AlphaValue]
+) {
+  return {
+    bg: (color: string) => a11yColor(alpha(color, bg), surface, bgContrast),
+    bgHover: (color: string) => a11yColor(alpha(color, focus), surface, bgContrast),
+    bgFocus: (color: string) => a11yColor(alpha(color, hover), surface, bgContrast),
+    fg: (color: string) => a11yColor(alpha(color, fg), surface, fgContrast),
+  };
+}
+
+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]);
+  return [light, dark] satisfies ModeDef<ReturnType<typeof makeAdaptiveSide>>;
+};
+
+export function createColorFns(
+  deneutralizeFilterDef: ModeDef<(color: string) => string>,
+  defs: {icon: Def; adapt: Def; callout: Def; highlight: Def; enum: EnumDefs; text: Def}
+) {
+  const adapt = makeAdapt(defs.adapt);
+
+  const icon = makeIconFn(deneutralizeFilterDef, defs.adapt);
+
+  return {
+    deneutralize: deneutralizeFilterDef,
+
+    adapt,
+
+    badge: mapDef(deneutralizeFilterDef, (deneutralize, side) =>
+      memoizeColor(
+        (neutralColor: string | null) => {
+          const oklch = oklchFrom(colorFromUnsafe(neutralColor ?? defs.icon[side]));
+          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);
+
+          return {
+            fg,
+            bg,
+            border: bg,
+            borderSelected: darken, // TODO: used only in DB Settings -> Relations (to be removed)
+          };
+        },
+        (neutralColor) => neutralColor ?? ""
+      )
+    ),
+
+    enum: makeEnumFn(deneutralizeFilterDef, defs.adapt, defs.enum),
+
+    icon,
+
+    callout: mapDef(deneutralizeFilterDef, (deneutralize, side) => {
+      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);
+        return {
+          bg: produceColor(blended, ({l, c, h}) => {
+            const lFloor = lightnessFromLc(surface, 2, c, h);
+            const lCap = lightnessFromLc(surface, 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};
+          }),
+          fg: adapt[side].fg(deneutralized),
+        };
+      });
+    }),
+
+    highlight: mapDef(deneutralizeFilterDef, (deneutralize, side) => {
+      const surface = defs.highlight[side];
+      return memoizeColor((neutralColor: string) => {
+        const adjusted = deneutralize(neutralColor);
+        return {
+          bg: produceColor(adjusted, (oklch) => ({
+            ...oklch,
+            l: lightnessFromLc(surface, side === 0 ? 28 : 65, oklch.c, oklch.h),
+            alpha: side === 0 ? 0.3 : 0.4,
+          })),
+          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,
+          })),
+        };
+      });
+    }),
+  } as const satisfies ThemeFnsDef;
+}
+
+type ColorFn = (color: string) => unknown;
+type ThemeFnDef = ModeDef<Record<string, ColorFn> | ColorFn>;
+type ThemeFnsDef = Record<string, ThemeFnDef>;

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

@@ -1,6 +1,7 @@
-import {stylesFromTheme, Theme, themeFromPalette} from "./theme";
-import {themeModes} from "../theme-settings";
 import {selectPalette} from "../palette-generator";
+import {themeModes} from "../theme-settings";
+import type {Theme} from "./theme";
+import {stylesFromTheme, themeFromPalette} from "./theme";
 
 test("makeTheme memoization", () => {
   function getKeys(colors: Theme["colors"]) {
@@ -24,14 +25,14 @@ test("makeTheme memoization", () => {
 describe("makeThemeStyles", () => {
   it("maps provided theme to css props", () => {
     const colors = {
-      mode: "light2",
+      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})).toMatchInlineSnapshot(`
+    expect(stylesFromTheme({key: "key", colors}, "fibery")).toMatchInlineSnapshot(`
       {
         "--fibery-color-colorAI": "rgb(157, 99, 212)",
-        "--fibery-color-mode": "light2",
+        "--fibery-color-mode": "light",
         "--fibery-color-transparent": "rgba(255, 255, 255, 0)",
       }
     `);

package/src/design-system/theme.ts

@@ -1,12 +1,12 @@
-import {defsFromPalette, sideFromDefs, ThemeDefs} from "./colors";
-import {ThemeMode} from "../theme-settings";
-import {selectPalette} from "../palette-generator";
-import memoize from "lodash/memoize";
-import {varPrefix, varsFromTheme} from "./vars";
+import {memoize} from "@fibery/helpers/src/_";
 import {typedObjectEntries} from "@fibery/helpers/utils/object";
+import {LRUCache} from "lru-cache";
+
+import type {ThemeMode} from "../theme-settings";
+import type {ThemeDefs} from "./colors";
+import {defsFromPalette, sideFromDefs} from "./colors";
 import {makeSelect} from "./colors-js";
 import type {ThemePalette} from "./types";
-import {LRUCache} from "lru-cache";
 
 // intentionally non-memoized implementation detail for theme-styles use-case
 export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode) {
@@ -30,19 +30,17 @@ function themeFromPaletteImpl(palette: ThemePalette, mode: ThemeMode) {
 export const themeFromPalette = memoize(themeFromPaletteImpl, (palette, mode) => `${palette.key}-${mode}`);
 themeFromPalette.cache = new LRUCache({max: 4});
 
-export const themeVars = varsFromTheme(themeFromPalette(selectPalette(), "light"));
-
 export type Styles = Record<string, string>;
 
-function stylesFromThemeImpl({colors: themes}: Pick<Theme, "colors">): Styles {
+function stylesFromThemeImpl({colors: themes}: Pick<Theme, "colors">, prefix: string): Styles {
   return typedObjectEntries(themes).reduce<Styles>((inlineTheme, [key, value]) => {
-    inlineTheme[`--${varPrefix}-color-${key}`] = value;
+    inlineTheme[`--${prefix}-color-${key}`] = value;
     return inlineTheme;
   }, {});
 }
 
 export const stylesFromTheme = memoize(
-  (theme: Pick<Theme, "key" | "colors">) => stylesFromThemeImpl(theme),
-  (theme) => theme.key
+  (theme: Pick<Theme, "key" | "colors">, prefix: string) => stylesFromThemeImpl(theme, prefix),
+  (theme, prefix) => `${theme.key}#${prefix}`
 );
-stylesFromTheme.cache = new LRUCache({max: 4});
+stylesFromTheme.cache = new LRUCache({max: 8});

package/src/design-system/types.ts

@@ -1,10 +1,12 @@
 import type {ColorFilterSpec} from "../color-filter";
 
-export type ModeDef<T> = [light: T, dark: T];
+export type ModeDef<T> = readonly [light: T, dark: T];
 
 export type Def = ModeDef<string>; // ColorModeDef?
 export type Defs = Record<string, Def>; // ColorModeDefs?
 
+export type DefMapper = (def: Def) => Def;
+
 export type OneBasedScale<T> = readonly [
   base00: null,
   step01: T,
@@ -69,17 +71,25 @@ export type HighlightDefs = HighlightIntensityDefs & {
   overrides?: Partial<Record<HighlightHueName, Partial<HighlightIntensityOverrides>>>;
 };
 
+export type EnumDefs = {
+  bg: ModeDef<{swatchAlpha: number; minC: number; surfaceLc: number; colorCodingLc: number}>;
+  fg: {swatchAlpha: number};
+};
+
 export type ThemePaletteBase = {
   highlight: HighlightDefs;
+  enum: EnumDefs;
 };
 
 export type ThemePaletteCore = ThemePaletteBase & {
   deneutralize?: ModeDef<ColorFilterSpec>;
 
-  white: string;
-  black: string;
   whiteA: ColorScale;
+  white: string;
+
   blackA: ColorScale;
+  blackish: string;
+  black: string;
 
   base: ColorScale;
   baseDark: ColorScale;
@@ -92,6 +102,12 @@ export type ThemePaletteCore = ThemePaletteBase & {
 
   yellow: ColorScale;
   yellowDark: ColorScale;
+
+  purple_9_: string;
+  purpleDark_9_: string;
+
+  blue_9_: string;
+  blueDark_9_: string;
 };
 
 type ThemePaletteKeyless = ThemePaletteCore & {
@@ -99,4 +115,4 @@ type ThemePaletteKeyless = ThemePaletteCore & {
   accentDark: ColorScale;
 };
 
-export type ThemePalette = ThemePaletteKeyless & {key: string};
+export type ThemePalette = ThemePaletteKeyless & {key: string; swatchDefault: string};

package/src/design-system/typography.ts

@@ -1,4 +1,6 @@
-import {themeVars} from "./theme";
+import {css} from "@linaria/core";
+
+import {themeVars} from "../theming";
 import {transition} from "./animation";
 import {border} from "./layout";
 
@@ -10,27 +12,24 @@ export const lineHeight = {
   nowrap: 1,
 } as const;
 
-export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
-
-// 300 basic, 310 experiment with a variable Inter
 export const fontSize = {
-  xxl: 30,
-  xl: 24,
+  "3xl": 30,
+  "2xl": 24,
   lg: 18,
-  md: 16,
-  sm: 15,
-  xs: 14,
-  xxs: 13,
-  xxxs: 12,
-  tiny: 11,
-  mini: 10,
-  micro: 9,
-  nano: 8,
+  md: 16, // base in tailwind
+  "sm+": 15,
+  sm: 14,
+  "xs+": 13,
+  xs: 12,
+  "2xs": 11,
+  "3xs": 10,
 } as const;
 
 export const fontFamily =
   '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
 
+export const fontFamilyCode = '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace';
+
 export const fontWeight = {
   light: 310, // 300 basic, 310 experiment with a variable Inter
   regular: 410, // 400 basic, 410 experiment with a variable Inter
@@ -40,10 +39,177 @@ export const fontWeight = {
   bold: 700,
 } as const;
 
+/** @deprecated use tabularNumsClasses */
+export const tabularNumsOn = {
+  fontVariantNumeric: "tabular-nums",
+  fontFeatureSettings: '"tnum" 1',
+} as const;
+
+/** @deprecated use tabularNumsClasses */
+export const tabularNumsOff = {
+  fontVariantNumeric: "normal",
+  fontFeatureSettings: '"tnum" 0',
+} as const;
+
+export const tabularNumsClasses = {
+  on: css`
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
+  `,
+  off: css`
+    font-variant-numeric: normal;
+    font-feature-settings: "tnum" 0;
+  `,
+} as const;
+
+export const textClasses = {
+  heading1: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize["3xl"]}px;
+    letter-spacing: -0.01em;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.semibold};
+    color: ${themeVars.textColor};
+  `,
+  heading2: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize["2xl"]}px;
+    letter-spacing: -0.002em;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.semibold};
+    color: ${themeVars.textColor};
+  `,
+  heading3: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.lg}px;
+    letter-spacing: -0.002em;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.semibold};
+    color: ${themeVars.textColor};
+  `,
+  heading4: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.md}px;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.semibold};
+    color: ${themeVars.textColor};
+  `,
+  heading5: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.sm}px;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.semibold};
+    color: ${themeVars.textColor};
+  `,
+  heading6: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.xs}px;
+    line-height: ${lineHeight.heading};
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+  `,
+  heading7: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize["3xs"]}px;
+    line-height: ${lineHeight.heading};
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+  `,
+  heading8: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize["3xs"]}px;
+    line-height: ${lineHeight.heading};
+    font-weight: ${fontWeight.medium};
+    color: ${themeVars.textColor};
+  `,
+  big: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.md}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+  `,
+  regular: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.sm}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+    text-transform: none;
+    letter-spacing: normal;
+  `,
+  small: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.xs}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+    text-transform: none;
+  `,
+  code: css`
+    font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
+    font-size: ${fontSize.sm}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+  `,
+  link: css`
+    color: ${themeVars.linkColor};
+    border-bottom: ${themeVars.linkBorder};
+    text-decoration: none;
+    cursor: pointer;
+    transition: border ${transition};
+  `,
+  note: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.md}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+    border-radius: ${border.radius6}px;
+  `,
+  important: css`
+    font-family: ${fontFamily};
+    font-size: ${fontSize.md}px;
+    line-height: ${lineHeight.regular};
+    font-weight: ${fontWeight.regular};
+    color: ${themeVars.textColor};
+    border: 1px solid ${themeVars.active};
+    border-radius: ${border.radius6}px;
+  `,
+  inherit: css`
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    color: inherit;
+  `,
+} as const;
+
+/**
+ * @deprecated Prefer `textClasses` (className form) applied via `cx()` at the JSX boundary.
+ *
+ * Migration:
+ * - `<X className={cx(textClasses.heading4, ...)} />` instead of `style={textStyles.heading4}`
+ *   or `${{...textStyles.heading4}}` interpolation in a css`` template.
+ *
+ * `textStyles` (object form) is retained ONLY for nested CSS-in-JS selectors where className
+ * composition is impossible: `"& p": {...textStyles.X}`, `"::placeholder": {...textStyles.X}`,
+ * `"&:hover": textStyles.link`, etc — typically rich-text / editor-rendered content where
+ * descendants are not React JSX. For mobile-conditional `${mobileRootSelector} & { ... }`,
+ * use `useIsPhone()` + `cx(isPhone && textClasses.X, ...)` at JSX instead.
+ *
+ * Reusing object form via spread evaluates the entry on every css`` it appears in, slowing
+ * linaria compilation. Each new usage compounds the cost.
+ */
 export const textStyles = {
   heading1: {
     fontFamily,
-    fontSize: typeSizes[0],
+    fontSize: fontSize["3xl"],
     letterSpacing: "-0.01em",
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.semibold,
@@ -51,7 +217,7 @@ export const textStyles = {
   },
   heading2: {
     fontFamily,
-    fontSize: typeSizes[1],
+    fontSize: fontSize["2xl"],
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.semibold,
@@ -59,7 +225,7 @@ export const textStyles = {
   },
   heading3: {
     fontFamily,
-    fontSize: typeSizes[2],
+    fontSize: fontSize.lg,
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.semibold,
@@ -67,21 +233,21 @@ export const textStyles = {
   },
   heading4: {
     fontFamily,
-    fontSize: typeSizes[3],
+    fontSize: fontSize.md,
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading5: {
     fontFamily,
-    fontSize: typeSizes[4],
+    fontSize: fontSize.sm,
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading6: {
     fontFamily,
-    fontSize: typeSizes[5],
+    fontSize: fontSize.xs,
     lineHeight: lineHeight.heading,
     letterSpacing: 0.6,
     textTransform: "uppercase",
@@ -90,7 +256,7 @@ export const textStyles = {
   },
   heading7: {
     fontFamily,
-    fontSize: typeSizes[6],
+    fontSize: fontSize["3xs"],
     lineHeight: lineHeight.heading,
     letterSpacing: 0.6,
     textTransform: "uppercase",
@@ -99,21 +265,21 @@ export const textStyles = {
   },
   heading8: {
     fontFamily,
-    fontSize: typeSizes[6],
+    fontSize: fontSize["3xs"],
     lineHeight: lineHeight.heading,
     fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   big: {
     fontFamily,
-    fontSize: typeSizes[3],
+    fontSize: fontSize.md,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
   regular: {
     fontFamily,
-    fontSize: typeSizes[4],
+    fontSize: fontSize.sm,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
@@ -122,15 +288,15 @@ export const textStyles = {
   },
   small: {
     fontFamily,
-    fontSize: typeSizes[5],
+    fontSize: fontSize.xs,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
     textTransform: "none",
   },
   code: {
-    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
-    fontSize: typeSizes[4],
+    fontFamily: fontFamilyCode,
+    fontSize: fontSize.sm,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
@@ -144,7 +310,7 @@ export const textStyles = {
   },
   note: {
     fontFamily,
-    fontSize: typeSizes[3],
+    fontSize: fontSize.md,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
@@ -152,23 +318,13 @@ export const textStyles = {
   },
   important: {
     fontFamily,
-    fontSize: typeSizes[3],
+    fontSize: fontSize.md,
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
     border: `1px solid ${themeVars.active}`,
     borderRadius: border.radius6,
   },
-  numeric: {
-    tabularOn: {
-      fontVariantNumeric: "tabular-nums",
-      fontFeatureSettings: '"tnum" 1',
-    },
-    tabularOff: {
-      fontVariantNumeric: "normal",
-      fontFeatureSettings: '"tnum" 0',
-    },
-  },
   inherit: {
     fontFamily: "inherit",
     fontSize: "inherit",

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

@@ -1,24 +1,20 @@
+import {cssFromUnsafe, getLuminance, produceColor, serializeHexVariadic} from "../color-utils";
+import {selectPalette} from "../palette-generator";
 import {themeFromPalette} from "./theme";
 import {resolveColorArg, varsFromTheme} from "./vars";
-import {selectPalette} from "../palette-generator";
-import {cssFromUnsafe, getAlpha, getLuminance, produceColor, serializeHexVariadic} from "../color-utils";
 
 test("varsFromTheme", () => {
   const palette = selectPalette();
   const theme = themeFromPalette(palette, "light");
-  const themeVars = varsFromTheme(theme);
+  const themeVars = varsFromTheme(theme, "fibery");
 
   expect(themeVars.mainBg).toEqual("var(--fibery-color-mainBg)"); // var(--fibery-bg-main)
   expect(themeVars.shadow100).toEqual("var(--fibery-color-shadow100)"); // var(--fibery-shadow(-?)100)
 });
 
 describe("resolveColorArg — CSS var guard", () => {
-  test("null from unsafe external world is identity", () => {
-    expect(resolveColorArg(null, "test")).toBe(null);
-  });
-
-  test("undefined from unsafe external world is identity", () => {
-    expect(resolveColorArg(undefined, "test")).toBe(undefined);
+  test.each([null, undefined, {}, 1, NaN])("%o from unsafe external world is identity", (input) => {
+    expect(resolveColorArg(input, "test")).toBe(input);
   });
 
   it("passes through plain colors", () => {
@@ -28,7 +24,7 @@ describe("resolveColorArg — CSS var guard", () => {
   });
 
   it("resolves var() from DOM when available", () => {
-    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
     document.documentElement.style.setProperty("--fibery-color-accent", "#3e8897");
     expect(resolveColorArg("var(--fibery-color-accent)", "test")).toBe("#3e8897");
@@ -38,7 +34,7 @@ describe("resolveColorArg — CSS var guard", () => {
   });
 
   it("returns original when DOM var is missing", () => {
-    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
     expect(resolveColorArg("var(--fibery-color-nonexistent)", "test")).toBe("var(--fibery-color-nonexistent)");
 
@@ -47,7 +43,7 @@ describe("resolveColorArg — CSS var guard", () => {
 
   it("warns once per fn+var combo", () => {
     document.documentElement.style.setProperty("--fibery-color-warnTest", "#000");
-    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
     resolveColorArg("var(--fibery-color-warnTest)", "warnFn");
     resolveColorArg("var(--fibery-color-warnTest)", "warnFn");
     expect(spy).toHaveBeenCalledTimes(1);
@@ -59,12 +55,11 @@ describe("resolveColorArg — CSS var guard", () => {
 
   it("color-utils fns work end-to-end with var() input", () => {
     document.documentElement.style.setProperty("--fibery-color-e2e", "#ff5400");
-    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
     expect(cssFromUnsafe("var(--fibery-color-e2e)")).toMatchInlineSnapshot(`"rgb(255, 84, 0)"`);
     expect(getLuminance("var(--fibery-color-e2e)")).toBeGreaterThan(0);
-    expect(getAlpha("var(--fibery-color-e2e)")).toBe(1);
-    expect(serializeHexVariadic("var(--fibery-color-e2e)")).toMatchInlineSnapshot(`"#ff5400"`);
+    expect(serializeHexVariadic("var(--fibery-color-e2e)")).toMatchInlineSnapshot(`"#FF5400"`);
     expect(produceColor("var(--fibery-color-e2e)", [])).toMatchInlineSnapshot(`"rgb(255, 84, 0)"`);
 
     spy.mockRestore();