@fibery/ui-kit 2.0.0 → 2.1.0

package/src/thematic-controls.tsx

@@ -10,21 +10,83 @@ export const controlRowCss = css`
 `;
 
 export const controlLabelCss = css`
-  width: 50px;
+  width: 60px;
   color: ${themeVars.colorTextSecondary};
 `;
 
 export const controlValueCss = css`
-  width: 45px;
+  width: 35px;
   text-align: right;
   font-variant-numeric: tabular-nums;
 `;
 
 export const sliderCss = css`
   flex: 1;
-  accent-color: ${themeVars.primaryBlue};
+  accent-color: ${themeVars.colorAccent};
 `;
 
+const gradientSliderCss = css`
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 10px;
+  border-radius: 5px;
+  outline: none;
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 10px;
+    border-radius: 5px;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    margin-top: -5px;
+    border-radius: 50%;
+    background: var(--thumb-color, white);
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.3),
+      0 1px 3px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-moz-range-track {
+    height: 10px;
+    border-radius: 5px;
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--thumb-color, white);
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.3),
+      0 1px 3px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+`;
+
+export function oklchColor(hue: number, chroma: number) {
+  return `oklch(0.7 ${chroma} ${hue})`;
+}
+
+export function hueGradient(chroma: number) {
+  const c = Math.max(chroma, 0.05);
+  return `linear-gradient(in oklch longer hue to right, oklch(0.7 ${c} 0), oklch(0.7 ${c} 360))`;
+}
+
+export function chromaGradient(hue: number, maxChroma: number) {
+  const steps = 8;
+  const stops = Array.from({length: steps + 1}, (_, i) => `oklch(0.7 ${((i / steps) * maxChroma).toFixed(4)} ${hue})`);
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+
 export const clickableLabelCss = css`
   cursor: pointer;
   &:hover {
@@ -36,10 +98,14 @@ export function ArrayEditor({
   label,
   values,
   onChange,
+  onLabelHover,
+  onLabelLeave,
 }: {
   label: string;
   values: ZeroBasedScale<number>;
   onChange?: (v: ZeroBasedScale<number>) => void;
+  onLabelHover?: () => void;
+  onLabelLeave?: () => void;
 }) {
   const edit = onChange
     ? () => {
@@ -65,12 +131,29 @@ export function ArrayEditor({
       className={`${controlLabelCss} ${onChange ? clickableLabelCss : ""}`}
       onClick={edit}
       title={onChange ? "Click to edit array" : undefined}
+      onMouseEnter={onLabelHover}
+      onMouseLeave={onLabelLeave}
     >
       {label}
     </span>
   );
 }
 
+function ValueDisplay({value, format}: {value: number; format: (v: number) => string}) {
+  return <span className={controlValueCss}>{format(value)}</span>;
+}
+
+function gradientStyle(gradient?: string, color?: string): React.CSSProperties | undefined {
+  if (!gradient) {
+    return undefined;
+  }
+  const style: Record<string, string> = {background: gradient};
+  if (color) {
+    style["--thumb-color"] = color;
+  }
+  return style as React.CSSProperties;
+}
+
 export function ArraySlider({
   label,
   values,
@@ -81,6 +164,10 @@ export function ArraySlider({
   max,
   step,
   format = (v) => v.toFixed(3),
+  gradient,
+  color,
+  onLabelHover,
+  onLabelLeave,
 }: {
   label: string;
   values: ZeroBasedScale<number>;
@@ -91,20 +178,31 @@ export function ArraySlider({
   max: number;
   step: number;
   format?: (v: number) => string;
+  gradient?: string;
+  color?: string;
+  onLabelHover?: () => void;
+  onLabelLeave?: () => void;
 }) {
   return (
     <div className={controlRowCss}>
-      <ArrayEditor label={label} values={values} onChange={onValuesChange} />
+      <ArrayEditor
+        label={label}
+        values={values}
+        onChange={onValuesChange}
+        onLabelHover={onLabelHover}
+        onLabelLeave={onLabelLeave}
+      />
       <input
         type="range"
-        className={sliderCss}
+        className={gradient ? gradientSliderCss : sliderCss}
+        style={gradientStyle(gradient, color)}
         min={min}
         max={max}
         step={step}
         value={sliderValue}
         onChange={(e) => onSliderChange(parseFloat(e.target.value))}
       />
-      <span className={controlValueCss}>{format(sliderValue)}</span>
+      <ValueDisplay value={sliderValue} format={format} />
     </div>
   );
 }
@@ -117,6 +215,10 @@ export function Slider({
   step,
   format = (v) => v.toFixed(step < 1 ? 2 : 0),
   onChange,
+  gradient,
+  color,
+  onLabelHover,
+  onLabelLeave,
 }: {
   label: string;
   value: number;
@@ -125,20 +227,27 @@ export function Slider({
   step: number;
   format?: (v: number) => string;
   onChange: (v: number) => void;
+  gradient?: string;
+  color?: string;
+  onLabelHover?: () => void;
+  onLabelLeave?: () => void;
 }) {
   return (
     <div className={controlRowCss}>
-      <span className={controlLabelCss}>{label}</span>
+      <span className={controlLabelCss} onMouseEnter={onLabelHover} onMouseLeave={onLabelLeave}>
+        {label}
+      </span>
       <input
         type="range"
-        className={sliderCss}
+        className={gradient ? gradientSliderCss : sliderCss}
+        style={gradientStyle(gradient, color)}
         min={min}
         max={max}
         step={step}
         value={value}
         onChange={(e) => onChange(parseFloat(e.target.value))}
       />
-      <span className={controlValueCss}>{format(value)}</span>
+      <ValueDisplay value={value} format={format} />
     </div>
   );
 }

package/src/thematic-scales.tsx

@@ -1,8 +1,7 @@
 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} from "./thematic-color-picker";
 
 export const scaleCss = css`
   display: flex;
@@ -10,10 +9,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 +23,80 @@ 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;
+`;
+
+type ScaleEntry = {
   name: string;
   scale: ColorScale;
   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;
+};
+
+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}) => (
+        <div key={name} className={columnCss}>
+          {scale.map((color, i) =>
+            color === null ? null : (color as unknown) === SPACER ? (
+              <div key={i} className={`${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}
+                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}
+              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

