byuckchon-frontend-cli 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byuckchon-frontend-cli",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "byuckchon frontend CLI for creating React and Next.js projects",
   "type": "module",
   "bin": {

package/src/generators/createBaseFiles.js

@@ -342,7 +342,7 @@ StyleDictionary.registerTransform({
       .toLowerCase(),
 });
 
-// Tailwind v4 @theme 변수 생성
+// color는 Tailwind 유틸리티로, typography는 .text-* 클래스로 생성
 StyleDictionary.registerFormat({
   name: "css/tailwind-theme",
   format: ({ dictionary }) => {
@@ -357,23 +357,33 @@ StyleDictionary.registerFormat({
       if (token.$type === "color") {
         css += \`  --color-\${token.name}: \${token.$value};\\n\`;
       }
+    });
+    css += "}\\n\\n";
+
+    css += "@layer components {\\n";
+    dictionary.allTokens.forEach((token) => {
       if (token.$type === "typography" && token.$value) {
         const typo = token.$value;
-        if (typo.fontFamily) {
-          css += \`  --font-family-\${token.name}: \${typo.fontFamily};\\n\`;
-        }
-        if (typo.fontWeight) {
-          css += \`  --font-weight-\${token.name}: \${typo.fontWeight};\\n\`;
-        }
+        css += \`  .text-\${token.name} {\\n\`;
         if (typo.fontSize) {
-          css += \`  --font-size-\${token.name}: \${withPx(typo.fontSize)};\\n\`;
+          css += \`    font-size: \${withPx(typo.fontSize)};\\n\`;
         }
         if (typo.lineHeight) {
-          css += \`  --line-height-\${token.name}: \${withPx(typo.lineHeight)};\\n\`;
+          css += \`    line-height: \${withPx(typo.lineHeight)};\\n\`;
+        }
+        if (typo.letterSpacing) {
+          css += \`    letter-spacing: \${typo.letterSpacing};\\n\`;
+        }
+        if (typo.fontWeight) {
+          css += \`    font-weight: \${typo.fontWeight};\\n\`;
         }
+        if (typo.fontFamily) {
+          css += \`    font-family: \${typo.fontFamily};\\n\`;
+        }
+        css += "  }\\n";
       }
     });
-    css += "}\\n\\n";
+    css += "}\\n";
 
     return css;
   },