From f775c3b78f297f5bc4ce18471b41b2b144e1080a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 7 Jan 2025 15:45:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90WACG=E5=AF=B9=E6=AF=94?=
 =?UTF-8?q?=E5=BA=A6=E6=A3=80=E6=B5=8B=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                  |  2 +
 src/page-components/wacg/Ratio.module.css    | 13 +++++
 src/page-components/wacg/Ratio.tsx           | 13 +++++
 src/page-components/wacg/TextDemo.module.css | 46 +++++++++++++++
 src/page-components/wacg/TextDemo.tsx        | 61 ++++++++++++++++++++
 src/pages/WACG.module.css                    | 40 +++++++++++++
 src/pages/WACG.tsx                           | 47 +++++++++++++++
 7 files changed, 222 insertions(+)
 create mode 100644 src/page-components/wacg/Ratio.module.css
 create mode 100644 src/page-components/wacg/Ratio.tsx
 create mode 100644 src/page-components/wacg/TextDemo.module.css
 create mode 100644 src/page-components/wacg/TextDemo.tsx
 create mode 100644 src/pages/WACG.module.css
 create mode 100644 src/pages/WACG.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e0d4022..c73fc51 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import { SchemeNotFound } from './pages/SchemeNotFound';
 import { Schemes } from './pages/Schemes';
 import { TintsShades } from './pages/TintsShades';
 import { Tones } from './pages/Tones';
+import { WACGCheck } from './pages/WACG';
 import { Wheels } from './pages/Wheels';
 
 const routes = createBrowserRouter([
@@ -35,6 +36,7 @@ const routes = createBrowserRouter([
       { path: 'tints-shades', element: <TintsShades /> },
       { path: 'lighten-darken', element: <LightenDarken /> },
       { path: 'mixer', element: <Mixer /> },
+      { path: 'wacg', element: <WACGCheck /> },
     ],
   },
 ]);
