@becca202420/moment-token 0.0.1

package/README.md

@@ -0,0 +1,104 @@
+# moment-token
+
+moment-token
+
+제품 UI용 디자인 토큰 모음입니다. 색상, 여백(spacing), 반경(radius), 타이포그래피(primitives)와 의미론적(semantic) 디자인 변수들을 포함합니다.
+
+이 패키지는 웹 애플리케이션에서 사용하기 위한 생성된 CSS 변수, SCSS 변수, Tailwind v4 테마 토큰 및 원본 토큰 JSON 파일들을 내보냅니다.
+
+## 설치
+
+```bash
+npm install @becca202420/moment_token
+```
+
+## 패키지 내보내기 (exports)
+
+```js
+import "@becca202420/moment-token/css";
+import "@becca202420/moment-token/scss";
+import "@becca202420/moment-token/tailwind";
+```
+
+원본 JSON 토큰 파일을 직접 가져다 쓸 수도 있습니다:
+
+```js
+import colors from "@becca202420/moment-token/tokens/color---semantic.json";
+```
+
+## 제공되는 출력물
+
+- CSS 변수: `@becca202420/moment-token/css`
+- SCSS 변수: `@becca202420/moment-token/scss`
+- Tailwind v4 테마: `@kbecca202420/moment-token/tailwind`
+- 원본 토큰 파일: `@becca202420/moment-token/tokens/*`
+
+## 사용 예시
+
+### CSS
+
+```css
+@import "@becca202420/moment-token/css";
+
+.card {
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+}
+```
+
+### SCSS
+
+```scss
+@use "@becca202420/moment-token/scss" as *;
+
+.card {
+  background: $color-surface-default;
+  color: $color-text-primary;
+  border-radius: $radius-md;
+  padding: $spacing-4;
+}
+```
+
+### Tailwind CSS
+
+```css
+@import "tailwindcss";
+@import "@becca202420/moment-token/tailwind";
+```
+
+Tailwind v4에서 제공하는 생성된 테마 변수를 통해 디자인 토큰을 사용할 수 있습니다.
+
+## 포함된 토큰 그룹
+
+- 색상 (Colors)
+  - 원시 색상(primitive)
+  - 의미적 토큰(브랜드, 표면, 텍스트, 배지 등)
+- 여백 (Spacing)
+- 반경 (Radius)
+- 타이포그래피 (Typography)
+  - 폰트 크기
+  - 행간(line-height)
+  - 자간(letter-spacing)
+  - 폰트 패밀리
+
+## 원본 및 빌드
+
+이 패키지는 `tokens/` 디렉터리의 JSON 토큰 파일들에서 Style Dictionary를 사용해 생성됩니다.
+
+```bash
+npm run build
+```
+
+빌드 스크립트: `node build-tokens.mjs` (package.json의 `build` 스크립트 참조)
+
+배포 전에는 `npm run build` 또는 `npm publish` 전에 자동 실행되는 `prepublishOnly` 훅이 동작합니다.
+
+## 라이선스
+
+MIT
+
+## 저장소
+
+https://github.com/becca202420/moment-token

package/build-tokens.mjs

