@fibery/ui-kit 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fibery/ui-kit
 
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies [d04a531]
+  - @fibery/helpers@2.0.1
+  - @fibery/react@1.5.2
+
 ## 2.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -21,6 +21,7 @@
     "@types/react-select-country-list": "^2.2.3",
     "@types/setimmediate": "^1.0.4",
     "antd": "4.24.7",
+    "apcach": "github:antiflasher/apcach#54077b3",
     "chrono-node": "^2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
@@ -30,6 +31,7 @@
     "date-fns": "2.29.2",
     "invariant": "2.2.4",
     "lodash": "4.17.21",
+    "lru-cache": "11.2.2",
     "md5": "2.2.1",
     "moment": "2.29.4",
     "photoswipe": "5.4.4",
@@ -46,9 +48,10 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
+    "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
-    "@fibery/helpers": "2.0.0",
-    "@fibery/react": "1.5.1"
+    "@fibery/helpers": "2.0.1",
+    "@fibery/react": "1.5.2"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",

package/src/@types/react-color.d.ts

@@ -0,0 +1,36 @@
+declare module "react-color/lib/components/common" {
+  import type {ComponentType} from "react";
+
+  // ColorWrap HOC: injects hex/hsl/hsv/rgb/onChange into the inner component,
+  // and exposes color/onChangeComplete/onChange on the outer component.
+  // Internally, onChange/onChangeComplete receive a full ColorResult object
+  // (ColorWrap.handleChange calls toState() before forwarding).
+  type ColorResult = {
+    hex: string;
+    hsl: {h: number; s: number; l: number; a: number};
+    hsv: {h: number; s: number; v: number; a: number};
+    rgb: {r: number; g: number; b: number; a: number};
+    oldHue: number;
+    source: string;
+  };
+
+  type ColorWrapExternalProps = {
+    color?: string;
+    onChangeComplete?: (color: ColorResult) => void;
+    onChange?: (color: ColorResult) => void;
+  };
+
+  // ColorWrap overrides inner onChange with its own handler that passes ColorResult.
+  // Omit onChange from inner props to avoid union conflict.
+  export function ColorWrap<P extends Record<string, unknown>>(
+    component: ComponentType<P>
+  ): ComponentType<Omit<Partial<P>, "onChange"> & ColorWrapExternalProps>;
+
+  export const EditableInput: ComponentType<{
+    style?: Record<string, Record<string, unknown>>;
+    value?: string;
+    onChange?: (color: string) => void;
+  }>;
+  export const Hue: ComponentType<Record<string, unknown>>;
+  export const Saturation: ComponentType<Record<string, unknown>>;
+}

package/src/antd/{Tabs.js → Tabs.tsx}