diff --git a/src/page-components/wacg/Ratio.module.css b/src/page-components/wacg/Ratio.module.css
new file mode 100644
index 0000000..ef4a55c
--- /dev/null
+++ b/src/page-components/wacg/Ratio.module.css
@@ -0,0 +1,13 @@
+@layer pages {
+  .ratio_layout {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: var(--spacing-s) var(--spacing-m);
+    .ratio {
+      font-size: calc(var(--font-size) * 5);
+      font-weight: bold;
+    }
+  }
+}
diff --git a/src/page-components/wacg/Ratio.tsx b/src/page-components/wacg/Ratio.tsx
new file mode 100644
index 0000000..79010b6
--- /dev/null
+++ b/src/page-components/wacg/Ratio.tsx
@@ -0,0 +1,13 @@
+import styles from './Ratio.module.css';
+
+type ContrastRatioProps = {
+  ratio: number;
+};
+
+export function ContrastRatio({ ratio }: ContrastRatioProps) {
+  return (
+    <div className={styles.ratio_layout}>
+      <div className={styles.ratio}>{ratio.toFixed(2)} : 1</div>
+    </div>
+  );
+}
diff --git a/src/page-components/wacg/TextDemo.module.css b/src/page-components/wacg/TextDemo.module.css
new file mode 100644
index 0000000..ca57b12
--- /dev/null
+++ b/src/page-components/wacg/TextDemo.module.css
@@ -0,0 +1,46 @@
+@layer pages {
+  .demo_block {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-xxs);
+    padding: var(--spacing-m) var(--spacing-s);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    gap: var(--spacing-s);
+    .normal_text {
+      font-size: 14pt;
+    }
+    .large_text {
+      font-size: 18pt;
+    }
+    .bold_text {
+      font-size: 14pt;
+      font-weight: bold;
+    }
+  }
+  .wacg_rating {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-s);
+    .rating_unit {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--spacing-m);
+    }
+  }
+  .sub_header {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--spacing-m);
+  }
+  .description {
+    font-size: var(--font-size-xs);
+    color: var(--color-neutral-focus);
+  }
+}
diff --git a/src/page-components/wacg/TextDemo.tsx b/src/page-components/wacg/TextDemo.tsx
new file mode 100644
index 0000000..f4fc54c
--- /dev/null
+++ b/src/page-components/wacg/TextDemo.tsx
@@ -0,0 +1,61 @@
+import cx from 'clsx';
+import styles from './TextDemo.module.css';
+
+type TextDemoProps = {
+  fg: string;
+  bg: string;
+  ratio: number;
+};
+
+export function TextDemo({ fg, bg, ratio }: TextDemoProps) {
+  return (
+    <>
+      <header className={styles.sub_header}>
+        <h5>Normal Text</h5>
+        <p className={styles.description}>14pt normal weight text.</p>
+      </header>
+      <div className={styles.demo_block} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+        <div className={styles.normal_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.normal_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+      </div>
+      <div className={styles.wacg_rating}>
+        <div className={styles.rating_unit}>
+          <span>WACG AA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 4.5 ? 'success' : 'danger')}>
+            {ratio > 4.5 ? 'pass' : 'failed'}
+          </span>
+        </div>
+        <div className={styles.rating_unit}>
+          <span>WACG AAA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 7 ? 'success' : 'danger')}>
+            {ratio > 7 ? 'pass' : 'failed'}
+          </span>
+        </div>
+      </div>
+      <header className={styles.sub_header}>
+        <h5>Large/Bold Text</h5>
+        <p className={styles.description}>18pt normal weight text and 14pt bold text.</p>
+      </header>
+      <div className={styles.demo_block} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+        <div className={styles.large_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.large_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+        <div className={styles.bold_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.bold_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+      </div>
+      <div className={styles.wacg_rating}>
+        <div className={styles.rating_unit}>
+          <span>WACG AA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 3 ? 'success' : 'danger')}>
+            {ratio > 3 ? 'pass' : 'failed'}
+          </span>
+        </div>
+        <div className={styles.rating_unit}>
+          <span>WACG AAA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 4.5 ? 'success' : 'danger')}>
+            {ratio > 4.5 ? 'pass' : 'failed'}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/WACG.module.css b/src/pages/WACG.module.css
new file mode 100644
index 0000000..e9b5a20
--- /dev/null
+++ b/src/pages/WACG.module.css
@@ -0,0 +1,40 @@
+@layer pages {
+  .wacg_workspace {
+    flex-direction: column;
+  }
+  .explore_section {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .function_side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    font-size: var(--font-size-s);
+    .mode_navigation {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-s);
+    }
+    h5 {
+      padding-block: var(--spacing-m);
+      font-size: var(--font-size-m);
+    }
+  }
+  .wacg_content {
+    flex: 1;
+    padding: 0 var(--spacing-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    h5 {
+      padding-block: var(--spacing-m);
+      font-size: var(--font-size-m);
+    }
+  }
+}
diff --git a/src/pages/WACG.tsx b/src/pages/WACG.tsx
new file mode 100644
index 0000000..5ab482e
--- /dev/null
+++ b/src/pages/WACG.tsx
@@ -0,0 +1,47 @@
+import cx from 'clsx';
+import { useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorPicker } from '../components/ColorPicker';
+import { ScrollArea } from '../components/ScrollArea';
+import { ContrastRatio } from '../page-components/wacg/Ratio';
+import { TextDemo } from '../page-components/wacg/TextDemo';
+import styles from './WACG.module.css';
+
+export function WACGCheck() {
+  const { colorFn } = useColorFunction();
+  const [fgColor, setFgColor] = useState('ffffff');
+  const [bgColor, setBgColor] = useState('000000');
+  const contrastRatio = useMemo(() => {
+    try {
+      if (!colorFn) return 1;
+      const ratio = colorFn.wacg_relative_contrast(fgColor, bgColor);
+      return ratio;
+    } catch (e) {
+      console.error('[WACG Check]', e);
+    }
+    return 1;
+  }, [fgColor, bgColor]);
+
+  return (
+    <div className={cx('workspace', styles.wacg_workspace)}>
+      <header>
+        <h3>WACG Check</h3>
+      </header>
+      <ScrollArea enableY>
+        <section className={styles.explore_section}>
+          <aside className={styles.function_side}>
+            <h5>Foreground Color</h5>
+            <ColorPicker color={fgColor} onSelect={setFgColor} />
+            <h5>Background Color</h5>
+            <ColorPicker color={bgColor} onSelect={setBgColor} />
+          </aside>
+          <div className={styles.wacg_content}>
+            <h5>WACG Contrast Ratio</h5>
+            <ContrastRatio ratio={contrastRatio} />
+            <TextDemo fg={fgColor} bg={bgColor} ratio={contrastRatio} />
+          </div>
+        </section>
+      </ScrollArea>
+    </div>
+  );
+}