完成WACG对比度检测功能。

2025-01-07 15:45:36 +08:00
parent 6bc0779f26
commit f775c3b78f
7 changed files with 222 additions and 0 deletions
@@ -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);
+    }
+  }
+}
@@ -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>
+  );
+}