@fibery/ui-kit 2.0.1 → 2.1.0

package/src/canvas-colors.ts

@@ -0,0 +1,133 @@
+import {Color} from "culori";
+import {hslFrom, oklchFrom, rgbFrom, serializeHexVariadic} from "./color-utils";
+import memoize from "lodash/memoize";
+
+export type ColorDef = [light: string, dark: string];
+export type CanvasColorRole = "bg" | "sticker" | "section" | "fg" | "ui";
+
+/** @deprecated sacrifice in favor of oklch-canvas */
+export const backgrounds: ColorDef[] = [
+  ["#1E1E1E", "#FDFDFD"],
+  ["#6E7A83", "#A4AAAF"],
+  ["#F24822", "#C05437"],
+  ["#FFA629", "#DF9E53"],
+  ["#FFCD29", "#E5C55E"],
+  ["#14AE5C", "#568B5C"],
+  ["#0D99FF", "#5288DB"],
+  ["#9747FF", "#7742E3"],
+  ["#FF7ED9", "#CE6DB2"],
+  ["#FDFDFD", "#1E1E1E"], //"#FAFAFB",
+  ["#C1C8CD", "#D8E1E8"],
+  ["#E5E8EB", "#F1F2F4"],
+  ["#FFC7C2", "#F3D8D4"],
+  ["#FCD19C", "#F5E0CD"],
+  ["#FFE8A3", "#F3E7AF"],
+  ["#AFF4C6", "#CFF0DD"],
+  ["#BDE3FF", "#D3DFF9"],
+  ["#E4CCFF", "#DDD8F7"],
+  ["#FFD7F3", "#F0D4E9"],
+];
+
+/** @deprecated sacrifice in favor of oklch-canvas */
+export const stickers: ColorDef[] = [
+  ["#AFBCCF", "#8E9AAA"],
+  ["#FFAFA3", "#D78C80"],
+  ["#FFC470", "#DDA75B"],
+  ["#FFD966", "#D4B755"],
+  ["#85E0A3", "#6FB888"],
+  ["#80CAFF", "#66AEDD"],
+  ["#D9B8FF", "#B292D4"],
+  ["#FFBDF2", "#D89FC3"],
+  ["#F1F2F4", "#C9CBCE"],
+  ["#FFE5E2", "#D8B5B2"],
+  ["#FFE9CF", "#D6C0A3"],
+  ["#FEF2CE", "#D3C8A5"],
+  ["#D7FFE5", "#A9D1B6"],
+  ["#DAEFFF", "#AFC9DD"],
+  ["#F0E3FF", "#C2B0D4"],
+  ["#FFE4F7", "#D8B7CF"],
+];
+
+/** @deprecated kill in favor of oklch-canvas */
+export const sections: ColorDef[] = [
+  ["#DDDDDD", "#2E2E2E"],
+  ["#EAEAEA", "#3B3B3B"],
+  ["#FFE2E0", "#8C4B48"],
+  ["#FFEAD6", "#8C6B48"],
+  ["#FFF3D6", "#8C7D48"],
+  ["#DDF8E2", "#488C60"],
+  ["#DBF0FF", "#48678C"],
+  ["#EAE1FF", "#5A488C"],
+  ["#FFD6F2", "#8C4874"],
+  ["#FFFFFF", "#FFFFFF"],
+  ["#F4F4F4", "#353535"],
+  ["#F9F9F9", "#4C4C4C"],
+  ["#FFF5F5", "#5E3530"],
+  ["#FFF7F0", "#543B29"],
+  ["#FFFBF0", "#554D2D"],
+  ["#EBFFEE", "#21462F"],
+  ["#F5FBFF", "#434E5D"],
+  ["#F8F5FF", "#3F3B4C"],
+  ["#FFF0FA", "#392630"],
+];
+
+const fmt = (color: Color): string => serializeHexVariadic(rgbFrom(color));
+
+export let darkFromLight = (light: string, role: CanvasColorRole): string => {
+  const lch = oklchFrom(light)!;
+  const hsl = hslFrom(light)!;
+  const c = lch.c ?? 0;
+  const isAchromatic = c < 0.008;
+
+  const {alpha} = lch;
+
+  switch (role) {
+    case "bg":
+      if (c < 0.03) {
+        if (lch.l < 0.3) {
+          return fmt({mode: "oklch", l: 0.99, c: 0, h: undefined, alpha});
+        }
+        if (lch.l > 0.97) {
+          return fmt({mode: "oklch", l: 0.24, c: 0, h: undefined, alpha});
+        }
+        return fmt({mode: "oklch", l: lch.l + (0.98 - lch.l) * 0.5, c: c * 0.5, h: lch.h, alpha});
+      }
+      if (c > 0.1) {
+        return fmt({mode: "oklch", l: lch.l - 0.06, c: c * 0.74, h: lch.h, alpha});
+      }
+      return fmt({mode: "oklch", l: lch.l, c: c * 0.55, h: lch.h, alpha});
+
+    case "sticker":
+      if (isAchromatic) {
+        return fmt({mode: "oklch", l: lch.l - 0.13, c: 0, h: undefined, alpha});
+      }
+      if (c > 0.06) {
+        return fmt({mode: "oklch", l: lch.l - 0.11, c: c * 0.9, h: lch.h, alpha});
+      }
+      return fmt({mode: "oklch", l: lch.l - 0.13, c: c * 1.2, h: lch.h, alpha});
+
+    case "section":
+      if (isAchromatic) {
+        if (lch.l > 0.999) {
+          return light;
+        }
+        return fmt({mode: "oklch", l: lch.l * 0.35, c: 0, h: undefined, alpha});
+      }
+      if ((hsl.l ?? 0) < 0.95) {
+        return fmt({mode: "hsl", h: hsl.h, s: 0.32, l: 0.42, alpha});
+      }
+      return fmt({mode: "oklch", l: 0.37, c: 0.045, h: lch.h, alpha});
+
+    case "fg":
+      // Dark text (#1E1E1E) on light bg → light text on dark bg.
+      // Invert lightness in oklch: dark becomes light, light stays capped.
+      return fmt({mode: "oklch", l: Math.min(1 - lch.l + 0.15, 0.95), c: c * 0.85, h: lch.h, alpha});
+
+    case "ui":
+      return light;
+
+    default:
+      throw new Error(role);
+  }
+};
+darkFromLight = memoize(darkFromLight, (fg, r) => fg.toUpperCase() + r);

