feat(seed-docs): color foundation palette

docs/gatsby-config.js

@@ -123,9 +123,10 @@ module.exports = {
       resolve: "gatsby-plugin-web-font-loader",
       options: {
         custom: {
-          families: ["Pretendard"],
+          families: ["Pretendard", "Roboto Mono"],
           urls: [
             "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css",
+            "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap",
           ],
         },
       },

docs/src/components/mdx/Table.css.ts

@@ -35,8 +35,8 @@ export const tableCell = style([
   }),
 
   m.small({
-    fontSize: "16px",
-    padding: "16px 30px",
+    fontSize: "14px",
+    padding: "16px 25px",
   }),
 ]);
 
@@ -45,7 +45,8 @@ export const tableHead = style([
     width: "100%",
     overflowX: "auto",
     fontWeight: "600",
-    backgroundColor: vars.$scale.color.gray100,
+    backgroundColor: vars.$semantic.color.paperContents,
+    color: vars.$scale.color.gray700,
   },
 ]);
 

docs/src/components/mdx/Table.tsx

@@ -1,25 +1,33 @@
 import clsx from "clsx";
+import type { HTMLAttributes } from "react";
 
 import * as style from "./Table.css";
 
-export const Table = (props: Object) => (
-  <div className={style.tableWrapper}>
-    <table className={clsx(style.table)} {...props}></table>
-  </div>
-);
+export const Table = (props: HTMLAttributes<HTMLTableElement>) => {
+  const { className, ...rest } = props;
+  return (
+    <div className={style.tableWrapper}>
+      <table className={clsx(style.table, className)} {...rest}></table>
+    </div>
+  );
+};
 
-export const TableHead = (props: Object) => (
-  <thead className={clsx(style.tableHead)} {...props}></thead>
-);
+export const TableHead = (props: HTMLAttributes<HTMLTableSectionElement>) => {
+  const { className, ...rest } = props;
+  return <thead className={clsx(style.tableHead, className)} {...rest}></thead>;
+};
 
-export const TableBody = (props: Object) => (
-  <tbody className={clsx(style.tableBody)} {...props}></tbody>
-);
+export const TableBody = (props: HTMLAttributes<HTMLTableSectionElement>) => {
+  const { className, ...rest } = props;
+  return <tbody className={clsx(style.tableBody, className)} {...rest}></tbody>;
+};
 
-export const TableRow = (props: Object) => (
-  <tr className={clsx(style.tableRow)} {...props}></tr>
-);
+export const TableRow = (props: HTMLAttributes<HTMLTableRowElement>) => {
+  const { className, ...rest } = props;
+  return <tr className={clsx(style.tableRow, className)} {...rest}></tr>;
+};
 
-export const TableData = (props: Object) => (
-  <td className={clsx(style.tableData)} {...props}></td>
-);
+export const TableData = (props: HTMLAttributes<HTMLTableCellElement>) => {
+  const { className, ...rest } = props;
+  return <td className={clsx(style.tableData, className)} {...rest}></td>;
+};

docs/src/contexts/ColorPaletteContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface ColorPaletteProps {
+  computedStyle: CSSStyleDeclaration | undefined;
+  hash: string;
+}
+
+const ColorPaletteContext = createContext<ColorPaletteProps | null>(null);
+
+export function ColorPaletteProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [computedStyle, setComputedStyle] = useState<CSSStyleDeclaration>();
+  const [hash, setHash] = useState<string>("");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const style = window.getComputedStyle(document.body);
+    setComputedStyle(style);
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleRouteChange = () => {
+      const url = new URL(window.location.href);
+      setHash(url.hash.slice(1));
+    };
+
+    window.addEventListener("hashchange", handleRouteChange);
+    return () => {
+      window.removeEventListener("hashchange", handleRouteChange);
+    };
+  }, []);
+
+  return (
+    <ColorPaletteContext.Provider value={{ computedStyle, hash }}>
+      {children}
+    </ColorPaletteContext.Provider>
+  );
+}
+
+export const useColorPaletteState = () => {
+  const state = useContext(ColorPaletteContext);
+  if (!state) throw new Error("Cannot find ColorPaletteContext Provider");
+  return state;
+};