From e7e2aecd6a0ac70f1eb1fd39ce11115f443bbe4b Mon Sep 17 00:00:00 2001 From: SeHyun Date: Thu, 16 Jan 2025 15:58:48 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20colors,=20fonts,=20shadows=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20=EC=82=AC=EC=9A=A9=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20theme,=20=EA=B0=95=EC=A0=9C=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20sprinkle=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .pnp.cjs | 24 ++++++++ package.json | 1 + src/styles/sprinkle.css.ts | 60 +++++++++++++++++++ src/styles/theme.css.ts | 15 +++++ src/styles/themes/theme.css.ts | 3 - src/styles/token.ts | 105 +++++++++++++++++++++++++++++++++ yarn.lock | 10 ++++ 7 files changed, 215 insertions(+), 3 deletions(-) create mode 100644 src/styles/sprinkle.css.ts create mode 100644 src/styles/theme.css.ts delete mode 100644 src/styles/themes/theme.css.ts create mode 100644 src/styles/token.ts diff --git a/.pnp.cjs b/.pnp.cjs index 997097d..b5e68ae 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -32,6 +32,7 @@ const RAW_RUNTIME_STATE = ["@types/react", "npm:18.3.11"],\ ["@types/react-dom", "npm:18.3.1"],\ ["@vanilla-extract/css", "npm:1.16.0"],\ + ["@vanilla-extract/sprinkles", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:1.6.3"],\ ["@vanilla-extract/vite-plugin", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:4.0.17"],\ ["@vitejs/plugin-react", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:4.3.2"],\ ["eslint", "npm:8.57.1"],\ @@ -1728,6 +1729,28 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@vanilla-extract/sprinkles", [\ + ["npm:1.6.3", {\ + "packageLocation": "../../.yarn/berry/cache/@vanilla-extract-sprinkles-npm-1.6.3-8553c69abf-10c0.zip/node_modules/@vanilla-extract/sprinkles/",\ + "packageDependencies": [\ + ["@vanilla-extract/sprinkles", "npm:1.6.3"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:1.6.3", {\ + "packageLocation": "./.yarn/__virtual__/@vanilla-extract-sprinkles-virtual-c14109d3c0/3/.yarn/berry/cache/@vanilla-extract-sprinkles-npm-1.6.3-8553c69abf-10c0.zip/node_modules/@vanilla-extract/sprinkles/",\ + "packageDependencies": [\ + ["@vanilla-extract/sprinkles", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:1.6.3"],\ + ["@types/vanilla-extract__css", null],\ + ["@vanilla-extract/css", "npm:1.16.0"]\ + ],\ + "packagePeers": [\ + "@types/vanilla-extract__css",\ + "@vanilla-extract/css"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@vanilla-extract/vite-plugin", [\ ["npm:4.0.17", {\ "packageLocation": "../../.yarn/berry/cache/@vanilla-extract-vite-plugin-npm-4.0.17-72e0dbf42b-10c0.zip/node_modules/@vanilla-extract/vite-plugin/",\ @@ -2228,6 +2251,7 @@ const RAW_RUNTIME_STATE = ["@types/react", "npm:18.3.11"],\ ["@types/react-dom", "npm:18.3.1"],\ ["@vanilla-extract/css", "npm:1.16.0"],\ + ["@vanilla-extract/sprinkles", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:1.6.3"],\ ["@vanilla-extract/vite-plugin", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:4.0.17"],\ ["@vitejs/plugin-react", "virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:4.3.2"],\ ["eslint", "npm:8.57.1"],\ diff --git a/package.json b/package.json index 534ae2d..4259299 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@eslint/compat": "^1.2.5", "@vanilla-extract/css": "^1.16.0", + "@vanilla-extract/sprinkles": "^1.6.3", "@vanilla-extract/vite-plugin": "^4.0.17", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^18.0.0", diff --git a/src/styles/sprinkle.css.ts b/src/styles/sprinkle.css.ts new file mode 100644 index 0000000..29fd96d --- /dev/null +++ b/src/styles/sprinkle.css.ts @@ -0,0 +1,60 @@ +import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles"; +import { colors, fontSizes, fontWeights } from "./token"; + +/** + * responsiveProperties : Box 모델과 관련된 CSS 속성을 정의 + */ +const responsiveProperties = defineProperties({ + conditions : { + mobile: {}, + tablet: { "@media": "screen and (min-width: 768px)" }, + desktop: { "@media": "screen and (min-width: 1024px)" } + }, + defaultCondition : 'desktop', + properties: { + display : ['none', 'block', 'inline-block', 'flex', 'grid'], + flexDirection : ['row', 'column'], + justifyContent : ['center', 'flex-start', 'flex-end', 'space-between', 'space-around'], + alignItems : ['center', 'flex-start', 'flex-end', 'stretch'], + placeItems : ['center', 'flex-start', 'flex-end', 'stretch'], + } +}); + +/** + * colorProperties : 색상과 관련된 CSS 속성을 정의 + */ +const colorProperties = defineProperties({ + conditions : { + lightMode : {}, + }, + defaultCondition : 'lightMode', + properties: { + color : colors, + background : colors + } +}); + +/** + * typeScaleProperties : 텍스트와 관련된 CSS 속성을 정의 + */ +const typeScaleProperties = defineProperties({ + properties: { + fontSize : fontSizes, + fontWeight : fontWeights + } +}) + + +/** + * sprinkles : Sprinkle 객체 + */ +export const sprinkles = createSprinkles( + responsiveProperties, + colorProperties, + typeScaleProperties +); + +/** + * Sprinkles : Sprinkle 객체 타입 + */ +export type Sprinkles = Parameters[0]; diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts new file mode 100644 index 0000000..ea50e69 --- /dev/null +++ b/src/styles/theme.css.ts @@ -0,0 +1,15 @@ +import { createGlobalTheme } from "@vanilla-extract/css"; +import { colors, shadows } from "./token"; +import { futura, pretendard } from "./global/globalText.css"; + +export const vars = createGlobalTheme(':root', { + // design system color(neutral, blue, red, yellow, green, teal) + colors, + // design system shadow(small, medium, large, xlarge) + shadows, + // typography 사용이 아닌 css 변수로 사용이 필요할 경우 -- 미권장 + font : { + basic : pretendard, + logo : futura + } +}) \ No newline at end of file diff --git a/src/styles/themes/theme.css.ts b/src/styles/themes/theme.css.ts deleted file mode 100644 index 804ed73..0000000 --- a/src/styles/themes/theme.css.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createTheme } from '@vanilla-extract/css' - -export const [themeClass, vars] = createTheme({}) diff --git a/src/styles/token.ts b/src/styles/token.ts new file mode 100644 index 0000000..a45b398 --- /dev/null +++ b/src/styles/token.ts @@ -0,0 +1,105 @@ +export const fonts = { +} as const; + +export const fontSizes = { + 'largeTitle' : { + fontSize : 26, + lineHeight : 32 + }, + 'title1' : { + fontSize : 22, + lineHeight : 26 + }, + 'title2' : { + fontSize : 17, + lineHeight : 22 + }, + 'title3' : { + fontSize : 15, + lineHeight : 20 + }, + 'headline' : { + fontSize : 13, + lineHeight : 16 + }, + 'subHeadline' : { + fontSize : 11, + lineHeight : 14 + }, + 'body' :{ + fontSize : 13, + lineHeight : 16 + }, + 'caption' : { + fontSize : 10, + lineHeight : 13 + } +} as const; + +export const fontWeights = { + regular : '400', + medium : '500', + semibold : '600', + bold : '700' +} as const; + +export const colors = { + // neutral 텍스트 기본 색상 + 'neutral-0' : '#000000', + 'neutral-100' : '#7a8699', + 'neutral-200' : '#6b788e', + 'neutral-300' : '#5d6b82', + 'neutral-400' : '#505f79', + 'neutral-500' : '#42526d', + 'neutral-600' : '#354764', + 'neutral-700' : '#243757', + 'neutral-800' : '#15294b', + 'neutral-900' : '#091e42', + // blue 파란색 + 'blue-50' : '#e6f0ff', + 'blue-75' : '#96c0ff', + 'blue-100' : '#6ba6ff', + 'blue-200' : '#2b7fff', + 'blue-300' : '#0065ff', + 'blue-400' : '#0047b3', + 'blue-500' : '#003e9c', + // red 빨간색 + 'red-50' : '#f9e9e6', + 'red-75' : '#e5a696', + 'red-100' : '#da816b', + 'red-200' : '#ca4b2b', + 'red-300' : '#bf2600', + 'red-400' : '#861b00', + 'red-500' : '#751700', + // yellow 노란색 + 'yellow-50' : '#fff3e6', + 'yellow-75' : '#ffcf96', + 'yellow-100' : '#ffbc6b', + 'yellow-200' : '#ff9f2b', + 'yellow-300' : '#ff8b00', + 'yellow-400' : '#b36100', + 'yellow-500' : '#9c5500', + // green 초록색 + 'green-50' : '#e6f0ec', + 'green-75' : '#96c0b2', + 'green-100' : '#6ba693', + 'green-200' : '#2b8064', + 'green-300' : '#006644', + 'green-400' : '#004730', + 'green-500' : '#003e29', + // teal 청록색 + 'teal-50' : '#e6f4f6', + 'teal-75' : '#96d0db', + 'teal-100' : '#6bbdcb', + 'teal-200' : '#2ba0b5', + 'teal-300' : '#008da6', + 'teal-400' : '#006374', + 'teal-500' : '#005665' +} as const; + +export const shadows = { + small : '0px 1px 2px rgba(0, 0, 0, 0.05)', + medium : '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)', + large : '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)', + xlarge : '0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1)' +} as const; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c122e8b..43acdbe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1351,6 +1351,15 @@ __metadata: languageName: node linkType: hard +"@vanilla-extract/sprinkles@npm:^1.6.3": + version: 1.6.3 + resolution: "@vanilla-extract/sprinkles@npm:1.6.3" + peerDependencies: + "@vanilla-extract/css": ^1.0.0 + checksum: 10c0/17e03af9d090aa175bdeae646ae4a5bf1da37b7e473caa4ab92efbbd7678e53137e10281a0669f50ab5bd985a59e621da2bfc3e0cc28bded32becd72b8cfaf13 + languageName: node + linkType: hard + "@vanilla-extract/vite-plugin@npm:^4.0.17": version: 4.0.17 resolution: "@vanilla-extract/vite-plugin@npm:4.0.17" @@ -1783,6 +1792,7 @@ __metadata: "@types/react": "npm:^18.3.10" "@types/react-dom": "npm:^18.3.0" "@vanilla-extract/css": "npm:^1.16.0" + "@vanilla-extract/sprinkles": "npm:^1.6.3" "@vanilla-extract/vite-plugin": "npm:^4.0.17" "@vitejs/plugin-react": "npm:^4.3.2" eslint: "npm:^8.56.0" From 2db62ceab07cc0e0ee854b59bcc114c86c11e99a Mon Sep 17 00:00:00 2001 From: SeHyun Date: Thu, 16 Jan 2025 15:59:12 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20css.ts=20=ED=8C=8C=EC=9D=BC=20prett?= =?UTF-8?q?ier=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/sprinkle.css.ts | 57 ++++++------ src/styles/theme.css.ts | 16 ++-- src/styles/token.ts | 173 ++++++++++++++++++------------------- 3 files changed, 125 insertions(+), 121 deletions(-) diff --git a/src/styles/sprinkle.css.ts b/src/styles/sprinkle.css.ts index 29fd96d..ed3fb3d 100644 --- a/src/styles/sprinkle.css.ts +++ b/src/styles/sprinkle.css.ts @@ -1,50 +1,55 @@ -import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles"; -import { colors, fontSizes, fontWeights } from "./token"; +import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles' +import { colors, fontSizes, fontWeights } from './token' /** * responsiveProperties : Box 모델과 관련된 CSS 속성을 정의 */ const responsiveProperties = defineProperties({ - conditions : { + conditions: { mobile: {}, - tablet: { "@media": "screen and (min-width: 768px)" }, - desktop: { "@media": "screen and (min-width: 1024px)" } + tablet: { '@media': 'screen and (min-width: 768px)' }, + desktop: { '@media': 'screen and (min-width: 1024px)' }, }, - defaultCondition : 'desktop', + defaultCondition: 'desktop', properties: { - display : ['none', 'block', 'inline-block', 'flex', 'grid'], - flexDirection : ['row', 'column'], - justifyContent : ['center', 'flex-start', 'flex-end', 'space-between', 'space-around'], - alignItems : ['center', 'flex-start', 'flex-end', 'stretch'], - placeItems : ['center', 'flex-start', 'flex-end', 'stretch'], - } -}); + display: ['none', 'block', 'inline-block', 'flex', 'grid'], + flexDirection: ['row', 'column'], + justifyContent: [ + 'center', + 'flex-start', + 'flex-end', + 'space-between', + 'space-around', + ], + alignItems: ['center', 'flex-start', 'flex-end', 'stretch'], + placeItems: ['center', 'flex-start', 'flex-end', 'stretch'], + }, +}) /** * colorProperties : 색상과 관련된 CSS 속성을 정의 */ const colorProperties = defineProperties({ - conditions : { - lightMode : {}, + conditions: { + lightMode: {}, }, - defaultCondition : 'lightMode', + defaultCondition: 'lightMode', properties: { - color : colors, - background : colors - } -}); + color: colors, + background: colors, + }, +}) /** * typeScaleProperties : 텍스트와 관련된 CSS 속성을 정의 */ const typeScaleProperties = defineProperties({ properties: { - fontSize : fontSizes, - fontWeight : fontWeights - } + fontSize: fontSizes, + fontWeight: fontWeights, + }, }) - /** * sprinkles : Sprinkle 객체 */ @@ -52,9 +57,9 @@ export const sprinkles = createSprinkles( responsiveProperties, colorProperties, typeScaleProperties -); +) /** * Sprinkles : Sprinkle 객체 타입 */ -export type Sprinkles = Parameters[0]; +export type Sprinkles = Parameters[0] diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index ea50e69..5ec66a7 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -1,6 +1,6 @@ -import { createGlobalTheme } from "@vanilla-extract/css"; -import { colors, shadows } from "./token"; -import { futura, pretendard } from "./global/globalText.css"; +import { createGlobalTheme } from '@vanilla-extract/css' +import { colors, shadows } from './token' +import { futura, pretendard } from './global/globalText.css' export const vars = createGlobalTheme(':root', { // design system color(neutral, blue, red, yellow, green, teal) @@ -8,8 +8,8 @@ export const vars = createGlobalTheme(':root', { // design system shadow(small, medium, large, xlarge) shadows, // typography 사용이 아닌 css 변수로 사용이 필요할 경우 -- 미권장 - font : { - basic : pretendard, - logo : futura - } -}) \ No newline at end of file + font: { + basic: pretendard, + logo: futura, + }, +}) diff --git a/src/styles/token.ts b/src/styles/token.ts index a45b398..fc449e1 100644 --- a/src/styles/token.ts +++ b/src/styles/token.ts @@ -1,105 +1,104 @@ -export const fonts = { -} as const; +export const fonts = {} as const export const fontSizes = { - 'largeTitle' : { - fontSize : 26, - lineHeight : 32 - }, - 'title1' : { - fontSize : 22, - lineHeight : 26 + largeTitle: { + fontSize: 26, + lineHeight: 32, }, - 'title2' : { - fontSize : 17, - lineHeight : 22 - }, - 'title3' : { - fontSize : 15, - lineHeight : 20 + title1: { + fontSize: 22, + lineHeight: 26, }, - 'headline' : { - fontSize : 13, - lineHeight : 16 + title2: { + fontSize: 17, + lineHeight: 22, }, - 'subHeadline' : { - fontSize : 11, - lineHeight : 14 + title3: { + fontSize: 15, + lineHeight: 20, }, - 'body' :{ - fontSize : 13, - lineHeight : 16 + headline: { + fontSize: 13, + lineHeight: 16, }, - 'caption' : { - fontSize : 10, - lineHeight : 13 - } -} as const; + subHeadline: { + fontSize: 11, + lineHeight: 14, + }, + body: { + fontSize: 13, + lineHeight: 16, + }, + caption: { + fontSize: 10, + lineHeight: 13, + }, +} as const export const fontWeights = { - regular : '400', - medium : '500', - semibold : '600', - bold : '700' -} as const; + regular: '400', + medium: '500', + semibold: '600', + bold: '700', +} as const export const colors = { - // neutral 텍스트 기본 색상 - 'neutral-0' : '#000000', - 'neutral-100' : '#7a8699', - 'neutral-200' : '#6b788e', - 'neutral-300' : '#5d6b82', - 'neutral-400' : '#505f79', - 'neutral-500' : '#42526d', - 'neutral-600' : '#354764', - 'neutral-700' : '#243757', - 'neutral-800' : '#15294b', - 'neutral-900' : '#091e42', + // neutral 텍스트 기본 색상 + 'neutral-0': '#000000', + 'neutral-100': '#7a8699', + 'neutral-200': '#6b788e', + 'neutral-300': '#5d6b82', + 'neutral-400': '#505f79', + 'neutral-500': '#42526d', + 'neutral-600': '#354764', + 'neutral-700': '#243757', + 'neutral-800': '#15294b', + 'neutral-900': '#091e42', // blue 파란색 - 'blue-50' : '#e6f0ff', - 'blue-75' : '#96c0ff', - 'blue-100' : '#6ba6ff', - 'blue-200' : '#2b7fff', - 'blue-300' : '#0065ff', - 'blue-400' : '#0047b3', - 'blue-500' : '#003e9c', + 'blue-50': '#e6f0ff', + 'blue-75': '#96c0ff', + 'blue-100': '#6ba6ff', + 'blue-200': '#2b7fff', + 'blue-300': '#0065ff', + 'blue-400': '#0047b3', + 'blue-500': '#003e9c', // red 빨간색 - 'red-50' : '#f9e9e6', - 'red-75' : '#e5a696', - 'red-100' : '#da816b', - 'red-200' : '#ca4b2b', - 'red-300' : '#bf2600', - 'red-400' : '#861b00', - 'red-500' : '#751700', + 'red-50': '#f9e9e6', + 'red-75': '#e5a696', + 'red-100': '#da816b', + 'red-200': '#ca4b2b', + 'red-300': '#bf2600', + 'red-400': '#861b00', + 'red-500': '#751700', // yellow 노란색 - 'yellow-50' : '#fff3e6', - 'yellow-75' : '#ffcf96', - 'yellow-100' : '#ffbc6b', - 'yellow-200' : '#ff9f2b', - 'yellow-300' : '#ff8b00', - 'yellow-400' : '#b36100', - 'yellow-500' : '#9c5500', + 'yellow-50': '#fff3e6', + 'yellow-75': '#ffcf96', + 'yellow-100': '#ffbc6b', + 'yellow-200': '#ff9f2b', + 'yellow-300': '#ff8b00', + 'yellow-400': '#b36100', + 'yellow-500': '#9c5500', // green 초록색 - 'green-50' : '#e6f0ec', - 'green-75' : '#96c0b2', - 'green-100' : '#6ba693', - 'green-200' : '#2b8064', - 'green-300' : '#006644', - 'green-400' : '#004730', - 'green-500' : '#003e29', + 'green-50': '#e6f0ec', + 'green-75': '#96c0b2', + 'green-100': '#6ba693', + 'green-200': '#2b8064', + 'green-300': '#006644', + 'green-400': '#004730', + 'green-500': '#003e29', // teal 청록색 - 'teal-50' : '#e6f4f6', - 'teal-75' : '#96d0db', - 'teal-100' : '#6bbdcb', - 'teal-200' : '#2ba0b5', - 'teal-300' : '#008da6', - 'teal-400' : '#006374', - 'teal-500' : '#005665' -} as const; + 'teal-50': '#e6f4f6', + 'teal-75': '#96d0db', + 'teal-100': '#6bbdcb', + 'teal-200': '#2ba0b5', + 'teal-300': '#008da6', + 'teal-400': '#006374', + 'teal-500': '#005665', +} as const export const shadows = { - small : '0px 1px 2px rgba(0, 0, 0, 0.05)', - medium : '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)', - large : '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)', - xlarge : '0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1)' -} as const; \ No newline at end of file + small: '0px 1px 2px rgba(0, 0, 0, 0.05)', + medium: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)', + large: '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)', + xlarge: '0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1)', +} as const From 297cef044148ce98d5e70744446b80b0033fb2d0 Mon Sep 17 00:00:00 2001 From: SeHyun Date: Thu, 16 Jan 2025 16:31:33 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20token=20file=20font-lineheight=20px?= =?UTF-8?q?=20=EB=AF=B8=EB=B0=98=EC=98=81=20=EC=B6=94=EA=B0=80,=20logo=20f?= =?UTF-8?q?ont=20=ED=8A=B9=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/token.ts | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/styles/token.ts b/src/styles/token.ts index fc449e1..29e00c1 100644 --- a/src/styles/token.ts +++ b/src/styles/token.ts @@ -1,38 +1,53 @@ +import { futura, pretendard } from "./global/globalText.css" + export const fonts = {} as const export const fontSizes = { largeTitle: { + fontFamily : pretendard, fontSize: 26, - lineHeight: 32, + lineHeight: '32px', }, title1: { + fontFamily : pretendard, fontSize: 22, - lineHeight: 26, + lineHeight: '26px', }, title2: { + fontFamily : pretendard, fontSize: 17, - lineHeight: 22, + lineHeight: '22px', }, title3: { + fontFamily : pretendard, fontSize: 15, - lineHeight: 20, + lineHeight: '20px', }, headline: { + fontFamily : pretendard, fontSize: 13, - lineHeight: 16, + lineHeight: '16px', }, subHeadline: { + fontFamily : pretendard, fontSize: 11, - lineHeight: 14, + lineHeight: '14px', }, body: { + fontFamily : pretendard, fontSize: 13, - lineHeight: 16, + lineHeight: '16px', }, caption: { + fontFamily : pretendard, fontSize: 10, - lineHeight: 13, + lineHeight: '13px', }, + logo : { + fontFamily : futura, + fontSize : 10, + lineHeight : '13px' + } } as const export const fontWeights = { From ec8608d4a365928fcc2812562f6840fb1550373f Mon Sep 17 00:00:00 2001 From: SeHyun Date: Thu, 16 Jan 2025 16:31:58 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20token.ts=20prettier=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/token.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/styles/token.ts b/src/styles/token.ts index 29e00c1..60f5006 100644 --- a/src/styles/token.ts +++ b/src/styles/token.ts @@ -1,53 +1,53 @@ -import { futura, pretendard } from "./global/globalText.css" +import { futura, pretendard } from './global/globalText.css' export const fonts = {} as const export const fontSizes = { largeTitle: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 26, lineHeight: '32px', }, title1: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 22, lineHeight: '26px', }, title2: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 17, lineHeight: '22px', }, title3: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 15, lineHeight: '20px', }, headline: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 13, lineHeight: '16px', }, subHeadline: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 11, lineHeight: '14px', }, body: { - fontFamily : pretendard, + fontFamily: pretendard, fontSize: 13, lineHeight: '16px', }, caption: { - fontFamily : pretendard, + fontFamily: pretendard, + fontSize: 10, + lineHeight: '13px', + }, + logo: { + fontFamily: futura, fontSize: 10, lineHeight: '13px', }, - logo : { - fontFamily : futura, - fontSize : 10, - lineHeight : '13px' - } } as const export const fontWeights = { From 06c0a80a85c174f057c37453ef1b7dc82552d0b4 Mon Sep 17 00:00:00 2001 From: SeHyun Date: Thu, 16 Jan 2025 16:37:42 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20futura,=20pretendard=20fonts=20toke?= =?UTF-8?q?n=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/token.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/token.ts b/src/styles/token.ts index 60f5006..c853ce1 100644 --- a/src/styles/token.ts +++ b/src/styles/token.ts @@ -1,6 +1,9 @@ import { futura, pretendard } from './global/globalText.css' -export const fonts = {} as const +export const fonts = { + futura, + pretendard, +} as const export const fontSizes = { largeTitle: {