package/src/card-container.tsx

@@ -407,7 +407,7 @@ const compactCardContainerClassName = css`
 type CompactCardContainerProps = {
   title: ReactNode;
   floating?: ReactNode;
-  backgroundColors?: string[];
+  backgroundColors?: string[] | null;
 };
 
 export const CompactCardContainer = ({title, floating, backgroundColors}: CompactCardContainerProps) => {

package/src/checkbox-multi-select.tsx

@@ -1,8 +1,8 @@
-import {useTheme} from "./theme-provider";
 import {css} from "@linaria/core";
 import {FC} from "react";
 import {Checkbox} from "./checkbox";
-import {layout, space, textStyles, ThemeColors} from "./design-system";
+import {layout, space, textStyles, Theme} from "./design-system";
+import {useTheme} from "./theme-provider";
 
 const labelStyle = css`
   ${textStyles.regular}
@@ -35,7 +35,7 @@ type Option = {
 };
 
 interface CheckboxMultiSelectProps {
-  theme: ThemeColors;
+  theme: Theme;
   color?: string;
   options: Option[];
 }
@@ -55,7 +55,7 @@ export const CheckboxMultiSelect: FC<CheckboxMultiSelectProps> = ({options, colo
               checked={checked}
               onChange={onToggle}
               disabled={disabled}
-              color={optionColor || color || (theme && theme.primary)}
+              color={optionColor || color || theme.colors.colorAccent}
             />
             <div className={labelStyle}>{label}</div>
           </label>

package/src/checkbox.tsx

@@ -12,7 +12,7 @@ import {
   useEffect,
   useRef,
 } from "react";
-import {alpha, getDarkenColor, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
+import {alpha, getDarkenColor, layout, space, textStyles, Theme, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
 import {mobileRootSelector} from "./mobile-styles";
 
@@ -33,7 +33,9 @@ const backgroundStyle = css`
   width: ${layout.checkboxSize}px;
   height: ${layout.checkboxSize}px;
   border-radius: ${space.s3}px;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
   box-shadow: 0 0 0 1.5px ${borderColorVar};
   background-color: ${themeVars.panelBg};
 
@@ -81,16 +83,24 @@ const checkboxRootStyle = css`
 
   &:hover input[type="checkbox"]:checked:focus:not(:disabled) + .${backgroundStyle} {
     background-color: ${darkenColorVar};
-    box-shadow: 0 0 0 1.5px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+    box-shadow:
+      0 0 0 1.5px ${darkenColorVar},
+      0 0 0 4px ${focusColorVar};
     ${mobileRootSelector} & {
-      box-shadow: 0 0 0 1.6px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+      box-shadow:
+        0 0 0 1.6px ${darkenColorVar},
+        0 0 0 4px ${focusColorVar};
     }
   }
 
   & input[type="checkbox"]:focus + .${backgroundStyle} {
-    box-shadow: 0 0 0 1.5px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+    box-shadow:
+      0 0 0 1.5px ${checkboxColorVar},
+      0 0 0 4px ${focusColorVar};
     ${mobileRootSelector} & {
-      box-shadow: 0 0 0 1.6px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+      box-shadow:
+        0 0 0 1.6px ${checkboxColorVar},
+        0 0 0 4px ${focusColorVar};
     }
   }
 
@@ -125,7 +135,9 @@ const checkmarkStyle = css`
   top: 50%;
   transform: translate(-50%, -50%) scale(0);
   opacity: 0;
-  transition: transform 0.2s, opacity 0.2s;
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
   pointer-events: none;
   color: ${themeVars.whiteColor};
   width: ${layout.checkboxSize}px;
@@ -144,7 +156,7 @@ const checkmarkStyle = css`
 
 type CheckboxComponentProps = ComponentProps<"input"> & {
   color?: string;
-  theme: ThemeColors;
+  theme: Theme;
 };
 
 const CheckboxComponent = memo(
@@ -153,7 +165,7 @@ const CheckboxComponent = memo(
 
     const indeterminate = checked === null;
     const defaultIndeterminate = defaultChecked === null;
-    const cColor = color || theme.primaryBlue;
+    const cColor = color || theme.colors.colorAccent;
     const fColor = alpha(cColor, 0.25);
     const hColor = alpha(cColor, 0.1);
     const dColor = getDarkenColor(cColor);

package/src/color-filter.test.ts

@@ -0,0 +1,155 @@
+import {cssFromFilter, makeColorFilter} from "./color-filter";
+import {cardTypeColors} from "./design-system/colors";
+
+describe("makeColorFilter alpha preservation", () => {
+  const input = "rgba(255, 0, 0, 0.5)";
+  const expectAlpha = (filter: ReturnType<typeof makeColorFilter>) => {
+    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("oklchC", () => {
+    expectAlpha(makeColorFilter({oklchC: 0.8}));
+  });
+
+  it("hueShift", () => {
+    expectAlpha(makeColorFilter({hueShift: {targetHue: 120, amount: 0.5}}));
+  });
+
+  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},
+      })
+    );
+  });
+});
+
+describe("makeColorFilter identity", () => {
+  it("returns identity when spec is undefined", () => {
+    const filter = makeColorFilter(undefined);
+    expect(filter("#ff0000")).toBe("#ff0000");
+    expect(filter("rgb(0, 128, 255)")).toBe("rgb(0, 128, 255)");
+  });
+});
+
+describe("makeColorFilter null/empty color", () => {
+  const filter = makeColorFilter({sepia: 0.3, oklchL: 0.97});
+
+  it("does not throw on null color", () => {
+    expect(filter(null as unknown as string)).toBeNull();
+  });
+
+  it("does not throw on undefined color", () => {
+    expect(filter(undefined as unknown as string)).toBeUndefined();
+  });
+
+  it("returns empty string for empty string", () => {
+    expect(filter("")).toBe("");
+  });
+});
+
+describe("makeColorFilter warm deneutralize (sepia + oklchL)", () => {
+  const warmFilter = makeColorFilter({sepia: 0.3, 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)",
+      }
+    `);
+  });
+
+  it("is a no-op for unparseable values (CSS vars)", () => {
+    expect(warmFilter("var(--some-color)")).toBe("var(--some-color)");
+  });
+
+  it("preserves pure black and white approximately", () => {
+    const black = warmFilter("#000000");
+    const white = warmFilter("#ffffff");
+    expect(black).toMatchInlineSnapshot(`"rgb(0, 0, 0)"`);
+    expect(white).toMatchInlineSnapshot(`"rgb(255, 255, 255)"`);
+  });
+});
+
+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 first = filter("#D40915");
+    filter(first);
+
+    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)");
+  });
+});

package/src/color-filter.ts

@@ -0,0 +1,156 @@
+import {
+  filterBrightness,
+  filterContrast,
+  filterGrayscale,
+  filterHueRotate,
+  filterInvert,
+  filterSaturate,
+  filterSepia,
+  Rgb,
+} from "culori";
+import {cssFromColor, oklchFrom, rgbFrom} from "./color-utils";
+import {shiftHueTowards} from "./palette-generator";
+import memoize from "lodash/memoize";
+
+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;
+};
+
+const MODE = "rgb" as const;
+type T = Rgb;
+const from = rgbFrom;
+
+export function cssFromFilter(spec?: ColorFilterSpec): string | undefined {
+  if (!spec) {
+    return undefined;
+  }
+  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 (unsupported.length > 0) {
+      // oxlint-disable-next-line no-console
+      console.warn(
+        `[cssFilterFromSpec] ColorFilterSpec contains fields without CSS filter equivalents: ${unsupported.join(", ")}. ` +
+          `The color picker CSS filter will not match the JS transform exactly.`
+      );
+    }
+  }
+  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})`);
+  }
+  return parts.length > 0 ? parts.join(" ") : undefined;
+}
+
+type ColorFilter = (color: string, format?: (color: T) => 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;
+
+  return memoize(
+    (color: string, format: (color: T) => 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.`
+        );
+      }
+      const parsed = from(color);
+      if (!parsed) {
+        return color;
+      }
+      let t: T = parsed;
+      if (spec.hueShift || spec.oklchL !== undefined || spec.oklchC !== undefined) {
+        const oklch = oklchFrom(t);
+        if (spec.hueShift) {
+          oklch.h = shiftHueTowards(oklch.h ?? 0, spec.hueShift.targetHue, spec.hueShift.amount);
+        }
+        if (spec.oklchL !== undefined) {
+          oklch.l = (oklch.l ?? 0) * spec.oklchL;
+        }
+        if (spec.oklchC !== undefined) {
+          oklch.c = (oklch.c ?? 0) * spec.oklchC;
+        }
+        t = from(oklch);
+      }
+      for (const filter of filters) {
+        t = filter(t);
+      }
+      const result = format(t);
+      __outputs?.add(result);
+      return result;
+    },
+    (color: string, format?: (color: T) => string) =>
+      format === cssFromColor || format === undefined ? color : `${color}\0${format?.name || format.toString()}`
+  );
+}

package/src/color-picker/ColorPickerOrLoader.js

@@ -6,7 +6,7 @@ const colorPickerLoaderStyle = css`
   ${{
     backgroundColor: themeVars.inversedTextColor,
     borderRadius: border.radius4,
-    boxShadow: "rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px",
+    boxShadow: themeVars.shadowPopup,
     padding: space.s12,
   }}
 `;

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

@@ -1,13 +1,14 @@
 import {css} from "@linaria/core";
+import {border, themeVars} from "../design-system";
 const sliderPointerStyle = css`
   ${{
     width: 10,
     height: 10,
-    borderRadius: "50%",
+    borderRadius: border.radiusFull,
     border: "2px solid white",
     transform: "translate(-7px, 1px)",
     backgroundColor: "transparent",
-    boxShadow: "rgba(0, 0, 0, 0.37) 0px 1px 4px 0px",
+    boxShadow: themeVars.shadow100,
   }}
 `;
 

package/src/color-picker/index.js

@@ -6,7 +6,9 @@ import {border, space, textStyles, themeVars} from "../design-system";
 import {SliderPointer} from "./SliderPointer";
 import {Swatch} from "./swatch";
 
-const pickerWrapperCss = css``;
+const pickerWrapperCss = css`
+  filter: ${themeVars.colorPickerCssFilter};
+`;
 
 const colorSwatchContainerCss = css`
   display: grid;
@@ -38,7 +40,7 @@ const SliderPicker = ColorWrap(
     const [isExpanded, setIsExpanded] = useState(false);
 
     const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
-    const getColorOverride = getColorOverrideFn || ((color) => color);
+    const getColorOverride = getColorOverrideFn ?? ((color) => color);
 
     return (
       <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
@@ -47,6 +49,7 @@ const SliderPicker = ColorWrap(
             {colors.map((color, idx) => (
               <Swatch
                 key={color}
+                data-testid={`color-swatch-${idx}`}
                 getHoverColor={getSwatchHoverColor}
                 onClick={() => {
                   setIsExpanded(false);
@@ -62,7 +65,7 @@ const SliderPicker = ColorWrap(
                 getHoverColor={getSwatchHoverColor}
                 onClick={() => setIsExpanded(!isExpanded)}
                 selected={isCustomSwatchSelected}
-                color={isCustomSwatchSelected ? rest.hex : undefined}
+                color={isCustomSwatchSelected ? getColorOverride(rest.hex) : undefined}
               />
             </CollapsibleTrigger>
           </div>
@@ -102,7 +105,7 @@ const SliderPicker = ColorWrap(
 export const ColorPicker = ({
   color,
   getSwatchHoverColor,
-  getColorOverrideFn = undefined,
+  getColorOverrideFn,
   colors,
   onChangeComplete,
   containerClassName = colorSwatchContainerCss,

package/src/color-picker/swatch.tsx

@@ -1,7 +1,7 @@
 import {css, CSSProperties, cx} from "@linaria/core";
 import {forwardRef} from "react";
 import {IconButton, IconButtonProps} from "../button/icon-button";
-import {themeVars} from "../design-system";
+import {border, themeVars} from "../design-system";
 
 const swatchColorVar = "--fibery-swatch-color";
 const swatchHoverColorVar = "--fibery-swatch-hover-color";
@@ -16,7 +16,7 @@ const swatchContainerCss = css`
 
 const swatchCss = css`
   position: relative;
-  border-radius: 100%;
+  border-radius: ${border.radiusFull};
   width: var(${swatchIconSizeVar});
   height: var(${swatchIconSizeVar});
   border: 1px solid ${themeVars.colorPickerSwatchBorder};
@@ -30,7 +30,7 @@ const selectedCss = css`
     display: block;
     width: calc(var(${swatchIconSizeVar}) - 4px);
     height: calc(var(${swatchIconSizeVar}) - 4px);
-    border-radius: 100%;
+    border-radius: ${border.radiusFull};
     top: 1px;
     left: 1px;
     border: 1.5px solid ${themeVars.whiteColor};
@@ -38,7 +38,8 @@ const selectedCss = css`
 `;
 
 const customCss = css`
-  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, transparent 100%),
+  background:
+    radial-gradient(50% 50% at 50% 50%, #ffffff 0%, transparent 100%),
     conic-gradient(
         from 0deg at 50% 50%,
         #ff0000 0deg,