完成Lighten & Darken功能。

src/page-components/lighten-darken/darkens.tsx

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

src/page-components/lighten-darken/lightens.tsx

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