@uniai-fe/uds-foundation 0.4.3 → 0.4.4

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { color_primitive, color_semantic } from './data/color.js';
 export { spacing_gap, spacing_padding } from './data/spacing.js';
 export { layout_breakpoint, layout_radius, layout_size } from './data/layout.js';
 export { typography_tokens } from './data/typography.js';
-export { ThemeColorPrimitive, ThemeColorSemanticSection, ThemeLayoutSizes, ThemeSpacingScale, ThemeTokens, ThemeTypographyCategory, ThemeTypographyVariant } from './types/theme-tokens.js';
+export { ThemeColorPrimitive, ThemeColorSemantic, ThemeColorSemanticSection, ThemeLayoutBreakpoint, ThemeLayoutRadius, ThemeLayoutSize, ThemeLayoutSizes, ThemeSpacingGap, ThemeSpacingPadding, ThemeSpacingScale, ThemeTokens, ThemeTypography, ThemeTypographyCategory, ThemeTypographyVariant } from './types/theme-tokens.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/types/theme-tokens.d.ts

@@ -1,78 +1,67 @@
+import { color_primitive, color_semantic } from '../data/color.js';
+import { layout_breakpoint, layout_radius, layout_size } from '../data/layout.js';
+import { spacing_gap, spacing_padding } from '../data/spacing.js';
+import { themeTokens } from '../data/tokens.js';
+import { typography_tokens } from '../data/typography.js';
+
 /**
- * ThemeTypographyVariant; typography variant token 구조
- * @property {number} size font-size px 값
- * @property {string} line_height line-height 값
- * @property {number} letter_spacing letter-spacing 값
- * @property {number} font_weight font-weight 값
+ * ThemeColorPrimitive; primitive color token snapshot 타입
  */
-interface ThemeTypographyVariant {
-    /**
-     * font-size px 값
-     */
-    readonly size: number;
-    /**
-     * line-height 값
-     */
-    readonly line_height: string;
-    /**
-     * letter-spacing 값
-     */
-    readonly letter_spacing: number;
-    /**
-     * font-weight 값
-     */
-    readonly font_weight: number;
-}
+type ThemeColorPrimitive = typeof color_primitive;
 /**
- * ThemeColorPrimitive; primitive color token map
+ * ThemeColorSemantic; semantic color token snapshot 타입
  */
-type ThemeColorPrimitive = Record<string, string>;
+type ThemeColorSemantic = typeof color_semantic;
 /**
- * ThemeColorSemanticSection; semantic color nested token map
+ * ThemeColorSemanticSection; semantic color nested token map 호환 타입
  * @property {string | ThemeColorSemanticSection} [token] semantic color value 또는 하위 section
  */
 interface ThemeColorSemanticSection {
     readonly [token: string]: string | ThemeColorSemanticSection;
 }
 /**
- * ThemeSpacingScale; spacing scale token map
+ * ThemeSpacingPadding; spacing padding token snapshot 타입
+ */
+type ThemeSpacingPadding = typeof spacing_padding;
+/**
+ * ThemeSpacingGap; spacing gap token snapshot 타입
+ */
+type ThemeSpacingGap = typeof spacing_gap;
+/**
+ * ThemeSpacingScale; spacing scale token map 호환 타입
  */
 type ThemeSpacingScale = Record<string, number>;
 /**
- * ThemeLayoutSizes; layout size token map
+ * ThemeLayoutBreakpoint; layout breakpoint token snapshot 타입
+ */
+type ThemeLayoutBreakpoint = typeof layout_breakpoint;
+/**
+ * ThemeLayoutSize; layout size token snapshot 타입
+ */
+type ThemeLayoutSize = typeof layout_size;
+/**
+ * ThemeLayoutRadius; layout radius token snapshot 타입
+ */
+type ThemeLayoutRadius = typeof layout_radius;
+/**
+ * ThemeLayoutSizes; layout size token map 호환 타입
  */
 type ThemeLayoutSizes = Record<string, number>;
 /**
- * ThemeTypographyCategory; typography category token map
+ * ThemeTypography; typography token snapshot 타입
+ */
+type ThemeTypography = typeof typography_tokens;
+/**
+ * ThemeTypographyCategory; typography category token map 타입
  */
