完成Tints & Shades功能。

src/page-components/TintsShades/shades.tsx

@@ -0,0 +1,59 @@
+import { last } from 'lodash-es';
+import { useMemo } from 'react';
+import { useColorFunction } from '../../ColorFunctionContext';
+import { FlexColorStand } from '../../components/FlexColorStand';
+
+type ShadesListProps = {
+  color: string;
+  shades: number;
+  mix: 'progressive' | 'linear' | 'average';
+  step?: number;
+  maximum?: number;
+  copyMode: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
+};
+
+export function Shades({ color, shades, mix, step, maximum, copyMode }: ShadesListProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    try {
+      if (!colorFn) {
+        return Array.from({ length: shades + 1 }, () => color);
+      }
+      const genColors = [color];
+      switch (mix) {
+        case 'progressive':
+          for (let i = 1; i <= shades; i++) {
+            const shade = colorFn!.shade(last(genColors), step);
+            genColors.push(shade);
+          }
+          break;
+        case 'linear':
+          for (let i = 1; i <= shades; i++) {
+            const shade = colorFn!.shade(color, step * i);
+            genColors.push(shade);
+          }
+          break;
+        case 'average': {
+          const interval = maximum / shades / 100;
+          for (let i = 1; i <= shades; i++) {
+            const shade = colorFn!.shade(color, interval * i);
+            genColors.push(shade);
+          }
+          break;
+        }
+      }
+      return genColors.reverse();
+    } catch (e) {
+      console.error('[Generate Shades]', e);
+    }
+    return Array.from({ length: shades + 1 }, () => color);
+  }, [color, shades, mix, step, maximum]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={copyMode} />
+      ))}
+    </>
+  );
+}

src/page-components/TintsShades/tints.tsx

@@ -0,0 +1,59 @@
+import { last } from 'lodash-es';
+import { useMemo } from 'react';
+import { useColorFunction } from '../../ColorFunctionContext';
+import { FlexColorStand } from '../../components/FlexColorStand';
+
+type TintsListProps = {
+  color: string;
+  tints: number;
+  mix: 'progressive' | 'linear' | 'average';
+  step?: number;
+  maximum?: number;
+  copyMode: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
+};
+
+export function Tints({ color, tints, mix, step, maximum, copyMode }: TintsListProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    try {
+      if (!colorFn) {
+        return Array.from({ length: tints + 1 }, () => color);
+      }
+      const genColors = [color];
+      switch (mix) {
+        case 'progressive':
+          for (let i = 1; i <= tints; i++) {
+            const tint = colorFn!.tint(last(genColors), step);
+            genColors.push(tint);
+          }
+          break;
+        case 'linear':
+          for (let i = 1; i <= tints; i++) {
+            const tint = colorFn!.tint(color, step * i);
+            genColors.push(tint);
+          }
+          break;
+        case 'average': {
+          const interval = maximum / tints / 100;
+          for (let i = 1; i <= tints; i++) {
+            const tint = colorFn!.tint(color, interval * i);
+            genColors.push(tint);
+          }
+          break;
+        }
+      }
+      return genColors;
+    } catch (e) {
+      console.error('[Generate Tints]', e);
+    }
+    return Array.from({ length: tints + 1 }, () => color);
+  }, [color, tints, mix, step, maximum]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={copyMode} />
+      ))}
+    </>
+  );
+}