From 74dd9e7354fc0d51262231c37af267bc39def051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 7 Feb 2025 06:23:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90Q=20Scheme=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scheme/q-scheme/Preview.module.css        |  35 ++++++
 .../scheme/q-scheme/Preview.tsx               | 100 ++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 src/page-components/scheme/q-scheme/Preview.module.css
 create mode 100644 src/page-components/scheme/q-scheme/Preview.tsx

diff --git a/src/page-components/scheme/q-scheme/Preview.module.css b/src/page-components/scheme/q-scheme/Preview.module.css
new file mode 100644
index 0000000..8db7cbf
--- /dev/null
+++ b/src/page-components/scheme/q-scheme/Preview.module.css
@@ -0,0 +1,35 @@
+@layer pages {
+  .preview_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .preview_block {
+    width: inherit;
+    padding: var(--spacing-xl) var(--spacing-m);
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--spacing-xs);
+    h2 {
+      font-size: var(--font-size-xl);
+      font-weight: bold;
+      line-height: 1.7em;
+    }
+  }
+  .preview_cell {
+    padding: var(--spacing-xs) var(--spacing-s);
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--spacing-m);
+    font-size: var(--font-size-s);
+    line-height: 2em;
+    .wacg {
+      font-size: var(--font-size-xxs);
+      line-height: 1em;
+    }
+  }
+}
diff --git a/src/page-components/scheme/q-scheme/Preview.tsx b/src/page-components/scheme/q-scheme/Preview.tsx
new file mode 100644
index 0000000..0c3b5ae
--- /dev/null
+++ b/src/page-components/scheme/q-scheme/Preview.tsx
@@ -0,0 +1,100 @@
+import { ReactNode, useMemo } from 'react';
+import { useColorFunction } from '../../../ColorFunctionContext';
+import { ScrollArea } from '../../../components/ScrollArea';
+import { SchemeContent } from '../../../models';
+import { Baseline, ColorSet, QSchemeStorage } from '../../../q-scheme';
+import styles from './Preview.module.css';
+
+type PreviewCellProps = {
+  bg: string;
+  fg: string;
+  children: ReactNode;
+};
+
+function PreviewCell({ bg, fg, children }: PreviewCellProps) {
+  const { colorFn } = useColorFunction();
+  const wacgRatio = useMemo(() => {
+    try {
+      if (!colorFn) return null;
+      return colorFn.wacg_relative_contrast(fg, bg);
+    } catch (e) {
+      console.error('[Error on calc WACG Ratio]', e);
+    }
+    return null;
+  }, [bg, fg]);
+
+  return (
+    <div className={styles.preview_cell} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+      <span>{children}</span>
+      {wacgRatio && <span className={styles.wacg}>WACG {wacgRatio?.toFixed(2)}</span>}
+    </div>
+  );
+}
+
+type PreviewCellSetProps = {
+  colorSet: ColorSet;
+  name: string;
+};
+
+function PreviewCellSetGroup({ colorSet, name }: PreviewCellSetProps) {
+  return (
+    <>
+      <PreviewCell bg={colorSet.root} fg={colorSet.onRoot}>
+        {name}
+      </PreviewCell>
+      <PreviewCell bg={colorSet.hover} fg={colorSet.onHover}>
+        {name} Hover
+      </PreviewCell>
+      <PreviewCell bg={colorSet.active} fg={colorSet.onActive}>
+        {name} Active
+      </PreviewCell>
+      <PreviewCell bg={colorSet.focus} fg={colorSet.onFocus}>
+        {name} Focus
+      </PreviewCell>
+      <PreviewCell bg={colorSet.disabled} fg={colorSet.onDisabled}>
+        {name} Disabled
+      </PreviewCell>
+    </>
+  );
+}
+
+type PreviewBlockProps = {
+  baseline: Baseline;
+  title: string;
+};
+
+function PreviewBlock({ baseline, title }: PreviewBlockProps) {
+  return (
+    <div className={styles.preview_block} style={{ backgroundColor: `#${baseline.background}` }}>
+      <h2 style={{ color: `#${baseline.foreground}`, gridColumn: '1 / span 5' }}>{title}</h2>
+      <PreviewCellSetGroup colorSet={baseline.primary} name="Primary" />
+      {baseline.secondary && <PreviewCellSetGroup colorSet={baseline.secondary} name="Secondary" />}
+      {baseline.tertiary && <PreviewCellSetGroup colorSet={baseline.tertiary} name="Tertiary" />}
+      {baseline.accent && <PreviewCellSetGroup colorSet={baseline.accent} name="Accent" />}
+      <PreviewCellSetGroup colorSet={baseline.neutral} name="Neutral" />
+      <PreviewCellSetGroup colorSet={baseline.danger} name="Danger" />
+      <PreviewCellSetGroup colorSet={baseline.warning} name="Warning" />
+      <PreviewCellSetGroup colorSet={baseline.success} name="Success" />
+      <PreviewCellSetGroup colorSet={baseline.info} name="Info" />
+    </div>
+  );
+}
+
+type PreviewProps = {
+  scheme: SchemeContent<QSchemeStorage>;
+};
+
+export function QSchemePreview({ scheme }: PreviewProps) {
+  return (
+    <ScrollArea enableY>
+      <div className={styles.preview_layout}>
+        {scheme.schemeStorage.scheme?.light && (
+          <PreviewBlock baseline={scheme.schemeStorage.scheme.light} title="Light Scheme" />
+        )}
+        {scheme.schemeStorage.scheme?.dark && (
+          <PreviewBlock baseline={scheme.schemeStorage.scheme.dark} title="Dark Scheme" />
+        )}
+      </div>
+    </ScrollArea>
+  );
+}