(null);
+ const [contrast, setContrast] = useState(0);
+
+ useEffect(() => {
+ window.setTimeout(() => {
+ const [back, fore] = [backRef.current, foreRef.current];
+ if (back === null) throw Error("backElm is null");
+ if (fore === null) throw Error("foreElm is null");
+ setContrast(getContrast(props, back, fore));
+ }, 0); // Wait for all styles are applied
+ }, [setContrast, props]);
+
+ return (
+
+ {/* "background" also set color so the "fore" must be in another
+ element of the "back" */}
+ {props.foreground.type === "text" ? (
+
+ {props.foreground.usage !== "icon" && Aa}
+ {props.foreground.usage === "both" && }
+ {props.foreground.usage !== "text" && }
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/docs/patterns/color/static/grid.module.css b/src/docs/patterns/color/static/grid.module.css
new file mode 100644
index 00000000..0516c7d0
--- /dev/null
+++ b/src/docs/patterns/color/static/grid.module.css
@@ -0,0 +1,6 @@
+.container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 300px);
+ gap: 16px;
+ max-width: 640px;
+}
diff --git a/src/docs/patterns/color/static/grid.tsx b/src/docs/patterns/color/static/grid.tsx
new file mode 100644
index 00000000..9154fc0d
--- /dev/null
+++ b/src/docs/patterns/color/static/grid.tsx
@@ -0,0 +1,11 @@
+import s from "./grid.module.css";
+import { ColorStaticTable } from "./table";
+
+export const ColorStaticGrid = (): JSX.Element => (
+
+
+
+
+
+
+);
diff --git a/src/docs/patterns/color/static/sample.module.css b/src/docs/patterns/color/static/sample.module.css
new file mode 100644
index 00000000..3720a242
--- /dev/null
+++ b/src/docs/patterns/color/static/sample.module.css
@@ -0,0 +1,11 @@
+.container {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.circle {
+ width: 24px;
+ height: 24px;
+ border-radius: 24px;
+}
diff --git a/src/docs/patterns/color/static/sample.tsx b/src/docs/patterns/color/static/sample.tsx
new file mode 100644
index 00000000..f136ca5d
--- /dev/null
+++ b/src/docs/patterns/color/static/sample.tsx
@@ -0,0 +1,33 @@
+import Color from "color";
+import { useEffect, useRef, useState } from "react";
+import { text } from "../../../../core";
+import s from "./sample.module.css";
+
+interface Props {
+ name: string;
+}
+
+export const ColorStaticSample = (props: Props): JSX.Element => {
+ const ref = useRef(null);
+ const [hex, setHex] = useState("");
+
+ useEffect(() => {
+ window.setTimeout(() => {
+ const div = ref.current;
+ if (div === null) throw Error("Ref is not attached");
+ const bg = window.getComputedStyle(div).backgroundColor;
+ setHex(Color(bg).hex());
+ }, 0); // Wait for all colors to be applied correctly
+ }, []);
+
+ return (
+
+ );
+};
diff --git a/src/docs/patterns/color/static/static.mdx b/src/docs/patterns/color/static/static.mdx
new file mode 100644
index 00000000..9d0b991e
--- /dev/null
+++ b/src/docs/patterns/color/static/static.mdx
@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import { ColorStaticGrid } from "./grid";
+
+
+
+# Static Colors
+
+Static colors are persistent across themes. They are the low-level palette
+that Moai is built on top of. They ensure consistency across all parts of the
+interface.
+
+In practice, however, you usually don't need to use static colors directly.
+Instead, use high-level utilities like [`text`][1], [`background`][2], and
+[`border`][3] which provide dynamic colors that are changed based on the
+current theme and [always accessible][4].
+
+## Usage
+
+Static colors are defined as [CSS variables][5] at [`root`][6]. They are
+available everywhere in the app:
+
+```css
+.heading {
+ color: var(--highlight-5);
+}
+```
+
+Since static colors are persistent across themes, you usually want to provide
+the value for each theme manually:
+
+```css
+html.light .heading {
+ color: var(--highlight-6);
+}
+html.dark .heading {
+ color: var(--highlight-4);
+}
+```
+
+In fact, the [implementations][7] of `text`, `background`, and `border`
+utilities are good examples of handling colors in both light and dark themes.
+
+## Colors
+
+The below tables list all static colors in Moai and their variable names.
+
+
+
+[1]: /docs/patterns-color-text--docs
+[2]: /docs/patterns-color-background--docs
+[3]: /docs/patterns-color-border--docs
+[4]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+[5]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+[6]: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
+[7]: https://github.com/moaijs/moai/blob/739a87de82bd061bb41f38c5a51a410b59944a3d/lib/core/src/text/text.module.css
diff --git a/src/docs/patterns/color/static/table.module.css b/src/docs/patterns/color/static/table.module.css
new file mode 100644
index 00000000..e9491afe
--- /dev/null
+++ b/src/docs/patterns/color/static/table.module.css
@@ -0,0 +1,16 @@
+.container {
+ border-width: 2px;
+}
+
+.container table {
+ table-layout: fixed;
+}
+
+.color {
+ width: 160px;
+}
+
+.name {
+ width: 120px;
+ font-variant-numeric: tabular-nums;
+}
diff --git a/src/docs/patterns/color/static/table.tsx b/src/docs/patterns/color/static/table.tsx
new file mode 100644
index 00000000..97bd95ef
--- /dev/null
+++ b/src/docs/patterns/color/static/table.tsx
@@ -0,0 +1,31 @@
+import { border, Table } from "../../../../core";
+import { ColorStaticSample } from "./sample";
+import s from "./table.module.css";
+
+interface Props {
+ name: string;
+}
+
+const Color =
+ (props: Props) =>
+ (row: number): JSX.Element => (
+
+ );
+
+const Name =
+ (props: Props) =>
+ (row: number): JSX.Element => ;
+
+export const ColorStaticTable = (props: Props): JSX.Element => (
+
+
+ fill
+ rows={[...Array(10).keys()]}
+ rowKey={(row) => row.toString()}
+ columns={[
+ { title: "Color", className: s.color, render: Color(props) },
+ { title: "Name", className: s.name, render: Name(props) },
+ ]}
+ />
+
+
+
+ );
+
+const LightStrong = MakeColumn("light", background.strong);
+const LightWeak = MakeColumn("light", background.weak);
+const DarkStrong = MakeColumn("dark", background.strong);
+const DarkWeak = MakeColumn("dark", background.weak);
+
+interface Props {
+ rows: Row[];
+}
+
+export const ColorText = (props: Props): JSX.Element => (
+
+
+ size={Table.sizes.small}
+ fixed={{ firstColumn: true }}
+ fill
+ rows={props.rows}
+ rowKey={(row) => row.key}
+ columns={[
+ { title: "Name", className: s.name, render: "key" },
+ // { title: "Usage", className: s.usage, render: Usage },
+ { title: "Light", render: LightStrong },
+ { title: "Light (alt bg)", render: LightWeak },
+ { title: "Dark", render: DarkStrong },
+ { title: "Dark (alt bg)", render: DarkWeak },
+ ]}
+ />
+