-type ThemeTypographyCategory = Record<string, ThemeTypographyVariant>;
+type ThemeTypographyCategory = ThemeTypography[keyof ThemeTypography];
+/**
+ * ThemeTypographyVariant; typography variant token 구조
+ */
+type ThemeTypographyVariant = ThemeTypographyCategory[keyof ThemeTypographyCategory];
 /**
  * ThemeTokens; foundation token snapshot 전체 구조
- * @property {{ primitive: ThemeColorPrimitive; semantic: ThemeColorSemanticSection }} color color token 집합
- * @property {{ padding: ThemeSpacingScale; gap: ThemeSpacingScale }} spacing spacing token 집합
- * @property {{ breakpoint: Record<"xsmall" | "small" | "medium" | "large", number>; size: ThemeLayoutSizes; radius: { size: ThemeLayoutSizes; level: ThemeLayoutSizes } }} layout layout token 집합
- * @property {{ [category: string]: ThemeTypographyCategory }} typography typography token 집합
  */
-interface ThemeTokens {
-    readonly color: {
-        readonly primitive: ThemeColorPrimitive;
-        readonly semantic: ThemeColorSemanticSection;
-    };
-    readonly spacing: {
-        readonly padding: ThemeSpacingScale;
-        readonly gap: ThemeSpacingScale;
-    };
-    readonly layout: {
-        readonly breakpoint: Record<"xsmall" | "small" | "medium" | "large", number>;
-        readonly size: ThemeLayoutSizes;
-        readonly radius: {
-            readonly size: ThemeLayoutSizes;
-            readonly level: ThemeLayoutSizes;
-        };
-    };
-    readonly typography: {
-        readonly [category: string]: ThemeTypographyCategory;
-    };
-}
+type ThemeTokens = typeof themeTokens;
 