@@ -0,0 +1,99 @@
+import StyleDictionary from "style-dictionary";
+
+// Figma 동기화 산출물의 $type은 'dimension'이 아니라 'number'라서
+// style-dictionary 내장 size/px 변환이 매치되지 않습니다. 그래서 직접 만들어 사용합니다.
+StyleDictionary.registerTransform({
+  name: "moment/name",
+  type: "name",
+  transform: (token) => {
+    const file = token.filePath ?? "";
+    const path = token.path;
+
+    if (file.includes("color")) return ["color", ...path].join("-");
+
+    if (file.includes("spacing")) {
+      const rest = path[0].replace(/^space-/, "");
+      return ["spacing", rest].join("-");
+    }
+
+    if (file.includes("radius")) return path.join("-");
+
+    if (file.includes("typography")) {
+      const [category, ...rest] = path;
+      const namespace =
+        {
+          "font-size": "font-size",
+          "line-height": "leading",
+          "letter-spacing": "tracking",
+          "font-family": "font",
+        }[category] ?? category;
+      return [namespace, ...rest].join("-");
+    }
+
+    return path.join("-");
+  },
+});
+
+StyleDictionary.registerTransform({
+  name: "moment/value",
+  type: "value",
+  filter: (token) => token.$type === "number" || token.$type === "string",
+  transform: (token) => {
+    if (token.$type === "string") return `"${token.$value}"`;
+
+    const file = token.filePath ?? "";
+    const value = Math.round(token.$value * 1000) / 1000;
+
+    if (file.includes("spacing") || file.includes("radius"))
+      return `${value}px`;
+
+    if (file.includes("typography")) {
+      const category = token.path[0];
+      if (category === "font-size") return `${value}px`;
+      if (category === "letter-spacing") return `${value}em`;
+    }
+
+    return `${value}`;
+  },
+});
+
+const sd = new StyleDictionary({
+  source: ["tokens/**/*.json"],
+  platforms: {
+    css: {
+      transforms: ["moment/name", "moment/value"],
+      buildPath: "dist/css/",
+      files: [
+        {
+          destination: "variables.css",
+          format: "css/variables",
+          options: { outputReferences: true },
+        },
+      ],
+    },
+    scss: {
+      transforms: ["moment/name", "moment/value"],
+      buildPath: "dist/scss/",
+      files: [
+        {
+          destination: "_variables.scss",
+          format: "scss/variables",
+          options: { outputReferences: true },
+        },
+      ],
+    },
+    tailwind: {
+      transforms: ["moment/name", "moment/value"],
+      buildPath: "dist/tailwind/",
+      files: [
+        {
+          destination: "theme.css",
+          format: "css/variables",
+          options: { outputReferences: true, selector: "@theme" },
+        },
+      ],
+    },
+  },
+});
+
+await sd.buildAllPlatforms();

package/dist/css/variables.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+
+}

package/dist/scss/_variables.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+

package/dist/tailwind/theme.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@theme {
+
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@becca202420/moment-token",
+  "version": "0.0.1",
+  "description": "moment_token design tokens (CSS variables, SCSS variables, Tailwind v4 theme)",
+  "files": [
+    "dist",
+    "tokens",
+    "build-tokens.mjs"
+  ],
+  "exports": {
+    "./css": "./dist/css/variables.css",
+    "./scss": "./dist/scss/_variables.scss",
+    "./tailwind": "./dist/tailwind/theme.css",
+    "./tokens/*": "./tokens/*"
+  },
+  "scripts": {
+    "build": "node build-tokens.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/becca202420/moment-token.git"
+  },
+  "keywords": [
+    "design-tokens",
+    "style-dictionary",
+    "css-variables",
+    "tailwindcss"
+  ],
+  "author": "becca202420",
+  "license": "MIT",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/becca202420/moment-token/issues"
+  },
+  "homepage": "https://github.com/becca202420/moment-token#readme",
+  "devDependencies": {
+    "style-dictionary": "5.5.3"
+  }
+}

package/tokens/collection.json

@@ -0,0 +1 @@
+{}

package/tokens/color---primitives.json

@@ -0,0 +1,78 @@
+{
+  "white": {
+    "$value": "#ffffff",
+    "$type": "color"
+  },
+  "charcoal-950": {
+    "$value": "#211a13",
+    "$type": "color"
+  },
+  "sand": {
+    "100": {
+      "$value": "#faf7f2",
+      "$type": "color"
+    },
+    "200": {
+      "$value": "#f1e9dc",
+      "$type": "color"
+    },
+    "300": {
+      "$value": "#e4d8c4",
+      "$type": "color"
+    },
+    "400": {
+      "$value": "#c9b79c",
+      "$type": "color"
+    },
+    "500": {
+      "$value": "#a38f72",
+      "$type": "color"
+    }
+  },
+  "espresso": {
+    "800": {
+      "$value": "#4a3a2c",
+      "$type": "color"
+    },
+    "900": {
+      "$value": "#2e2318",
+      "$type": "color"
+    },
+    "950": {
+      "$value": "#211a12",
+      "$type": "color"
+    }
+  },
+  "gray-warm": {
+    "500": {
+      "$value": "#8b8072",
+      "$type": "color"
+    },
+    "700": {
+      "$value": "#665c4f",
+      "$type": "color"
+    }
+  },
+  "moss": {
+    "600": {
+      "$value": "#7c8a6d",
+      "$type": "color"
+    },
+    "700": {
+      "$value": "#5f6e52",
+      "$type": "color"
+    }
+  },
+  "clay": {
+    "500": {
+      "$value": "#b8794f",
+      "$type": "color"
+    }
+  },
+  "border": {
+    "subtle": {
+      "$value": "{sand.300}",
+      "$type": "color"
+    }
+  }
+}

