[CHORE] 디자인 시스템 토큰 설정

src/styles/colors.ts

@@ -0,0 +1,143 @@
+export const primitive = {
+  white: { 0: '#FFFFFF' },
+  gray: {
+    0: '#FBFBFF',
+    50: '#F7F8FB',
+    100: '#E8EBF3',
+    150: '#D6D8DC',
+    200: '#B5B9C0',
+    250: '#A3A7AF',
+    300: '#91969D',
+    350: '#848A91',
+    400: '#6D737D',
+    450: '#575A67',
+    500: '#454954',
+    550: '#383B46',
+    600: '#2D303D',
+    650: '#0F1117',
+  },
+  blue: {
+    50: '#EBF6FF',
+    100: '#D6EDFF',
+    150: '#BAE0FF',
+    200: '#A9D9FF',
+    250: '#95D0FF',
+    300: '#76C2FF',
+    350: '#5CB6FF',
+    400: '#219BFF',
+    450: '#0083EF',
+    500: '#0070EF',
+    550: '#016CC4',
+    600: '#004781',
+  },
+  green: {
+    50: '#F1FCFA',
+    100: '#E8FBF8',
+    150: '#D7FAF5',
+    200: '#C9F3ED',
+    250: '#ADECE3',
+    300: '#93E8DD',
+    350: '#6EDBCD',
+    400: '#20C9B5',
+    450: '#05BEA7',
+    500: '#05B09B',
+    550: '#046256',
+  },
+  red: {
+    50: '#FFEEEE',
+    100: '#FFD4D6',
+    150: '#FEAFB4',
+    200: '#FB8889',
+    250: '#F66570',
+    300: '#F04452',
+    350: '#E42939',
+    400: '#D22030',
+    450: '#BC1B2A',
+    500: '#A51926',
+    550: '#7F0410',
+  },
+  orange: {
+    50: '#FFF0E9',
+    100: '#FFE1D3',
+    150: '#FFC6AD',
+    200: '#FFA47B',
+    250: '#FF8552',
+    300: '#FF6723',
+    350: '#FF590E',
+    400: '#D94400',
+    450: '#95380E',
+    500: '#642205',
+    550: '#5E200C',
+  },
+  extra: {
+    purple: { 300: '#5659FF' },
+    cyan: { 300: '#00BDDE' },
+    mint: { 300: '#00EED1' },
+  },
+} as const;
+
+const { white, gray, blue, green, red, orange, extra } = primitive;
+
+export const semantic = {
+  text: {
+    default: {
+      strong: gray[650],
+      normal: gray[600],
+      neutral: gray[550],
+      weak: gray[350],
+      inverse: gray[0],
+    },
+    brand: {
+      assistive: blue[500],
+      normal: blue[550],
+      strong: blue[600],
+    },
+    feedback: {
+      success: green[500],
+      warning: orange[500],
+      alert: red[350],
+    },
+  },
+  surface: {
+    subtle: gray[0],
+    input: white[0],
+    default: gray[50],
+    strong: gray[200],
+    inverse: gray[450],
+    disabled: gray[100],
+    focused: blue[50],
+    brand: blue[100],
+    success: green[100],
+    warning: orange[50],
+    alert: red[50],
+  },
+  border: {
+    subtle: gray[50],
+    default: gray[100],
+    strong: gray[250],
+    focused: blue[450],
+    disabled: gray[150],
+    warning: orange[100],
+    alert: red[100],
+  },
+  action: {
+    default: blue[400],
+    pressed: blue[500],
+    disabled: gray[150],
+  },
+  icon: {
+    primary: gray[500],
+    secondary: gray[200],
+    disabled: gray[100],
+    inverse: gray[0],
+    brand: blue[450],
+    success: green[450],
+    warning: orange[300],
+    alert: red[300],
+  },
+  categorial: {
+    1: extra.purple[300],
+    2: extra.cyan[300],
+    3: extra.mint[300],
+  },
+} as const;

src/styles/measurement.ts

