From bd3f6d02ba25a7c4b5c1d13cd4f4799d30454f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 14 Jan 2025 09:08:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Tint=E5=92=8CShade=E7=9A=84Mi?=
 =?UTF-8?q?x=E7=B3=BB=E6=95=B0=E5=8F=8D=E7=AE=97=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../color-compare/CompareLayout.module.css    |  8 +++
 .../color-compare/ShadeScale.tsx              | 54 +++++++++++++++++++
 .../color-compare/TintScale.tsx               | 54 +++++++++++++++++++
 src/pages/Compare.tsx                         |  4 ++
 4 files changed, 120 insertions(+)
 create mode 100644 src/page-components/color-compare/ShadeScale.tsx
 create mode 100644 src/page-components/color-compare/TintScale.tsx

diff --git a/src/page-components/color-compare/CompareLayout.module.css b/src/page-components/color-compare/CompareLayout.module.css
index 2bc395e..fcee504 100644
--- a/src/page-components/color-compare/CompareLayout.module.css
+++ b/src/page-components/color-compare/CompareLayout.module.css
@@ -4,6 +4,9 @@
     flex-direction: row;
     align-items: stretch;
     gap: var(--spacing-m);
+    &:not(:first-of-type) {
+      margin-top: var(--spacing-s);
+    }
     .element {
       display: flex;
       flex-direction: row;
@@ -20,6 +23,11 @@
         font-size: var(--font-size-xs);
         line-height: var(--font-size-xs);
       }
+      .element_value {
+        align-self: flex-end;
+        font-size: var(--font-size-s);
+        line-height: var(--font-size-s);
+      }
     }
   }
 }
diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx
new file mode 100644
index 0000000..29ee39c
--- /dev/null
+++ b/src/page-components/color-compare/ShadeScale.tsx
@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { MixReversing } from '../../color_functions/color_module';
+import { useColorFunction } from '../../ColorFunctionContext';
+import styles from './CompareLayout.module.css';
+import { CompareMethodProps } from './share-props';
+
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
+
+export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+  const { colorFn } = useColorFunction();
+  const mixFactors = useMemo(() => {
+    if (!colorFn) {
+      return defaultMixResult;
+    }
+    try {
+      const factor = colorFn.shade_scale(basic, compare);
+      return factor;
+    } catch (e) {
+      console.error('[Reversing Tint]', e);
+    }
+    return defaultMixResult;
+  }, [basic, compare]);
+
+  return (
+    <div>
+      <h6>Compare in RGB Shade.</h6>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>R</div>
+          <div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>G</div>
+          <div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>B</div>
+          <div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>Average</div>
+          <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx
new file mode 100644
index 0000000..6b9aa9a
--- /dev/null
+++ b/src/page-components/color-compare/TintScale.tsx
@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { MixReversing } from '../../color_functions/color_module';
+import { useColorFunction } from '../../ColorFunctionContext';
+import styles from './CompareLayout.module.css';
+import { CompareMethodProps } from './share-props';
+
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
+
+export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+  const { colorFn } = useColorFunction();
+  const mixFactors = useMemo(() => {
+    if (!colorFn) {
+      return defaultMixResult;
+    }
+    try {
+      const factor = colorFn.tint_scale(basic, compare);
+      return factor;
+    } catch (e) {
+      console.error('[Reversing Tint]', e);
+    }
+    return defaultMixResult;
+  }, [basic, compare]);
+
+  return (
+    <div>
+      <h6>Compare in RGB Tint.</h6>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>R</div>
+          <div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>G</div>
+          <div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
+        </div>
+        <div className={styles.element}>
+          <div className={styles.element_name}>B</div>
+          <div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+      <div className={styles.elements}>
+        <div className={styles.element}>
+          <div className={styles.element_name}>Average</div>
+          <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Compare.tsx b/src/pages/Compare.tsx
index e03a999..bc2d6ab 100644
--- a/src/pages/Compare.tsx
+++ b/src/pages/Compare.tsx
@@ -6,6 +6,8 @@ import { HCTCompare } from '../page-components/color-compare/HCTCompare';
 import { HSLCompare } from '../page-components/color-compare/HSLCompare';
 import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
 import { RGBCompare } from '../page-components/color-compare/RGBCompare';
+import { ShadeScale } from '../page-components/color-compare/ShadeScale';
+import { TintScale } from '../page-components/color-compare/TintScale';
 import styles from './Compare.module.css';
 
 export function ColorCompare() {
@@ -36,6 +38,8 @@ export function ColorCompare() {
             <HSLCompare basic={basicColor} compare={compareColor} />
             <HCTCompare basic={basicColor} compare={compareColor} />
             <OklchCompare basic={basicColor} compare={compareColor} />
+            <TintScale basic={basicColor} compare={compareColor} />
+            <ShadeScale basic={basicColor} compare={compareColor} />
           </div>
         </div>
       </ScrollArea>