atomsystem 0.1.0

package/tokens/buildMergeCss.js

@@ -0,0 +1,87 @@
+import StyleDictionary from "style-dictionary";
+import { register } from "@tokens-studio/sd-transforms";
+
+import { readFileSync, writeFileSync } from "fs";
+
+import path from "path";
+
+register(StyleDictionary);
+
+// 원본 token.json 파일 읽기
+const tokenFile = readFileSync("token.json", "utf8");
+const tokenData = JSON.parse(tokenFile);
+// console.log(tokenData);
+
+// css 파일 빌드 후 통합하여 global.css에 제공하는 함수
+const processCss = async (tokenSetOrder) => {
+  let globalCSS = "";
+
+  let globalItems = readFileSync(
+    path.join(process.cwd(), "build", `global.variables.css`),
+    "utf8"
+  )
+    .replace(":root {", "")
+    .replace(/}\s*$/, "") // 마지막 } 제거;
+    .split(";") // 세미콜론 기준으로 나눔
+    .map((item) => item.trim()) // 양 끝 공백 제거
+    .filter(Boolean); //빈 값 제거
+
+  tokenSetOrder.forEach((tokenValue) => {
+    const filePath = path.join(
+      process.cwd(),
+      "build",
+      `${tokenValue}.variables.css`
+    );
+
+    try {
+      let items = readFileSync(filePath, "utf8")
+        .replace(":root {", "")
+        .replace(/}\s*$/, "") // 마지막 } 제거;
+        .split(";") // 세미콜론 기준으로 나눔
+        .map((item) => item.trim()) // 양 끝 공백 제거
+        .filter(Boolean); //빈 값 제거
+
+      const uniqueItems = items.filter((item) => !globalItems.includes(item));
+
+      // 각 토큰별 css를 구조에 맞게 추가
+      globalCSS += `
+      
+      .${tokenValue} {
+        ${uniqueItems.join(";")}
+      }
+      `;
+    } catch (error) {
+      console.log(`파일 읽기 실패:${filePath}`, error);
+    }
+  });
+
+  // tailwind 지시어와 통합
+
+  const combinedCSS = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    
+    @layer base{
+        :root{
+          ${globalItems.join(";")}
+        }
+      }
+
+    ${globalCSS}
+    `;
+
+  // 결과를 app/globals.css에 저장
+  writeFileSync(
+    path.join(process.cwd(), "app", "globals.css"),
+    combinedCSS,
+    "utf8"
+  );
+  console.log("global.css 파일이 성공적으로 생성되었습니다.");
+};
+
+try {
+  processCss(tokenData.$metadata.tokenSetOrder);
+} catch (error) {
+  console.error("css파일 통합 처리중 오류가 발생했습니다:", error);
+}

package/tokens/buildTokenSplit.js

@@ -0,0 +1,81 @@
+import StyleDictionary from "style-dictionary";
+import { register } from "@tokens-studio/sd-transforms";
+import { expandTypesMap } from "@tokens-studio/sd-transforms";
+
+import { readFileSync, writeFileSync, rmSync, mkdirSync } from "fs";
+import { existsSync } from "fs";
+
+register(StyleDictionary);
+
+// 원본 token.json 파일 읽기
+const tokenFile = readFileSync("token.json", "utf8");
+const tokenData = JSON.parse(tokenFile);
+// console.log(tokenData);
+
+// build 디렉토리가 없으면 생성
+const buildDir = "build/";
+if (existsSync(buildDir)) {
+  rmSync(buildDir, { recursive: true, force: true });
+}
+mkdirSync(buildDir);
+
+const buildTokens = async () => {
+  // tokenSetOrder 배열에서 각 항목에 대해 파일 생성
+  tokenData.$metadata.tokenSetOrder.forEach((tokenSet) => {
+    const fileName = `tokens/token/${tokenSet}.json`;
+
+    // 각 토큰셋의 데이터를 가져옴
+    const originalTokens = tokenData[tokenSet] || {};
+    const globalTokens = tokenData["global"] || {};
+    const cleanedTokens = { ...globalTokens }; // 초기값으로 globalTokens 추가
+
+    //   console.log(originalTokens);
+    // console.log(globalTokens);
+
+    // 최상위 그룹을 제외한 나머지 데이터 처리
+    Object.entries(originalTokens).forEach(([groupKey, groupValue]) => {
+      if (groupKey === tokenSet) {
+        return; // 최상위 그룹 스킵
+      }
+
+      if (groupValue && typeof groupValue === "object") {
+        cleanedTokens[groupKey] = groupValue;
+      }
+    });
+
+    // 각 토큰 파일 생성
+    writeFileSync(fileName, JSON.stringify(cleanedTokens, null, 2), "utf8");
+    console.log(`${fileName} 파일이 생성되었습니다.`);
+
+    // StyleDictionary 인스턴스 생성 및 빌드
+    const sdTransfer = new StyleDictionary({
+      source: [fileName],
+      preprocessors: ["tokens-studio"],
+      expand: {
+        typesMap: expandTypesMap,
+      },
+      platforms: {
+        css: {
+          transformGroup: "tokens-studio",
+          transforms: ["ts/size/px", "ts/opacity", "name/kebab"],
+          buildPath: buildDir,
+          files: [
+            {
+              destination: `${tokenSet}.variables.css`,
+              format: "css/variables",
+            },
+          ],
+        },
+      },
+    });
+
+    sdTransfer.cleanAllPlatforms(); // 기존 빌드 삭제
+    sdTransfer.buildAllPlatforms(); // 빌드 실행
+  });
+};
+
+try {
+  buildTokens();
+} catch (error) {
+  console.error("토크파일 처리중 오류가 발생했습니다:", error);
+}

package/tokens/setorder/token_dark.json

@@ -0,0 +1,390 @@
+{
+  "black": {
+    "50": {
+      "value": "#5A5A5A",
+      "type": "color"
+    },
+    "100": {
+      "value": "#555555",
+      "type": "color"
+    },
+    "200": {
+      "value": "#4A4A4A",
+      "type": "color"
+    },
+    "300": {
+      "value": "#444444",
+      "type": "color"
+    },
+    "400": {
+      "value": "#3A3A3A",
+      "type": "color"
+    },
+    "500": {
+      "value": "#333333",
+      "type": "color"
+    },
+    "600": {
+      "value": "#2A2A2A",
+      "type": "color"
+    },
+    "700": {
+      "value": "#222222",
+      "type": "color"
+    },
+    "800": {
+      "value": "#1A1A1A",
+      "type": "color"
+    },
+    "900": {
+      "value": "#111111",
+      "type": "color"
+    }
+  },
+  "gray": {
+    "50": {
+      "value": "#BBBBBB",
+      "type": "color"
+    },
+    "100": {
+      "value": "#B3B3B3",
+      "type": "color"
+    },
+    "200": {
+      "value": "#9E9E9E",
+      "type": "color"
+    },
+    "300": {
+      "value": "#999999",
+      "type": "color"
+    },
+    "400": {
+      "value": "#8E8E8E",
+      "type": "color"
+    },
+    "500": {
+      "value": "#888888",
+      "type": "color"
+    },
+    "600": {
+      "value": "#7E7E7E",
+      "type": "color"
+    },
+    "700": {
+      "value": "#777777",
+      "type": "color"
+    },
+    "800": {
+      "value": "#6E6E6E",
+      "type": "color"
+    },
+    "900": {
+      "value": "#666666",
+      "type": "color"
+    }
+  },
+  "white": {
+    "50": {
+      "value": "#FAFAFA",
+      "type": "color"
+    },
+    "100": {
+      "value": "#F5F5F5",
+      "type": "color"
+    },
+    "200": {
+      "value": "#F0F0F0",
+      "type": "color"
+    },
+    "300": {
+      "value": "#EBEBEB",
+      "type": "color"
+    },
+    "400": {
+      "value": "#E6E6E6",
+      "type": "color"
+    },
+    "500": {
+      "value": "#E0E0E0",
+      "type": "color"
+    },
+    "600": {
+      "value": "#DBDBDB",
+      "type": "color"
+    },
+    "700": {
+      "value": "#D6D6D6",
+      "type": "color"
+    },
+    "800": {
+      "value": "#D1D1D1",
+      "type": "color"
+    },
+    "900": {
+      "value": "#CCCCCC",
+      "type": "color"
+    }
+  },
+  "blue": {
+    "50": {
+      "value": "#F6F8FD",
+      "type": "color"
+    },
+    "100": {
+      "value": "#CCD7F5",
+      "type": "color"
+    },
+    "200": {
+      "value": "#A1B6ED",
+      "type": "color"
+    },
+    "300": {
+      "value": "#7795E4",
+      "type": "color"
+    },
+    "400": {
+      "value": "#4C73DC",
+      "type": "color"
+    },
+    "500": {
+      "value": "#2855CC",
+      "type": "color"
+    },
+    "600": {
+      "value": "#2044A2",
+      "type": "color"
+    },
+    "700": {
+      "value": "#183277",
+      "type": "color"
+    },
+    "800": {
+      "value": "#0F204D",
+      "type": "color"
+    },
+    "900": {
+      "value": "#070E22",
+      "type": "color"
+    }
+  },
+  "green": {
+    "50": {
+      "value": "#F7FDF7",
+      "type": "color"
+    },
+    "100": {
+      "value": "#CEF3CE",
+      "type": "color"
+    },
+    "200": {
+      "value": "#A5E8A5",
+      "type": "color"
+    },
+    "300": {
+      "value": "#7DDE7D",
+      "type": "color"
+    },
+    "400": {
+      "value": "#54D454",
+      "type": "color"
+    },
+    "500": {
+      "value": "#31C331",
+      "type": "color"
+    },
+    "600": {
+      "value": "#279B27",
+      "type": "color"
+    },
+    "700": {
+      "value": "#1D721D",
+      "type": "color"
+    },
+    "800": {
+      "value": "#124912",
+      "type": "color"
+    },
+    "900": {
+      "value": "#08210A",
+      "type": "color"
+    }
+  },
+  "red": {
+    "50": {
+      "value": "#FDF7F7",
+      "type": "color"
+    },
+    "100": {
+      "value": "#F6DADA",
+      "type": "color"
+    },
+    "200": {
+      "value": "#EDB0B0",
+      "type": "color"
+    },
+    "300": {
+      "value": "#E48787",
+      "type": "color"
+    },
+    "400": {
+      "value": "#DA5D5D",
+      "type": "color"
+    },
+    "500": {
+      "value": "#D13434",
+      "type": "color"
+    },
+    "600": {
+      "value": "#AF2828",
+      "type": "color"
+    },
+    "700": {
+      "value": "#891F1F",
+      "type": "color"
+    },
+    "800": {
+      "value": "#641717",
+      "type": "color"
+    },
+    "900": {
+      "value": "#3E0E0E",
+      "type": "color"
+    }
+  },
+  "brand": {
+    "primary": {
+      "value": "{blue.500}",
+      "type": "color"
+    },
+    "secondary": {
+      "value": "{blue.800}",
+      "type": "color"
+    }
+  },
+  "system": {
+    "success": {
+      "value": "{green.500}",
+      "type": "color"
+    },
+    "danger": {
+      "value": "{red.500}",
+      "type": "color"
+    },
+    "info": {
+      "value": "{black.500}",
+      "type": "color"
+    }
+  },
+  "fill": {
+    "wrapper": {
+      "value": "{black.900}",
+      "type": "color"
+    },
+    "card": {
+      "value": "{black.700}",
+      "type": "color"
+    },
+    "info": {
+      "value": "{black.500}",
+      "type": "color"
+    },
+    "border": {
+      "value": "{black.300}",
+      "type": "color"
+    }
+  },
+  "text": {
+    "standard": {
+      "value": "{gray.300}",
+      "type": "color"
+    },
+    "sub": {
+      "value": "{gray.900}",
+      "type": "color"
+    }
+  },
+  "input": {
+    "text": {
+      "lable": {
+        "value": "{text.standard}",
+        "type": "color"
+      },
+      "value": {
+        "value": "{gray.100}",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "{gray.400}",
+        "type": "color"
+      }
+    },
+    "background": {
+      "standard": {
+        "value": "{black.100}",
+        "type": "color"
+      }
+    },
+    "border": {
+      "standard": {
+        "value": "{fill.border}",
+        "type": "color"
+      }
+    }
+  },
+  "button": {
+    "text": {
+      "value": "{white.50}",
+      "type": "color"
+    },
+    "primary": {
+      "standard": {
+        "background": {
+          "value": "{brand.primary}",
+          "type": "color"
+        }
+      }
+    },
+    "secondary": {
+      "standard": {
+        "background": {
+          "value": "{brand.secondary}",
+          "type": "color"
+        }
+      }
+    },
+    "success": {
+      "standard": {
+        "background": {
+          "value": "{system.success}",
+          "type": "color"
+        }
+      }
+    },
+    "danger": {
+      "standard": {
+        "background": {
+          "value": "{system.danger}",
+          "type": "color"
+        }
+      }
+    },
+    "info": {
+      "standard": {
+        "background": {
+          "value": "{system.info}",
+          "type": "color"
+        }
+      }
+    }
+  },
+  "card": {
+    "background": {
+      "value": "{fill.card}",
+      "type": "color"
+    },
+    "border": {
+      "value": "{fill.border}",
+      "type": "color"
+    }
+  }
+}

package/tokens/setorder/token_digitalFont.json

@@ -0,0 +1,6 @@
+{
+  "MainTitle": {
+    "value": "Elice DigitalBaeum OTF",
+    "type": "fontFamilies"
+  }
+}