-export type { ThemeColorPrimitive, ThemeColorSemanticSection, ThemeLayoutSizes, ThemeSpacingScale, ThemeTokens, ThemeTypographyCategory, ThemeTypographyVariant };
+export type { ThemeColorPrimitive, ThemeColorSemantic, ThemeColorSemanticSection, ThemeLayoutBreakpoint, ThemeLayoutRadius, ThemeLayoutSize, ThemeLayoutSizes, ThemeSpacingGap, ThemeSpacingPadding, ThemeSpacingScale, ThemeTokens, ThemeTypography, ThemeTypographyCategory, ThemeTypographyVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-foundation",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "UNIAI Design System; Design Foundation Package",
   "type": "module",
   "private": false,

package/src/data/color.ts

@@ -1,16 +1,11 @@
-import type {
-  ThemeColorPrimitive,
-  ThemeColorSemanticSection,
-} from "../types/theme-tokens";
-
-const color_common: ThemeColorPrimitive = {
+const color_common = {
   // 하위호환을 위해 common_99/common_100을 함께 유지한다.
   common_99: "#fff",
   common_100: "#fff",
   common_0: "#000",
-} as const;
+} satisfies Record<string, string>;
 
-const color_neutral: ThemeColorPrimitive = {
+const color_neutral = {
   neutral_10: "#1a1a1a",
   neutral_20: "#333333",
   neutral_30: "#4d4d4d",
@@ -24,9 +19,9 @@ const color_neutral: ThemeColorPrimitive = {
   neutral_90: "#e6e6e6",
   neutral_95: "#f2f2f2",
   neutral_99: "#fcfcfc",
-} as const;
+} satisfies Record<string, string>;
 
-const color_cool_gray: ThemeColorPrimitive = {
+const color_cool_gray = {
   cool_gray_10: "#18191b",
   cool_gray_20: "#313235",
   cool_gray_25: "#3d3f43",
@@ -45,9 +40,9 @@ const color_cool_gray: ThemeColorPrimitive = {
   cool_gray_90: "#e4e5e7",
   cool_gray_95: "#f2f2f3",
   cool_gray_99: "#fcfcfd",
-} as const;
+} satisfies Record<string, string>;
 
-const color_blue: ThemeColorPrimitive = {
+const color_blue = {
   blue_10: "#001233",
   blue_20: "#002466",
   blue_30: "#003699",
@@ -61,9 +56,9 @@ const color_blue: ThemeColorPrimitive = {
   blue_90: "#ccdeff",
   blue_95: "#e5eeff",
   blue_99: "#fafcff",
-} as const;
+} satisfies Record<string, string>;
 
-const color_purple: ThemeColorPrimitive = {
+const color_purple = {
   purple_10: "#120033",
   purple_20: "#240066",
   purple_30: "#360099",
@@ -77,9 +72,9 @@ const color_purple: ThemeColorPrimitive = {
   purple_90: "#deccff",
   purple_95: "#efe5ff",
   purple_99: "#fcfaff",
-} as const;
+} satisfies Record<string, string>;
 
-const color_magenta: ThemeColorPrimitive = {
+const color_magenta = {
   magenta_10: "#32012e",
   magenta_20: "#64025b",
   magenta_30: "#950489",
@@ -93,9 +88,9 @@ const color_magenta: ThemeColorPrimitive = {
   magenta_90: "#fecdfa",
   magenta_95: "#fee6fc",
   magenta_99: "#fffafe",
-} as const;
+} satisfies Record<string, string>;
 
-const color_pink: ThemeColorPrimitive = {
+const color_pink = {
   pink_10: "#320116",
   pink_20: "#63032b",
   pink_30: "#950441",
@@ -109,9 +104,9 @@ const color_pink: ThemeColorPrimitive = {
   pink_90: "#fecde2",
   pink_95: "#fee6f0",
   pink_99: "#fffafc",
-} as const;
+} satisfies Record<string, string>;
 
-const color_red: ThemeColorPrimitive = {
+const color_red = {
   red_10: "#310602",
   red_20: "#610d05",
   red_30: "#921307",
@@ -125,9 +120,9 @@ const color_red: ThemeColorPrimitive = {
   red_90: "#fcd2cf",
   red_95: "#fde8e7",
   red_99: "#fffafa",
-} as const;
+} satisfies Record<string, string>;
 
-const color_orange: ThemeColorPrimitive = {
+const color_orange = {
   orange_10: "#331100",
   orange_20: "#662200",
   orange_30: "#993300",
@@ -141,9 +136,9 @@ const color_orange: ThemeColorPrimitive = {
   orange_90: "#ffddcc",
   orange_95: "#ffeee5",
   orange_99: "#fffcfa",
-} as const;
+} satisfies Record<string, string>;
 
-const color_yellow: ThemeColorPrimitive = {
+const color_yellow = {
   yellow_10: "#302903",
   yellow_20: "#615205",
   yellow_30: "#917a08",
@@ -157,9 +152,9 @@ const color_yellow: ThemeColorPrimitive = {
   yellow_90: "#fcf5cf",
   yellow_95: "#fefae7",
   yellow_99: "#fffefa",
-} as const;
+} satisfies Record<string, string>;
 
-const color_lime: ThemeColorPrimitive = {
+const color_lime = {
   lime_10: "#2b3300",
   lime_20: "#556600",
   lime_30: "#809900",
@@ -173,9 +168,9 @@ const color_lime: ThemeColorPrimitive = {
   lime_90: "#f7ffcc",
   lime_95: "#fbffe5",
   lime_99: "#fefffa",
-} as const;
+} satisfies Record<string, string>;
 
-const color_green: ThemeColorPrimitive = {
+const color_green = {
   green_10: "#062d13",
   green_20: "#0d5926",
   green_30: "#138639",
@@ -189,9 +184,9 @@ const color_green: ThemeColorPrimitive = {
   green_90: "#d2f9df",
   green_95: "#e9fcef",
   green_99: "#fbfefc",
-} as const;
+} satisfies Record<string, string>;
 
-const color_bright_green: ThemeColorPrimitive = {
+const color_bright_green = {
   bright_green_10: "#213003",
   bright_green_20: "#426105",
   bright_green_30: "#639108",
@@ -205,9 +200,9 @@ const color_bright_green: ThemeColorPrimitive = {
   bright_green_90: "#edfccf",
   bright_green_95: "#f6fee7",
   bright_green_99: "#fdfffa",
-} as const;
+} satisfies Record<string, string>;
 
-const color_teal: ThemeColorPrimitive = {
+const color_teal = {
   teal_10: "#062d20",
   teal_20: "#0d5940",
   teal_30: "#13865f",
@@ -221,9 +216,9 @@ const color_teal: ThemeColorPrimitive = {
   teal_90: "#d2f9ec",
   teal_95: "#e9fcf5",
   teal_99: "#fbfefd",
-} as const;
+} satisfies Record<string, string>;
 
-const color_cyan: ThemeColorPrimitive = {
+const color_cyan = {
   cyan_10: "#002f33",
   cyan_20: "#005e66",
   cyan_30: "#008c99",
@@ -237,14 +232,14 @@ const color_cyan: ThemeColorPrimitive = {
   cyan_90: "#ccfbff",
   cyan_95: "#e5fdff",
   cyan_99: "#faffff",
-} as const;
+} satisfies Record<string, string>;
 
 /**
  * Foundation Color Data; primitive color token snapshot
  * /_context/** 추출본을 참고해 수동으로 동기화한 컬러 토큰이다.
  * SCSS 값과 어긋나면 이 객체를 함께 수정해 문서/검증에 활용한다.
  */
-export const color_primitive: ThemeColorPrimitive = {
+export const color_primitive = {
   ...color_common,
   ...color_neutral,
   ...color_cool_gray,
@@ -260,13 +255,14 @@ export const color_primitive: ThemeColorPrimitive = {
   ...color_bright_green,
   ...color_teal,
   ...color_cyan,
-};
+} satisfies Record<string, string>;
 
 /**
  * Foundation Color Data; semantic color token snapshot
  * canonical semantic 경로만 유지하며, CSS 하위호환 alias 변수는 SCSS 레이어에서만 함께 제공한다.
  */
-export const color_semantic: ThemeColorSemanticSection = {
+// 변경: token object가 SOT가 되도록 별도 schema 주석 없이 실제 snapshot shape를 보존한다.
+export const color_semantic = {
   primary: {
     default: color_primitive.blue_55,
     strong: color_primitive.blue_45,

package/src/data/layout.ts

@@ -1,19 +1,17 @@
-import type { ThemeTokens } from "../types/theme-tokens";
-
 /**
  * Foundation Layout Data; breakpoint token snapshot
  */
-export const layout_breakpoint: ThemeTokens["layout"]["breakpoint"] = {
+export const layout_breakpoint = {
   xsmall: 0,
   small: 768,
   medium: 992,
   large: 1200,
-};
+} satisfies Record<string, number>;
 
 /**
  * Foundation Layout Data; layout size token snapshot
  */
-export const layout_size: ThemeTokens["layout"]["size"] = {
+export const layout_size = {
   xxsmall: 4,
   xsmall_1: 8,
   xsmall_2: 12,
@@ -29,7 +27,7 @@ export const layout_size: ThemeTokens["layout"]["size"] = {
   large_2: 80,
   xlarge_1: 96,
   xlarge_2: 120,
-};
+} satisfies Record<string, number>;
 
 /**
  * Foundation Layout Data; radius-by-size와 radius-by-level token snapshot
@@ -64,4 +62,7 @@ export const layout_radius = {
     large_2: 16,
     xlarge: 16,
   },
-} as const;
+} satisfies {
+  size: Record<string, number>;
+  level: Record<string, number>;
+};

package/src/data/spacing.ts

@@ -1,9 +1,7 @@
-import type { ThemeSpacingScale } from "../types/theme-tokens";
-
 /**
  * Foundation Spacing Data; padding token snapshot
  */
-export const spacing_padding: ThemeSpacingScale = {
+export const spacing_padding = {
   padding_1: 2,
   padding_2: 4,
   padding_3: 6,
@@ -15,12 +13,12 @@ export const spacing_padding: ThemeSpacingScale = {
   padding_9: 28,
   padding_10: 32,
   padding_11: 40,
-};
+} satisfies Record<string, number>;
 
 /**
  * Foundation Spacing Data; gap token snapshot
  */
-export const spacing_gap: ThemeSpacingScale = {
+export const spacing_gap = {
   gap_1: 2,
   gap_2: 4,
   gap_3: 6,
@@ -36,4 +34,4 @@ export const spacing_gap: ThemeSpacingScale = {
   gap_13: 48,
   gap_14: 64,
   gap_15: 80,
-};
+} satisfies Record<string, number>;

package/src/data/tokens.ts

@@ -1,4 +1,3 @@
-import type { ThemeTokens } from "../types/theme-tokens";
 import { color_primitive, color_semantic } from "./color.js";
 import { spacing_gap, spacing_padding } from "./spacing.js";
 import { layout_breakpoint, layout_radius, layout_size } from "./layout.js";
@@ -7,7 +6,8 @@ import { typography_tokens } from "./typography.js";
 /**
  * Foundation Data; theme token snapshot 집계 객체
  */
-export const themeTokens: ThemeTokens = {
+// 변경: 개별 token object snapshot을 그대로 집계해 ThemeTokens가 typeof로 파생되게 한다.
+export const themeTokens = {
   color: {
     primitive: color_primitive,
     semantic: color_semantic,
@@ -22,4 +22,4 @@ export const themeTokens: ThemeTokens = {
     radius: layout_radius,
   },
   typography: typography_tokens,
-} as const;
+};

package/src/data/typography.ts

@@ -1,9 +1,7 @@
-import type { ThemeTokens } from "../types/theme-tokens";
-
 /**
  * Foundation Typography Data; typography token snapshot
  */
-export const typography_tokens: ThemeTokens["typography"] = {
+export const typography_tokens = {
   display: {
     large: {
       size: 60,

package/src/helpers/index.ts

@@ -1,4 +1,13 @@
 import { themeTokens } from "../data/tokens.js";
+import type {
+  ThemeColorPrimitive,
+  ThemeLayoutBreakpoint,
+  ThemeLayoutRadius,
+  ThemeLayoutSize,
+  ThemeSpacingGap,
+  ThemeSpacingPadding,
+  ThemeTypography,
+} from "../types/theme-tokens.js";
 
 const tokens = themeTokens;
 
@@ -10,7 +19,7 @@ const dropPrefix = (value: string, prefix: string) =>
 /**
  * Foundation Helper Types; color primitive key
  */
-export type ThemeColorPrimitiveKey = keyof typeof tokens.color.primitive;
+export type ThemeColorPrimitiveKey = keyof ThemeColorPrimitive;
 
 /**
  * Foundation Helpers; primitive color hex 조회
@@ -37,11 +46,11 @@ export function colorPrimitiveVar(key: ThemeColorPrimitiveKey): string {
 /**
  * Foundation Helper Types; spacing padding key
  */
-export type ThemeSpacingPaddingKey = keyof typeof tokens.spacing.padding;
+export type ThemeSpacingPaddingKey = keyof ThemeSpacingPadding;
 /**
  * Foundation Helper Types; spacing gap key
  */
-export type ThemeSpacingGapKey = keyof typeof tokens.spacing.gap;
+export type ThemeSpacingGapKey = keyof ThemeSpacingGap;
 
 /**
  * Foundation Helpers; spacing padding px 조회
@@ -92,19 +101,19 @@ export function spacingGapVar(key: ThemeSpacingGapKey): string {
 /**
  * Foundation Helper Types; layout breakpoint key
  */
-export type ThemeLayoutBreakpointKey = keyof typeof tokens.layout.breakpoint;
+export type ThemeLayoutBreakpointKey = keyof ThemeLayoutBreakpoint;
 /**
  * Foundation Helper Types; layout size key
  */
-export type ThemeLayoutSizeKey = keyof typeof tokens.layout.size;
+export type ThemeLayoutSizeKey = keyof ThemeLayoutSize;
 /**
  * Foundation Helper Types; layout radius size key
  */
-export type ThemeLayoutRadiusSizeKey = keyof typeof tokens.layout.radius.size;
+export type ThemeLayoutRadiusSizeKey = keyof ThemeLayoutRadius["size"];
 /**
  * Foundation Helper Types; layout radius level key
  */
-export type ThemeLayoutRadiusLevelKey = keyof typeof tokens.layout.radius.level;
+export type ThemeLayoutRadiusLevelKey = keyof ThemeLayoutRadius["level"];
 
 /**
  * Foundation Helpers; layout breakpoint px 조회
@@ -198,7 +207,7 @@ export function layoutRadiusLevelVar(key: ThemeLayoutRadiusLevelKey): string {
 /**
  * Foundation Helper Types; typography category key
  */
-export type ThemeTypographyCategoryKey = keyof typeof tokens.typography;
+export type ThemeTypographyCategoryKey = keyof ThemeTypography;
 
 /**
  * Foundation Helpers; typography category variant 목록 조회
@@ -207,6 +216,8 @@ export type ThemeTypographyCategoryKey = keyof typeof tokens.typography;
  * @example
  * typographyVariants("body");
  */
-export function typographyVariants(category: ThemeTypographyCategoryKey) {
+export function typographyVariants<T extends ThemeTypographyCategoryKey>(
+  category: T,
+): ThemeTypography[T] {
   return tokens.typography[category];
 }

package/src/types/theme-tokens.ts

@@ -1,81 +1,83 @@
+import type { color_primitive, color_semantic } from "../data/color";
+import type {
+  layout_breakpoint,
+  layout_radius,
+  layout_size,
+} from "../data/layout";
+import type { spacing_gap, spacing_padding } from "../data/spacing";
+import type { themeTokens } from "../data/tokens";
+import type { typography_tokens } from "../data/typography";
+
 /**
- * ThemeTypographyVariant; typography variant token 구조
- * @property {number} size font-size px 값
- * @property {string} line_height line-height 값
- * @property {number} letter_spacing letter-spacing 값
- * @property {number} font_weight font-weight 값
+ * ThemeColorPrimitive; primitive color token snapshot 타입
  */
-export interface ThemeTypographyVariant {
-  /**
-   * font-size px 값
-   */
-  readonly size: number;
-  /**
-   * line-height 값
-   */
-  readonly line_height: string;
-  /**
-   * letter-spacing 값
-   */
-  readonly letter_spacing: number;
-  /**
-   * font-weight 값
-   */
-  readonly font_weight: number;
-}
+export type ThemeColorPrimitive = typeof color_primitive;
 
 /**
- * ThemeColorPrimitive; primitive color token map
+ * ThemeColorSemantic; semantic color token snapshot 타입
  */
-export type ThemeColorPrimitive = Record<string, string>;
+export type ThemeColorSemantic = typeof color_semantic;
+
 /**
- * ThemeColorSemanticSection; semantic color nested token map
+ * ThemeColorSemanticSection; semantic color nested token map 호환 타입
  * @property {string | ThemeColorSemanticSection} [token] semantic color value 또는 하위 section
  */
 export interface ThemeColorSemanticSection {
   readonly [token: string]: string | ThemeColorSemanticSection;
 }
+
+/**
+ * ThemeSpacingPadding; spacing padding token snapshot 타입
+ */
+export type ThemeSpacingPadding = typeof spacing_padding;
+
 /**
- * ThemeSpacingScale; spacing scale token map
+ * ThemeSpacingGap; spacing gap token snapshot 타입
+ */
+export type ThemeSpacingGap = typeof spacing_gap;
+
+/**
+ * ThemeSpacingScale; spacing scale token map 호환 타입
  */
 export type ThemeSpacingScale = Record<string, number>;
+
+/**
+ * ThemeLayoutBreakpoint; layout breakpoint token snapshot 타입
+ */
+export type ThemeLayoutBreakpoint = typeof layout_breakpoint;
+
 /**
- * ThemeLayoutSizes; layout size token map
+ * ThemeLayoutSize; layout size token snapshot 타입
+ */
+export type ThemeLayoutSize = typeof layout_size;
+
+/**
+ * ThemeLayoutRadius; layout radius token snapshot 타입
+ */
+export type ThemeLayoutRadius = typeof layout_radius;
+
+/**
+ * ThemeLayoutSizes; layout size token map 호환 타입
  */
 export type ThemeLayoutSizes = Record<string, number>;
+
 /**
- * ThemeTypographyCategory; typography category token map
+ * ThemeTypography; typography token snapshot 타입
  */
-export type ThemeTypographyCategory = Record<string, ThemeTypographyVariant>;
+export type ThemeTypography = typeof typography_tokens;
+
+/**
+ * ThemeTypographyCategory; typography category token map 타입
+ */
+export type ThemeTypographyCategory = ThemeTypography[keyof ThemeTypography];
+
+/**
+ * ThemeTypographyVariant; typography variant token 구조
+ */
+export type ThemeTypographyVariant =
+  ThemeTypographyCategory[keyof ThemeTypographyCategory];
 
 /**
  * ThemeTokens; foundation token snapshot 전체 구조
- * @property {{ primitive: ThemeColorPrimitive; semantic: ThemeColorSemanticSection }} color color token 집합
- * @property {{ padding: ThemeSpacingScale; gap: ThemeSpacingScale }} spacing spacing token 집합
- * @property {{ breakpoint: Record<"xsmall" | "small" | "medium" | "large", number>; size: ThemeLayoutSizes; radius: { size: ThemeLayoutSizes; level: ThemeLayoutSizes } }} layout layout token 집합
- * @property {{ [category: string]: ThemeTypographyCategory }} typography typography token 집합
  */
-export interface ThemeTokens {
-  readonly color: {
-    readonly primitive: ThemeColorPrimitive;
-    readonly semantic: ThemeColorSemanticSection;
-  };
-  readonly spacing: {
-    readonly padding: ThemeSpacingScale;
-    readonly gap: ThemeSpacingScale;
-  };
-  readonly layout: {
-    readonly breakpoint: Record<
-      "xsmall" | "small" | "medium" | "large",
-      number
-    >;
-    readonly size: ThemeLayoutSizes;
-    readonly radius: {
-      readonly size: ThemeLayoutSizes;
-      readonly level: ThemeLayoutSizes;
-    };
-  };
-  readonly typography: {
-    readonly [category: string]: ThemeTypographyCategory;
-  };
-}
+export type ThemeTokens = typeof themeTokens;