feat(#52): typography 및 color semantic 토큰 생성

Author: wkdtnqls0506

src/styles/index.ts

@@ -1,2 +1,4 @@
 export { colors } from "./colors.css";
 export { radius } from "./radius.css";
+export { semantic } from "./semantic.css";
+export { typography } from "./typography.css";

src/styles/semantic.css.ts

@@ -0,0 +1,56 @@
+import { createGlobalTheme } from "@vanilla-extract/css";
+
+import { colors } from "./colors.css";
+
+export const semantic = createGlobalTheme(":root", {
+  primary: {
+    normal: colors.redOrange[50],
+    pressed: colors.redOrange[40],
+  },
+  dark: {
+    normal: colors.neutral[10],
+    pressed: colors.neutral[30],
+  },
+  assistive: {
+    normal: colors.coolNeutral[99],
+    pressed: colors.coolNeutral[97],
+  },
+  text: {
+    normal: colors.neutral[10],
+    neutral: colors.neutral[30],
+    alternative: colors.neutral[50],
+    disabled: colors.neutral[70],
+    white: colors.common[100],
+    primary: colors.redOrange[50],
+  },
+  background: {
+    white: colors.common[100],
+    grayLight: colors.coolNeutral[99],
+    grayDark: colors.coolNeutral[97],
+    dim: "rgba(23, 23, 23, 0.52)",
+  },
+  icon: {
+    black: colors.neutral[20],
+    white: colors.common[100],
+    gray: colors.neutral[80],
+    disabled: colors.neutral[95],
+    primary: colors.redOrange[50],
+  },
+  status: {
+    positive: colors.green[50],
+    cautionary: colors.orange[60],
+    negative: colors.red[50],
+  },
+  surface: {
+    white: colors.common[100],
+    gray: colors.coolNeutral[99],
+    disabled: colors.coolNeutral[97],
+    black: colors.coolNeutral[10],
+  },
+  border: {
+    pressed: colors.redOrange[50],
+    grayLight: colors.coolNeutral[95],
+    gray: colors.coolNeutral[80],
+    disabled: colors.neutral[99],
+  },
+});

src/styles/typography.css.ts

@@ -0,0 +1,64 @@
+import { createGlobalTheme } from "@vanilla-extract/css";
+
+export const typography = createGlobalTheme(":root", {
+  display1: {
+    fontSize: "40px",
+    lineHeight: "52px",
+    letterSpacing: "-0.0282em",
+  },
+  display2: {
+    fontSize: "36px",
+    lineHeight: "48px",
+    letterSpacing: "-0.027em",
+  },
+  display3: {
+    fontSize: "32px",
+    lineHeight: "42px",
+    letterSpacing: "-0.025em",
+  },
+  title1: {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.023em",
+  },
+  title2: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    letterSpacing: "-0.012em",
+  },
+  title3: {
+    fontSize: "18px",
+    lineHeight: "26px",
+    letterSpacing: "-0.002em",
+  },
+  body1: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "0.0057em",
+  },
+  body2: {
+    fontSize: "15px",
+    lineHeight: "22px",
+    letterSpacing: "0.0096em",
+  },
+  label1: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    letterSpacing: "0.0145em",
+  },
+  label2: {
+    fontSize: "13px",
+    lineHeight: "18px",
+    letterSpacing: "0.0194em",
+  },
+  caption1: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0.0252em",
+  },
+  caption2: {
+    fontSize: "11px",
+    lineHeight: "14px",
+    letterSpacing: "0.0311em",
+  },
+});