From 3c82f7b3bb0f0a7b60f4767cf5df00725fea0f00 Mon Sep 17 00:00:00 2001 From: Giwon Date: Wed, 28 Aug 2024 21:31:46 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20Text=20=EA=B5=B5=EA=B8=B0=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=A7=80=EC=9B=90=20+=20global.ts=20weigh?= =?UTF-8?q?t=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/typography/Text.style.ts | 19 +++++++++++++++++++ src/components/typography/Text.tsx | 1 + src/styles/global.ts | 5 +++++ 3 files changed, 25 insertions(+) diff --git a/src/components/typography/Text.style.ts b/src/components/typography/Text.style.ts index 207c22a..0711d38 100644 --- a/src/components/typography/Text.style.ts +++ b/src/components/typography/Text.style.ts @@ -21,6 +21,25 @@ export const TextElement = styled.span` } }}; + font-weight: ${(props) => { + switch (props.weight) { + case "l": + return "var(--font-weight-l)"; + case "r": + return "var(--font-weight-r)"; + case "b": + return "var(--font-weight-b)"; + case "eb": + return "var(--font-weight-eb)"; + case "h": + return "var(--font-weight-h)"; + case undefined: + return "var(--font-weight-r)"; + default: + return props.weight; + } + }}; + color: ${(props) => { switch (props.color) { case "primary": diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx index 389d252..2c4158e 100644 --- a/src/components/typography/Text.tsx +++ b/src/components/typography/Text.tsx @@ -4,6 +4,7 @@ import { TextElement } from "./Text.style"; export interface TextProps extends React.ComponentProps<"span"> { size: "xs" | "s" | "m" | "l" | "xl"; + weight?: "l" | "r" | "b" | "eb" | "h"; children: React.ReactNode; } diff --git a/src/styles/global.ts b/src/styles/global.ts index e1996c6..fcae0c0 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -28,6 +28,11 @@ export const GlobalStyle = css` --font-size-m: 18px; --font-size-s: 16px; --font-size-xs: 13px; + --font-weight-l: 300; + --font-weight-r: 400; + --font-weight-b: 700; + --font-weight-eb: 800; + --font-weight-h: 900; --color-primary: #37cdcd; --color-primary-300: #64e4e0; From 956e9a68d94b2c02f7dd49ffb06d858a5535e932 Mon Sep 17 00:00:00 2001 From: Giwon Date: Wed, 28 Aug 2024 22:27:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=EB=8B=A8=EC=B6=95=EC=96=B4=20->?= =?UTF-8?q?=20=EC=A0=84=EC=B2=B4=20=EC=9D=B4=EB=A6=84=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/typography/Text.style.ts | 22 +++++++++++----------- src/components/typography/Text.tsx | 2 +- src/styles/global.ts | 10 +++++----- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/typography/Text.style.ts b/src/components/typography/Text.style.ts index 0711d38..b3a441c 100644 --- a/src/components/typography/Text.style.ts +++ b/src/components/typography/Text.style.ts @@ -23,18 +23,18 @@ export const TextElement = styled.span` font-weight: ${(props) => { switch (props.weight) { - case "l": - return "var(--font-weight-l)"; - case "r": - return "var(--font-weight-r)"; - case "b": - return "var(--font-weight-b)"; - case "eb": - return "var(--font-weight-eb)"; - case "h": - return "var(--font-weight-h)"; + case "light": + return "var(--font-weight-lighr)"; + case "regular": + return "var(--font-weight-regular)"; + case "bold": + return "var(--font-weight-bold)"; + case "extrabold": + return "var(--font-weight-extrabold)"; + case "heavy": + return "var(--font-weight-heavy)"; case undefined: - return "var(--font-weight-r)"; + return "var(--font-weight-regular)"; default: return props.weight; } diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx index 2c4158e..1b62dd8 100644 --- a/src/components/typography/Text.tsx +++ b/src/components/typography/Text.tsx @@ -4,7 +4,7 @@ import { TextElement } from "./Text.style"; export interface TextProps extends React.ComponentProps<"span"> { size: "xs" | "s" | "m" | "l" | "xl"; - weight?: "l" | "r" | "b" | "eb" | "h"; + weight?: "light" | "regular" | "bold" | "extrabold" | "heavy"; children: React.ReactNode; } diff --git a/src/styles/global.ts b/src/styles/global.ts index fcae0c0..dfc4987 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -28,11 +28,11 @@ export const GlobalStyle = css` --font-size-m: 18px; --font-size-s: 16px; --font-size-xs: 13px; - --font-weight-l: 300; - --font-weight-r: 400; - --font-weight-b: 700; - --font-weight-eb: 800; - --font-weight-h: 900; + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-bold: 700; + --font-weight-extrabold: 800; + --font-weight-heavy: 900; --color-primary: #37cdcd; --color-primary-300: #64e4e0; From 6170a278d61b155d1e245c44979db080f66ae176 Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Thu, 29 Aug 2024 09:40:10 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=9C=20f?= =?UTF-8?q?ont-weight=20css=20var=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/styles/global.ts b/src/styles/global.ts index d520280..668441b 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -21,18 +21,13 @@ export const GlobalStyle = css` a { text-decoration: none; } - + :root { --font-size-xl: 24px; --font-size-l: 22px; --font-size-m: 18px; --font-size-s: 16px; --font-size-xs: 13px; - --font-weight-light: 300; - --font-weight-regular: 400; - --font-weight-bold: 700; - --font-weight-extrabold: 800; - --font-weight-heavy: 900; --font-weight-light: 300; --font-weight-regular: 400;