diff --git a/.vscode/settings.json b/.vscode/settings.json index cfafd18..da82ce0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,5 +18,6 @@ }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "css.lint.unknownAtRules": "ignore" } diff --git a/app/globals.css b/app/globals.css index deb35d6..fc48621 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,5 +1,6 @@ -@import 'tailwindcss'; +@import "tailwindcss"; @import "tw-animate-css"; +@import "./tokens.css"; @custom-variant dark (&:is(.dark *)); diff --git a/app/page.tsx b/app/page.tsx index 37eb4a7..26ae515 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,63 +1,61 @@ -import Image from "next/image"; - export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. +
+
+ {/* 토큰 테스트 섹션 */} +
+

+ 🎨 Design Token Test

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - + + {/* 1. Typography */} +
+

1. Typography

+
+

Display 24px (Bold 700)

+

Title 20px (SemiBold 600)

+

Body 18px (Medium 500)

+

Body 16px (Regular 400)

+

+ Caption 14px (Disabled Color) +

+
+
+ + {/* 2. Colors & Backgrounds */} +
+

2. Colors & Backgrounds

+
+
+ Pink Secondary +
+
+ Orange Primary +
+
+ Surface Base +
+
+ Disabled Area +
+
+
+ + {/* 3. Buttons */} +
+

3. Buttons

