Merge pull request #14 from cat-crosswalk/SSlime/add-text-tokens

テキスト系の値入れたり

apps/client/app/routes/tokens.tsx

@@ -0,0 +1,100 @@
+import colors from "@/theme/colors";
+import typography from "@/theme/typography";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import type React from "react";
+import { Fragment } from "react";
+
+export default function Tokens() {
+  return (
+    <div>
+      <section>
+        <Title>Typography</Title>
+        {Object.entries(typography).map(([key, value]) => {
+          return (
+            <div key={key} css={css(value)}>
+              {key}
+            </div>
+          );
+        })}
+      </section>
+      <section>
+        <Title>Colors</Title>
+        {Object.entries(colors).map(([key, value]) => {
+          return (
+            <section key={key}>
+              <SubTitle>{key}</SubTitle>
+              {Object.entries(
+                // NOTE: なんか Union のまま entries 通すと value が any になっちゃうからキャスト
+                value as Record<string, Record<string, string>>,
+              ).map(([key, value]) => {
+                return (
+                  <Grid key={key}>
+                    <GridTitle
+                      style={
+                        {
+                          "--row-span": Object.keys(value).length + 1,
+                        } as React.CSSProperties
+                      }
+                    >
+                      {key}
+                    </GridTitle>
+                    {Object.entries(value).map(([key, value]) => {
+                      return (
+                        <Fragment key={key}>
+                          {key}
+                          <Sample style={{ background: value }} />
+                        </Fragment>
+                      );
+                    })}
+                  </Grid>
+                );
+              })}
+            </section>
+          );
+        })}
+      </section>
+    </div>
+  );
+}
+
+const Title = styled.h2`
+  ${typography.heading1}
+
+  color: ${colors.text.primary.default};
+
+  border: 0 solid ${colors.chromatic.blue.default};
+
+  border-top-width: 4px;
+  border-bottom-width: 4px;
+
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+`;
+
+const SubTitle = styled.h3`
+  ${typography.heading2}
+
+  color: ${colors.text.primary.default};
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: 10rem 8rem 8rem;
+  grid-gap: 1rem;
+`;
+
+const GridTitle = styled.div`
+  ${typography.heading4}
+
+  color: ${colors.text.primary.default};
+
+  grid-row: 1 / span var(--row-span, 1);
+`;
+
+const Sample = styled.div`
+  height: 2rem;
+  width: 8rem;
+
+  box-shadow: 0 0 4px -1px ${colors.text.primary.default};
+`;

apps/client/app/theme/colors.ts

@@ -13,7 +13,7 @@ export default {
   text: {
     primary: {
       default: "#000000",
-      disabled: "676767",
+      disabled: "#676767",
     },
     secondary: {
       default: "rgb(0 0 0 / 0.7)",

apps/client/app/theme/typography.ts

@@ -0,0 +1,72 @@
+// 値部分をリテラルとして吐いてほしいので https://github.com/microsoft/TypeScript/issues/32063 が解決されるまでは ts ファイルとして置く
+// json への移行を簡単にするために、json レベルの記法のみにする
+
+import type { CSSProperties } from "react";
+
+export default {
+  /**
+   * font-size: 32px
+   */
+  heading1: {
+    fontSize: "2rem",
+    fontWeight: 500,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 24px
+   */
+  heading2: {
+    fontSize: "1.5rem",
+    fontWeight: 500,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 20px
+   */
+  heading3: {
+    fontSize: "1.25rem",
+    fontWeight: 500,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 18px
+   */
+  heading4: {
+    fontSize: "1.125rem",
+    fontWeight: 500,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 16px
+   */
+  heading5: {
+    fontSize: "1rem",
+    fontWeight: 500,
+    lineHeight: 1.5,
+  },
+
+  /**
+   * font-size: 18px
+   */
+  body1: {
+    fontSize: "1.125rem",
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 16px
+   */
+  body2: {
+    fontSize: "1rem",
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+  /**
+   * font-size: 14px
+   */
+  body3: {
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+} as const satisfies Record<string, CSSProperties>;