diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index caee1aa..ea3b594 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,5 +1,6 @@ diff --git a/src/style/foundation/typo/Typo.stories.tsx b/src/style/foundation/typo/Typo.stories.tsx index a632617..85d1c08 100644 --- a/src/style/foundation/typo/Typo.stories.tsx +++ b/src/style/foundation/typo/Typo.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Primary as PrimaryBlock, Controls, Markdown } from '@storybook/blocks'; import { Meta, StoryObj } from '@storybook/react'; @@ -6,7 +6,7 @@ import { styled } from 'styled-components'; import TypoDocs from './TypoDocs.md?raw'; -import { typos, Typo } from '.'; +import { typos, TypoType } from '.'; const meta: Meta = { title: 'Foundation/Typos', @@ -24,46 +24,116 @@ const meta: Meta = { }; export default meta; -const TypoRow = styled.div` - display: flex; - height: 64px; - align-items: center; +const extractTypoDetails = (typoStyles: string) => { + const lines = typoStyles.replace(/\s/g, '').split(';'); + const fontSizeLine = lines.find((line: string) => line.includes('font-size:')); + const lineHeightLine = lines.find((line: string) => line.includes('line-height:')); + const letterSpacingLine = lines.find((line: string) => line.includes('letter-spacing:')); + + const fontSize = fontSizeLine?.match(/font-size:(\d+)px/)?.[1]; + const lineHeight = lineHeightLine?.match(/line-height:(\d+)px/)?.[1]; + const letterSpacing = letterSpacingLine?.match(/letter-spacing:(-?[0-9]+(\.[0-9]+)*)/)?.[1]; + + return [fontSize, lineHeight, letterSpacing]; +}; + +const TypoGrid = styled.div` + display: grid; + grid-template-columns: 160px minmax(520px, 1fr) 60px 60px 60px; + gap: 20px; + margin-bottom: 80px; `; -const TypoExample = styled.div<{ $typo: Typo }>` +const TypoName = styled.div` + align-self: center; +`; + +const TypoOptionValue = styled.div` + justify-self: center; + align-self: center; +`; + +const TypoExample = styled.div<{ $typo: TypoType }>` + white-space: normal; + line-break: anywhere; ${(props) => props.theme.typo[props.$typo]}; `; -const TypoName = styled.div` - ${(props) => props.theme.typo.caption0}; - color: ${(props) => props.theme.color.textPrimary}; - width: 120px; +const TypoHeader = styled.header` + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 48px; `; -const extractTypoDetails = (typoStyles: string) => { - const lines = typoStyles.replace(/\s/g, '').split(';'); - return lines.filter( - (line: string) => - line.includes('font-size:') || line.includes('font-weight:') || line.includes('line-height:') +const TypoGridTitle = styled.div` + font-weight: 500; + font-size: 22px; +`; + +const TypoPreviewInput = styled.input` + all: unset; + max-width: 700px; + width: 100%; + + border: 1px solid #d2d0d2; + border-radius: 9999px; + padding: 20px 28px; + + &:focus { + border-color: #222022; + } +`; + +const TypoGridHead = () => { + return ( + <> +
이름
+
미리보기
+
+ 크기(px) +
+
+ 행간(px) +
+
+ 자간(em) +
+ ); }; const TypoStory = () => { + const [preview, setPreivew] = useState('나무잎새남실'); + + const onChange = (e: React.ChangeEvent) => { + setPreivew(e.target.value); + }; + return ( <> - {Object.entries(typos).map(([typo, styleText]) => ( - - - {extractTypoDetails(styleText).map((line) => ( - - {line} -
- + + 타이포그래피 +
+ +
+ + + + {Object.entries(typos).map(([typo, typoStyles]) => ( + + {typo} + {preview} + {extractTypoDetails(typoStyles).map((detail, index) => ( + {detail} ))} - - {typo} - - ))} + + ))} + ); }; diff --git a/src/style/foundation/typo/TypoDocs.md b/src/style/foundation/typo/TypoDocs.md index c40d22a..eb07f18 100644 --- a/src/style/foundation/typo/TypoDocs.md +++ b/src/style/foundation/typo/TypoDocs.md @@ -1,12 +1,44 @@ # Typos -YDS Typo는 YDS에서 사용하는 타이포그래피 스타일입니다.
+Handy Typography는 Handy에서 사용하는 타이포그래피 스타일입니다. + +- 폰트는 **Pretendard**를 사용합니다. 단, 필기체와 같은 브랜딩 폰트는 가이드에서 벗어나 자유롭게 사용 가능합니다. +- 폰트의 **한글과 영문을 잘 구분**해서 사용합니다. +- 굵기는 Light(300), Regular(400), Semibold(600) 만 사용합니다. +- subset 파일을 사용하므로, 지원하지 않는 글자에 대해 유의해주세요. + +
+ +또한, 타이포그래피의 이름은 아래의 규칙을 따릅니다. + +> <이름>\_<한글or영문>\_<굵기>\_<크기> + +
+ 모든 타이포그래피 스타일은 아래에서 확인할 수 있습니다. -```typescript +
+ +## 한글 타이포그래피 사용법 + +```ts import { styled } from 'styled-components'; const StyledDiv = styled.div` - ${({ theme }) => theme.typo.body1}; + ${({ theme }) => theme.typo.kr.D1_EN_Sb_96}; `; ``` + +
+ +## 영문 타이포그래피 사용법 + +```ts +import { styled } from 'styled-components'; + +const StyledDiv = styled.div` + ${({ theme }) => theme.typo.en.D1_EN_Sb_96}; +`; +``` + +## 미리보기 diff --git a/src/style/foundation/typo/index.ts b/src/style/foundation/typo/index.ts index be4b484..7f9c2c2 100644 --- a/src/style/foundation/typo/index.ts +++ b/src/style/foundation/typo/index.ts @@ -1,2 +1,3 @@ -export type { FontWeight, Typo } from './typo.type'; +export type { FontWeight, TypoType } from './typo.type'; +export type { Typos } from './typo'; export { typos, fontWeights } from './typo'; diff --git a/src/style/foundation/typo/typo.ts b/src/style/foundation/typo/typo.ts index 501daf5..35f1a8d 100644 --- a/src/style/foundation/typo/typo.ts +++ b/src/style/foundation/typo/typo.ts @@ -1,186 +1,411 @@ -import { FontWeight, Typo } from './typo.type'; +import { FontWeight, TypoType } from './typo.type'; + +export type Typos = Record; export const fontWeights: Record = { + Light: 300, Regular: 400, - Medium: 500, SemiBold: 600, - Bold: 700, }; -export const typos: Record = { - display1: ` +export const typos: Typos = { + D1_Lt_96: ` + font-size: 96px; + font-weight: ${fontWeights.Light}; + line-height: 120px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D1_Rg_96: ` + font-size: 96px; + font-weight: ${fontWeights.Regular}; + line-height: 120px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D1_Sb_96: ` + font-size: 96px; + font-weight: ${fontWeights.SemiBold}; + line-height: 120px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D2_Lt_88: ` + font-size: 88px; + font-weight: ${fontWeights.Light}; + line-height: 114px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D2_Rg_88: ` + font-size: 88px; + font-weight: ${fontWeights.Regular}; + line-height: 114px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D2_Sb_88: ` + font-size: 88px; + font-weight: ${fontWeights.SemiBold}; + line-height: 114px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D3_Lt_80: ` + font-size: 80px; + font-weight: ${fontWeights.Light}; + line-height: 100px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D3_Rg_80: ` + font-size: 80px; + font-weight: ${fontWeights.Regular}; + line-height: 100px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D3_Sb_80: ` + font-size: 80px; + font-weight: ${fontWeights.SemiBold}; + line-height: 100px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D4_Lt_72: ` + font-size: 72px; + font-weight: ${fontWeights.Light}; + line-height: 90px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D4_Rg_72: ` + font-size: 72px; + font-weight: ${fontWeights.Regular}; + line-height: 90px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D4_Sb_72: ` + font-size: 72px; + font-weight: ${fontWeights.SemiBold}; + line-height: 90px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D5_Lt_64: ` font-size: 64px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 80px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D5_Rg_64: ` + font-size: 64px; + font-weight: ${fontWeights.Regular}; + line-height: 80px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - display2: ` + D5_Sb_64: ` + font-size: 64px; + font-weight: ${fontWeights.SemiBold}; + line-height: 80px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D6_Lt_56: ` + font-size: 56px; + font-weight: ${fontWeights.Light}; + line-height: 72px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D6_Rg_56: ` + font-size: 56px; + font-weight: ${fontWeights.Regular}; + line-height: 72px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + D6_Sb_56: ` + font-size: 56px; + font-weight: ${fontWeights.SemiBold}; + line-height: 72px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H1_Lt_48: ` + font-size: 48px; + font-weight: ${fontWeights.Light}; + line-height: 62px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H1_Rg_48: ` + font-size: 48px; + font-weight: ${fontWeights.Regular}; + line-height: 62px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H1_Sb_48: ` + font-size: 48px; + font-weight: ${fontWeights.SemiBold}; + line-height: 62px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H2_Lt_40: ` font-size: 40px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 52px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H2_Rg_40: ` + font-size: 40px; + font-weight: ${fontWeights.Regular}; + line-height: 52px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H2_Sb_40: ` + font-size: 40px; + font-weight: ${fontWeights.SemiBold}; + line-height: 52px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H3_Lt_32: ` + font-size: 32px; + font-weight: ${fontWeights.Light}; + line-height: 42px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + H3_Rg_32: ` + font-size: 32px; + font-weight: ${fontWeights.Regular}; + line-height: 42px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - display3: ` + H3_Sb_32: ` font-size: 32px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.SemiBold}; + line-height: 42px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - title1: ` + T1_Lt_28: ` font-size: 28px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 38px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - title2: ` - font-size: 24px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; - `, - title3: ` - font-size: 22px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; - `, - title4: ` - font-size: 20px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T1_Rg_28: ` + font-size: 28px; + font-weight: ${fontWeights.Regular}; + line-height: 38px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - title5: ` - font-size: 18px; - font-weight: ${fontWeights.Bold}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T1_Sb_28: ` + font-size: 28px; + font-weight: ${fontWeights.SemiBold}; + line-height: 38px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle1: ` - font-size: 32px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T2_Lt_24: ` + font-size: 24px; + font-weight: ${fontWeights.Light}; + line-height: 34px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + T2_Rg_24: ` + font-size: 24px; + font-weight: ${fontWeights.Regular}; + line-height: 34px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle2: ` + T2_Sb_24: ` font-size: 24px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.SemiBold}; + line-height: 34px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle3: ` + T3_Lt_20: ` font-size: 20px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 28px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle4: ` - font-size: 18px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T3_Rg_20: ` + font-size: 20px; + font-weight: ${fontWeights.Regular}; + line-height: 28px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle5: ` - font-size: 16px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T3_Sb_20: ` + font-size: 20px; + font-weight: ${fontWeights.SemiBold}; + line-height: 28px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - subtitle6: ` - font-size: 14px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + T4_Lt_18: ` + font-size: 18px; + font-weight: ${fontWeights.Light}; + line-height: 26px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - body1: ` + T4_Rg_18: ` font-size: 18px; font-weight: ${fontWeights.Regular}; - line-height: 1.5; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 26px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - body2: ` + T4_Sb_18: ` + font-size: 18px; + font-weight: ${fontWeights.SemiBold}; + line-height: 26px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + B1_Lt_16: ` font-size: 16px; - font-weight: ${fontWeights.Regular}; - line-height: 1.5; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 24px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - body3: ` - font-size: 14px; + B1_Rg_16: ` + font-size: 16px; font-weight: ${fontWeights.Regular}; - line-height: 1.5; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 24px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - button0: ` + B1_Sb_16: ` font-size: 16px; - font-weight: ${fontWeights.Medium}; - line-height: 1.4; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.SemiBold}; + line-height: 24px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - button1: ` - font-size: 16px; + B2_Lt_15: ` + font-size: 15px; + font-weight: ${fontWeights.Light}; + line-height: 22px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + B2_Rg_15: ` + font-size: 15px; font-weight: ${fontWeights.Regular}; - line-height: 1.4; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 22px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + B2_Sb_15: ` + font-size: 15px; + font-weight: ${fontWeights.SemiBold}; + line-height: 22px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - button2: ` + B3_Lt_14: ` font-size: 14px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 20px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - button3: ` + B3_Rg_14: ` font-size: 14px; font-weight: ${fontWeights.Regular}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 20px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - button4: ` - font-size: 12px; - font-weight: ${fontWeights.Medium}; - line-height: 1.4; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + B3_Sb_14: ` + font-size: 14px; + font-weight: ${fontWeights.SemiBold}; + line-height: 20px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C1_Lt_13: ` + font-size: 13px; + font-weight: ${fontWeights.Light}; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - caption0: ` + C1_Rg_13: ` + font-size: 13px; + font-weight: ${fontWeights.Regular}; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C1_Sb_13: ` + font-size: 13px; + font-weight: ${fontWeights.SemiBold}; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C2_Lt_12: ` font-size: 12px; - font-weight: ${fontWeights.Medium}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: ${fontWeights.Light}; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - caption1: ` + C2_Rg_12: ` font-size: 12px; font-weight: ${fontWeights.Regular}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C2_Sb_12: ` + font-size: 12px; + font-weight: ${fontWeights.SemiBold}; + line-height: 18px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, - caption2: ` + C3_Lt_11: ` + font-size: 11px; + font-weight: ${fontWeights.Light}; + line-height: 16px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C3_Rg_11: ` font-size: 11px; font-weight: ${fontWeights.Regular}; - line-height: 1.3; - letter-spacing: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + line-height: 16px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; + `, + C3_Sb_11: ` + font-size: 11px; + font-weight: ${fontWeights.SemiBold}; + line-height: 16px; + letter-spacing: -0.02em; + font-family: 'Pretendard Variable', 'sans-serif'; `, }; diff --git a/src/style/foundation/typo/typo.type.ts b/src/style/foundation/typo/typo.type.ts index a66d23a..fcb634c 100644 --- a/src/style/foundation/typo/typo.type.ts +++ b/src/style/foundation/typo/typo.type.ts @@ -1,28 +1,60 @@ -export type Typo = - | 'display1' - | 'display2' - | 'display3' - | 'title1' - | 'title2' - | 'title3' - | 'title4' - | 'title5' - | 'subtitle1' - | 'subtitle2' - | 'subtitle3' - | 'subtitle4' - | 'subtitle5' - | 'subtitle6' - | 'body1' - | 'body2' - | 'body3' - | 'button0' - | 'button1' - | 'button2' - | 'button3' - | 'button4' - | 'caption0' - | 'caption1' - | 'caption2'; +export type TypoType = + | 'D1_Sb_96' + | 'D1_Rg_96' + | 'D1_Lt_96' + | 'D2_Sb_88' + | 'D2_Rg_88' + | 'D2_Lt_88' + | 'D3_Sb_80' + | 'D3_Lt_80' + | 'D3_Rg_80' + | 'D4_Sb_72' + | 'D4_Rg_72' + | 'D4_Lt_72' + | 'D5_Sb_64' + | 'D5_Rg_64' + | 'D5_Lt_64' + | 'D6_Sb_56' + | 'D6_Rg_56' + | 'D6_Lt_56' + | 'H1_Sb_48' + | 'H1_Rg_48' + | 'H1_Lt_48' + | 'H2_Sb_40' + | 'H2_Rg_40' + | 'H2_Lt_40' + | 'H3_Sb_32' + | 'H3_Rg_32' + | 'H3_Lt_32' + | 'T1_Sb_28' + | 'T1_Rg_28' + | 'T1_Lt_28' + | 'T2_Sb_24' + | 'T2_Rg_24' + | 'T2_Lt_24' + | 'T3_Sb_20' + | 'T3_Rg_20' + | 'T3_Lt_20' + | 'T4_Sb_18' + | 'T4_Rg_18' + | 'T4_Lt_18' + | 'B1_Sb_16' + | 'B1_Rg_16' + | 'B1_Lt_16' + | 'B2_Sb_15' + | 'B2_Rg_15' + | 'B2_Lt_15' + | 'B3_Sb_14' + | 'B3_Rg_14' + | 'B3_Lt_14' + | 'C1_Sb_13' + | 'C1_Rg_13' + | 'C1_Lt_13' + | 'C2_Sb_12' + | 'C2_Rg_12' + | 'C2_Lt_12' + | 'C3_Sb_11' + | 'C3_Rg_11' + | 'C3_Lt_11'; -export type FontWeight = 'Regular' | 'Medium' | 'SemiBold' | 'Bold'; +export type FontWeight = 'Light' | 'Regular' | 'SemiBold'; diff --git a/src/style/globalStyle/GlobalStyle.tsx b/src/style/globalStyle/GlobalStyle.tsx index ff9ab98..51b6ae3 100644 --- a/src/style/globalStyle/GlobalStyle.tsx +++ b/src/style/globalStyle/GlobalStyle.tsx @@ -3,8 +3,10 @@ import WebFont from 'webfontloader'; WebFont.load({ custom: { - families: ['Spoqa Han Sans Neo'], - urls: ['//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css'], + families: ['Pretendard Variable'], + urls: [ + '//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css', + ], }, }); @@ -13,6 +15,6 @@ export const GlobalStyles = createGlobalStyle` box-sizing: border-box; margin: 0; padding: 0; - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-family: 'Pretendard Variable', 'sans-serif'; } `; diff --git a/src/style/theme/theme.type.ts b/src/style/theme/theme.type.ts index 655cd88..e855111 100644 --- a/src/style/theme/theme.type.ts +++ b/src/style/theme/theme.type.ts @@ -1,7 +1,7 @@ -import { BaseColorPalette, SemanticColorPalette, Typo } from '../foundation'; +import { BaseColorPalette, SemanticColorPalette, KRENTypos } from '../foundation'; export type YDSTheme = { color: SemanticColorPalette; baseColor: BaseColorPalette; - typo: Record; + typo: KRENTypos; };