atomsystem 0.1.47 → 0.1.49

package/build/build-tokens.js

@@ -1,223 +0,0 @@
-import StyleDictionary from "style-dictionary";
-
-
-// 1. Style Dictionary 인스턴스 초기화
-const myStyleDictionary = new StyleDictionary({
-  source: ["tokens/tokens.json"],
-  preprocessors: ['flatten-global'],
-  hooks: {
-      preprocessors: {
-        'flatten-global': (dictionary) => {
-          // 1. global 객체를 찾습니다.
-          const { global, ...rest } = dictionary;
-          
-          // 2. global 내부의 내용을 루트로 끌어올려 병합합니다.
-          // 이렇게 하면 {palette.white} 참조가 루트 레벨에서 해석 가능해집니다.
-          return {
-            ...global,
-            ...rest
-          };
-        }
-      }
-    },
-  platforms: {
-    css: {
-      transformGroup: "css", // CSS 기본 변환 적용 (예: size/rem, color/hex 등)
-      buildPath: "build/css/",
-      files: [
-        {
-          destination: "_variables.css",
-          format: "myCustomFormat", // 아래에서 정의한 커스텀 포맷 사용
-          options: {
-            outputReferences: true, // CSS 변수 참조 활성화 (var(--name))
-          },
-        },
-      ],
-    },
-    typescript: {
-      transformGroup: "js",
-      buildPath: "build/typescript/",
-      files: [
-        {
-          destination: "theme.ts",
-          format: "theme",
-        },
-      ],
-    },
-  },
-  log: {
-    verbosity: 'verbose', // 어떤 reference를 못 찾는지 정확히 찍어줍니다.
-  },
-});
-
-// 2. 커스텀 포맷 등록
-// 토큰 그룹을 CSS 변수 블록으로 변환합니다.
-// - 'global' 카테고리 -> @theme 블록
-// - 그 외 카테고리 -> .{category} 클래스 블록
-myStyleDictionary.registerFormat({
-  name: "myCustomFormat",
-  format: function ({ dictionary, options }) {
-    // [헬퍼 함수]
-    // 1. getName: 토큰의 계층(type, item, subitem)을 하이픈(-)으로 연결하여 CSS 변수명 생성
-    //    예: palette.gray.500 -> palette-gray-500
-    const getName = (token) => token.path.slice(1).join("-");
-
-    // 2. getSemanticName: 시멘틱 토큰명을 생성 (예: color-card)
-    //    이름 규칙: $type(color)-...path -> color-bg-card
-    const getSemanticName = (token) => {
-      if (token.$type === "color") {
-        return [token.$type, ...token.path.slice(1)].join("-");
-      } else {
-        return null;
-      }
-    };
-
-    // [참조 맵 생성]
-    // {global.palette.white} 같은 참조 경로를 실제 토큰 객체로 찾기 위한 Map 생성
-    const tokenMap = new Map(
-      dictionary.allTokens.map((t) => [t.path.join("."), t])
-    );
-
-    // [토큰 그룹화]
-    // tokens.json의 최상위 카테고리(global, white, dark)별로 토큰을 묶음
-    const grouped = dictionary.allTokens.reduce((acc, token) => {
-      const category = token.attributes.category;
-      if (!acc[category]) acc[category] = [];
-      acc[category].push(token);
-      return acc;
-    }, {});
-
-    // [시멘틱 변수 수집 로직]
-    // global이 아닌 테마별 토큰(white, dark 등)을 순회하며 시멘틱 변수 정의를 수집함
-    // 목적: @theme 블록 안에 "--color-card: var(--card);" 형태의 매핑을 한 번만 선언하기 위함.
-    // 각 테마 파일(.white, .dark)에서는 --card 변수만 재정의하면 됨.
-    const themeTokens = dictionary.allTokens.filter(t => t.attributes.category !== 'palette');
-    const semanticMap = new Map();
-    
-    themeTokens.forEach(token => {
-        const semanticName = getSemanticName(token); // 예: color-card
-        const varName = getName(token);              // 예: card
-        
-        // 중복 선언 방지: 동일한 시멘틱 이름이 여러 테마에 있어도 한 번만 수집
-        if (semanticName && !semanticMap.has(semanticName)) {
-            semanticMap.set(semanticName, varName);
-        }
-    });
-
-    // 수집된 시멘틱 변수들을 CSS 문자열로 변환
-    const semanticCss = Array.from(semanticMap.entries())
-        .map(([name, val]) => `  --${name}: var(--${val});`)
-        .join('\n');
-
-
-    // [최종 CSS 생성]
-    // 그룹별로 순회하며 CSS 블록 생성
-    return Object.entries(grouped)
-      .map(([category, tokens]) => {
-        // 선택자 결정: 
-        // - 'global' 카테고리는 Tailwind CSS v4의 '@theme' 블록으로 변환
-        // - 나머지(white, dark)는 클래스 선택자(예: .white)로 변환
-        const selector = category === "palette" ? "@theme" : `.${category}`;
-
-
-        // 정렬
-        const typeOrder = ["color", "fontSizes", "fontWeights", "fontFamily", "borderRadius"];
-
-        const cssVariables = tokens
-          .sort((a, b) => {
-            const indexA = typeOrder.indexOf(a.$type);
-            const indexB = typeOrder.indexOf(b.$type);
-            if (indexA !== -1 && indexB !== -1) return indexA - indexB;
-            if (indexA !== -1) return -1;
-            if (indexB !== -1) return 1;
-            return 0;
-          })
-          .map((token) => {
-            const name = getName(token);
-            // 기본 값. 참조가 있다면 원본 값("{global.palette...}")을 가져옴
-            let value = token.$value || token.value;
-            const originalValue = token.original.$value || token.original.value;
-
-            // [수동 참조 해결]
-            // 값이 "{...}" 형태의 참조인 경우, 해당 참조를 var(--이름) 형태로 변환
-            if (
-              options?.outputReferences &&
-              typeof originalValue === "string" && // 값이 문자열이고
-              originalValue.includes("{")          // '{'를 포함하면 참조로 간주
-            ) {
-              value = originalValue.replace(/{([^}]+)}/g, (match, pathStr) => {
-                const refToken = tokenMap.get(pathStr);
-                if (refToken) {
-                  return `var(--${getName(refToken)})`;
-                }
-                return match; 
-              });
-            }
-
-            if (category === "palette") {
-              // $type을 확인하여 borderRadius나 dimension이면 px 추가
-              if(token.$type === "borderRadius" | token.$type === "fontSizes" | token.$type === "spacing" | token.$type === "sizing" | token.$type === "dimension") {
-                 if (!String(value).endsWith("px")) {
-                     return `--${name}: ${value}px;`;
-                 }
-              }
-              return `--${name}: ${value};`;
-            }
-            // 그 외 카테고리(테마)
-            if (token.$type === "color") {
-              return `--${name}: ${value};`;
-            }
-            if (token.$type === "spacing" || token.$type === "sizing") {
-               if (!String(value).endsWith("px") && !String(value).includes("var(")) {
-                   return `--${name}: ${value}px;`;
-               }
-               return `--${name}: ${value};`;
-            }
-            
-            return null;
-          })
-          .filter(Boolean)
-          .join("\n");
-
-        // global(@theme)인 경우에만 수집해둔 시멘틱 변수(semanticCss)를 추가
-        // @theme: Tailwind 유틸리티 클래스 생성에 필요 (bg-primary, text-secondary 등)
-        // Tailwind CSS v4의 @theme은 빌드 시 자동으로 :root에도 등록되므로 별도 :root 선언 불필요
-        if (selector === "@theme") {
-          return `@theme {\n${cssVariables}\n\n${semanticCss}\n}`;
-        }
-        return `${selector} {\n${cssVariables}\n} `;
-      })
-      .join("\n\n");
-  },
-});
-
-// 3. theme와 관련된 커스텀 포맷 등록
-// theme.ts 파일을 위한 포맷 등록
-myStyleDictionary.registerFormat({
-  name: "theme",
-  format: function ({ dictionary }) {
-    const groupedThemes = dictionary.allTokens.reduce((acc, token) => {
-      const category = token.attributes.category;
-      if (category === "palette") return acc;
-
-      if (category.includes("-")) {
-        const prefix = category.split("-")[0];
-        if (!acc[prefix]) acc[prefix] = [];
-        if (!acc[prefix].includes(category)) {
-          acc[prefix].push(category);
-        }
-      } else {
-        if (!acc.global) acc.global = [];
-        if (!acc.global.includes(category)) {
-          acc.global.push(category);
-        }
-      }
-      return acc;
-    }, { global: [] });
-
-    return `export const themes: Record<string, string[]> = ${JSON.stringify(groupedThemes, null, 2)};`;
-  },
-});
-
-// 3. 모든 플랫폼 빌드
-await myStyleDictionary.buildAllPlatforms();