+
+ + + +
+
diff --git a/app/src/token.json b/app/src/token.json deleted file mode 100644 index cb425d4..0000000 --- a/app/src/token.json +++ /dev/null @@ -1,1279 +0,0 @@ -{ - "core": { - "dimension": { - "scale": { - "$type": "dimension", - "$value": "2" - }, - "xs": { - "$type": "dimension", - "$value": "4" - }, - "sm": { - "$type": "dimension", - "$value": "{dimension.xs} * {dimension.scale}" - }, - "md": { - "$type": "dimension", - "$value": "{dimension.sm} * {dimension.scale}" - }, - "lg": { - "$type": "dimension", - "$value": "{dimension.md} * {dimension.scale}" - }, - "xl": { - "$type": "dimension", - "$value": "{dimension.lg} * {dimension.scale}" - } - }, - "spacing": { - "xs": { - "$type": "spacing", - "$value": "{dimension.xs}" - }, - "sm": { - "$type": "spacing", - "$value": "{dimension.sm}" - }, - "md": { - "$type": "spacing", - "$value": "{dimension.md}" - }, - "lg": { - "$type": "spacing", - "$value": "{dimension.lg}" - }, - "xl": { - "$type": "spacing", - "$value": "{dimension.xl}" - }, - "multi-value": { - "$type": "spacing", - "$value": "{dimension.sm} {dimension.xl}", - "$description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" - } - }, - "borderRadius": { - "sm": { - "$type": "borderRadius", - "$value": "4" - }, - "lg": { - "$type": "borderRadius", - "$value": "8" - }, - "xl": { - "$type": "borderRadius", - "$value": "16" - }, - "multi-value": { - "$type": "borderRadius", - "$value": "{borderRadius.sm} {borderRadius.lg}", - "$description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" - } - }, - "colors": { - "black": { - "$type": "color", - "$value": "#000000" - }, - "white": { - "$type": "color", - "$value": "#ffffff" - }, - "gray": { - "100": { - "$type": "color", - "$value": "#f7fafc" - }, - "200": { - "$type": "color", - "$value": "#edf2f7" - }, - "300": { - "$type": "color", - "$value": "#e2e8f0" - }, - "400": { - "$type": "color", - "$value": "#cbd5e0" - }, - "500": { - "$type": "color", - "$value": "#a0aec0" - }, - "600": { - "$type": "color", - "$value": "#718096" - }, - "700": { - "$type": "color", - "$value": "#4a5568" - }, - "800": { - "$type": "color", - "$value": "#2d3748" - }, - "900": { - "$type": "color", - "$value": "#1a202c" - } - }, - "red": { - "100": { - "$type": "color", - "$value": "#fff5f5" - }, - "200": { - "$type": "color", - "$value": "#fed7d7" - }, - "300": { - "$type": "color", - "$value": "#feb2b2" - }, - "400": { - "$type": "color", - "$value": "#fc8181" - }, - "500": { - "$type": "color", - "$value": "#f56565" - }, - "600": { - "$type": "color", - "$value": "#e53e3e" - }, - "700": { - "$type": "color", - "$value": "#c53030" - }, - "800": { - "$type": "color", - "$value": "#9b2c2c" - }, - "900": { - "$type": "color", - "$value": "#742a2a" - } - }, - "orange": { - "100": { - "$type": "color", - "$value": "#fffaf0" - }, - "200": { - "$type": "color", - "$value": "#feebc8" - }, - "300": { - "$type": "color", - "$value": "#fbd38d" - }, - "400": { - "$type": "color", - "$value": "#f6ad55" - }, - "500": { - "$type": "color", - "$value": "#ed8936" - }, - "600": { - "$type": "color", - "$value": "#dd6b20" - }, - "700": { - "$type": "color", - "$value": "#c05621" - }, - "800": { - "$type": "color", - "$value": "#9c4221" - }, - "900": { - "$type": "color", - "$value": "#7b341e" - } - }, - "yellow": { - "100": { - "$type": "color", - "$value": "#fffff0" - }, - "200": { - "$type": "color", - "$value": "#fefcbf" - }, - "300": { - "$type": "color", - "$value": "#faf089" - }, - "400": { - "$type": "color", - "$value": "#f6e05e" - }, - "500": { - "$type": "color", - "$value": "#ecc94b" - }, - "600": { - "$type": "color", - "$value": "#d69e2e" - }, - "700": { - "$type": "color", - "$value": "#b7791f" - }, - "800": { - "$type": "color", - "$value": "#975a16" - }, - "900": { - "$type": "color", - "$value": "#744210" - } - }, - "green": { - "100": { - "$type": "color", - "$value": "#f0fff4" - }, - "200": { - "$type": "color", - "$value": "#c6f6d5" - }, - "300": { - "$type": "color", - "$value": "#9ae6b4" - }, - "400": { - "$type": "color", - "$value": "#68d391" - }, - "500": { - "$type": "color", - "$value": "#48bb78" - }, - "600": { - "$type": "color", - "$value": "#38a169" - }, - "700": { - "$type": "color", - "$value": "#2f855a" - }, - "800": { - "$type": "color", - "$value": "#276749" - }, - "900": { - "$type": "color", - "$value": "#22543d" - } - }, - "teal": { - "100": { - "$type": "color", - "$value": "#e6fffa" - }, - "200": { - "$type": "color", - "$value": "#b2f5ea" - }, - "300": { - "$type": "color", - "$value": "#81e6d9" - }, - "400": { - "$type": "color", - "$value": "#4fd1c5" - }, - "500": { - "$type": "color", - "$value": "#38b2ac" - }, - "600": { - "$type": "color", - "$value": "#319795" - }, - "700": { - "$type": "color", - "$value": "#2c7a7b" - }, - "800": { - "$type": "color", - "$value": "#285e61" - }, - "900": { - "$type": "color", - "$value": "#234e52" - } - }, - "blue": { - "100": { - "$type": "color", - "$value": "#ebf8ff" - }, - "200": { - "$type": "color", - "$value": "#bee3f8" - }, - "300": { - "$type": "color", - "$value": "#90cdf4" - }, - "400": { - "$type": "color", - "$value": "#63b3ed" - }, - "500": { - "$type": "color", - "$value": "#4299e1" - }, - "600": { - "$type": "color", - "$value": "#3182ce" - }, - "700": { - "$type": "color", - "$value": "#2b6cb0" - }, - "800": { - "$type": "color", - "$value": "#2c5282" - }, - "900": { - "$type": "color", - "$value": "#2a4365" - } - }, - "indigo": { - "100": { - "$type": "color", - "$value": "#ebf4ff" - }, - "200": { - "$type": "color", - "$value": "#c3dafe" - }, - "300": { - "$type": "color", - "$value": "#a3bffa" - }, - "400": { - "$type": "color", - "$value": "#7f9cf5" - }, - "500": { - "$type": "color", - "$value": "#667eea" - }, - "600": { - "$type": "color", - "$value": "#5a67d8" - }, - "700": { - "$type": "color", - "$value": "#4c51bf" - }, - "800": { - "$type": "color", - "$value": "#434190" - }, - "900": { - "$type": "color", - "$value": "#3c366b" - } - }, - "purple": { - "100": { - "$type": "color", - "$value": "#faf5ff" - }, - "200": { - "$type": "color", - "$value": "#e9d8fd" - }, - "300": { - "$type": "color", - "$value": "#d6bcfa" - }, - "400": { - "$type": "color", - "$value": "#b794f4" - }, - "500": { - "$type": "color", - "$value": "#9f7aea" - }, - "600": { - "$type": "color", - "$value": "#805ad5" - }, - "700": { - "$type": "color", - "$value": "#6b46c1" - }, - "800": { - "$type": "color", - "$value": "#553c9a" - }, - "900": { - "$type": "color", - "$value": "#44337a" - } - }, - "pink": { - "100": { - "$type": "color", - "$value": "#fff5f7" - }, - "200": { - "$type": "color", - "$value": "#fed7e2" - }, - "300": { - "$type": "color", - "$value": "#fbb6ce" - }, - "400": { - "$type": "color", - "$value": "#f687b3" - }, - "500": { - "$type": "color", - "$value": "#ed64a6" - }, - "600": { - "$type": "color", - "$value": "#d53f8c" - }, - "700": { - "$type": "color", - "$value": "#b83280" - }, - "800": { - "$type": "color", - "$value": "#97266d" - }, - "900": { - "$type": "color", - "$value": "#702459" - } - } - }, - "opacity": { - "low": { - "$type": "opacity", - "$value": "10%" - }, - "md": { - "$type": "opacity", - "$value": "50%" - }, - "high": { - "$type": "opacity", - "$value": "90%" - } - }, - "fontFamilies": { - "heading": { - "$type": "fontFamilies", - "$value": "Inter" - }, - "body": { - "$type": "fontFamilies", - "$value": "Roboto" - } - }, - "lineHeights": { - "heading": { - "$type": "lineHeights", - "$value": "110%" - }, - "body": { - "$type": "lineHeights", - "$value": "140%" - } - }, - "letterSpacing": { - "default": { - "$type": "letterSpacing", - "$value": "0" - }, - "increased": { - "$type": "letterSpacing", - "$value": "150%" - }, - "decreased": { - "$type": "letterSpacing", - "$value": "-5%" - } - }, - "paragraphSpacing": { - "h1": { - "$type": "paragraphSpacing", - "$value": "32" - }, - "h2": { - "$type": "paragraphSpacing", - "$value": "26" - } - }, - "fontWeights": { - "headingRegular": { - "$type": "fontWeights", - "$value": "Regular" - }, - "headingBold": { - "$type": "fontWeights", - "$value": "Bold" - }, - "bodyRegular": { - "$type": "fontWeights", - "$value": "Regular" - }, - "bodyBold": { - "$type": "fontWeights", - "$value": "Bold" - } - }, - "fontSizes": { - "h1": { - "$type": "fontSizes", - "$value": "roundTo({fontSizes.body}*1.25^5)" - }, - "h2": { - "$type": "fontSizes", - "$value": "roundTo({fontSizes.body}*1.25^4)" - }, - "h3": { - "$type": "fontSizes", - "$value": "roundTo({fontSizes.body}*1.25^3)" - }, - "h4": { - "$type": "fontSizes", - "$value": "roundTo({fontSizes.body}*1.25^2)" - }, - "h5": { - "$type": "fontSizes", - "$value": "roundTo({fontSizes.body}*1.25^1)" - }, - "h6": { - "$type": "fontSizes", - "$value": "{fontSizes.body}" - }, - "body": { - "$type": "fontSizes", - "$value": "16" - }, - "sm": { - "$type": "fontSizes", - "$value": "{fontSizes.body} * 0.85" - }, - "xs": { - "$type": "fontSizes", - "$value": "{fontSizes.body} * 0.65" - } - } - }, - "light": { - "fg": { - "default": { - "$type": "color", - "$value": "{colors.black}" - }, - "muted": { - "$type": "color", - "$value": "{colors.gray.700}" - }, - "subtle": { - "$type": "color", - "$value": "{colors.gray.500}" - } - }, - "bg": { - "default": { - "$type": "color", - "$value": "{colors.white}" - }, - "muted": { - "$type": "color", - "$value": "{colors.gray.100}" - }, - "subtle": { - "$type": "color", - "$value": "{colors.gray.200}" - } - }, - "accent": { - "default": { - "$type": "color", - "$value": "{colors.indigo.400}" - }, - "onAccent": { - "$type": "color", - "$value": "{colors.white}" - }, - "bg": { - "$type": "color", - "$value": "{colors.indigo.200}" - } - }, - "shadows": { - "default": { - "$type": "color", - "$value": "{colors.gray.900}" - } - } - }, - "dark": { - "fg": { - "default": { - "$type": "color", - "$value": "{colors.white}" - }, - "muted": { - "$type": "color", - "$value": "{colors.gray.300}" - }, - "subtle": { - "$type": "color", - "$value": "{colors.gray.500}" - } - }, - "bg": { - "default": { - "$type": "color", - "$value": "{colors.gray.900}" - }, - "muted": { - "$type": "color", - "$value": "{colors.gray.700}" - }, - "subtle": { - "$type": "color", - "$value": "{colors.gray.600}" - } - }, - "accent": { - "default": { - "$type": "color", - "$value": "{colors.indigo.600}" - }, - "onAccent": { - "$type": "color", - "$value": "{colors.white}" - }, - "bg": { - "$type": "color", - "$value": "{colors.indigo.800}" - } - }, - "shadows": { - "default": { - "$type": "color", - "$value": "rgba({colors.black}, 0.3)" - } - } - }, - "theme": { - "button": { - "primary": { - "background": { - "$type": "color", - "$value": "{accent.default}" - }, - "text": { - "$type": "color", - "$value": "{accent.onAccent}" - } - }, - "borderRadius": { - "$type": "borderRadius", - "$value": "{borderRadius.lg}" - }, - "borderWidth": { - "$type": "borderWidth", - "$value": "{dimension.sm}" - } - }, - "card": { - "borderRadius": { - "$type": "borderRadius", - "$value": "{borderRadius.lg}" - }, - "background": { - "$type": "color", - "$value": "{bg.default}" - }, - "padding": { - "$type": "dimension", - "$value": "{dimension.md}" - } - }, - "boxShadow": { - "default": { - "$type": "boxShadow", - "$value": [ - { - "x": 5, - "y": 5, - "spread": 3, - "color": "rgba({shadows.default}, 0.15)", - "blur": 5, - "$type": "dropShadow" - }, - { - "x": 4, - "y": 4, - "spread": 6, - "color": "#00000033", - "blur": 5, - "$type": "innerShadow" - } - ] - } - }, - "typography": { - "H1": { - "Bold": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingBold}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.h1}", - "paragraphSpacing": "{paragraphSpacing.h1}", - "letterSpacing": "{letterSpacing.decreased}" - } - }, - "Regular": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.h1}", - "paragraphSpacing": "{paragraphSpacing.h1}", - "letterSpacing": "{letterSpacing.decreased}" - } - } - }, - "H2": { - "Bold": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingBold}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.h2}", - "paragraphSpacing": "{paragraphSpacing.h2}", - "letterSpacing": "{letterSpacing.decreased}" - } - }, - "Regular": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.h2}", - "paragraphSpacing": "{paragraphSpacing.h2}", - "letterSpacing": "{letterSpacing.decreased}" - } - } - }, - "Body": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.body}", - "paragraphSpacing": "{paragraphSpacing.h2}" - } - } - } - }, - "Sementic/Mode 1": { - "Colors": { - "Pink": { - "Pink300": { - "$type": "color", - "$value": "#f8a4cb" - }, - "Pink500": { - "$type": "color", - "$value": "#f387be" - }, - "PInk700 (Primary)": { - "$type": "color", - "$value": "#f57db2" - }, - "PInk50": { - "$type": "color", - "$value": "#fdeaf5" - }, - "PInk900": { - "$type": "color", - "$value": "#e3468b" - }, - "Pink100": { - "$type": "color", - "$value": "#fbcde7" - }, - "color-pink-300": { - "$type": "color", - "$value": "#f8a4cb" - }, - "color-pink-500": { - "$type": "color", - "$value": "#f387be" - }, - "color-pink-700": { - "$type": "color", - "$value": "#f57db2" - }, - "color-pink-50": { - "$type": "color", - "$value": "#fdeaf5" - }, - "color-pink-900": { - "$type": "color", - "$value": "#e3468b" - }, - "color-pink-100": { - "$type": "color", - "$value": "#fbcde7" - } - }, - "Flame": { - "Flame300": { - "$type": "color", - "$value": "#ff8a9b" - }, - "\bFlame700(Primary)": { - "$type": "color", - "$value": "#ff4d61" - }, - "Flame500": { - "$type": "color", - "$value": "#ff667c" - }, - "Flame50": { - "$type": "color", - "$value": "#ffe5e9" - }, - "Flame900": { - "$type": "color", - "$value": "#ed1134" - }, - "Flame100": { - "$type": "color", - "$value": "#ffc4cd" - }, - "color-flame-300": { - "$type": "color", - "$value": "#ff8a9b" - }, - "color-flame-700": { - "$type": "color", - "$value": "#ff4d61" - }, - "color-flame-500": { - "$type": "color", - "$value": "#ff667c" - }, - "color-flame-50": { - "$type": "color", - "$value": "#ffe5e9" - }, - "color-flame-900": { - "$type": "color", - "$value": "#ed1134" - }, - "color-flame-100": { - "$type": "color", - "$value": "#ffc4cd" - } - }, - "Orange": { - "Orange500": { - "$type": "color", - "$value": "#ff8a6f" - }, - "Orange700(Primary)": { - "$type": "color", - "$value": "#ff775e" - }, - "Orange100": { - "$type": "color", - "$value": "#ffc7b9" - }, - "Orange300": { - "$type": "color", - "$value": "#ffa188" - }, - "Orange900": { - "$type": "color", - "$value": "#dd4527" - }, - "Orange50": { - "$type": "color", - "$value": "#ffe8e2" - }, - "color-orange-500": { - "$type": "color", - "$value": "#ff8a6f" - }, - "color-orange-700": { - "$type": "color", - "$value": "#ff775e" - }, - "color-orange-100": { - "$type": "color", - "$value": "#ffc7b9" - }, - "color-orange-300": { - "$type": "color", - "$value": "#ffa188" - }, - "color-orange-900": { - "$type": "color", - "$value": "#dd4527" - }, - "color-orange-50": { - "$type": "color", - "$value": "#ffe8e2" - } - } - }, - "Grayscale": { - "0": { - "$type": "color", - "$value": "#ffffff" - }, - "50": { - "$type": "color", - "$value": "#f5f5f5" - }, - "64": { - "$type": "color", - "$value": "#efefef" - }, - "100": { - "$type": "color", - "$value": "#e5e5e5" - }, - "200": { - "$type": "color", - "$value": "#cccccc" - }, - "300": { - "$type": "color", - "$value": "#b3b3b3" - }, - "400": { - "$type": "color", - "$value": "#999999" - }, - "500": { - "$type": "color", - "$value": "#808080" - }, - "600": { - "$type": "color", - "$value": "#666666" - }, - "700": { - "$type": "color", - "$value": "#4d4d4d" - }, - "800": { - "$type": "color", - "$value": "#333333" - }, - "988": { - "$type": "color", - "$value": "#1a1a1a" - }, - "color-gray-900": { - "$type": "color", - "$value": "#1a1a1a" - }, - "color-gray-0": { - "$type": "color", - "$value": "#ffffff" - }, - "color-gray-500": { - "$type": "color", - "$value": "#808080" - }, - "color-gray-600": { - "$type": "color", - "$value": "#666666" - }, - "color-gray-300": { - "$type": "color", - "$value": "#b3b3b3" - }, - "color-gray-700": { - "$type": "color", - "$value": "#4d4d4d" - }, - "color-gray-100": { - "$type": "color", - "$value": "#e5e5e5" - }, - "color-gray-400": { - "$type": "color", - "$value": "#999999" - }, - "color-gray-50": { - "$type": "color", - "$value": "#f5f5f5" - }, - "color-gray-200": { - "$type": "color", - "$value": "#cccccc" - }, - "color-gray-800": { - "$type": "color", - "$value": "#333333" - }, - "color-gray-64": { - "$type": "color", - "$value": "#efefef" - } - }, - "Transparent": { - "color-gray-0-a30": { - "$type": "color", - "$value": "#ffffff4d" - }, - "color-gray-300-a40": { - "$type": "color", - "$value": "#b3b3b366" - } - } - }, - "Component/Mode 1": { - "Background": { - "background-app-base": { - "$type": "color", - "$value": "{Colors.color-surface-base}" - }, - "background-app-blur-bottom-left": { - "$type": "color", - "$value": "{Colors.color-brand-secondary-pink}" - }, - "background-app-blur-bottom-right": { - "$type": "color", - "$value": "{Colors.color-brand-primary-orange}" - }, - "background-glow-blur-radius": { - "$type": "number", - "$value": 280 - }, - "background-border-radius": { - "$type": "number", - "$value": "{Radius.radius-none}" - }, - "background-app-opacity": { - "$type": "number", - "$value": "{Opacity.opacity-full}" - } - }, - "Button": { - "button-background-gradient-1-start": { - "$type": "color", - "$value": "{Colors.color-brand-primary-flame}" - }, - "button-background-gradient-1-end": { - "$type": "color", - "$value": "{Colors.color-brand-primary-orange}" - }, - "button-border-color": { - "$type": "color", - "$value": "{Colors.color-border-light}" - }, - "button-primary-text-default": { - "$type": "color", - "$value": "{Colors.color-text-white}" - }, - "button-primary-text-disabled": { - "$type": "color", - "$value": "{Colors.color-text-disabled}" - }, - "button-background-disabled": { - "$type": "color", - "$value": "{Colors.color-background-disabled}" - }, - "button-background-bold": { - "$type": "color", - "$value": "{Colors.color-brand-black}" - }, - "button-slate-default": { - "$type": "color", - "$value": "{Transparent.color-gray-0-a30}" - }, - "button-opacity-default": { - "$type": "number", - "$value": "{Opacity.opacity-full}" - }, - "button-border-radius": { - "$type": "number", - "$value": "{Radius.radius-md}" - }, - "button-border-width": { - "$type": "number", - "$value": "{Border.border-width-thin}" - } - } - }, - "System/Mode 1": { - "Colors": { - "color-surface-base": { - "$type": "color", - "$value": "{Grayscale.color-gray-64}" - }, - "color-brand-secondary-pink": { - "$type": "color", - "$value": "{Colors.Pink.color-pink-100}" - }, - "color-brand-primary-orange": { - "$type": "color", - "$value": "{Colors.Orange.color-orange-700}" - }, - "color-brand-primary-pink": { - "$type": "color", - "$value": "{Colors.Pink.color-pink-700}" - }, - "color-brand-primary-flame": { - "$type": "color", - "$value": "{Colors.Flame.color-flame-700}" - }, - "color-border-light": { - "$type": "color", - "$value": "{Transparent.color-gray-0-a30}" - }, - "color-text-white": { - "$type": "color", - "$value": "{Grayscale.color-gray-0}" - }, - "color-text-disabled": { - "$type": "color", - "$value": "{Grayscale.color-gray-300}" - }, - "color-background-disabled": { - "$type": "color", - "$value": "{Transparent.color-gray-300-a40}" - }, - "color-brand-black": { - "$type": "color", - "$value": "{Grayscale.color-gray-900}" - } - }, - "Opacity": { - "opacity-full": { - "$type": "number", - "$value": 100 - }, - "opacity-medium": { - "$type": "number", - "$value": 50 - }, - "opacity-subtle": { - "$type": "number", - "$value": 20 - }, - "opacity-subtle 2": { - "$type": "number", - "$value": 40 - } - }, - "Radius": { - "radius-none": { - "$type": "number", - "$value": 0 - }, - "radius-xs": { - "$type": "number", - "$value": 8 - }, - "radius-sm": { - "$type": "number", - "$value": 12 - }, - "radius-md": { - "$type": "number", - "$value": 16 - }, - "radius-lg": { - "$type": "number", - "$value": 24 - }, - "radius-full": { - "$type": "number", - "$value": 99 - } - }, - "Border": { - "border-width-thin": { - "$type": "number", - "$value": 0.8 - }, - "border-width-default": { - "$type": "number", - "$value": 1 - }, - "border-width-thick": { - "$type": "number", - "$value": 2 - } - }, - "Font": { - "font-size-16": { - "$type": "number", - "$value": 16 - }, - "font-size-20": { - "$type": "number", - "$value": 20 - }, - "font-size-24": { - "$type": "number", - "$value": 24 - }, - "font-size-12": { - "$type": "number", - "$value": 12 - }, - "font-size-14": { - "$type": "number", - "$value": 14 - }, - "font-size-10": { - "$type": "number", - "$value": 10 - }, - "font-size-18": { - "$type": "number", - "$value": 18 - } - } - }, - "$themes": [], - "$metadata": { - "tokenSetOrder": [ - "core", - "light", - "dark", - "theme", - "Sementic/Mode 1", - "Component/Mode 1", - "System/Mode 1" - ] - } -} \ No newline at end of file diff --git a/app/tokens.css b/app/tokens.css new file mode 100644 index 0000000..e8566c8 --- /dev/null +++ b/app/tokens.css @@ -0,0 +1,260 @@ +/* Auto-generated from token.json */ +/* Run: node scripts/generate-tokens.js to regenerate */ + +@layer base { + :root { + --color-gray-900: #1a1a1a; + --color-gray-0: #ffffff; + --color-gray-500: #808080; + --color-gray-600: #666666; + --color-gray-300: #b3b3b3; + --color-gray-700: #4d4d4d; + --color-gray-100: #e5e5e5; + --color-gray-400: #999999; + --color-gray-50: #f5f5f5; + --color-gray-200: #cccccc; + --color-gray-800: #333333; + --color-gray-64: #efefef; + --color-pink-300: #f8a4cb; + --color-pink-500: #f387be; + --color-pink-700: #f57db2; + --color-pink-50: #fdeaf5; + --color-pink-900: #e3468b; + --color-pink-100: #fbcde7; + --color-flame-300: #ff8a9b; + --color-flame-700: #ff4d61; + --color-flame-500: #ff667c; + --color-flame-50: #ffe5e9; + --color-flame-900: #ed1134; + --color-flame-100: #ffc4cd; + --color-orange-500: #ff8a6f; + --color-orange-700: #ff775e; + --color-orange-100: #ffc7b9; + --color-orange-300: #ffa188; + --color-orange-900: #dd4527; + --color-orange-50: #ffe8e2; + --color-gray-0-a30: #ffffff4d; + --color-gray-300-a40: #b3b3b366; + --color-surface-base: var(--color-gray-64); + --color-brand-secondary-pink: var(--color-pink-100); + --color-brand-primary-orange: var(--color-orange-700); + --color-brand-primary-pink: var(--color-pink-700); + --color-brand-primary-flame: var(--color-flame-700); + --color-border-light: var(--color-gray-0-a30); + --color-text-white: var(--color-gray-0); + --color-text-disabled: var(--color-gray-300); + --color-background-disabled: var(--color-gray-300-a40); + --color-brand-black: var(--color-gray-900); + --radius-none: 0px; + --radius-xs: 8px; + --radius-sm: 12px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-full: 99px; + --border-thin: 0.8px; + --border-default: 1px; + --border-thick: 2px; + --opacity-full: 100%; + --opacity-medium: 50%; + --opacity-subtle: 20%; + --opacity-subtle-2: 40%; + } +} + +@layer utilities { + /* Text utilities: text-{size}-{weight} */ +.text-16-400 { + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +.text-16-500 { + font-size: 16px; + font-weight: 500; + line-height: 1.5; +} + +.text-16-600 { + font-size: 16px; + font-weight: 600; + line-height: 1.5; +} + +.text-16-700 { + font-size: 16px; + font-weight: 700; + line-height: 1.5; +} + +.text-20-400 { + font-size: 20px; + font-weight: 400; + line-height: 1.5; +} + +.text-20-500 { + font-size: 20px; + font-weight: 500; + line-height: 1.5; +} + +.text-20-600 { + font-size: 20px; + font-weight: 600; + line-height: 1.5; +} + +.text-20-700 { + font-size: 20px; + font-weight: 700; + line-height: 1.5; +} + +.text-24-400 { + font-size: 24px; + font-weight: 400; + line-height: 1.5; +} + +.text-24-500 { + font-size: 24px; + font-weight: 500; + line-height: 1.5; +} + +.text-24-600 { + font-size: 24px; + font-weight: 600; + line-height: 1.5; +} + +.text-24-700 { + font-size: 24px; + font-weight: 700; + line-height: 1.5; +} + +.text-12-400 { + font-size: 12px; + font-weight: 400; + line-height: 1.5; +} + +.text-12-500 { + font-size: 12px; + font-weight: 500; + line-height: 1.5; +} + +.text-12-600 { + font-size: 12px; + font-weight: 600; + line-height: 1.5; +} + +.text-12-700 { + font-size: 12px; + font-weight: 700; + line-height: 1.5; +} + +.text-14-400 { + font-size: 14px; + font-weight: 400; + line-height: 1.5; +} + +.text-14-500 { + font-size: 14px; + font-weight: 500; + line-height: 1.5; +} + +.text-14-600 { + font-size: 14px; + font-weight: 600; + line-height: 1.5; +} + +.text-14-700 { + font-size: 14px; + font-weight: 700; + line-height: 1.5; +} + +.text-10-400 { + font-size: 10px; + font-weight: 400; + line-height: 1.5; +} + +.text-10-500 { + font-size: 10px; + font-weight: 500; + line-height: 1.5; +} + +.text-10-600 { + font-size: 10px; + font-weight: 600; + line-height: 1.5; +} + +.text-10-700 { + font-size: 10px; + font-weight: 700; + line-height: 1.5; +} + +.text-18-400 { + font-size: 18px; + font-weight: 400; + line-height: 1.5; +} + +.text-18-500 { + font-size: 18px; + font-weight: 500; + line-height: 1.5; +} + +.text-18-600 { + font-size: 18px; + font-weight: 600; + line-height: 1.5; +} + +.text-18-700 { + font-size: 18px; + font-weight: 700; + line-height: 1.5; +} + + /* Background utilities */ + .bg-surface-base { background-color: var(--color-surface-base); } + .bg-brand-secondary-pink { background-color: var(--color-brand-secondary-pink); } + .bg-brand-primary-orange { background-color: var(--color-brand-primary-orange); } + .bg-disabled { background-color: var(--color-background-disabled); } + + /* Button utilities */ + .bg-button-primary { + background: linear-gradient(135deg, var(--color-brand-primary-flame), var(--color-brand-primary-orange)); + } + + .bg-button-disabled { + background-color: var(--color-background-disabled); + } + + .bg-button-slate { + background-color: var(--color-gray-0-a30); + } + + /* Border utilities */ + .border-light { border-color: var(--color-border-light); } + + /* Text color utilities */ + .text-white { color: var(--color-text-white); } + .text-disabled { color: var(--color-text-disabled); } + .text-brand-black { color: var(--color-brand-black); } +} diff --git a/scripts/generate-tokens.js b/scripts/generate-tokens.js new file mode 100644 index 0000000..188f534 --- /dev/null +++ b/scripts/generate-tokens.js @@ -0,0 +1,214 @@ +import fs from "fs"; +import path from "path"; +import { fileURLToPath } from "url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +// token.json 읽기 +const tokensPath = path.join(__dirname, "../app/token.json"); +const tokens = JSON.parse(fs.readFileSync(tokensPath, "utf-8")); + +// Semantic tokens에서 실제 색상값 추출 +const semanticMode1 = tokens["Sementic/Mode 1"] || {}; +const systemMode1 = tokens["System/Mode 1"] || {}; + +// Grayscale, Colors, Transparent 값 추출 +const grayscale = semanticMode1.Grayscale || {}; +const colors = semanticMode1.Colors || {}; +const transparent = semanticMode1.Transparent || {}; + +// CSS 변수 생성 +let cssVariables = []; + +// 키 정제 함수 (공백을 하이픈으로 변경) +function sanitizeKey(key) { + return key.replace(/\s+/g, "-").toLowerCase(); +} + +// Grayscale 색상 +Object.entries(grayscale).forEach(([key, value]) => { + if (key.startsWith("color-gray-")) { + cssVariables.push(` --${sanitizeKey(key)}: ${value.$value};`); + } +}); + +// Colors (Pink, Flame, Orange) +if (colors.Pink) { + Object.entries(colors.Pink).forEach(([key, value]) => { + if (key.startsWith("color-pink-")) { + cssVariables.push(` --${sanitizeKey(key)}: ${value.$value};`); + } + }); +} +if (colors.Flame) { + Object.entries(colors.Flame).forEach(([key, value]) => { + if (key.startsWith("color-flame-")) { + cssVariables.push(` --${sanitizeKey(key)}: ${value.$value};`); + } + }); +} +if (colors.Orange) { + Object.entries(colors.Orange).forEach(([key, value]) => { + if (key.startsWith("color-orange-")) { + cssVariables.push(` --${sanitizeKey(key)}: ${value.$value};`); + } + }); +} + +// Transparent +Object.entries(transparent).forEach(([key, value]) => { + cssVariables.push(` --${sanitizeKey(key)}: ${value.$value};`); +}); + +// System tokens +if (systemMode1.Colors) { + Object.entries(systemMode1.Colors).forEach(([key, value]) => { + if (value.$type === "color") { + const finalValue = resolveValue(value.$value); + cssVariables.push(` --${sanitizeKey(key)}: ${finalValue};`); + } + }); +} + +// Radius +if (systemMode1.Radius) { + Object.entries(systemMode1.Radius).forEach(([key, value]) => { + const varName = key.replace("radius-", ""); + cssVariables.push(` --radius-${sanitizeKey(varName)}: ${value.$value}px;`); + }); +} + +// Border +if (systemMode1.Border) { + Object.entries(systemMode1.Border).forEach(([key, value]) => { + const varName = key.replace("border-width-", ""); + cssVariables.push(` --border-${sanitizeKey(varName)}: ${value.$value}px;`); + }); +} + +// Opacity +if (systemMode1.Opacity) { + Object.entries(systemMode1.Opacity).forEach(([key, value]) => { + const varName = key.replace("opacity-", ""); + cssVariables.push(` --opacity-${sanitizeKey(varName)}: ${value.$value}%;`); + }); +} + +// 토큰 참조 해석 +function resolveValue(value, depth = 0) { + if (depth > 10 || typeof value !== "string") return value; + + const match = value.match(/^\{(.+)\}$/); + if (!match) return value; + + const ref = match[1]; + + // Grayscale 참조 + if (ref.startsWith("Grayscale.")) { + const key = ref.replace("Grayscale.", ""); + return `var(--${key})`; + } + + // Colors 참조 + if (ref.startsWith("Colors.Pink.")) { + const key = ref.replace("Colors.Pink.", ""); + return `var(--${key})`; + } + if (ref.startsWith("Colors.Flame.")) { + const key = ref.replace("Colors.Flame.", ""); + return `var(--${key})`; + } + if (ref.startsWith("Colors.Orange.")) { + const key = ref.replace("Colors.Orange.", ""); + return `var(--${key})`; + } + + // Transparent 참조 + if (ref.startsWith("Transparent.")) { + const key = ref.replace("Transparent.", ""); + return `var(--${key})`; + } + + // System/Mode 1의 Colors 참조 + if (ref.startsWith("Colors.")) { + const key = ref.replace("Colors.", ""); + return `var(--${key})`; + } + + return value; +} + +// Font Size - text-{size}-{weight} 형태로 생성 +const fontSizes = systemMode1?.Font || {}; +const weights = ["400", "500", "600", "700"]; +let tailwindUtilities = []; + +Object.entries(fontSizes).forEach(([key, value]) => { + if (key.startsWith("font-size-")) { + const size = value.$value; + weights.forEach((weight) => { + const className = `.text-${size}-${weight}`; + tailwindUtilities.push(`${className} { + font-size: ${size}px; + font-weight: ${weight}; + line-height: 1.5; +}`); + }); + } +}); + +// CSS 파일 생성 +const cssContent = `/* Auto-generated from token.json */ +/* Run: node scripts/generate-tokens.js to regenerate */ + +@layer base { + :root { +${cssVariables.join("\n")} + } +} + +@layer utilities { + /* Text utilities: text-{size}-{weight} */ +${tailwindUtilities.join("\n\n")} + + /* Background utilities */ + .bg-surface-base { background-color: var(--color-surface-base); } + .bg-brand-secondary-pink { background-color: var(--color-brand-secondary-pink); } + .bg-brand-primary-orange { background-color: var(--color-brand-primary-orange); } + .bg-disabled { background-color: var(--color-background-disabled); } + + /* Button utilities */ + .bg-button-primary { + background: linear-gradient(135deg, var(--color-brand-primary-flame), var(--color-brand-primary-orange)); + } + + .bg-button-disabled { + background-color: var(--color-background-disabled); + } + + .bg-button-slate { + background-color: var(--color-gray-0-a30); + } + + /* Border utilities */ + .border-light { border-color: var(--color-border-light); } + + /* Text color utilities */ + .text-white { color: var(--color-text-white); } + .text-disabled { color: var(--color-text-disabled); } + .text-brand-black { color: var(--color-brand-black); } +} +`; + +// tokens.css 파일로 저장 +const outputPath = path.join(__dirname, "../app/tokens.css"); +fs.writeFileSync(outputPath, cssContent, "utf-8"); + +console.log("✅ Tokens generated successfully!"); +console.log(`📝 Output: ${outputPath}`); +console.log("\nNext steps:"); +console.log("1. Import tokens.css in your globals.css:"); +console.log(' @import "./tokens.css";'); +console.log("\n2. Use utilities in your components:"); +console.log('
Hello
');