Df 72 theme

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",

src/styles/sprinkle.css.ts

@@ -0,0 +1,65 @@
+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<typeof sprinkles>[0]

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,
+    },
+})

src/styles/token.ts

@@ -0,0 +1,122 @@
+import { futura, pretendard } from './global/globalText.css'
+
+export const fonts = {
+    futura,
+    pretendard,
+} as const
+
+export const fontSizes = {
+    largeTitle: {
+        fontFamily: pretendard,
+        fontSize: 26,
+        lineHeight: '32px',
+    },
+    title1: {
+        fontFamily: pretendard,
+        fontSize: 22,
+        lineHeight: '26px',
+    },
+    title2: {
+        fontFamily: pretendard,
+        fontSize: 17,
+        lineHeight: '22px',
+    },
+    title3: {
+        fontFamily: pretendard,
+        fontSize: 15,
+        lineHeight: '20px',
+    },
+    headline: {
+        fontFamily: pretendard,
+        fontSize: 13,
+        lineHeight: '16px',
+    },
+    subHeadline: {
+        fontFamily: pretendard,
+        fontSize: 11,
+        lineHeight: '14px',
+    },
+    body: {
+        fontFamily: pretendard,
+        fontSize: 13,
+        lineHeight: '16px',
+    },
+    caption: {
+        fontFamily: pretendard,
+        fontSize: 10,
+        lineHeight: '13px',
+    },
+    logo: {
+        fontFamily: futura,
+        fontSize: 10,
+        lineHeight: '13px',
+    },
+} 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

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"