@fibery/ui-kit 1.40.3 → 1.41.0

package/src/thematic-controls.tsx

@@ -0,0 +1,144 @@
+import {css} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+import type {ZeroBasedScale} from "./palette-generator";
+
+export const controlRowCss = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s8}px;
+  margin: ${space.s4}px 0;
+`;
+
+export const controlLabelCss = css`
+  width: 50px;
+  color: ${themeVars.colorTextSecondary};
+`;
+
+export const controlValueCss = css`
+  width: 45px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+`;
+
+export const sliderCss = css`
+  flex: 1;
+  accent-color: ${themeVars.primaryBlue};
+`;
+
+export const clickableLabelCss = css`
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export function ArrayEditor({
+  label,
+  values,
+  onChange,
+}: {
+  label: string;
+  values: ZeroBasedScale<number>;
+  onChange?: (v: ZeroBasedScale<number>) => void;
+}) {
+  const edit = onChange
+    ? () => {
+        const json = JSON.stringify(values);
+        const result = prompt(`${label} (12 values):`, json);
+        if (result && result !== json) {
+          try {
+            const parsed = JSON.parse(result);
+            if (Array.isArray(parsed) && parsed.length === 12) {
+              onChange(parsed as unknown as ZeroBasedScale<number>);
+            } else {
+              alert("Need array with 12 values");
+            }
+          } catch {
+            alert("Invalid JSON");
+          }
+        }
+      }
+    : undefined;
+
+  return (
+    <span
+      className={`${controlLabelCss} ${onChange ? clickableLabelCss : ""}`}
+      onClick={edit}
+      title={onChange ? "Click to edit array" : undefined}
+    >
+      {label}
+    </span>
+  );
+}
+
+export function ArraySlider({
+  label,
+  values,
+  onValuesChange,
+  sliderValue,
+  onSliderChange,
+  min,
+  max,
+  step,
+  format = (v) => v.toFixed(3),
+}: {
+  label: string;
+  values: ZeroBasedScale<number>;
+  onValuesChange?: (v: ZeroBasedScale<number>) => void;
+  sliderValue: number;
+  onSliderChange: (v: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  format?: (v: number) => string;
+}) {
+  return (
+    <div className={controlRowCss}>
+      <ArrayEditor label={label} values={values} onChange={onValuesChange} />
+      <input
+        type="range"
+        className={sliderCss}
+        min={min}
+        max={max}
+        step={step}
+        value={sliderValue}
+        onChange={(e) => onSliderChange(parseFloat(e.target.value))}
+      />
+      <span className={controlValueCss}>{format(sliderValue)}</span>
+    </div>
+  );
+}
+
+export function Slider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  format = (v) => v.toFixed(step < 1 ? 2 : 0),
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  format?: (v: number) => string;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div className={controlRowCss}>
+      <span className={controlLabelCss}>{label}</span>
+      <input
+        type="range"
+        className={sliderCss}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(parseFloat(e.target.value))}
+      />
+      <span className={controlValueCss}>{format(value)}</span>
+    </div>
+  );
+}

package/src/thematic-scales.tsx

