Style: 색상 테마 설정 및 공용 font style 추가

src/styles/font.css.ts

@@ -0,0 +1,74 @@
+import { style } from '@vanilla-extract/css';
+
+export const largeTitle = style({
+  fontSize: '3.4rem',
+  fontWeight: '800',
+  letterSpacing: '-0.102rem',
+});
+
+export const title1 = style({
+  fontSize: '2.8rem',
+  fontWeight: '700',
+  letterSpacing: '-0.084rem',
+});
+
+export const title2 = style({
+  fontSize: '2.2rem',
+  fontWeight: '600',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.066rem',
+});
+
+export const title3 = style({
+  fontSize: '2rem',
+  fontWeight: '600',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.06rem',
+});
+
+export const headline = style({
+  fontSize: '1.7rem',
+  fontWeight: '600',
+  letterSpacing: '-0.051rem',
+});
+
+export const body1 = style({
+  fontSize: '1.6rem',
+  fontWeight: '400',
+  lineHeight: '1.6rem',
+  letterSpacing: '-0.48px',
+});
+
+export const body2 = style({
+  fontSize: '1.5rem',
+  fontWeight: '400',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.045rem',
+});
+
+export const body3 = style({
+  fontSize: '1.4rem',
+  fontWeight: '400',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.042rem',
+});
+
+export const footnote = style({
+  fontSize: '1.3rem',
+  fontWeight: '400',
+  lineHeight: '1.6rem',
+});
+
+export const caption1 = style({
+  fontSize: '1.2rem',
+  fontWeight: '400',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.036rem',
+});
+
+export const caption2 = style({
+  fontSize: '1.1rem',
+  fontWeight: '400',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.033rem',
+});

src/styles/theme.css.ts

@@ -0,0 +1,33 @@
+import { createThemeContract, createGlobalTheme } from '@vanilla-extract/css';
+
+export const vars = createThemeContract({
+  color: {
+    black: 'color-black',
+    white: 'color-white',
+    gray9: 'color-gray9',
+    gray7: 'color-gray7',
+    gray5: 'color-gray5',
+    gray3: 'color-gray3',
+    blue: 'color-blue',
+    skyblue: 'color-skyblue',
+    lightblue: 'color-lightblue',
+    yellow: 'color-yellow',
+    red: 'color-red',
+  },
+});
+
+createGlobalTheme(':root', vars, {
+  color: {
+    black: '#19191B',
+    white: '#fff',
+    gray9: '#61646B',
+    gray7: '#AFB1B6',
+    gray5: '#EFEFF0',
+    gray3: '#FAFAFA',
+    blue: '#0047FF',
+    skyblue: '#82C3FF',
+    lightblue: '#EBF4FF',
+    yellow: '#FFF6A5',
+    red: '#FF5454',
+  },
+});