@@ -46,7 +46,10 @@ export const tabsStyles = css`
 `;
 
 function getWrapper() {
-  return forwardRef(function TabWrapper({children, className}, ref) {
+  return forwardRef<HTMLDivElement, {children: React.ReactNode; className?: string}>(function TabWrapper(
+    {children, className},
+    ref
+  ) {
     return (
       <div className={cx(className, tabsStyles)} ref={ref}>
         {children}
@@ -55,4 +58,4 @@ function getWrapper() {
   });
 }
 
-export const AntTabs = wrapWith(getWrapper(tabsStyles), Tabs);
+export const AntTabs = wrapWith(getWrapper(), Tabs);

package/src/color-filter.test.ts

@@ -7,32 +7,8 @@ describe("makeColorFilter alpha preservation", () => {
     expect(filter(input)).toMatch(/,\s*0\.5\)$/);
   };
 
-  it("sepia + oklchL", () => {
-    expectAlpha(makeColorFilter({sepia: 0.3, oklchL: 0.97}));
-  });
-
-  it("brightness", () => {
-    expectAlpha(makeColorFilter({brightness: 1.2}));
-  });
-
-  it("contrast", () => {
-    expectAlpha(makeColorFilter({contrast: 0.8}));
-  });
-
-  it("saturate", () => {
-    expectAlpha(makeColorFilter({saturate: 1.5}));
-  });
-
-  it("hueRotate", () => {
-    expectAlpha(makeColorFilter({hueRotate: 45}));
-  });
-
-  it("grayscale", () => {
-    expectAlpha(makeColorFilter({grayscale: 0.5}));
-  });
-
-  it("invert", () => {
-    expectAlpha(makeColorFilter({invert: 1}));
+  it("oklchL", () => {
+    expectAlpha(makeColorFilter({oklchL: 0.97}));
   });
 
   it("oklchC", () => {
@@ -46,15 +22,8 @@ describe("makeColorFilter alpha preservation", () => {
   it("all filters combined", () => {
     expectAlpha(
       makeColorFilter({
-        sepia: 0.3,
         oklchL: 0.97,
         oklchC: 0.8,
-        brightness: 1.1,
-        contrast: 0.9,
-        saturate: 1.2,
-        hueRotate: 10,
-        grayscale: 0.1,
-        invert: 0.05,
         hueShift: {targetHue: 200, amount: 0.3},
       })
     );
@@ -70,7 +39,7 @@ describe("makeColorFilter identity", () => {
 });
 
 describe("makeColorFilter null/empty color", () => {
-  const filter = makeColorFilter({sepia: 0.3, oklchL: 0.97});
+  const filter = makeColorFilter({oklchL: 0.97});
 
   it("does not throw on null color", () => {
     expect(filter(null as unknown as string)).toBeNull();
@@ -86,29 +55,29 @@ describe("makeColorFilter null/empty color", () => {
 });
 
 describe("makeColorFilter warm deneutralize (sepia + oklchL)", () => {
-  const warmFilter = makeColorFilter({sepia: 0.3, oklchL: 0.97});
+  const warmFilter = makeColorFilter({oklchL: 0.97});
 
   it("transforms cardTypeColors snapshot", () => {
     const transformed = Object.fromEntries(cardTypeColors.map((c) => [c, warmFilter(c)]));
     expect(transformed).toMatchInlineSnapshot(`
       {
-        "#159789": "rgb(44, 139, 121)",
-        "#199EE3": "rgb(53, 149, 188)",
-        "#1FBED3": "rgb(60, 177, 181)",
-        "#2978FB": "rgb(69, 119, 202)",
-        "#3E53B4": "rgb(76, 86, 147)",
-        "#4A4A4A": "rgb(78, 75, 69)",
-        "#4FAF54": "rgb(102, 164, 90)",
-        "#673DB6": "rgb(104, 70, 148)",
-        "#6A849B": "rgb(120, 133, 139)",
-        "#8EC351": "rgb(158, 188, 95)",
-        "#99A2AB": "rgb(165, 164, 158)",
-        "#9C2BAF": "rgb(142, 58, 144)",
-        "#B04E31": "rgb(159, 86, 58)",
-        "#D40915": "rgb(167, 13, 24)",
-        "#E72065": "rgb(193, 46, 92)",
-        "#FBA32F": "rgb(237, 168, 71)",
-        "#FC551F": "rgb(219, 97, 47)",
+        "#159789": "rgb(3, 145, 132)",
+        "#199EE3": "rgb(6, 152, 220)",
+        "#1FBED3": "rgb(8, 183, 204)",
+        "#2978FB": "rgb(35, 114, 245)",
+        "#3E53B4": "rgb(58, 79, 175)",
+        "#4A4A4A": "rgb(71, 71, 71)",
+        "#4FAF54": "rgb(72, 169, 78)",
+        "#673DB6": "rgb(99, 56, 177)",
+        "#6A849B": "rgb(101, 127, 149)",
+        "#8EC351": "rgb(135, 188, 73)",
+        "#99A2AB": "rgb(147, 155, 164)",
+        "#9C2BAF": "rgb(151, 37, 170)",
+        "#B04E31": "rgb(171, 73, 44)",
+        "#D40915": "rgb(206, 0, 13)",
+        "#E72065": "rgb(224, 19, 96)",
+        "#FBA32F": "rgb(243, 155, 35)",
+        "#FC551F": "rgb(245, 78, 20)",
       }
     `);
   });
@@ -121,14 +90,14 @@ describe("makeColorFilter warm deneutralize (sepia + oklchL)", () => {
     const black = warmFilter("#000000");
     const white = warmFilter("#ffffff");
     expect(black).toMatchInlineSnapshot(`"rgb(0, 0, 0)"`);
-    expect(white).toMatchInlineSnapshot(`"rgb(255, 255, 255)"`);
+    expect(white).toMatchInlineSnapshot(`"rgb(245, 245, 245)"`);
   });
 });
 
 describe("makeColorFilter double-deneutralize guard", () => {
   it("warns when applying filter to an already-filtered output", () => {
     const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
-    const filter = makeColorFilter({sepia: 0.3, oklchL: 0.97});
+    const filter = makeColorFilter({oklchL: 0.97});
 
     const first = filter("#D40915");
     filter(first);
@@ -136,20 +105,10 @@ describe("makeColorFilter double-deneutralize guard", () => {
     expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("double-deneutralize detected"));
     warnSpy.mockRestore();
   });
-
-  it("does not warn on first application", () => {
-    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
-    const filter = makeColorFilter({sepia: 0.1});
-
-    filter("#00ff00");
-
-    expect(warnSpy).not.toHaveBeenCalled();
-    warnSpy.mockRestore();
-  });
 });
 
 describe("cssFromFilter", () => {
   it("approximates oklchL via brightness", () => {
-    expect(cssFromFilter({brightness: 0.5, oklchL: 0.97})).toEqual("brightness(0.485)");
+    expect(cssFromFilter({oklchL: 0.97})).toEqual("brightness(0.97)");
   });
 });

package/src/color-filter.ts

@@ -1,46 +1,37 @@
-import {
-  filterBrightness,
-  filterContrast,
-  filterGrayscale,
-  filterHueRotate,
-  filterInvert,
-  filterSaturate,
-  filterSepia,
-  Rgb,
-} from "culori";
-import {cssFromColor, oklchFrom, rgbFrom} from "./color-utils";
+import {filterDeficiencyDeuter, filterDeficiencyProt, filterDeficiencyTrit, type Oklch} from "culori";
+import {cssFromColor, oklchFrom} from "./color-utils";
 import {shiftHueTowards} from "./palette-generator";
 import memoize from "lodash/memoize";
+import {adjustHeat} from "./heat";
+
+export const cvdChannels = [
+  {key: "cvdProtan", label: "protan (red-blind)", filter: filterDeficiencyProt},
+  {key: "cvdDeutan", label: "deutan (green-blind)", filter: filterDeficiencyDeuter},
+  {key: "cvdTritan", label: "tritan (blue-blind)", filter: filterDeficiencyTrit},
+] as const;
 
 export type ColorFilterSpec = {
   hueShift?: {targetHue: number; amount: number};
   oklchL?: number;
   oklchC?: number;
-  brightness?: number;
-  contrast?: number;
-  saturate?: number;
-  hueRotate?: number;
-  sepia?: number;
-  grayscale?: number;
-  invert?: number;
+  heat?: number; // -1..1 cold..hot
+  cvdProtan?: number;
+  cvdDeutan?: number;
+  cvdTritan?: number;
 };
 
-const MODE = "rgb" as const;
-type T = Rgb;
-const from = rgbFrom;
-
-export function cssFromFilter(spec?: ColorFilterSpec): string | undefined {
+export function cssFromFilter(spec?: ColorFilterSpec): string {
   if (!spec) {
-    return undefined;
+    return "none";
   }
   if (process.env.NODE_ENV !== "production") {
     const unsupported: string[] = [];
-    if (spec.oklchC !== undefined) {
-      unsupported.push("oklchC (no CSS equivalent for chroma adjustment)");
-    }
     if (spec.hueShift) {
       unsupported.push("hueShift (CSS hue-rotate is uniform, hueShift targets a specific hue)");
     }
+    if (spec.cvdProtan || spec.cvdDeutan || spec.cvdTritan) {
+      unsupported.push("cvd (color vision deficiency simulation has no CSS equivalent)");
+    }
     if (unsupported.length > 0) {
       // oxlint-disable-next-line no-console
       console.warn(
@@ -50,86 +41,60 @@ export function cssFromFilter(spec?: ColorFilterSpec): string | undefined {
     }
   }
   const parts: string[] = [];
-  if (spec.sepia !== undefined) {
-    parts.push(`sepia(${spec.sepia})`);
-  }
-  let brightness = 1;
-  if (spec.brightness !== undefined) {
-    brightness *= spec.brightness;
-  }
   if (spec.oklchL !== undefined) {
-    brightness *= spec.oklchL;
-  }
-  if (brightness !== 1) {
-    parts.push(`brightness(${brightness})`);
-  }
-
-  if (spec.contrast !== undefined) {
-    parts.push(`contrast(${spec.contrast})`);
-  }
-  if (spec.saturate !== undefined) {
-    parts.push(`saturate(${spec.saturate})`);
-  }
-  if (spec.hueRotate !== undefined) {
-    parts.push(`hue-rotate(${spec.hueRotate}deg)`);
-  }
-  if (spec.grayscale !== undefined) {
-    parts.push(`grayscale(${spec.grayscale})`);
-  }
-  if (spec.invert !== undefined) {
-    parts.push(`invert(${spec.invert})`);
+    parts.push(`brightness(${spec.oklchL})`);
+  }
+  if (spec.oklchC !== undefined) {
+    parts.push(`saturate(${spec.oklchC})`);
+  }
+  if (spec.heat !== undefined && spec.heat !== 0) {
+    if (spec.heat > 0) {
+      // approximate warm shift (oklch mix towards hue 29) via sepia + saturate
+      const t = spec.heat;
+      parts.push(`sepia(${(t * 0.35).toFixed(3)})`);
+      parts.push(`saturate(${(1 + t * 0.4).toFixed(3)})`);
+    } else if (process.env.NODE_ENV !== "production") {
+      // oxlint-disable-next-line no-console
+      console.warn("[cssFromFilter] negative temperature (cold shift) has no CSS filter approximation");
+    }
   }
-  return parts.length > 0 ? parts.join(" ") : undefined;
+  return parts.length > 0 ? parts.join(" ") : "none";
 }
 
-type ColorFilter = (color: string, format?: (color: T) => string) => string;
+type ColorFilter = (color: string, format?: (color: Oklch) => string) => string;
 
 export function makeColorFilter(spec?: ColorFilterSpec): ColorFilter {
   if (!spec) {
     return (x) => x;
   }
-  type ColorToSameColorMapper = ReturnType<typeof filterBrightness>;
-  const filters: ColorToSameColorMapper[] = [];
-  if (spec.brightness !== undefined) {
-    filters.push(filterBrightness(spec.brightness, MODE));
-  }
-  if (spec.contrast !== undefined) {
-    filters.push(filterContrast(spec.contrast, MODE));
-  }
-  if (spec.saturate !== undefined) {
-    filters.push(filterSaturate(spec.saturate, MODE));
-  }
-  if (spec.hueRotate !== undefined) {
-    filters.push(filterHueRotate(spec.hueRotate, MODE));
-  }
-  if (spec.sepia !== undefined) {
-    filters.push(filterSepia(spec.sepia, MODE));
-  }
-  if (spec.grayscale !== undefined) {
-    filters.push(filterGrayscale(spec.grayscale, MODE));
-  }
-  if (spec.invert !== undefined) {
-    filters.push(filterInvert(spec.invert, MODE));
-  }
   const __outputs = process.env.NODE_ENV !== "production" ? new Set<string>() : undefined;
-
+  const __reported = process.env.NODE_ENV !== "production" ? new Set<string>() : undefined;
   return memoize(
-    (color: string, format: (color: T) => string = cssFromColor) => {
+    (color: string, format: (color: Oklch) => string = cssFromColor) => {
       if (!color) {
         return color;
       }
       if (__outputs?.has(color)) {
-        // oxlint-disable-next-line no-console
-        console.warn(
-          `[deneutralize] double-deneutralize detected: "${color}" is already a deneutralize output. ` +
-            `This likely means a color is being transformed twice — check the call site.`
-        );
+        if (!__reported?.has(color)) {
+          __reported?.add(color);
+          // oxlint-disable-next-line no-console
+          console.warn(
+            `[deneutralize] double-deneutralize detected: "${color}" is already a deneutralize output. ` +
+              `This likely means a color is being transformed twice — check the call site.`
+          );
+        }
       }
-      const parsed = from(color);
+      const parsed = oklchFrom(color);
       if (!parsed) {
         return color;
       }
-      let t: T = parsed;
+      let t: Oklch = parsed;
+      for (const {key, filter} of cvdChannels) {
+        const severity = spec[key];
+        if (severity) {
+          t = filter(severity)(t);
+        }
+      }
       if (spec.hueShift || spec.oklchL !== undefined || spec.oklchC !== undefined) {
         const oklch = oklchFrom(t);
         if (spec.hueShift) {
@@ -141,16 +106,20 @@ export function makeColorFilter(spec?: ColorFilterSpec): ColorFilter {
         if (spec.oklchC !== undefined) {
           oklch.c = (oklch.c ?? 0) * spec.oklchC;
         }
-        t = from(oklch);
+        t = oklchFrom(oklch);
       }
-      for (const filter of filters) {
-        t = filter(t);
+
+      if (spec.heat !== undefined && spec.heat !== 0) {
+        t = adjustHeat(t, spec.heat);
       }
+
       const result = format(t);
-      __outputs?.add(result);
+      if (__outputs && result !== color) {
+        __outputs.add(result);
+      }
       return result;
     },
-    (color: string, format?: (color: T) => string) =>
+    (color: string, format?: (color: Oklch) => string) =>
       format === cssFromColor || format === undefined ? color : `${color}\0${format?.name || format.toString()}`
   );
 }

package/src/color-picker/{ColorPickerOrLoader.js → ColorPickerOrLoader.tsx}

@@ -16,7 +16,7 @@ const LazyColorPicker = lazy(async () => {
   return {default: ColorPicker};
 });
 
-export const ColorPickerOrLoader = (props) => (
+export const ColorPickerOrLoader = (props: React.ComponentProps<typeof LazyColorPicker>) => (
   <Suspense fallback={<div className={colorPickerLoaderStyle}>Loading color picker component…</div>}>
     <LazyColorPicker {...props} />
   </Suspense>

package/src/color-picker/{index.js → index.tsx}

@@ -31,8 +31,21 @@ const hexInpuWrapperCss = css`
   margin-top: ${space.s12}px;
 `;
 
+type SliderPickerOwnProps = {
+  containerClassName: string;
+  colors?: readonly string[];
+  getSwatchHoverColor?: (color: string) => string | undefined;
+  getColorOverrideFn?: (color: string) => string;
+};
+
 const SliderPicker = ColorWrap(
-  ({containerClassName, colors, getSwatchHoverColor, getColorOverrideFn = undefined, ...rest}) => {
+  ({
+    containerClassName,
+    colors,
+    getSwatchHoverColor,
+    getColorOverrideFn,
+    ...rest
+  }: SliderPickerOwnProps & {hex: string; color: string; onChange: (color: string) => void}) => {
     const hasSelectedColor = Boolean(rest.color);
 
     const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
@@ -40,7 +53,7 @@ const SliderPicker = ColorWrap(
     const [isExpanded, setIsExpanded] = useState(false);
 
     const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
-    const getColorOverride = getColorOverrideFn ?? ((color) => color);
+    const getColorOverride = getColorOverrideFn ?? ((color: string) => color);
 
     return (
       <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
@@ -65,7 +78,7 @@ const SliderPicker = ColorWrap(
                 getHoverColor={getSwatchHoverColor}
                 onClick={() => setIsExpanded(!isExpanded)}
                 selected={isCustomSwatchSelected}
-                color={isCustomSwatchSelected ? getColorOverride(rest.hex) : undefined}
+                color={isCustomSwatchSelected ? getColorOverride(rest.hex) : ""}
               />
             </CollapsibleTrigger>
           </div>
@@ -102,6 +115,18 @@ const SliderPicker = ColorWrap(
   }
 );
 
+export type ColorPickerProps = {
+  color: string;
+  getSwatchHoverColor?: (color: string) => string | undefined;
+  getColorOverrideFn?: (color: string) => string;
+  colors?: readonly string[];
+  // ColorWrap passes {hex, hsl, rgb, oldHue, ...} — consumers access .hex
+  onChangeComplete: (color: {hex: string} & Record<string, unknown>) => void;
+  containerClassName?: string;
+  // ColorWrap forwards unknown props to the inner component
+  [key: string]: unknown;
+};
+
 export const ColorPicker = ({
   color,
   getSwatchHoverColor,
@@ -109,13 +134,14 @@ export const ColorPicker = ({
   colors,
   onChangeComplete,
   containerClassName = colorSwatchContainerCss,
-}) => {
-  const [optimisticColor, setOptimisticColor] = useState(color);
+}: ColorPickerProps) => {
+  // ColorWrap onChange passes {hex, hsl, rgb, ...}; getDerivedStateFromProps handles both string and object
+  const [optimisticColor, setOptimisticColor] = useState<unknown>(color);
 
   return (
     <SliderPicker
       containerClassName={containerClassName}
-      color={optimisticColor}
+      color={optimisticColor as string}
       getSwatchHoverColor={getSwatchHoverColor}
       getColorOverrideFn={getColorOverrideFn}
       colors={colors}

package/src/color-utils.ts

@@ -94,12 +94,10 @@ export function setAlpha(color: Color, value: number): void {
   color.alpha = value;
 }
 
-export const isValidColor = (color: string) => parse(resolveColorArg(color, "isValidColor")) !== undefined;
+export const isValidColor = (color: string) => parse(color) !== undefined;
 
 export function colorFromUnsafe(color: string, fallback = "hsl(220, 62%, 56%)"): Color {
-  // eslint-disable-next-line no-param-reassign
-  color = resolveColorArg(color, "colorFromUnsafe");
-  const parsed = parse(color) ?? parse(fallback)!;
+  const parsed = parse(resolveColorArg(color, "colorFromUnsafe") ?? "") ?? parse(fallback)!;
   if (!parsed) {
     throw new Error(`Failed to parse fallback color ${fallback}`);
   }
@@ -164,11 +162,7 @@ export function cssFromUnsafe(color: string): string {
 export function serializeHexVariadic(color: Rgb): string;
 export function serializeHexVariadic(color: string): string | undefined;
 export function serializeHexVariadic(color: string | Rgb): string | undefined {
-  if (typeof color === "string") {
-    // eslint-disable-next-line no-param-reassign
-    color = resolveColorArg(color, "serializeHexVariadic");
-  }
-  const rgb = rgbFrom(color);
+  const rgb = rgbFrom(typeof color === "string" ? resolveColorArg(color, "serializeHexVariadic") : color);
   if (!rgb) {
     return rgb;
   }

package/src/design-system/colors-css.ts

@@ -12,6 +12,22 @@ export function getEnumTextColor(color: string) {
   return `color-mix(in srgb, ${color} 40%, ${themeVars.textColor} 60%)`;
 }
 
+/** Border on filled background swatches */
+export function getBgSwatchBorderColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.9) calc(c * 1.6) h),
+    oklch(from ${fill} calc(l * 1.5) calc(c * 1.5) h)
+  )`;
+}
+
+/** Opaque fill for palette swatches */
+export function getBgSwatchFillColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.98) calc(c * 1.25) h),
+    oklch(from ${fill} calc(l * 1.25) calc(c * 1.65) h)
+  )`;
+}
+
 function themeVarWithAlpha(themeVar: string, alpha: number) {
   return `color-mix(in srgb, ${themeVar} ${Math.round(alpha * 100)}%, transparent)`;
 }