@@ -0,0 +1,122 @@
+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";
+
+export const scaleCss = css`
+  display: flex;
+  gap: 2px;
+  margin: ${space.s2}px 0;
+`;
+
+export const scaleRowContainerCss = css`
+  display: flex;
+  align-items: center;
+`;
+
+export const sectionLabelCss = css`
+  font-size: 10px;
+  color: ${themeVars.colorTextSecondary};
+  margin-bottom: 2px;
+`;
+
+export const sectionSeparatorCss = css`
+  height: 1px;
+  background: ${themeVars.separatorColor};
+  margin: ${space.s8}px 0;
+`;
+
+function formatTooltip(name: string, color: string, index: number): string {
+  return `${name}[${index}]\n${toRGB(color)}\n${toOKLCH(color)}`;
+}
+
+export function ScaleRow({
+  name,
+  scale,
+  onColorChange,
+  onHighlight,
+  onHighlightEnd,
+  isAltPressed,
+}: {
+  name: string;
+  scale: ColorScale;
+  onColorChange?: (index: number, color: string) => void;
+  onHighlight?: (index: number) => void;
+  onHighlightEnd?: () => void;
+  isAltPressed?: boolean;
+}) {
+  return (
+    <div className={scaleRowContainerCss}>
+      <div className={scaleCss}>
+        {scale.map((color, i) =>
+          color === null ? null : (
+            <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}
+            />
+          )
+        )}
+      </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

@@ -0,0 +1,370 @@
+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 {StaticPalettes} from "./static-palettes";
+import {defaultPrefs, HIGHLIGHT_COLOR, nextThemePref} from "./thematic-constants";
+import {useToast} from "./toast/toast-provider";
+
+interface StoredState {
+  prefs: ThematicPrefs | null;
+  staticPaletteIndex: number | null;
+  customPalette: Partial<ThemePalette> | null;
+}
+
+export type ThematicExport = Partial<Omit<ThemePalette, "key">> & {
+  meta?: {
+    prefs: ThematicPrefs | null;
+  };
+};
+
+const STORAGE_KEY = "thematic-palette";
+
+function isValidPalette(p: Partial<ThemePalette> | null): boolean {
+  if (!p) {
+    return true;
+  }
+  return Array.isArray(p.whiteA) && Array.isArray(p.blackA);
+}
+
+function loadFromStorage(): StoredState | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as StoredState;
+    if (!isValidPalette(parsed.customPalette)) {
+      localStorage.removeItem(STORAGE_KEY);
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function saveToStorage(data: StoredState) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  } catch {
+    // ignore
+  }
+}
+
+const stored = loadFromStorage();
+
+export function useThematicState() {
+  const {palette: providerPalette, setPalette} = useThematic();
+  const themeMode = useThemeMode();
+  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 [collapsed, setCollapsedRaw] = useState(() => localStorage.getItem("thematic-collapsed") !== "false");
+  const setCollapsed = useCallback((v: boolean) => {
+    setCollapsedRaw(v);
+    localStorage.setItem("thematic-collapsed", 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);
+  const [staticPaletteIndex, setStaticPaletteIndex] = useState<number | null>(stored?.staticPaletteIndex ?? null);
+  const [customPalette, setCustomPalette] = useState<Partial<ThemePalette> | null>(stored?.customPalette ?? null);
+  const [baseCurvesLight, setBaseCurvesLight] = useState<ScaleCurves>(DEFAULT_LIGHT_CURVES);
+  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);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => e.altKey && setIsAltPressed(true);
+    const onKeyUp = (e: KeyboardEvent) => !e.altKey && setIsAltPressed(false);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+
+  const prefsPresent = prefs ?? defaultPrefs;
+  const staticPalette = staticPaletteIndex !== null ? StaticPalettes[staticPaletteIndex] : null;
+
+  const baseCurvesLightChanged = baseCurvesLight !== DEFAULT_LIGHT_CURVES;
+  const baseCurvesDarkChanged = baseCurvesDark !== DEFAULT_DARK_CURVES;
+  const accentCurvesLightChanged = accentCurvesLight !== DEFAULT_LIGHT_CURVES;
+  const accentCurvesDarkChanged = accentCurvesDark !== DEFAULT_DARK_CURVES;
+  const anyCurvesChanged =
+    baseCurvesLightChanged || baseCurvesDarkChanged || accentCurvesLightChanged || accentCurvesDarkChanged;
+
+  const palette = useMemo(() => {
+    const base = staticPalette ? staticPalette.make() : prefs ? makeThematicPalette(prefs) : providerPalette;
+    let result = customPalette ? {...base, ...customPalette} : base;
+
+    if (baseCurvesLightChanged) {
+      result = {
+        ...result,
+        base: generateColorScale({
+          hue: prefsPresent.baseHue ?? 0,
+          chroma: prefsPresent.baseChroma ?? 0,
+          mode: "light",
+          curves: {lightness: baseCurvesLight.lightness, chroma: baseCurvesLight.chroma},
+          contrast: prefsPresent.contrast,
+        }),
+      };
+    }
+    if (baseCurvesDarkChanged) {
+      result = {
+        ...result,
+        baseDark: generateColorScale({
+          hue: prefsPresent.baseHue ?? 0,
+          chroma: prefsPresent.baseChroma ?? 0,
+          mode: "dark",
+          curves: {lightness: baseCurvesDark.lightness, chroma: baseCurvesDark.chroma},
+          contrast: prefsPresent.contrast,
+        }),
+      };
+    }
+    if (accentCurvesLightChanged) {
+      result = {
+        ...result,
+        accent: generateColorScale({
+          hue: prefsPresent.accentHue,
+          chroma: prefsPresent.accentChroma,
+          mode: "light",
+          curves: {lightness: accentCurvesLight.lightness, chroma: accentCurvesLight.chroma},
+          contrast: prefsPresent.contrast,
+        }),
+      };
+    }
+    if (accentCurvesDarkChanged) {
+      result = {
+        ...result,
+        accentDark: generateColorScale({
+          hue: prefsPresent.accentHue,
+          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}`)
+        .join("|");
+      result = {...result, key: `${result.key}-custom-${customKey}`};
+    }
+    return result;
+  }, [
+    prefs,
+    prefsPresent,
+    staticPalette,
+    customPalette,
+    providerPalette,
+    baseCurvesLight,
+    baseCurvesDark,
+    accentCurvesLight,
+    accentCurvesDark,
+    baseCurvesLightChanged,
+    baseCurvesDarkChanged,
+    accentCurvesLightChanged,
+    accentCurvesDarkChanged,
+  ]);
+
+  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 (palette.key !== providerPalette.key) {
+        setPalette(palette);
+      }
+    } else {
+      setPalette(null);
+    }
+  }, [palette, providerPalette, highlight, prefs, staticPalette, customPalette, anyCurvesChanged, setPalette]);
+
+  const update = (partial: Partial<ThematicPrefs>) => {
+    setStaticPaletteIndex(null);
+    setCustomPalette(null);
+    setPrefs({...prefsPresent, ...partial});
+  };
+
+  const randomize = () => {
+    setStaticPaletteIndex(null);
+    setPrefs({
+      baseHue: Math.random() * 360,
+      baseChroma: Math.random() * 0.1,
+      accentHue: Math.random() * 360,
+      accentChroma: 0.08 + Math.random() * 0.12,
+      contrast: 0.85 + Math.random() * 0.3,
+    });
+  };
+
+  const cycleStaticPalettes = () => {
+    setPrefs(null);
+    setStaticPaletteIndex((prev) => {
+      const next = prev === null ? 0 : (prev + 1) % StaticPalettes.length;
+      const key = StaticPalettes[next].make().key;
+      toast.info({title: key});
+      return next;
+    });
+  };
+
+  const cycleTheme = () => {
+    const next = isAltPressed ? "auto" : nextThemePref[themePref];
+    setThemePreference(next);
+    setThemePref(next);
+  };
+
+  const reset = () => {
+    setStaticPaletteIndex(null);
+    setPrefs(null);
+    setCustomPalette(null);
+    setBaseCurvesLight(DEFAULT_LIGHT_CURVES);
+    setBaseCurvesDark(DEFAULT_DARK_CURVES);
+    setAccentCurvesLight(DEFAULT_LIGHT_CURVES);
+    setAccentCurvesDark(DEFAULT_DARK_CURVES);
+    saveToStorage({prefs: null, staticPaletteIndex: null, customPalette: null});
+  };
+
+  const updateScaleColor = useCallback(
+    (scaleName: keyof ThemePalette, 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};
+      });
+    },
+    [palette]
+  );
+
+  const highlightScale = useCallback(
+    (scale: keyof ThemePalette) => (index: number) => {
+      setHighlight({scale, index});
+    },
+    []
+  );
+
+  const clearHighlight = useCallback(() => setHighlight(null), []);
+
+  const isModified = prefs !== null || staticPaletteIndex !== null || customPalette !== null || anyCurvesChanged;
+
+  useEffect(() => {
+    saveToStorage({prefs, staticPaletteIndex, customPalette});
+  }, [prefs, staticPaletteIndex, customPalette]);
+
+  const editingDark = !isAuto && !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"];
+    if (showLight) {
+      keys.push("base", "accent", "red", "teal", "yellow");
+    }
+    if (showDark) {
+      keys.push("baseDark", "accentDark", "redDark", "tealDark", "yellowDark");
+    }
+    const result: ThematicExport = {};
+    for (const k of keys) {
+      (result as Record<string, unknown>)[k] = palette[k];
+    }
+    const bothModes = showLight && showDark;
+    if (bothModes) {
+      result.meta = {prefs};
+    }
+    return result;
+  }, [palette, showLight, showDark, prefs]);
+
+  const importState = useCallback((data: ThematicExport) => {
+    const {meta, ...scales} = data;
+    if (!isValidPalette(scales)) {
+      alert("Outdated palette format");
+      return;
+    }
+    if (meta) {
+      setPrefs(meta.prefs);
+      setStaticPaletteIndex(null);
+    }
+    const hasLight = "base" in scales;
+    const hasDark = "baseDark" in scales;
+    if (hasLight && !hasDark) {
+      setThemePreference("light");
+      setThemePref("light");
+    } else if (hasDark && !hasLight) {
+      setThemePreference("dark");
+      setThemePref("dark");
+    }
+    setCustomPalette(
+      (prev) =>
+        ({
+          ...prev,
+          ...scales,
+          key: `import-${Date.now()}`,
+        } as Partial<ThemePalette>)
+    );
+  }, []);
+
+  return {
+    palette,
+    isAltPressed,
+    collapsed,
+    setCollapsed,
+    visible,
+    setVisible,
+    themePref,
+    isModified,
+    showLight,
+    showDark,
+    isAuto,
+    prefsPresent,
+    staticPalette,
+    baseCurves,
+    setBaseCurves,
+    accentCurves,
+    setAccentCurves,
+    update,
+    randomize,
+    cycleStaticPalettes,
+    cycleTheme,
+    reset,
+    updateScaleColor,
+    highlightScale,
+    clearHighlight,
+    exportState,
+    importState,
+  };
+}