增加色调调色功能。

src/page-components/tones/ToneSeries.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { useColorFunction } from '../../ColorFunctionContext';
+import { FlexColorStand } from '../../components/FlexColorStand';
+
+type ToneSeresProps = {
+  color?: string;
+  expand?: number;
+  step?: number;
+  valueMode?: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
+};
+
+export function LightenSeries({
+  color = '000000',
+  expand = 3,
+  step = 10,
+  valueMode = 'hex',
+}: ToneSeresProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    try {
+      const lightenColors = colorFn!.tonal_lighten_series(color, expand, step / 100);
+      return lightenColors;
+    } catch (e) {
+      console.error('[Expand lighten colors]', e);
+    }
+    return Array.from({ length: expand }, () => color);
+  }, [color, expand, step]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={valueMode} />
+      ))}
+    </>
+  );
+}
+
+export function DarkenSeries({
+  color = '000000',
+  expand = 3,
+  step = 10,
+  valueMode = 'hex',
+}: ToneSeresProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    try {
+      const darkenColors = colorFn!.tonal_darken_series(color, expand, step / 100);
+      return darkenColors;
+    } catch (e) {
+      console.error('[Expand darken colors]', e);
+    }
+    return Array.from({ length: expand }, () => color);
+  }, [color, expand, step]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={valueMode} />
+      ))}
+    </>
+  );
+}