feat(flat-components): add theme colors (#1226)

packages/flat-components/src/theme/colors.less

@@ -0,0 +1,71 @@
+.flat-theme-root {
+    --blue-0: #f4f8ff;
+    --blue-1: #ebf2ff;
+    --blue-2: #d6e5ff;
+    --blue-3: #adccff;
+    --blue-4: #84b3ff;
+    --blue-5: #5b9aff;
+    --blue-6: #3381ff;
+    --blue-7: #2867cc;
+    --blue-8: #1e4d99;
+    --blue-9: #143366;
+    --blue-10: #0a1933;
+    --blue-11: #050d1a;
+    --blue-12: #03060d;
+
+    --grey-0: #f6f6f6;
+    --grey-1: #efefef;
+    --grey-2: #dedede;
+    --grey-3: #bebebe;
+    --grey-4: #9d9d9d;
+    --grey-5: #7d7d7d;
+    --grey-6: #5d5d5d;
+    --grey-7: #4d4d4d;
+    --grey-8: #333333;
+    --grey-9: #262626;
+    --grey-10: #1f1f1f;
+    --grey-11: #1a1a1a;
+    --grey-12: #141414;
+
+    --green-0: #f5faf2;
+    --green-1: #ecf6e6;
+    --green-2: #d9eecc;
+    --green-3: #b4de99;
+    --green-4: #8ecd66;
+    --green-5: #69bd33;
+    --green-6: #44ad00;
+    --green-7: #368b00;
+    --green-8: #296800;
+    --green-9: #1b4500;
+    --green-10: #0d2200;
+    --green-11: #071100;
+    --green-12: #030900;
+
+    --yellow-0: #fdf9f2;
+    --yellow-1: #fcf4e6;
+    --yellow-2: #faeacc;
+    --yellow-3: #f5d599;
+    --yellow-4: #f1c166;
+    --yellow-5: #ecac33;
+    --yellow-6: #e89800;
+    --yellow-7: #ba7a00;
+    --yellow-8: #8b5b00;
+    --yellow-9: #5c3c00;
+    --yellow-10: #2e1e00;
+    --yellow-11: #170f00;
+    --yellow-12: #0c0800;
+
+    --red-0: #fcf3f2;
+    --red-1: #fae9e6;
+    --red-2: #f6d2cc;
+    --red-3: #eda599;
+    --red-4: #e47866;
+    --red-5: #db4b33;
+    --red-6: #d21f00;
+    --red-7: #a81800;
+    --red-8: #7e1300;
+    --red-9: #540c00;
+    --red-10: #2a0600;
+    --red-11: #150300;
+    --red-12: #0a0200;
+}

packages/flat-components/src/theme/colors.stories.tsx

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from "react";
+import { Story, Meta } from "@storybook/react";
+import "./colors.less";
+import { useIsomorphicLayoutEffect } from "react-use";
+
+const storyMeta: Meta = {
+    title: "Theme/Colors",
+    parameters: {
+        options: {
+            showPanel: false,
+        },
+        docs: { page: null },
+    },
+};
+
+export default storyMeta;
+
+const colors = ["blue", "grey", "green", "yellow", "red"];
+const colorNum = Array(13)
+    .fill(0)
+    .map((_, i) => i);
+
+export const Overview: Story = () => {
+    const [colorHex, setColorHex] = useState<Record<string, string>>({});
+    const rootRef = useRef<HTMLDivElement>(null);
+    useIsomorphicLayoutEffect(() => {
+        if (rootRef.current) {
+            try {
+                const styles = window.getComputedStyle(rootRef.current);
+                setColorHex(
+                    colors.reduce((hex, color) => {
+                        colorNum.forEach(i => {
+                            const name = `--${color}-${i}`;
+                            hex[name] = styles.getPropertyValue(name).toUpperCase();
+                        });
+                        return hex;
+                    }, {} as Record<string, string>),
+                );
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    }, []);
+
+    return (
+        <div className="flat-theme-root center mw8" ref={rootRef}>
+            {colorNum.map(i => (
+                <div key={i} className="ph3-ns">
+                    <div className="cf ph2-ns">
+                        {colors.map((color, c) => {
+                            const clr = (x: number): string => `var(--${color}-${x})`;
+                            const textClr = i >= colorNum.length / 2 ? 3 : colorNum.length - 3;
+                            return (
+                                <div key={c} className="fl w-100 w-20-ns">
+                                    <div className="tc pv3" style={{ background: clr(i) }}>
+                                        <div style={{ color: clr(textClr), userSelect: "none" }}>
+                                            {colorHex[`--${color}-${i}`]}
+                                        </div>
+                                        <div style={{ color: clr(textClr - 1) }}>
+                                            {`--${color}-${i}`}
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};