@fibery/ui-kit 2.1.0 → 2.1.1

package/src/thematic.tsx

@@ -2,14 +2,14 @@
 import {css} from "@linaria/core";
 import {useState} from "react";
 import {createPortal} from "react-dom";
-import {border, space, themeVars} from "./design-system";
+import {border, type ColorScale, space, themeVars} from "./design-system";
 import {ThemeProvider, useTheme} from "./theme-provider";
 import {useWarmPreference} from "./theme-settings";
 import {inspectColor} from "./color-utils";
 import {cardTypeColors} from "./design-system/colors";
 import {backgrounds, sections, stickers} from "./canvas-colors";
-import {type ColorScale, type ThemePalette} from "./palette-generator";
-import {useThematicState} from "./thematic-state";
+import {bgKeyFrom, fgOnBgKeyFrom, highlightHueNames} from "./highlight-colors";
+import {type PaletteScaleKey, useThematicState} from "./thematic-state";
 import {IconButton} from "./button/icon-button";
 import Refresh from "./icons/react/Refresh";
 import Lab from "./icons/react/Lab";
@@ -31,14 +31,17 @@ import {
   Slider,
 } from "./thematic-controls";
 import type {InspectChannel} from "./thematic-color-picker";
-import {ScaleGrid, sectionLabelCss, sectionSeparatorCss, SPACER} from "./thematic-scales";
-
-type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize">;
+import {type ScaleEntry, ScaleGrid, sectionLabelCss, sectionSeparatorCss, SPACER} from "./thematic-scales";
+import {HighlightSection} from "./thematic-highlights";
+import {CvdSection} from "./thematic-cvd";
 
 const panelCss = css`
   position: fixed;
   bottom: 0;
   left: 0;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
   background: ${themeVars.colorBgPopup};
   box-shadow: ${themeVars.shadow400};
   padding: ${space.s12}px;
@@ -47,17 +50,42 @@ const panelCss = css`
   font-size: 12px;
 `;
 
+const slidersCss = css`
+  overflow-y: auto;
+  min-height: 0;
+`;
+
 const buttonsCss = css`
   display: flex;
   gap: ${space.s8}px;
   margin-top: ${space.s12}px;
 `;
 
+const highlightRowCss = css`
+  display: flex;
+  gap: 2px;
+  margin: ${space.s4}px 0;
+`;
+
+const highlightSwatchCss = css`
+  flex: 1;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 2px;
+`;
+
 export function Thematic() {
   const theme = useTheme();
   const [warm, setWarm] = useWarmPreference();
   const state = useThematicState();
 
+  const deneutralizeSpec = state.deneutralizeSpec;
+
   const [hovered, setHovered] = useState(false);
   const expanded = state.pinned || hovered;
 
@@ -107,116 +135,121 @@ export function Thematic() {
     return null;
   }
 
+  const makeScales = (): ScaleEntry[] => {
+    const alt = (name: PaletteScaleKey) => {
+      return state.isAltPressed ? [...state.providerPalette[name]] : undefined;
+    };
+    const s = (name: string, scale: ColorScale, scaleName: PaletteScaleKey) => ({
+      name,
+      scale,
+      onColorChange: (i: number, c: string) => state.updateScaleColor(scaleName as PaletteScaleKey, i, c),
+      onHover: state.onSwatchHover,
+      onHoverEnd: state.onSwatchHoverEnd,
+      altColors: alt(scaleName),
+    });
+
+    const dn = state.palette.deneutralize ? theme.fns.deneutralize : (c: string) => c;
+    const isDark = state.showDark;
+    const canvasCol = (
+      defs: readonly (readonly [string, string])[],
+      label: string,
+      padBefore?: Record<number, number>
+    ) => {
+      const scale: (string | null)[] = [];
+      defs.forEach(([light, dark], i) => {
+        const pad = padBefore?.[i] ?? 0;
+        for (let p = 0; p < pad; p++) {
+          scale.push(SPACER);
+        }
+        scale.push(dn(isDark ? dark : light));
+      });
+      return {
+        name: label,
+        scale,
+        onHover: state.onSwatchHover,
+        onHoverEnd: state.onSwatchHoverEnd,
+        tiny: true,
+      };
+    };
+
+    return [
+      {
+        name: "whiteA",
+        scale: state.palette.whiteA,
+        onColorChange: (i: number, c: string) => state.updateScaleColor("whiteA", i, c),
+        onHover: state.onSwatchHover,
+        onHoverEnd: state.onSwatchHoverEnd,
+        extra: {
+          color: state.palette.white,
+          name: "white",
+          onChange: (c: string) => state.updateScaleColor("white", 0, c),
+        },
+        splitBg: true,
+        altColors: alt("whiteA"),
+      },
+      {
+        name: "blackA",
+        scale: state.palette.blackA,
+        onColorChange: (i: number, c: string) => state.updateScaleColor("blackA", i, c),
+        onHover: state.onSwatchHover,
+        onHoverEnd: state.onSwatchHoverEnd,
+        extra: {
+          color: state.palette.black,
+          name: "black",
+          onChange: (c: string) => state.updateScaleColor("black", 0, c),
+        },
+        splitBg: true,
+        altColors: alt("blackA"),
+      },
+      ...(state.showLight
+        ? [
+            s("base", state.palette.base, "base"),
+            s("accent", state.palette.accent, "accent"),
+            s("red", state.palette.red, "red"),
+            s("teal", state.palette.teal, "teal"),
+            s("yellow", state.palette.yellow, "yellow"),
+          ]
+        : []),
+      ...(state.showDark
+        ? [
+            s("baseDark", state.palette.baseDark, "baseDark"),
+            s("accentDark", state.palette.accentDark, "accentDark"),
+            s("redDark", state.palette.redDark, "redDark"),
+            s("tealDark", state.palette.tealDark, "tealDark"),
+            s("yellowDark", state.palette.yellowDark, "yellowDark"),
+          ]
+        : []),
+      {
+        name: "cardType",
+        scale: cardTypeColors.map((c) => dn(c)) as unknown as ColorScale,
+        onHover: state.onSwatchHover,
+        onHoverEnd: state.onSwatchHoverEnd,
+        altColors: state.isAltPressed ? [...cardTypeColors] : undefined,
+        mini: true,
+      },
+      canvasCol(backgrounds, "background"),
+      canvasCol(stickers, "sticker", {0: 1, 8: 2}),
+      canvasCol(sections, "section"),
+    ];
+  };
   const panel = (
     <div className={panelCss} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
       {!expanded ? (
         <ColorCoding />
       ) : (
         <>
-          <ScaleGrid
-            isAltPressed={state.isAltPressed}
-            inspectChannel={inspectChannel}
-            scales={(() => {
-              const alt = (name: PaletteScaleKey) =>
-                state.isAltPressed ? ([...state.providerPalette[name]] as (string | null)[]) : undefined;
-              const s = (name: string, scale: ColorScale, scaleName: PaletteScaleKey) => ({
-                name,
-                scale,
-                onColorChange: (i: number, c: string) => state.updateScaleColor(scaleName as PaletteScaleKey, i, c),
-                onHover: state.onSwatchHover,
-                onHoverEnd: state.onSwatchHoverEnd,
-                altColors: alt(scaleName),
-              });
-
-              const dn = state.palette.deneutralize ? theme.fns.deneutralize : (c: string) => c;
-              const isDark = state.showDark;
-              const canvasCol = (
-                defs: readonly (readonly [string, string])[],
-                label: string,
-                padBefore?: Record<number, number>
-              ) => {
-                const scale: (string | null)[] = [];
-                const altColors: (string | null)[] = [];
-                defs.forEach(([light, dark], i) => {
-                  const pad = padBefore?.[i] ?? 0;
-                  for (let p = 0; p < pad; p++) {
-                    scale.push(SPACER);
-                    altColors.push(SPACER);
-                  }
-                  scale.push(dn(isDark ? dark : light));
-                  altColors.push(isDark ? light : dark);
-                });
-                return {
-                  name: label,
-                  scale: scale as unknown as ColorScale,
-                  onHover: state.onSwatchHover,
-                  onHoverEnd: state.onSwatchHoverEnd,
-                  altColors: state.isAltPressed ? altColors : undefined,
-                  mini: true,
-                };
-              };
-
-              return [
-                {
-                  name: "whiteA",
-                  scale: state.palette.whiteA,
-                  onColorChange: (i: number, c: string) => state.updateScaleColor("whiteA", i, c),
-                  onHover: state.onSwatchHover,
-                  onHoverEnd: state.onSwatchHoverEnd,
-                  extra: {
-                    color: state.palette.white,
-                    name: "white",
-                    onChange: (c: string) => state.updateScaleColor("white", 0, c),
-                  },
-                  splitBg: true,
-                  altColors: alt("whiteA"),
-                },
-                {
-                  name: "blackA",
-                  scale: state.palette.blackA,
-                  onColorChange: (i: number, c: string) => state.updateScaleColor("blackA", i, c),
-                  onHover: state.onSwatchHover,
-                  onHoverEnd: state.onSwatchHoverEnd,
-                  extra: {
-                    color: state.palette.black,
-                    name: "black",
-                    onChange: (c: string) => state.updateScaleColor("black", 0, c),
-                  },
-                  splitBg: true,
-                  altColors: alt("blackA"),
-                },
-                ...(state.showLight
-                  ? [
-                      s("base", state.palette.base, "base"),
-                      s("accent", state.palette.accent, "accent"),
-                      s("red", state.palette.red, "red"),
-                      s("teal", state.palette.teal, "teal"),
-                      s("yellow", state.palette.yellow, "yellow"),
-                    ]
-                  : []),
-                ...(state.showDark
-                  ? [
-                      s("baseDark", state.palette.baseDark, "baseDark"),
-                      s("accentDark", state.palette.accentDark, "accentDark"),
-                      s("redDark", state.palette.redDark, "redDark"),
-                      s("tealDark", state.palette.tealDark, "tealDark"),
-                      s("yellowDark", state.palette.yellowDark, "yellowDark"),
-                    ]
-                  : []),
-                {
-                  name: "cardType",
-                  scale: cardTypeColors.map((c) => dn(c)) as unknown as ColorScale,
-                  onHover: state.onSwatchHover,
-                  onHoverEnd: state.onSwatchHoverEnd,
-                  altColors: state.isAltPressed ? [...cardTypeColors] : undefined,
-                  mini: true,
-                },
-                canvasCol(backgrounds, "background"),
-                canvasCol(stickers, "sticker", {0: 1, 8: 2}),
-                canvasCol(sections, "section"),
-              ];
-            })()}
-          />
+          <ScaleGrid isAltPressed={state.isAltPressed} inspectChannel={inspectChannel} scales={makeScales()} />
+          <div className={highlightRowCss}>
+            {highlightHueNames.map((hue) => {
+              const bg = theme.colors[bgKeyFrom(hue)];
+              const fg = theme.colors[fgOnBgKeyFrom(hue)];
+              return (
+                <div key={hue} className={highlightSwatchCss} style={{background: bg, color: fg}} title={hue}>
+                  Aa
+                </div>
+              );
+            })}
+          </div>
 
           <div style={{display: "flex", alignItems: "center", gap: space.s8, minHeight: 28}}>
             <div style={{display: "flex", gap: space.s2, flexShrink: 0}}>
@@ -242,219 +275,179 @@ export function Thematic() {
                       color: themeVars.colorTextSecondary,
                     }}
                   >
-                    <span>{state.hoveredInfo.name}</span>
+                    {/* TODO: index [N] is broken for tiny swatches, fix later */}
+                    {/* <span>{state.hoveredInfo.name}</span> */}
                     <span>{hsl}</span>
                     <span>{hex}</span>
-                    <span>{oklch}</span>
+                    <span>{oklch?.replace("oklch", "lch")}</span>
                   </div>
                 );
               })()}
           </div>
 
-          <div className={sectionSeparatorCss} />
+          <div className={slidersCss}>
+            <div className={sectionSeparatorCss} />
 
-          <div className={sectionLabelCss} style={{fontWeight: 700}}>
-            palette
-          </div>
+            <div className={sectionLabelCss} style={{fontWeight: 700}}>
+              palette
+            </div>
 
-          <div className={sectionLabelCss}>base{state.prefs ? " *" : ""}</div>
-          <div className={controlRowCss}>
-            <ArrayEditor
-              label="L"
-              values={state.baseCurves.lightness}
-              onChange={(L) => state.setBaseCurves({...state.baseCurves, lightness: L})}
-              onLabelHover={inspL}
+            <div className={sectionLabelCss}>base{state.prefs ? " *" : ""}</div>
+            <div className={controlRowCss}>
+              <ArrayEditor
+                label="L"
+                values={state.baseCurves.lightness}
+                onChange={(L) => state.setBaseCurves({...state.baseCurves, lightness: L})}
+                onLabelHover={inspL}
+                onLabelLeave={inspOff}
+              />
+            </div>
+            <ArraySlider
+              label={state.prefs?.baseChroma !== undefined ? "C *" : "C"}
+              values={state.baseCurves.chroma}
+              onValuesChange={(C) => state.setBaseCurves({...state.baseCurves, chroma: C})}
+              sliderValue={state.prefsPresent.baseChroma ?? 0}
+              onSliderChange={(v) => state.update({baseChroma: v})}
+              min={0}
+              max={0.25}
+              step={0.001}
+              gradient={chromaGradient(state.prefsPresent.baseHue ?? 0, 0.25)}
+              color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
+              onLabelHover={inspC}
+              onLabelLeave={inspOff}
+            />
+            <Slider
+              label={state.prefs?.baseHue !== undefined ? "H *" : "H"}
+              value={state.prefsPresent.baseHue ?? 0}
+              min={0}
+              max={360}
+              step={1}
+              onChange={(v) => state.update({baseHue: v})}
+              gradient={hueGradient(state.prefsPresent.baseChroma ?? 0)}
+              color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
+              onLabelHover={inspH}
               onLabelLeave={inspOff}
             />
-          </div>
-          <ArraySlider
-            label={state.prefs?.baseChroma !== undefined ? "C *" : "C"}
-            values={state.baseCurves.chroma}
-            onValuesChange={(C) => state.setBaseCurves({...state.baseCurves, chroma: C})}
-            sliderValue={state.prefsPresent.baseChroma ?? 0}
-            onSliderChange={(v) => state.update({baseChroma: v})}
-            min={0}
-            max={0.25}
-            step={0.001}
-            gradient={chromaGradient(state.prefsPresent.baseHue ?? 0, 0.25)}
-            color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
-            onLabelHover={inspC}
-            onLabelLeave={inspOff}
-          />
-          <Slider
-            label={state.prefs?.baseHue !== undefined ? "H *" : "H"}
-            value={state.prefsPresent.baseHue ?? 0}
-            min={0}
-            max={360}
-            step={1}
-            onChange={(v) => state.update({baseHue: v})}
-            gradient={hueGradient(state.prefsPresent.baseChroma ?? 0)}
-            color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
-            onLabelHover={inspH}
-            onLabelLeave={inspOff}
-          />
 
-          <div className={sectionLabelCss}>accent{state.prefs ? " *" : ""}</div>
-          <div className={controlRowCss}>
-            <ArrayEditor
-              label="L"
-              values={state.accentCurves.lightness}
-              onChange={(L) => state.setAccentCurves({...state.accentCurves, lightness: L})}
-              onLabelHover={inspL}
+            <div className={sectionLabelCss}>accent{state.prefs ? " *" : ""}</div>
+            <div className={controlRowCss}>
+              <ArrayEditor
+                label="L"
+                values={state.accentCurves.lightness}
+                onChange={(L) => state.setAccentCurves({...state.accentCurves, lightness: L})}
+                onLabelHover={inspL}
+                onLabelLeave={inspOff}
+              />
+            </div>
+            <ArraySlider
+              label={state.prefs?.accentChroma !== undefined ? "C *" : "C"}
+              values={state.accentCurves.chroma}
+              onValuesChange={(C) => state.setAccentCurves({...state.accentCurves, chroma: C})}
+              sliderValue={state.prefsPresent.accentChroma}
+              onSliderChange={(v) => state.update({accentChroma: v})}
+              min={0.05}
+              max={0.25}
+              step={0.001}
+              gradient={chromaGradient(state.prefsPresent.accentHue, 0.25)}
+              color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
+              onLabelHover={inspC}
+              onLabelLeave={inspOff}
+            />
+            <Slider
+              label={state.prefs?.accentHue !== undefined ? "H *" : "H"}
+              value={state.prefsPresent.accentHue}
+              min={0}
+              max={360}
+              step={1}
+              onChange={(v) => state.update({accentHue: v})}
+              gradient={hueGradient(state.prefsPresent.accentChroma)}
+              color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
+              onLabelHover={inspH}
               onLabelLeave={inspOff}
             />
-          </div>
-          <ArraySlider
-            label={state.prefs?.accentChroma !== undefined ? "C *" : "C"}
-            values={state.accentCurves.chroma}
-            onValuesChange={(C) => state.setAccentCurves({...state.accentCurves, chroma: C})}
-            sliderValue={state.prefsPresent.accentChroma}
-            onSliderChange={(v) => state.update({accentChroma: v})}
-            min={0.05}
-            max={0.25}
-            step={0.001}
-            gradient={chromaGradient(state.prefsPresent.accentHue, 0.25)}
-            color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
-            onLabelHover={inspC}
-            onLabelLeave={inspOff}
-          />
-          <Slider
-            label={state.prefs?.accentHue !== undefined ? "H *" : "H"}
-            value={state.prefsPresent.accentHue}
-            min={0}
-            max={360}
-            step={1}
-            onChange={(v) => state.update({accentHue: v})}
-            gradient={hueGradient(state.prefsPresent.accentChroma)}
-            color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
-            onLabelHover={inspH}
-            onLabelLeave={inspOff}
-          />
 
-          <div className={sectionLabelCss}>
-            hue shift
-            {state.prefs?.hueShiftTargetHue !== undefined || state.prefs?.hueShiftAmount !== undefined ? " *" : ""}
-          </div>
-          <Slider
-            label={state.prefs?.hueShiftTargetHue !== undefined ? "target H *" : "target H"}
-            value={state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0}
-            min={0}
-            max={360}
-            step={1}
-            onChange={(v) => state.updateHueShift({hueShiftTargetHue: v})}
-            gradient={hueGradient(0.15)}
-            color={oklchColor(state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0, 0.15)}
-          />
-          <Slider
-            label={state.prefs?.hueShiftAmount !== undefined ? "amount *" : "amount"}
-            value={state.prefsPresent.hueShiftAmount ?? Math.min((state.prefsPresent.baseChroma ?? 0) * 2, 0.3)}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(v) => state.updateHueShift({hueShiftAmount: v})}
-          />
+            <div className={sectionLabelCss}>
+              hue shift
+              {state.prefs?.hueShiftTargetHue !== undefined || state.prefs?.hueShiftAmount !== undefined ? " *" : ""}
+            </div>
+            <Slider
+              label={state.prefs?.hueShiftTargetHue !== undefined ? "target H *" : "target H"}
+              value={state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0}
+              min={0}
+              max={360}
+              step={1}
+              onChange={(v) => state.updateHueShift({hueShiftTargetHue: v})}
+              gradient={hueGradient(0.15)}
+              color={oklchColor(state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0, 0.15)}
+            />
+            <Slider
+              label={state.prefs?.hueShiftAmount !== undefined ? "amount *" : "amount"}
+              value={state.prefsPresent.hueShiftAmount ?? Math.min((state.prefsPresent.baseChroma ?? 0) * 2, 0.3)}
+              min={0}
+              max={1}
+              step={0.01}
+              onChange={(v) => state.updateHueShift({hueShiftAmount: v})}
+            />
 
-          <div className={sectionSeparatorCss} />
+            <div className={sectionSeparatorCss} />
+
+            <div className={sectionLabelCss} style={{fontWeight: 700}}>
+              deneutralize ({state.showDark ? "dark" : "light"})
+              {state.prefs?.filter || state.customPalette?.deneutralize ? " *" : ""}
+            </div>
+            <Slider
+              label="hue shift H"
+              value={deneutralizeSpec?.hueShift?.targetHue ?? 0}
+              min={0}
+              max={360}
+              step={1}
+              onChange={(v) =>
+                state.updateFilter({hueShift: {targetHue: v, amount: deneutralizeSpec?.hueShift?.amount ?? 0}})
+              }
+              gradient={hueGradient(0.15)}
+              color={oklchColor(deneutralizeSpec?.hueShift?.targetHue ?? 0, 0.15)}
+            />
+            <Slider
+              label="hue shift amt"
+              value={deneutralizeSpec?.hueShift?.amount ?? 0}
+              min={0}
+              max={1}
+              step={0.01}
+              onChange={(v) =>
+                state.updateFilter({
+                  hueShift: {targetHue: deneutralizeSpec?.hueShift?.targetHue ?? 0, amount: v},
+                })
+              }
+            />
+            <Slider
+              label="oklch L"
+              value={deneutralizeSpec?.oklchL ?? 1}
+              min={0}
+              max={2}
+              step={0.01}
+              onChange={(v) => state.updateFilter({oklchL: v})}
+            />
+            <Slider
+              label="oklch C"
+              value={deneutralizeSpec?.oklchC ?? 1}
+              min={0}
+              max={3}
+              step={0.01}
+              onChange={(v) => state.updateFilter({oklchC: v})}
+            />
+            <Slider
+              label="heat"
+              value={deneutralizeSpec?.heat ?? 0}
+              min={-1}
+              max={1}
+              step={0.01}
+              onChange={(v) => state.updateFilter({heat: v})}
+            />
+
+            <CvdSection state={state} />
 
-          <div className={sectionLabelCss} style={{fontWeight: 700}}>
-            deneutralize{state.prefs?.filter || state.customPalette?.deneutralize ? " *" : ""}
+            <HighlightSection state={state} />
           </div>
-          <Slider
-            label="hue shift H"
-            value={state.palette.deneutralize?.hueShift?.targetHue ?? 0}
-            min={0}
-            max={360}
-            step={1}
-            onChange={(v) =>
-              state.updateFilter({hueShift: {targetHue: v, amount: state.palette.deneutralize?.hueShift?.amount ?? 0}})
-            }
-            gradient={hueGradient(0.15)}
-            color={oklchColor(state.palette.deneutralize?.hueShift?.targetHue ?? 0, 0.15)}
-          />
-          <Slider
-            label="hue shift amt"
-            value={state.palette.deneutralize?.hueShift?.amount ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(v) =>
-              state.updateFilter({
-                hueShift: {targetHue: state.palette.deneutralize?.hueShift?.targetHue ?? 0, amount: v},
-              })
-            }
-          />
-          <Slider
-            label="oklch L"
-            value={state.palette.deneutralize?.oklchL ?? 1}
-            min={0}
-            max={2}
-            step={0.01}
-            onChange={(v) => state.updateFilter({oklchL: v})}
-          />
-          <Slider
-            label="oklch C"
-            value={state.palette.deneutralize?.oklchC ?? 1}
-            min={0}
-            max={3}
-            step={0.01}
-            onChange={(v) => state.updateFilter({oklchC: v})}
-          />
-          <Slider
-            label="brightness"
-            value={state.palette.deneutralize?.brightness ?? 1}
-            min={0}
-            max={3}
-            step={0.01}
-            onChange={(v) => state.updateFilter({brightness: v})}
-          />
-          <Slider
-            label="contrast"
-            value={state.palette.deneutralize?.contrast ?? 1}
-            min={0}
-            max={3}
-            step={0.01}
-            onChange={(v) => state.updateFilter({contrast: v})}
-          />
-          <Slider
-            label="saturate"
-            value={state.palette.deneutralize?.saturate ?? 1}
-            min={0}
-            max={3}
-            step={0.01}
-            onChange={(v) => state.updateFilter({saturate: v})}
-          />
-          <Slider
-            label="hue rotate"
-            value={state.palette.deneutralize?.hueRotate ?? 0}
-            min={-180}
-            max={180}
-            step={1}
-            onChange={(v) => state.updateFilter({hueRotate: v})}
-          />
-          <Slider
-            label="sepia"
-            value={state.palette.deneutralize?.sepia ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(v) => state.updateFilter({sepia: v})}
-          />
-          <Slider
-            label="grayscale"
-            value={state.palette.deneutralize?.grayscale ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(v) => state.updateFilter({grayscale: v})}
-          />
-          <Slider
-            label="invert"
-            value={state.palette.deneutralize?.invert ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(v) => state.updateFilter({invert: v})}
-          />
 
           <div className={sectionSeparatorCss} />