@fibery/ui-kit 2.0.1 → 2.1.1

package/src/thematic-cvd.tsx

@@ -0,0 +1,73 @@
+import {useState} from "react";
+import {useThematicState} from "./thematic-state";
+import {sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
+import {Slider} from "./thematic-controls";
+import {cvdChannels} from "./color-filter";
+
+const types = [null, ...cvdChannels] as const;
+
+const activeKey = (dn: ReturnType<typeof useThematicState>["deneutralizeSpec"]) => {
+  for (const {key} of cvdChannels) {
+    if (dn?.[key]) {
+      return key;
+    }
+  }
+  return null;
+};
+
+export function CvdSection({state}: {state: ReturnType<typeof useThematicState>}) {
+  const dn = state.deneutralizeSpec;
+  const current = activeKey(dn);
+  const currentChannel = current ? cvdChannels.find((c) => c.key === current) : null;
+  const liveSeverity = current ? (dn?.[current] ?? 0) : 0;
+  const [savedAmount, setSavedAmount] = useState(0.8);
+
+  const amount = current ? liveSeverity : savedAmount;
+
+  if (liveSeverity > 0 && liveSeverity !== savedAmount) {
+    setSavedAmount(liveSeverity);
+  }
+
+  const onCycle = () => {
+    const currentIdx = current ? types.findIndex((t) => t && t.key === current) : 0;
+    const next = types[(currentIdx + 1) % types.length];
+
+    const update: Record<string, number> = {};
+    for (const {key} of cvdChannels) {
+      update[key] = 0;
+    }
+    if (next) {
+      update[next.key] = amount;
+    }
+    state.updateFilter(update);
+  };
+
+  return (
+    <>
+      <div className={sectionSeparatorCss} />
+      <div className={sectionLabelCss} style={{fontWeight: 700, cursor: "pointer"}} onClick={onCycle}>
+        cvd: {currentChannel?.label ?? "none"}
+      </div>
+      <Slider
+        label="amount"
+        value={amount}
+        min={0}
+        max={1}
+        step={0.05}
+        onChange={(v) => {
+          setSavedAmount(v);
+          if (current) {
+            state.updateFilter({[current]: v});
+          }
+        }}
+        onLabelClick={() => {
+          const next = amount > 0 ? 0 : 1;
+          setSavedAmount(next);
+          if (current) {
+            state.updateFilter({[current]: next});
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/thematic-highlights.tsx

@@ -0,0 +1,49 @@
+import {useThematicState} from "./thematic-state";
+import {sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
+import {Slider} from "./thematic-controls";
+
+export function HighlightSection({state}: {state: ReturnType<typeof useThematicState>}) {
+  const side = state.showDark ? 1 : 0;
+  const h = state.palette.highlight;
+
+  const update = ({bgLc, bgC, fgC, fgLc}: {bgLc?: number; bgC?: number; fgC?: number; fgLc?: number}) => {
+    const newBg = [...h.bg] as typeof h.bg;
+    const newFg = [...h.fg] as typeof h.fg;
+    if (bgLc !== undefined) {
+      newBg[side] = {...newBg[side], Lc: bgLc};
+    }
+    if (bgC !== undefined) {
+      newBg[side] = {...newBg[side], c: bgC};
+    }
+    if (fgC !== undefined) {
+      newFg[side] = {...newFg[side], c: fgC};
+    }
+    if (fgLc !== undefined) {
+      newFg[side] = {...newFg[side], Lc: fgLc};
+    }
+    state.updateHighlight({...h, bg: newBg, fg: newFg});
+  };
+  return (
+    <>
+      <div className={sectionSeparatorCss} />
+      <div className={sectionLabelCss} style={{fontWeight: 700}}>
+        highlight ({state.showDark ? "dark" : "light"})
+      </div>
+      <Slider
+        label="bg Lc"
+        value={h.bg[side].Lc}
+        min={0}
+        max={30}
+        step={0.01}
+        onChange={(bgLc) => {
+          // oxlint-disable-next-line no-console
+          console.log(`[slider] bgLc=${bgLc} t=${performance.now().toFixed(0)}`);
+          update({bgLc});
+        }}
+      />
+      <Slider label="bg Ch" value={h.bg[side].c} min={0} max={0.4} step={0.001} onChange={(bgC) => update({bgC})} />
+      <Slider label="fg Lc" value={h.fg[side].Lc} min={0} max={90} step={0.01} onChange={(fgLc) => update({fgLc})} />
+      <Slider label="fg Ch" value={h.fg[side].c} min={0} max={0.4} step={0.001} onChange={(fgC) => update({fgC})} />
+    </>
+  );
+}

package/src/thematic-scales.tsx

@@ -1,8 +1,6 @@
 import {css} from "@linaria/core";
-import {type ColorScale} from "./palette-generator";
-import {toOKLCH, toRGB} from "./color-utils";
 import {space, themeVars} from "./design-system";
-import {SwatchWithPicker} from "./thematic-color-picker";
+import {type InspectChannel, SwatchWithPicker, miniSwatchCss, swatchCss, tinySwatchCss} from "./thematic-color-picker";
 
 export const scaleCss = css`
   display: flex;
@@ -10,10 +8,7 @@ export const scaleCss = css`
   margin: ${space.s2}px 0;
 `;
 
-export const scaleRowContainerCss = css`
-  display: flex;
-  align-items: center;
-`;
+export const SPACER = "\x00" as unknown as null;
 
 export const sectionLabelCss = css`
   font-size: 10px;
@@ -27,96 +22,83 @@ export const sectionSeparatorCss = css`
   margin: ${space.s8}px 0;
 `;
 
-function formatTooltip(name: string, color: string, index: number): string {
-  return `${name}[${index}]\n${toRGB(color)}\n${toOKLCH(color)}`;
+function scaleName(name: string, index: number): string {
+  return `${name}[${index}]`;
 }
 
-export function ScaleRow({
-  name,
-  scale,
-  onColorChange,
-  onHighlight,
-  onHighlightEnd,
-  isAltPressed,
-}: {
+const emptySwatchCss = css`
+  background: repeating-conic-gradient(rgba(128, 128, 128, 0.15) 0% 25%, transparent 0% 50%) 0 0 / 6px 6px;
+`;
+
+const columnCss = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+const gridCss = css`
+  display: flex;
+  margin: ${space.s4}px 0;
+  overflow-x: auto;
+`;
+
+export type ScaleEntry = {
   name: string;
-  scale: ColorScale;
+  scale: readonly (string | null)[];
   onColorChange?: (index: number, color: string) => void;
-  onHighlight?: (index: number) => void;
-  onHighlightEnd?: () => void;
+  onHover?: (color: string, name: string) => void;
+  onHoverEnd?: () => void;
+  extra?: {color: string; name: string; onChange?: (color: string) => void};
+  splitBg?: boolean;
+  altColors?: (string | null)[];
+  mini?: boolean;
+  tiny?: boolean;
+};
+
+export function ScaleGrid({
+  scales,
+  inspectChannel,
+}: {
+  scales: ScaleEntry[];
   isAltPressed?: boolean;
+  inspectChannel?: InspectChannel;
 }) {
   return (
-    <div className={scaleRowContainerCss}>
-      <div className={scaleCss}>
-        {scale.map((color, i) =>
-          color === null ? null : (
+    <div className={gridCss}>
+      {scales.map(({name, scale, onColorChange, onHover, onHoverEnd, extra, splitBg, altColors, mini, tiny}) => (
+        <div key={name} className={columnCss}>
+          {scale.map((color, i) =>
+            color === null ? null : (color as unknown) === SPACER ? (
+              <div key={i} className={`${tiny ? tinySwatchCss : mini ? miniSwatchCss : swatchCss} ${emptySwatchCss}`} />
+            ) : (
+              <SwatchWithPicker
+                key={i}
+                color={color}
+                name={scaleName(name, i)}
+                onChange={onColorChange ? (c) => onColorChange(i, c) : undefined}
+                onHover={onHover}
+                onHoverEnd={onHoverEnd}
+                splitBg={splitBg}
+                altColor={altColors?.[i] ?? undefined}
+                mini={mini}
+                tiny={tiny}
+                inspectChannel={inspectChannel}
+              />
+            )
+          )}
+          {extra && (
             <SwatchWithPicker
-              key={i}
-              color={color}
-              title={formatTooltip(name, color, i)}
-              onChange={onColorChange ? (c) => onColorChange(i, c) : undefined}
-              onHighlight={onHighlight ? () => onHighlight(i) : undefined}
-              onHighlightEnd={onHighlightEnd}
-              isAltPressed={isAltPressed}
+              color={extra.color}
+              name={extra.name}
+              onChange={extra.onChange}
+              onHover={onHover}
+              onHoverEnd={onHoverEnd}
+              mini={mini}
+              tiny={tiny}
+              inspectChannel={inspectChannel}
             />
-          )
-        )}
-      </div>
+          )}
+        </div>
+      ))}
     </div>
   );
 }
-
-export function ScalePair({
-  name,
-  label,
-  light,
-  dark,
-  showLight = true,
-  showDark = true,
-  onLightColorChange,
-  onDarkColorChange,
-  onLightHighlight,
-  onDarkHighlight,
-  onHighlightEnd,
-  isAltPressed,
-}: {
-  name: string;
-  label?: string;
-  light: ColorScale;
-  dark: ColorScale;
-  showLight?: boolean;
-  showDark?: boolean;
-  onLightColorChange?: (index: number, color: string) => void;
-  onDarkColorChange?: (index: number, color: string) => void;
-  onLightHighlight?: (index: number) => void;
-  onDarkHighlight?: (index: number) => void;
-  onHighlightEnd?: () => void;
-  isAltPressed?: boolean;
-}) {
-  return (
-    <>
-      {label && <div className={sectionLabelCss}>{label}</div>}
-      {showLight && (
-        <ScaleRow
-          name={name}
-          scale={light}
-          onColorChange={onLightColorChange}
-          onHighlight={onLightHighlight}
-          onHighlightEnd={onHighlightEnd}
-          isAltPressed={isAltPressed}
-        />
-      )}
-      {showDark && (
-        <ScaleRow
-          name={`${name}Dark`}
-          scale={dark}
-          onColorChange={onDarkColorChange}
-          onHighlight={onDarkHighlight}
-          onHighlightEnd={onHighlightEnd}
-          isAltPressed={isAltPressed}
-        />
-      )}
-    </>
-  );
-}

package/src/thematic-state.ts

@@ -1,19 +1,25 @@
 import {useCallback, useEffect, useMemo, useState} from "react";
 import {useThematic, useThemeMode} from "./theme-provider";
 import {
-  type ColorScale,
   DEFAULT_DARK_CURVES,
   DEFAULT_LIGHT_CURVES,
   generateColorScale,
   makeThematicPalette,
   type ScaleCurves,
   type ThematicPrefs,
-  type ThemePalette,
 } from "./palette-generator";
 import {getThemePreference, setThemePreference, type ThemePreference} from "./theme-settings";
+import {type ColorFilterSpec} from "./color-filter";
+import {oklchFrom} from "./color-utils";
 import {StaticPalettes} from "./static-palettes";
-import {defaultPrefs, HIGHLIGHT_COLOR, nextThemePref} from "./thematic-constants";
+import {defaultPrefs, nextThemePref} from "./thematic-constants";
 import {useToast} from "./toast/toast-provider";
+import type {HighlightDefs, ModeDef, ThemePalette} from "./design-system/types";
+import {common} from "./palettes/common";
+
+export type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize" | "highlight">;
+
+const highlight = common.highlight;
 
 interface StoredState {
   prefs: ThematicPrefs | null;
@@ -69,22 +75,18 @@ export function useThematicState() {
   const toast = useToast();
 
   const [themePref, setThemePref] = useState<ThemePreference>(getThemePreference);
-  const isAuto = themePref === "auto";
   const isLightMode = themeMode === "light" || themeMode === "light2";
-  const showLight = isAuto || isLightMode;
-  const showDark = isAuto || !isLightMode;
+  const showLight = isLightMode;
+  const showDark = !isLightMode;
 
-  const [collapsed, setCollapsedRaw] = useState(() => localStorage.getItem("thematic-collapsed") !== "false");
-  const setCollapsed = useCallback((v: boolean) => {
-    setCollapsedRaw(v);
-    localStorage.setItem("thematic-collapsed", String(v));
+  const [pinned, setPinnedRaw] = useState(() => localStorage.getItem("thematic-pinned") === "true");
+  const setPinned = useCallback((v: boolean) => {
+    setPinnedRaw(v);
+    localStorage.setItem("thematic-pinned", String(v));
   }, []);
   const [visible, setVisibleRaw] = useState(true);
   const setVisible = useCallback((v: boolean) => {
     setVisibleRaw(v);
-    if (!v) {
-      localStorage.setItem("thematic-collapsed", "true");
-    }
   }, []);
   const [isAltPressed, setIsAltPressed] = useState(false);
   const [prefs, setPrefs] = useState<ThematicPrefs | null>(stored?.prefs ?? null);
@@ -94,7 +96,7 @@ export function useThematicState() {
   const [baseCurvesDark, setBaseCurvesDark] = useState<ScaleCurves>(DEFAULT_DARK_CURVES);
   const [accentCurvesLight, setAccentCurvesLight] = useState<ScaleCurves>(DEFAULT_LIGHT_CURVES);
   const [accentCurvesDark, setAccentCurvesDark] = useState<ScaleCurves>(DEFAULT_DARK_CURVES);
-  const [highlight, setHighlight] = useState<{scale: keyof ThemePalette; index: number} | null>(null);
+  const [hoveredInfo, setHoveredInfo] = useState<{color: string; name: string} | null>(null);
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => e.altKey && setIsAltPressed(true);
@@ -107,7 +109,17 @@ export function useThematicState() {
     };
   }, []);
 
-  const prefsPresent = prefs ?? defaultPrefs;
+  const prefsPresent = useMemo(() => {
+    if (prefs) {
+      return prefs;
+    }
+    const ref = oklchFrom(providerPalette.base[9]);
+    return {
+      ...defaultPrefs,
+      baseHue: Math.round(ref?.h ?? 0),
+      baseChroma: Math.round((ref?.c ?? 0) * 1000) / 1000,
+    };
+  }, [prefs, providerPalette]);
   const staticPalette = staticPaletteIndex !== null ? StaticPalettes[staticPaletteIndex] : null;
 
   const baseCurvesLightChanged = baseCurvesLight !== DEFAULT_LIGHT_CURVES;
@@ -129,7 +141,6 @@ export function useThematicState() {
           chroma: prefsPresent.baseChroma ?? 0,
           mode: "light",
           curves: {lightness: baseCurvesLight.lightness, chroma: baseCurvesLight.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -141,7 +152,6 @@ export function useThematicState() {
           chroma: prefsPresent.baseChroma ?? 0,
           mode: "dark",
           curves: {lightness: baseCurvesDark.lightness, chroma: baseCurvesDark.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -153,7 +163,6 @@ export function useThematicState() {
           chroma: prefsPresent.accentChroma,
           mode: "light",
           curves: {lightness: accentCurvesLight.lightness, chroma: accentCurvesLight.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -165,15 +174,16 @@ export function useThematicState() {
           chroma: prefsPresent.accentChroma,
           mode: "dark",
           curves: {lightness: accentCurvesDark.lightness, chroma: accentCurvesDark.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
     if (customPalette) {
       const customKey = Object.entries(customPalette)
-        .map(([k, v]) => `${k}:${Array.isArray(v) ? v.join(",") : v}`)
+        .map(([k, v]) => `${k}:${JSON.stringify(v)}`)
         .join("|");
-      result = {...result, key: `${result.key}-custom-${customKey}`};
+      const idx = result.key.indexOf("-custom-");
+      const stableKey = idx >= 0 ? result.key.slice(0, idx) : result.key;
+      result = {...result, key: `${stableKey}-custom-${customKey}`};
     }
     return result;
   }, [
@@ -193,22 +203,14 @@ export function useThematicState() {
   ]);
 
   useEffect(() => {
-    if (highlight) {
-      const scale = [...palette[highlight.scale]] as unknown as string[];
-      scale[highlight.index] = HIGHLIGHT_COLOR;
-      setPalette({
-        ...palette,
-        key: `${palette.key}-highlight-${highlight.scale}-${highlight.index}`,
-        [highlight.scale]: scale as unknown as ColorScale,
-      });
-    } else if (prefs !== null || staticPalette !== null || customPalette !== null || anyCurvesChanged) {
+    if (prefs !== null || staticPalette !== null || customPalette !== null || anyCurvesChanged) {
       if (palette.key !== providerPalette.key) {
         setPalette(palette);
       }
     } else {
       setPalette(null);
     }
-  }, [palette, providerPalette, highlight, prefs, staticPalette, customPalette, anyCurvesChanged, setPalette]);
+  }, [palette, providerPalette, prefs, staticPalette, customPalette, anyCurvesChanged, setPalette]);
 
   const update = (partial: Partial<ThematicPrefs>) => {
     setStaticPaletteIndex(null);
@@ -216,6 +218,38 @@ export function useThematicState() {
     setPrefs({...prefsPresent, ...partial});
   };
 
+  const updateHueShift = (partial: {hueShiftTargetHue?: number; hueShiftAmount?: number}) => {
+    update(partial);
+  };
+
+  const updateFilter = (partial: Partial<ColorFilterSpec>) => {
+    const sideIdx = editingDark ? 1 : 0;
+    if (prefs) {
+      const current = prefsPresent.filter ?? [{}, {}];
+      const updated: ModeDef<Partial<ColorFilterSpec>> = [...current];
+      updated[sideIdx] = {...updated[sideIdx], ...partial};
+      setPrefs({
+        ...prefsPresent,
+        filter: updated,
+      });
+    } else {
+      setCustomPalette((prev) => {
+        const current = palette.deneutralize ?? [{}, {}];
+        const updated: ModeDef<ColorFilterSpec> = [...current];
+        updated[sideIdx] = {...updated[sideIdx], ...partial};
+        return {...prev, deneutralize: updated};
+      });
+    }
+  };
+
+  const updateHighlight = (highlight: HighlightDefs) => {
+    if (prefs) {
+      setPrefs({...prefsPresent, highlight});
+    } else {
+      setCustomPalette((prev) => ({...prev, highlight}));
+    }
+  };
+
   const randomize = () => {
     setStaticPaletteIndex(null);
     setPrefs({
@@ -223,7 +257,7 @@ export function useThematicState() {
       baseChroma: Math.random() * 0.1,
       accentHue: Math.random() * 360,
       accentChroma: 0.08 + Math.random() * 0.12,
-      contrast: 0.85 + Math.random() * 0.3,
+      highlight,
     });
   };
 
@@ -255,28 +289,22 @@ export function useThematicState() {
   };
 
   const updateScaleColor = useCallback(
-    (scaleName: keyof ThemePalette, index: number, color: string) => {
+    (key: PaletteScaleKey, index: number, color: string) => {
       setCustomPalette((prev) => {
-        const currentValue = prev?.[scaleName] ?? palette[scaleName];
-        if (typeof currentValue === "string") {
-          return {...prev, [scaleName]: color};
-        }
-        const mutableScale = [...currentValue] as unknown as string[];
-        mutableScale[index] = color;
-        return {...prev, [scaleName]: mutableScale as unknown as ColorScale};
+        const colorOrScale = prev?.[key] ?? palette[key];
+        return {...prev, [key]: typeof colorOrScale === "string" ? color : colorOrScale.with(index, color)};
       });
     },
     [palette]
   );
 
-  const highlightScale = useCallback(
-    (scale: keyof ThemePalette) => (index: number) => {
-      setHighlight({scale, index});
-    },
-    []
-  );
+  const onSwatchHover = useCallback((color: string, name: string) => {
+    setHoveredInfo({color, name});
+  }, []);
 
-  const clearHighlight = useCallback(() => setHighlight(null), []);
+  const onSwatchHoverEnd = useCallback(() => {
+    setHoveredInfo(null);
+  }, []);
 
   const isModified = prefs !== null || staticPaletteIndex !== null || customPalette !== null || anyCurvesChanged;
 
@@ -284,14 +312,16 @@ export function useThematicState() {
     saveToStorage({prefs, staticPaletteIndex, customPalette});
   }, [prefs, staticPaletteIndex, customPalette]);
 
-  const editingDark = !isAuto && !isLightMode;
+  const editingDark = !isLightMode;
+  const dnSide = editingDark ? 1 : 0;
+  const deneutralizeSpec = palette.deneutralize?.[dnSide];
   const baseCurves = editingDark ? baseCurvesDark : baseCurvesLight;
   const setBaseCurves = editingDark ? setBaseCurvesDark : setBaseCurvesLight;
   const accentCurves = editingDark ? accentCurvesDark : accentCurvesLight;
   const setAccentCurves = editingDark ? setAccentCurvesDark : setAccentCurvesLight;
 
   const exportState = useCallback((): ThematicExport => {
-    const keys: (keyof Omit<ThemePalette, "key">)[] = ["white", "whiteA", "black", "blackA"];
+    const keys: (keyof Omit<ThemePalette, "key">)[] = ["white", "whiteA", "black", "blackA", "deneutralize"];
     if (showLight) {
       keys.push("base", "accent", "red", "teal", "yellow");
     }
@@ -340,30 +370,38 @@ export function useThematicState() {
 
   return {
     palette,
+    deneutralizeSpec,
+    dnSide,
+    hoveredInfo,
     isAltPressed,
-    collapsed,
-    setCollapsed,
+    pinned,
+    setPinned,
     visible,
     setVisible,
     themePref,
     isModified,
     showLight,
     showDark,
-    isAuto,
+    prefs,
     prefsPresent,
+    providerPalette,
+    customPalette,
     staticPalette,
     baseCurves,
     setBaseCurves,
     accentCurves,
     setAccentCurves,
     update,
+    updateHueShift,
+    updateFilter,
+    updateHighlight,
     randomize,
     cycleStaticPalettes,
     cycleTheme,
     reset,
     updateScaleColor,
-    highlightScale,
-    clearHighlight,
+    onSwatchHover,
+    onSwatchHoverEnd,
     exportState,
     importState,
   };