@fibery/ui-kit 1.40.2 → 1.40.4

package/src/thematic.tsx

@@ -0,0 +1,382 @@
+import {css} from "@linaria/core";
+import {createPortal} from "react-dom";
+import {border, space, themeVars} from "./design-system";
+import {ThemeProvider} from "./theme-provider";
+import {OKLCH, produceColor} from "./color-utils";
+import type {ColorScale} from "./palette-generator";
+import type {ThematicExport} from "./thematic-state";
+import {useThematicState} from "./thematic-state";
+import {IconButton} from "./button/icon-button";
+import Refresh from "./icons/react/Refresh";
+import Lab from "./icons/react/Lab";
+import Restore from "./icons/react/Restore";
+import ColorCoding from "./icons/react/ColorCoding";
+import Close from "./icons/react/Close";
+import CollapseAll from "./icons/react/CollapseAll";
+import FileDownload from "./icons/react/FileDownload";
+import FileUpload from "./icons/react/FileUpload";
+import {themeIcons} from "./thematic-constants";
+import {ArrayEditor, ArraySlider, controlRowCss, Slider} from "./thematic-controls";
+import {ScalePair, ScaleRow, sectionSeparatorCss} from "./thematic-scales";
+
+const panelCss = css`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: ${themeVars.colorBgPopup};
+  box-shadow: ${themeVars.shadow400};
+  padding: ${space.s12}px;
+  border-top-right-radius: ${border.radius8}px;
+  z-index: 99999;
+  font-size: 12px;
+`;
+
+const buttonsCss = css`
+  display: flex;
+  gap: ${space.s8}px;
+  margin-top: ${space.s12}px;
+`;
+
+function toOklchScale(scale: ColorScale): ColorScale {
+  return scale.map((c) => produceColor(c, (x) => x, OKLCH)) as unknown as ColorScale;
+}
+
+function toOklchExport(data: ThematicExport): ThematicExport {
+  const scales = {...data.scales};
+  for (const [k, v] of Object.entries(scales)) {
+    (scales as Record<string, ColorScale>)[k] = toOklchScale(v);
+  }
+  return {...data, scales};
+}
+
+export function Thematic() {
+  const {
+    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,
+  } = useThematicState();
+
+  const handleExport = (e: React.MouseEvent) => {
+    const data = exportState();
+    const output = e.altKey ? toOklchExport(data) : data;
+    const blob = new Blob([JSON.stringify(output, null, 2)], {type: "application/json"});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    const hasLight = "base" in data.scales;
+    const hasDark = "baseDark" in data.scales;
+    const modes = [hasLight && "light", hasDark && "dark"].filter(Boolean).join("&");
+    const now = new Date().toISOString().replaceAll(/\D+/g, "");
+    a.download = `palette-${modes}${e.altKey ? "-oklch" : ""}-${now}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = () => {
+      input.files?.[0]?.text().then((json) => {
+        try {
+          importState(JSON.parse(json));
+        } catch {
+          /* ignore invalid */
+        }
+      });
+    };
+    input.click();
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  const panel = (
+    <div className={panelCss}>
+      {collapsed ? (
+        <IconButton size="small" variant="ghost" color="neutral" onClick={() => setCollapsed(false)} title="Thematic">
+          <ColorCoding />
+        </IconButton>
+      ) : (
+        <>
+          <IconButton
+            size="small"
+            variant="ghost"
+            color="neutral"
+            onClick={() => setVisible(false)}
+            title="Close"
+            style={{position: "absolute", top: space.s4, right: space.s4}}
+          >
+            <Close />
+          </IconButton>
+          <ScalePair
+            name="base"
+            label="base"
+            light={palette.base}
+            dark={palette.baseDark}
+            showLight={showLight}
+            showDark={showDark}
+            onLightColorChange={(i, c) => updateScaleColor("base", i, c)}
+            onDarkColorChange={(i, c) => updateScaleColor("baseDark", i, c)}
+            onLightHighlight={highlightScale("base")}
+            onDarkHighlight={highlightScale("baseDark")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          {!isAuto && (
+            <div className={controlRowCss}>
+              <ArrayEditor
+                label="L"
+                values={baseCurves.lightness}
+                onChange={(L) => setBaseCurves({...baseCurves, lightness: L})}
+              />
+            </div>
+          )}
+          <ArraySlider
+            label="C"
+            values={baseCurves.chroma}
+            onValuesChange={isAuto ? undefined : (C) => setBaseCurves({...baseCurves, chroma: C})}
+            sliderValue={prefsPresent.baseChroma ?? 0}
+            onSliderChange={(v) => update({baseChroma: v})}
+            min={0}
+            max={0.25}
+            step={0.001}
+          />
+          <Slider
+            label="H"
+            value={prefsPresent.baseHue ?? 0}
+            min={0}
+            max={360}
+            step={1}
+            onChange={(v) => update({baseHue: v})}
+          />
+
+          <div className={sectionSeparatorCss} />
+
+          <ScalePair
+            name="accent"
+            label="accent"
+            light={palette.accent}
+            dark={palette.accentDark}
+            showLight={showLight}
+            showDark={showDark}
+            onLightColorChange={(i, c) => updateScaleColor("accent", i, c)}
+            onDarkColorChange={(i, c) => updateScaleColor("accentDark", i, c)}
+            onLightHighlight={highlightScale("accent")}
+            onDarkHighlight={highlightScale("accentDark")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          {!isAuto && (
+            <div className={controlRowCss}>
+              <ArrayEditor
+                label="L"
+                values={accentCurves.lightness}
+                onChange={(L) => setAccentCurves({...accentCurves, lightness: L})}
+              />
+            </div>
+          )}
+          <ArraySlider
+            label="C"
+            values={accentCurves.chroma}
+            onValuesChange={isAuto ? undefined : (C) => setAccentCurves({...accentCurves, chroma: C})}
+            sliderValue={prefsPresent.accentChroma}
+            onSliderChange={(v) => update({accentChroma: v})}
+            min={0.05}
+            max={0.25}
+            step={0.001}
+          />
+          <Slider
+            label="H"
+            value={prefsPresent.accentHue}
+            min={0}
+            max={360}
+            step={1}
+            onChange={(v) => update({accentHue: v})}
+          />
+
+          <div className={sectionSeparatorCss} />
+
+          <ScalePair
+            name="red"
+            light={palette.red}
+            dark={palette.redDark}
+            showLight={showLight}
+            showDark={showDark}
+            onLightColorChange={(i, c) => updateScaleColor("red", i, c)}
+            onDarkColorChange={(i, c) => updateScaleColor("redDark", i, c)}
+            onLightHighlight={highlightScale("red")}
+            onDarkHighlight={highlightScale("redDark")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          <ScalePair
+            name="teal"
+            light={palette.teal}
+            dark={palette.tealDark}
+            showLight={showLight}
+            showDark={showDark}
+            onLightColorChange={(i, c) => updateScaleColor("teal", i, c)}
+            onDarkColorChange={(i, c) => updateScaleColor("tealDark", i, c)}
+            onLightHighlight={highlightScale("teal")}
+            onDarkHighlight={highlightScale("tealDark")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          <ScalePair
+            name="yellow"
+            light={palette.yellow}
+            dark={palette.yellowDark}
+            showLight={showLight}
+            showDark={showDark}
+            onLightColorChange={(i, c) => updateScaleColor("yellow", i, c)}
+            onDarkColorChange={(i, c) => updateScaleColor("yellowDark", i, c)}
+            onLightHighlight={highlightScale("yellow")}
+            onDarkHighlight={highlightScale("yellowDark")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+
+          <Slider
+            label="contrast"
+            value={prefsPresent.contrast ?? 1}
+            min={0.7}
+            max={1.3}
+            step={0.01}
+            onChange={(v) => update({contrast: v})}
+          />
+
+          <div className={sectionSeparatorCss} />
+
+          <ScaleRow
+            name="white"
+            scale={palette.white}
+            onColorChange={(i, c) => updateScaleColor("white", i, c)}
+            onHighlight={highlightScale("white")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          <Slider
+            label="L"
+            value={prefsPresent.whiteLuminosity ?? 1}
+            min={0.5}
+            max={1.5}
+            step={0.01}
+            onChange={(v) => update({whiteLuminosity: v})}
+          />
+          <Slider
+            label="C"
+            value={prefsPresent.whiteChroma ?? 1}
+            min={0}
+            max={3}
+            step={0.01}
+            onChange={(v) => update({whiteChroma: v})}
+          />
+
+          <div className={sectionSeparatorCss} />
+
+          <ScaleRow
+            name="black"
+            scale={palette.black}
+            onColorChange={(i, c) => updateScaleColor("black", i, c)}
+            onHighlight={highlightScale("black")}
+            onHighlightEnd={clearHighlight}
+            isAltPressed={isAltPressed}
+          />
+          <Slider
+            label="L"
+            value={prefsPresent.blackLuminosity ?? 1}
+            min={0.5}
+            max={1.5}
+            step={0.01}
+            onChange={(v) => update({blackLuminosity: v})}
+          />
+          <Slider
+            label="C"
+            value={prefsPresent.blackChroma ?? 1}
+            min={0}
+            max={3}
+            step={0.01}
+            onChange={(v) => update({blackChroma: v})}
+          />
+
+          <div className={buttonsCss} style={{justifyContent: "space-between"}}>
+            <div style={{display: "flex", gap: space.s4}}>
+              <IconButton
+                size="small"
+                variant="ghost"
+                color="neutral"
+                onClick={() => setCollapsed(true)}
+                title="Collapse"
+              >
+                <CollapseAll />
+              </IconButton>
+              {isAltPressed ? (
+                <IconButton
+                  size="small"
+                  variant={staticPalette ? "solid" : "soft"}
+                  color="error"
+                  onClick={cycleStaticPalettes}
+                  title="Beware"
+                >
+                  <Lab />
+                </IconButton>
+              ) : (
+                <IconButton size="small" variant="soft" color="accent" onClick={randomize} title="Shuffle">
+                  <Refresh />
+                </IconButton>
+              )}
+              <IconButton size="small" variant="ghost" color="neutral" onClick={handleExport} title="Export">
+                <FileDownload />
+              </IconButton>
+              <IconButton size="small" variant="ghost" color="neutral" onClick={handleImport} title="Import">
+                <FileUpload />
+              </IconButton>
+              {isModified && (
+                <IconButton size="small" variant="ghost" color="neutral" onClick={reset} title="Defaults">
+                  <Restore />
+                </IconButton>
+              )}
+            </div>
+            <IconButton
+              size="small"
+              variant="ghost"
+              color="neutral"
+              onClick={cycleTheme}
+              title={isAltPressed ? "auto" : themePref}
+            >
+              {themeIcons[isAltPressed ? "auto" : themePref]}
+            </IconButton>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  return createPortal(<ThemeProvider portal>{panel}</ThemeProvider>, document.body);
+}