@@ -0,0 +1,70 @@
+export const unit = {
+  0: 0,
+  2: 2,
+  4: 4,
+  8: 8,
+  10: 10,
+  12: 12,
+  16: 16,
+  20: 20,
+  24: 24,
+  28: 28,
+  32: 32,
+  36: 36,
+  40: 40,
+  44: 44,
+  48: 48,
+  52: 52,
+  56: 56,
+  60: 60,
+  64: 64,
+  68: 68,
+  72: 72,
+  999: 999,
+} as const;
+
+export const radius = {
+  small: unit[4],
+  medium: unit[8],
+  large: unit[16],
+  full: unit[999],
+} as const;
+
+export const padding = {
+  4: unit[4],
+  8: unit[8],
+  12: unit[12],
+  16: unit[16],
+  20: unit[20],
+  24: unit[24],
+} as const;
+
+export const gap = {
+  2: unit[2],
+  4: unit[4],
+  8: unit[8],
+  12: unit[12],
+  16: unit[16],
+  20: unit[20],
+  24: unit[24],
+  28: unit[28],
+  32: unit[32],
+  36: unit[36],
+  40: unit[40],
+  48: unit[48],
+  56: unit[56],
+  64: unit[64],
+  72: unit[72],
+} as const;
+
+export const lineWeight = {
+  subtle: 0.5,
+  regular: 1,
+  semiBold: 1.5,
+  bold: 2,
+} as const;
+
+export const grid = {
+  margin: unit[24],
+  gutter: unit[8],
+} as const;

src/styles/typography.ts

@@ -0,0 +1,111 @@
+// Pretendard 폰트 파일을 불러오기 전까지는 스타일에 적용하지 않습니다.
+export const fontFamily = {
+  pretendard: 'Pretendard',
+} as const;
+
+export const fontSize = {
+  10: 10,
+  12: 12,
+  13: 13,
+  14: 14,
+  15: 15,
+  16: 16,
+  18: 18,
+  20: 20,
+  24: 24,
+  30: 30,
+} as const;
+
+export const lineHeight = {
+  10: 14,
+  12: 16,
+  13: 18,
+  14: 20,
+  15: 22,
+  16: 24,
+  18: 26,
+  20: 28,
+  22: 30,
+  24: 32,
+  26: 34,
+} as const;
+
+export const letterSpacing = {
+  none: 0,
+  normal: -0.2,
+  tight: -0.6,
+} as const;
+
+export const fontWeight = {
+  regular: '400',
+  medium: '500',
+  semiBold: '600',
+  bold: '700',
+} as const;
+
+const text = (
+  size: keyof typeof fontSize,
+  weight: keyof typeof fontWeight,
+  height: keyof typeof lineHeight,
+  spacing: keyof typeof letterSpacing,
+) => ({
+  fontSize: fontSize[size],
+  fontWeight: fontWeight[weight],
+  lineHeight: lineHeight[height],
+  letterSpacing: letterSpacing[spacing],
+});
+
+export const typography = {
+  title: {
+    1: { bold: text(30, 'bold', 26, 'normal') },
+    2: {
+      bold: text(24, 'bold', 24, 'normal'),
+      semiBold: text(24, 'semiBold', 24, 'normal'),
+    },
+  },
+  heading: {
+    1: {
+      bold: text(20, 'bold', 18, 'normal'),
+      semiBold: text(20, 'semiBold', 18, 'normal'),
+      medium: text(20, 'medium', 18, 'normal'),
+    },
+  },
+  body: {
+    1: {
+      bold: text(18, 'bold', 16, 'normal'),
+      semiBold: text(18, 'semiBold', 16, 'normal'),
+      medium: text(18, 'medium', 16, 'normal'),
+      regular: text(18, 'regular', 16, 'normal'),
+    },
+    2: {
+      bold: text(16, 'bold', 15, 'normal'),
+      semiBold: text(16, 'semiBold', 15, 'normal'),
+      medium: text(16, 'medium', 15, 'normal'),
+      regular: text(16, 'regular', 15, 'normal'),
+    },
+    3: {
+      bold: text(15, 'bold', 14, 'none'),
+      semiBold: text(15, 'semiBold', 14, 'none'),
+      medium: text(15, 'medium', 14, 'none'),
+      regular: text(15, 'regular', 14, 'none'),
+    },
+    4: {
+      semiBold: text(14, 'semiBold', 13, 'none'),
+      medium: text(14, 'medium', 13, 'none'),
+      regular: text(14, 'regular', 13, 'none'),
+    },
+    5: {
+      semiBold: text(13, 'semiBold', 13, 'none'),
+      medium: text(13, 'medium', 13, 'none'),
+      regular: text(13, 'regular', 13, 'none'),
+    },
+  },
+  caption: {
+    1: {
+      bold: text(12, 'bold', 10, 'none'),
+      semiBold: text(12, 'semiBold', 10, 'none'),
+      medium: text(12, 'medium', 10, 'none'),
+      regular: text(12, 'regular', 10, 'none'),
+    },
+  },
+} as const;