精简色调调色的颜色生成。

src/page-components/tones/ToneSeries.tsx

@@ -1,62 +0,0 @@
-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} />
-      ))}
-    </>
-  );
-}

src/pages/Tones.tsx

@@ -1,21 +1,40 @@
 import cx from 'clsx';
 import { useAtom } from 'jotai';
 import { toInteger } from 'lodash-es';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
 import { ColorPicker } from '../components/ColorPicker';
 import { FlexColorStand } from '../components/FlexColorStand';
 import { HSegmentedControl } from '../components/HSegmentedControl';
 import { LabeledPicker } from '../components/LabeledPicker';
-import { DarkenSeries, LightenSeries } from '../page-components/tones/ToneSeries';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Tones.module.css';
 
 export function Tones() {
+  const { colorFn } = useColorFunction();
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [steps, setSteps] = useState(10);
   const [tones, setTones] = useState(3);
   const [seedBias, setSeedBias] = useState(0);
   const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
+  const colors = useMemo(() => {
+    try {
+      const lightenColors = colorFn!.tonal_lighten_series(
+        selectedColor,
+        tones - seedBias,
+        steps / 100,
+      );
+      const darkenColors = colorFn!.tonal_darken_series(
+        selectedColor,
+        tones + seedBias,
+        steps / 100,
+      );
+      return [...darkenColors, selectedColor, ...lightenColors];
+    } catch (e) {
+      console.error('[Expand colors]', e);
+    }
+    return Array.from({ length: tones * 2 + 1 }, () => selectedColor);
+  }, [selectedColor, tones, seedBias, steps]);
 
   return (
     <div className={cx('workspace', styles.tone_workspace)}>
@@ -43,7 +62,7 @@ export function Tones() {
               }}
             />
             <LabeledPicker
-              title="Root bias"
+              title="Basic Bias"
               min={-(tones - 1)}
               max={tones - 1}
               value={seedBias}
@@ -77,19 +96,9 @@ export function Tones() {
             />
           </div>
           <div className={styles.colors_booth}>
-            <DarkenSeries
+            {colors.map((c, index) => (
-              color={selectedColor}
+              <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
-              expand={tones + seedBias}
+            ))}
-              step={steps}
-              valueMode={mode}
-            />
-            <FlexColorStand color={selectedColor} valueMode={mode} />
-            <LightenSeries
-              color={selectedColor}
-              expand={tones - seedBias}
-              step={steps}
-              valueMode={mode}
-            />
           </div>
         </div>
       </section>