@@ -11,10 +11,14 @@ import {
   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";
 
+type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize">;
+
 interface StoredState {
   prefs: ThematicPrefs | null;
   staticPaletteIndex: number | null;
@@ -69,22 +73,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 +94,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 +107,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 +139,6 @@ export function useThematicState() {
           chroma: prefsPresent.baseChroma ?? 0,
           mode: "light",
           curves: {lightness: baseCurvesLight.lightness, chroma: baseCurvesLight.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -141,7 +150,6 @@ export function useThematicState() {
           chroma: prefsPresent.baseChroma ?? 0,
           mode: "dark",
           curves: {lightness: baseCurvesDark.lightness, chroma: baseCurvesDark.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -153,7 +161,6 @@ export function useThematicState() {
           chroma: prefsPresent.accentChroma,
           mode: "light",
           curves: {lightness: accentCurvesLight.lightness, chroma: accentCurvesLight.chroma},
-          contrast: prefsPresent.contrast,
         }),
       };
     }
@@ -165,13 +172,12 @@ 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}:${Array.isArray(v) ? v.join(",") : JSON.stringify(v)}`)
         .join("|");
       result = {...result, key: `${result.key}-custom-${customKey}`};
     }
@@ -193,22 +199,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 +214,22 @@ export function useThematicState() {
     setPrefs({...prefsPresent, ...partial});
   };
 
+  const updateHueShift = (partial: {hueShiftTargetHue?: number; hueShiftAmount?: number}) => {
+    update(partial);
+  };
+
+  const updateFilter = (partial: Partial<ColorFilterSpec>) => {
+    if (prefs) {
+      const current = prefsPresent.filter ?? {};
+      setPrefs({
+        ...prefsPresent,
+        filter: {...current, ...partial},
+      });
+    } else {
+      setCustomPalette((prev) => ({...prev, deneutralize: {...palette.deneutralize, ...partial}}));
+    }
+  };
+
   const randomize = () => {
     setStaticPaletteIndex(null);
     setPrefs({
@@ -223,7 +237,6 @@ 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,
     });
   };
 
@@ -255,7 +268,7 @@ export function useThematicState() {
   };
 
   const updateScaleColor = useCallback(
-    (scaleName: keyof ThemePalette, index: number, color: string) => {
+    (scaleName: PaletteScaleKey, index: number, color: string) => {
       setCustomPalette((prev) => {
         const currentValue = prev?.[scaleName] ?? palette[scaleName];
         if (typeof currentValue === "string") {
@@ -269,14 +282,13 @@ export function useThematicState() {
     [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 +296,14 @@ export function useThematicState() {
     saveToStorage({prefs, staticPaletteIndex, customPalette});
   }, [prefs, staticPaletteIndex, customPalette]);
 
-  const editingDark = !isAuto && !isLightMode;
+  const editingDark = !isLightMode;
   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");
     }
@@ -334,36 +346,41 @@ export function useThematicState() {
           ...prev,
           ...scales,
           key: `import-${Date.now()}`,
-        } as Partial<ThemePalette>)
+        }) as Partial<ThemePalette>
     );
   }, []);
 
   return {
     palette,
+    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,
     randomize,
     cycleStaticPalettes,
     cycleTheme,
     reset,
     updateScaleColor,
-    highlightScale,
-    clearHighlight,
+    onSwatchHover,
+    onSwatchHoverEnd,
     exportState,
     importState,
   };