package/tokens/color---semantic.json

@@ -0,0 +1,54 @@
+{
+  "brand": {
+    "primary": {
+      "$value": "{espresso.900}",
+      "$type": "color"
+    },
+    "accent": {
+      "$value": "{moss.700}",
+      "$type": "color"
+    },
+    "accent-secondary": {
+      "$value": "{clay.500}",
+      "$type": "color"
+    }
+  },
+  "surface": {
+    "default": {
+      "$value": "{white}",
+      "$type": "color"
+    },
+    "subtle": {
+      "$value": "{sand.100}",
+      "$type": "color"
+    },
+    "accent": {
+      "$value": "{sand.200}",
+      "$type": "color"
+    },
+    "accent-strong": {
+      "$value": "{sand.300}",
+      "$type": "color"
+    },
+    "inverse": {
+      "$value": "{espresso.800}",
+      "$type": "color"
+    },
+    "inverse-strong": {
+      "$value": "{espresso.950}",
+      "$type": "color"
+    }
+  },
+  "text": {
+    "$value": "{white}",
+    "$type": "color"
+  },
+  "new-bg": {
+    "$value": "{moss.600}",
+    "$type": "color"
+  },
+  "best-bg": {
+    "$value": "{clay.500}",
+    "$type": "color"
+  }
+}

package/tokens/radius.json

@@ -0,0 +1,22 @@
+{
+  "radius-sm": {
+    "$value": 8,
+    "$type": "number"
+  },
+  "radius-md": {
+    "$value": 16,
+    "$type": "number"
+  },
+  "radius-lg": {
+    "$value": 24,
+    "$type": "number"
+  },
+  "radius-xl": {
+    "$value": 32,
+    "$type": "number"
+  },
+  "radius-full": {
+    "$value": 999,
+    "$type": "number"
+  }
+}

package/tokens/spacing.json

@@ -0,0 +1,42 @@
+{
+  "space-1": {
+    "$value": 4,
+    "$type": "number"
+  },
+  "space-2": {
+    "$value": 8,
+    "$type": "number"
+  },
+  "space-3": {
+    "$value": 12,
+    "$type": "number"
+  },
+  "space-4": {
+    "$value": 16,
+    "$type": "number"
+  },
+  "space-5": {
+    "$value": 24,
+    "$type": "number"
+  },
+  "space-6": {
+    "$value": 32,
+    "$type": "number"
+  },
+  "space-7": {
+    "$value": 48,
+    "$type": "number"
+  },
+  "space-8": {
+    "$value": 64,
+    "$type": "number"
+  },
+  "space-9": {
+    "$value": 96,
+    "$type": "number"
+  },
+  "space-10": {
+    "$value": 128,
+    "$type": "number"
+  }
+}

package/tokens/typography.json

@@ -0,0 +1,74 @@
+{
+  "line-height": {
+    "tight": {
+      "$value": 1.149999976158142,
+      "$type": "number"
+    },
+    "tight-sm": {
+      "$value": 1.350000023841858,
+      "$type": "number"
+    },
+    "normal": {
+      "$value": 1.600000023841858,
+      "$type": "number"
+    }
+  },
+  "letter-spacing": {
+    "tight": {
+      "$value": -0.009999999776482582,
+      "$type": "number"
+    },
+    "normal": {
+      "$value": 0,
+      "$type": "number"
+    },
+    "wide": {
+      "$value": 0.07999999821186066,
+      "$type": "number"
+    }
+  },
+  "font-sizing": {
+    "display": {
+      "$value": 48,
+      "$type": "number"
+    },
+    "h1": {
+      "$value": 36,
+      "$type": "number"
+    },
+    "h2": {
+      "$value": 28,
+      "$type": "number"
+    },
+    "h3": {
+      "$value": 20,
+      "$type": "number"
+    },
+    "body-lg": {
+      "$value": 18,
+      "$type": "number"
+    },
+    "body": {
+      "$value": 16,
+      "$type": "number"
+    },
+    "body-sm": {
+      "$value": 15,
+      "$type": "number"
+    },
+    "caption": {
+      "$value": 13,
+      "$type": "number"
+    }
+  },
+  "font-family": {
+    "primary": {
+      "$value": "Monrope",
+      "$type": "string"
+    },
+    "String": {
+      "$value": "Fraunces",
+      "$type": "string"
+    }
+  }
+}