From 50a76e7bb0e01d7e5df2b5fdb83a1144f6487c39 Mon Sep 17 00:00:00 2001 From: bae129 Date: Wed, 4 Nov 2026 10:29:02 +0900 Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=83=89=EC=83=81=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colors.ts | 141 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 src/styles/colors.ts diff --git a/src/styles/colors.ts b/src/styles/colors.ts new file mode 100644 index 0000000..a5373ab --- /dev/null +++ b/src/styles/colors.ts @@ -0,0 +1,141 @@ +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 { 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], + default: gray[50], + strong: gray[200], + 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; From c80eed22a9649838d050e1ffe11ee77a251e8971 Mon Sep 17 00:00:00 2001 From: bae129 Date: Wed, 4 Nov 2026 10:31:32 +0900 Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EA=B0=84=EA=B2=A9=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/measurement.ts | 70 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/styles/measurement.ts diff --git a/src/styles/measurement.ts b/src/styles/measurement.ts new file mode 100644 index 0000000..a71227f --- /dev/null +++ b/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; From 10d86704aaf15018e3052a4265217f089fb76fe0 Mon Sep 17 00:00:00 2001 From: bae129 Date: Wed, 4 Nov 2026 10:37:48 +0900 Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=ED=83=80=EC=9D=B4=ED=8F=AC?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=BC=20=ED=86=A0=ED=81=B0=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/typography.ts | 96 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/styles/typography.ts diff --git a/src/styles/typography.ts b/src/styles/typography.ts new file mode 100644 index 0000000..dc3b0ef --- /dev/null +++ b/src/styles/typography.ts @@ -0,0 +1,96 @@ +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, +} as const; + +export const letterSpacing = { + none: 0, + normal: -0.2, + tight: -0.6, +} as const; + +export const fontWeight = { + 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', 22, 'normal') }, + 2: { + bold: text(24, 'bold', 20, 'normal'), + semiBold: text(24, 'semiBold', 20, 'normal'), + }, + }, + heading: { + 1: { + bold: text(20, 'bold', 18, 'normal'), + semiBold: text(20, 'semiBold', 18, 'normal'), + }, + }, + body: { + 1: { + bold: text(18, 'bold', 16, 'normal'), + semiBold: text(18, 'semiBold', 16, 'normal'), + medium: text(18, 'medium', 16, 'normal'), + }, + 2: { + bold: text(16, 'bold', 15, 'normal'), + semiBold: text(16, 'semiBold', 15, 'normal'), + medium: text(16, 'medium', 15, 'normal'), + }, + 3: { + bold: text(15, 'bold', 14, 'none'), + semiBold: text(15, 'semiBold', 14, 'none'), + medium: text(15, 'medium', 14, 'none'), + }, + 4: { + semiBold: text(14, 'semiBold', 13, 'none'), + medium: text(14, 'medium', 13, 'none'), + }, + 5: { + semiBold: text(13, 'semiBold', 12, 'none'), + medium: text(13, 'medium', 12, 'none'), + }, + }, + caption: { + 1: { + bold: text(12, 'bold', 10, 'none'), + semiBold: text(12, 'semiBold', 10, 'none'), + medium: text(12, 'medium', 10, 'none'), + }, + }, +} as const; From 976d4f5bf3c19317a73e70b453f965e32796c40c Mon Sep 17 00:00:00 2001 From: bae129 Date: Sun, 8 Nov 2026 20:53:49 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20surface=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EB=B0=8F=20=ED=83=80=EC=9D=B4=ED=8F=AC=EA=B7=B8=EB=9E=98?= =?UTF-8?q?=ED=94=BC=20=EC=8A=A4=ED=8E=99=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colors.ts | 4 +++- src/styles/typography.ts | 25 ++++++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index a5373ab..1d3b5f1 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -76,7 +76,7 @@ export const primitive = { }, } as const; -const { gray, blue, green, red, orange, extra } = primitive; +const { white, gray, blue, green, red, orange, extra } = primitive; export const semantic = { text: { @@ -100,8 +100,10 @@ export const semantic = { }, 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], diff --git a/src/styles/typography.ts b/src/styles/typography.ts index dc3b0ef..d4351cd 100644 --- a/src/styles/typography.ts +++ b/src/styles/typography.ts @@ -1,3 +1,8 @@ +// Pretendard 폰트 파일을 불러오기 전까지는 스타일에 적용하지 않습니다. +export const fontFamily = { + pretendard: 'Pretendard', +} as const; + export const fontSize = { 10: 10, 12: 12, @@ -21,6 +26,8 @@ export const lineHeight = { 18: 26, 20: 28, 22: 30, + 24: 32, + 26: 34, } as const; export const letterSpacing = { @@ -30,6 +37,7 @@ export const letterSpacing = { } as const; export const fontWeight = { + regular: '400', medium: '500', semiBold: '600', bold: '700', @@ -49,16 +57,17 @@ const text = ( export const typography = { title: { - 1: { bold: text(30, 'bold', 22, 'normal') }, + 1: { bold: text(30, 'bold', 26, 'normal') }, 2: { - bold: text(24, 'bold', 20, 'normal'), - semiBold: text(24, 'semiBold', 20, 'normal'), + 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: { @@ -66,24 +75,29 @@ export const typography = { 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', 12, 'none'), - medium: text(13, 'medium', 12, 'none'), + semiBold: text(13, 'semiBold', 13, 'none'), + medium: text(13, 'medium', 13, 'none'), + regular: text(13, 'regular', 13, 'none'), }, }, caption: { @@ -91,6 +105,7 @@ export const typography = { 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;