package/build/css/_variables.css

@@ -1,251 +0,0 @@
-@theme {
---color-gray-100: #f5f5f5;
---color-gray-200: #e6e6e6;
---color-gray-300: #dbdbdb;
---color-gray-400: #d4d4d4;
---color-gray-500: #cccccc;
---color-gray-600: #bfbfbf;
---color-gray-700: #b3b3b3;
---color-gray-800: #a6a6a6;
---color-gray-900: #999999;
---color-gray-950: #707070;
---color-dark-100: #111111;
---color-dark-200: #222222;
---color-dark-300: #333333;
---color-dark-400: #444444;
---color-dark-500: #555555;
---color-dark-600: #666666;
---color-dark-700: #777777;
---color-dark-800: #888888;
---color-dark-900: #999999;
---color-dark-950: #b2b2b2;
---color-blue-100: #e3f2fd;
---color-blue-200: #bbdefb;
---color-blue-300: #90caf9;
---color-blue-400: #64b5f6;
---color-blue-500: #2196f3;
---color-blue-600: #1e88e5;
---color-blue-700: #1976d2;
---color-blue-800: #1565c0;
---color-blue-900: #0d47a1;
---color-blue-950: #0a2f6b;
---color-indigo-100: #e8eaf6;
---color-indigo-200: #c5cae9;
---color-indigo-300: #7986cb;
---color-indigo-400: #3f51b5;
---color-indigo-500: #162c4e;
---color-indigo-600: #122542;
---color-indigo-700: #0e1d35;
---color-indigo-800: #0a1628;
---color-indigo-900: #070f1b;
---color-indigo-950: #04080e;
---color-red-100: #ffebee;
---color-red-200: #ffcdd2;
---color-red-300: #ef9a9a;
---color-red-400: #e57373;
---color-red-500: #f44336;
---color-red-600: #e53935;
---color-red-700: #d32f2f;
---color-red-800: #c62828;
---color-red-900: #b71c1c;
---color-red-950: #7f1212;
---color-yellow-100: #fff8e1;
---color-yellow-200: #ffecb3;
---color-yellow-300: #ffe082;
---color-yellow-400: #ffd54f;
---color-yellow-500: #ffb300;
---color-yellow-600: #ffa000;
---color-yellow-700: #ff8f00;
---color-yellow-800: #ff6f00;
---color-yellow-900: #e65100;
---color-yellow-950: #9e3600;
---color-green-100: #e8f5e9;
---color-green-200: #c8e6c9;
---color-green-300: #a5d6a7;
---color-green-400: #81c784;
---color-green-500: #4caf50;
---color-green-600: #43a047;
---color-green-700: #388e3c;
---color-green-800: #2e7d32;
---color-green-900: #1b5e20;
---color-green-950: #104015;
---color-black: #111111;
---color-white: #fafafa;
---color-primary: var(--color-blue-500);
---color-secondary: var(--color-indigo-500);
---color-danger: var(--color-red-500);
---color-warning: var(--color-yellow-500);
---color-info: var(--color-gray-900);
---color-success: var(--color-green-500);
---text-h1: 40px;
---text-h2: 36px;
---text-h3: 28px;
---text-h4: 24px;
---text-h5: 20px;
---text-h6: 16px;
---text-body: 16px;
---text-sm: 12px;
---font-weight-header: 700;
---radius-common: 4px;
---radius-circle: 10000000px;
---font-spoqaNeo: Spoqa Han Sans Neo;
---spacing-common-y: 12px;
---spacing-common-x: 16px;
---spacing-gap-small: 4px;
---spacing-sm-y: 8px;
---spacing-small: 20px;
-
-  --color-bg-card: var(--bg-card);
-  --color-bg-wrapper: var(--bg-wrapper);
-  --color-bg-hover: var(--bg-hover);
-  --color-bg-input-standard: var(--bg-input-standard);
-  --color-bg-input-hover: var(--bg-input-hover);
-  --color-bg-input-disabled: var(--bg-input-disabled);
-  --color-text-title: var(--text-title);
-  --color-text-body: var(--text-body);
-  --color-text-sub: var(--text-sub);
-  --color-text-standard: var(--text-standard);
-  --color-text-active: var(--text-active);
-  --color-text-placeholder: var(--text-placeholder);
-  --color-text-disabled: var(--text-disabled);
-  --color-border-standard: var(--border-standard);
-  --color-border-active: var(--border-active);
-  --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
-  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
-  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
-  --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
-  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
-  --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
-  --color-button-success-bg-disabled: var(--button-success-bg-disabled);
-  --color-button-success-text-disabled: var(--button-success-text-disabled);
-  --color-button-success-border-disabled: var(--button-success-border-disabled);
-  --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
-  --color-button-danger-text-disabled: var(--button-danger-text-disabled);
-  --color-button-danger-border-disabled: var(--button-danger-border-disabled);
-  --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
-  --color-button-warning-text-disabled: var(--button-warning-text-disabled);
-  --color-button-warning-border-disabled: var(--button-warning-border-disabled);
-  --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
-  --color-button-gray-text-disabled: var(--button-gray-text-disabled);
-  --color-button-gray-border-disabled: var(--button-gray-border-disabled);
-  --color-table-header-bg: var(--table-header-bg);
-  --color-table-header-text: var(--table-header-text);
-  --color-table-header-border: var(--table-header-border);
-  --color-table-body-bg: var(--table-body-bg);
-  --color-table-body-bgEven: var(--table-body-bgEven);
-  --color-table-body-text: var(--table-body-text);
-  --color-table-body-border: var(--table-body-border);
-  --color-pagination-bg-hover: var(--pagination-bg-hover);
-  --color-callout-note-bg: var(--callout-note-bg);
-  --color-callout-note-text: var(--callout-note-text);
-  --color-callout-tip-bg: var(--callout-tip-bg);
-  --color-callout-tip-text: var(--callout-tip-text);
-  --color-callout-danger-bg: var(--callout-danger-bg);
-  --color-callout-danger-text: var(--callout-danger-text);
-  --color-callout-warning-bg: var(--callout-warning-bg);
-  --color-callout-warning-text: var(--callout-warning-text);
-}
-
-.white {
---bg-card: var(--color-white);
---bg-wrapper: var(--color-gray-200);
---bg-hover: var(--color-gray-200);
---bg-input-standard: var(--color-gray-100);
---bg-input-hover: var(--color-gray-200);
---bg-input-disabled: var(--color-gray-500);
---text-title: var(--color-dark-100);
---text-body: var(--color-dark-400);
---text-sub: var(--color-gray-950);
---text-standard: var(--color-dark-300);
---text-active: var(--color-gray-100);
---text-placeholder: var(--color-gray-950);
---text-disabled: var(--color-gray-950);
---border-standard: var(--color-gray-500);
---border-active: var(--color-dark-400);
---button-primary-bg-disabled: var(--color-blue-200);
---button-primary-text-disabled: var(--color-blue-400);
---button-primary-border-disabled: var(--color-blue-200);
---button-secondary-bg-disabled: var(--color-indigo-200);
---button-secondary-text-disabled: var(--color-indigo-400);
---button-secondary-border-disabled: var(--color-indigo-200);
---button-success-bg-disabled: var(--color-green-200);
---button-success-text-disabled: var(--color-green-400);
---button-success-border-disabled: var(--color-green-200);
---button-danger-bg-disabled: var(--color-red-200);
---button-danger-text-disabled: var(--color-red-400);
---button-danger-border-disabled: var(--color-red-200);
---button-warning-bg-disabled: var(--color-yellow-200);
---button-warning-text-disabled: var(--color-yellow-400);
---button-warning-border-disabled: var(--color-yellow-200);
---button-gray-bg-disabled: var(--color-gray-200);
---button-gray-text-disabled: var(--color-gray-500);
---button-gray-border-disabled: var(--color-gray-300);
---table-header-bg: var(--color-gray-400);
---table-header-text: var(--color-dark-500);
---table-header-border: var(--color-gray-500);
---table-body-bg: var(--color-white);
---table-body-bgEven: var(--color-gray-100);
---table-body-text: var(--color-dark-300);
---table-body-border: var(--color-gray-300);
---pagination-bg-hover: var(--color-gray-100);
---callout-note-bg: var(--color-gray-100);
---callout-note-text: var(--color-gray-900);
---callout-tip-bg: var(--color-green-100);
---callout-tip-text: var(--color-green-900);
---callout-danger-bg: var(--color-red-100);
---callout-danger-text: var(--color-red-900);
---callout-warning-bg: var(--color-yellow-100);
---callout-warning-text: var(--color-yellow-900);
-} 
-
-.dark {
---bg-card: var(--color-dark-200);
---bg-wrapper: var(--color-black);
---bg-hover: var(--color-dark-400);
---bg-input-standard: var(--color-dark-300);
---bg-input-hover: var(--color-dark-400);
---bg-input-disabled: var(--color-dark-200);
---text-title: var(--color-white);
---text-body: var(--color-gray-200);
---text-sub: var(--color-gray-600);
---text-standard: var(--color-white);
---text-active: var(--color-white);
---text-placeholder: var(--color-gray-950);
---text-disabled: var(--color-dark-400);
---border-standard: var(--color-dark-400);
---border-active: var(--color-gray-500);
---button-primary-bg-disabled: var(--color-blue-900);
---button-primary-text-disabled: var(--color-blue-700);
---button-primary-border-disabled: var(--color-blue-800);
---button-secondary-bg-disabled: var(--color-indigo-900);
---button-secondary-text-disabled: var(--color-indigo-700);
---button-secondary-border-disabled: var(--color-indigo-800);
---button-success-bg-disabled: var(--color-green-900);
---button-success-text-disabled: var(--color-green-700);
---button-success-border-disabled: var(--color-green-800);
---button-danger-bg-disabled: var(--color-red-900);
---button-danger-text-disabled: var(--color-red-700);
---button-danger-border-disabled: var(--color-red-800);
---button-warning-bg-disabled: var(--color-yellow-900);
---button-warning-text-disabled: var(--color-yellow-700);
---button-warning-border-disabled: var(--color-yellow-800);
---button-gray-bg-disabled: var(--color-gray-800);
---button-gray-text-disabled: var(--color-gray-600);
---button-gray-border-disabled: var(--color-gray-700);
---table-header-bg: var(--color-dark-400);
---table-header-text: var(--color-gray-200);
---table-header-border: var(--color-dark-600);
---table-body-bg: var(--color-dark-200);
---table-body-bgEven: var(--color-dark-300);
---table-body-text: var(--color-gray-200);
---table-body-border: var(--color-dark-400);
---pagination-bg-hover: var(--color-dark-300);
---callout-note-bg: var(--color-dark-300);
---callout-note-text: var(--color-white);
---callout-tip-bg: var(--color-green-950);
---callout-tip-text: var(--color-green-200);
---callout-danger-bg: var(--color-red-950);
---callout-danger-text: var(--color-red-200);
---callout-warning-bg: var(--color-yellow-950);
---callout-warning-text: var(--color-yellow-200);
-} 

package/build/typescript/theme.ts

@@ -1,6 +0,0 @@
-export const themes: Record<string, string[]> = {
-  "global": [
-    "white",
-    "dark"
-  ]
-};

package/css/text.css

@@ -1,18 +0,0 @@
-body{
-    @apply text-text-standard
-}
-
-h1, h2, h3, h4, h5, h6 {
-    @apply text-text-title font-header
-}
-
-h1{ @apply text-h1 }
-h2{ @apply text-h2 }
-h3{ @apply text-h3 }
-h4{ @apply text-h4 }
-h5{ @apply text-h5 }
-h6{ @apply text-h6 }
-
-p{
-    @apply text-text-body text-body
-}