@spectrabrain/eds 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -412,6 +412,276 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#FDE047",
     "cssVariable": "--eds-color-stroke-warning-weak"
   },
+  "radius-1": {
+    "name": "radius-1",
+    "type": "dimension",
+    "value": {
+      "value": 2,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-1"
+  },
+  "radius-10": {
+    "name": "radius-10",
+    "type": "dimension",
+    "value": {
+      "value": 999,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-10"
+  },
+  "radius-2": {
+    "name": "radius-2",
+    "type": "dimension",
+    "value": {
+      "value": 4,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-2"
+  },
+  "radius-3": {
+    "name": "radius-3",
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-3"
+  },
+  "radius-4": {
+    "name": "radius-4",
+    "type": "dimension",
+    "value": {
+      "value": 8,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-4"
+  },
+  "radius-5": {
+    "name": "radius-5",
+    "type": "dimension",
+    "value": {
+      "value": 10,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-5"
+  },
+  "radius-6": {
+    "name": "radius-6",
+    "type": "dimension",
+    "value": {
+      "value": 12,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-6"
+  },
+  "radius-7": {
+    "name": "radius-7",
+    "type": "dimension",
+    "value": {
+      "value": 14,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-7"
+  },
+  "radius-8": {
+    "name": "radius-8",
+    "type": "dimension",
+    "value": {
+      "value": 16,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-8"
+  },
+  "radius-9": {
+    "name": "radius-9",
+    "type": "dimension",
+    "value": {
+      "value": 20,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-9"
+  },
+  "radius-none": {
+    "name": "radius-none",
+    "type": "dimension",
+    "value": {
+      "value": 0,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-none"
+  },
+  "spacing-0.5": {
+    "name": "spacing-0.5",
+    "type": "dimension",
+    "value": {
+      "value": 2,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-0\\.5"
+  },
+  "spacing-1": {
+    "name": "spacing-1",
+    "type": "dimension",
+    "value": {
+      "value": 4,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-1"
+  },
+  "spacing-1.5": {
+    "name": "spacing-1.5",
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-1\\.5"
+  },
+  "spacing-10": {
+    "name": "spacing-10",
+    "type": "dimension",
+    "value": {
+      "value": 40,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-10"
+  },
+  "spacing-11": {
+    "name": "spacing-11",
+    "type": "dimension",
+    "value": {
+      "value": 44,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-11"
+  },
+  "spacing-12": {
+    "name": "spacing-12",
+    "type": "dimension",
+    "value": {
+      "value": 48,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-12"
+  },
+  "spacing-2": {
+    "name": "spacing-2",
+    "type": "dimension",
+    "value": {
+      "value": 8,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-2"
+  },
+  "spacing-2.5": {
+    "name": "spacing-2.5",
+    "type": "dimension",
+    "value": {
+      "value": 10,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-2\\.5"
+  },
+  "spacing-3": {
+    "name": "spacing-3",
+    "type": "dimension",
+    "value": {
+      "value": 12,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-3"
+  },
+  "spacing-3.5": {
+    "name": "spacing-3.5",
+    "type": "dimension",
+    "value": {
+      "value": 14,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-3\\.5"
+  },
+  "spacing-4": {
+    "name": "spacing-4",
+    "type": "dimension",
+    "value": {
+      "value": 16,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-4"
+  },
+  "spacing-4.5": {
+    "name": "spacing-4.5",
+    "type": "dimension",
+    "value": {
+      "value": 18,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-4\\.5"
+  },
+  "spacing-5": {
+    "name": "spacing-5",
+    "type": "dimension",
+    "value": {
+      "value": 20,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-5"
+  },
+  "spacing-6": {
+    "name": "spacing-6",
+    "type": "dimension",
+    "value": {
+      "value": 24,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-6"
+  },
+  "spacing-7": {
+    "name": "spacing-7",
+    "type": "dimension",
+    "value": {
+      "value": 28,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-7"
+  },
+  "spacing-7.5": {
+    "name": "spacing-7.5",
+    "type": "dimension",
+    "value": {
+      "value": 30,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-7\\.5"
+  },
+  "spacing-8": {
+    "name": "spacing-8",
+    "type": "dimension",
+    "value": {
+      "value": 32,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-8"
+  },
+  "spacing-9": {
+    "name": "spacing-9",
+    "type": "dimension",
+    "value": {
+      "value": 36,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-9"
+  },
+  "spacing-none": {
+    "name": "spacing-none",
+    "type": "dimension",
+    "value": {
+      "value": 0,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-none"
+  },
   "typography-body1-fontFamily": {
     "name": "typography-body1-fontFamily",
     "type": "fontFamily",
@@ -1214,6 +1484,36 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-stroke-positive-weak",
   "color-stroke-warning-primary",
   "color-stroke-warning-weak",
+  "radius-1",
+  "radius-10",
+  "radius-2",
+  "radius-3",
+  "radius-4",
+  "radius-5",
+  "radius-6",
+  "radius-7",
+  "radius-8",
+  "radius-9",
+  "radius-none",
+  "spacing-0.5",
+  "spacing-1",
+  "spacing-1.5",
+  "spacing-10",
+  "spacing-11",
+  "spacing-12",
+  "spacing-2",
+  "spacing-2.5",
+  "spacing-3",
+  "spacing-3.5",
+  "spacing-4",
+  "spacing-4.5",
+  "spacing-5",
+  "spacing-6",
+  "spacing-7",
+  "spacing-7.5",
+  "spacing-8",
+  "spacing-9",
+  "spacing-none",
   "typography-body1-fontFamily",
   "typography-body1-fontSize",
   "typography-body1-fontWeight",
@@ -1304,7 +1604,7 @@ function cssVar(name) {
   if (!tokenNames.includes(name)) {
     throw new Error("Unknown semantic token: " + name);
   }
-  return "var(--eds-" + name + ")";
+  return "var(" + tokenMap[name].cssVariable + ")";
 }
 var buttonIcons = {
   ArrowLeft,

package/dist/tokens.css

@@ -68,6 +68,36 @@
   --eds-color-stroke-positive-weak: #BBF7D0;
   --eds-color-stroke-warning-primary: #EAB308;
   --eds-color-stroke-warning-weak: #FDE047;
+  --eds-radius-1: 2px;
+  --eds-radius-10: 999px;
+  --eds-radius-2: 4px;
+  --eds-radius-3: 6px;
+  --eds-radius-4: 8px;
+  --eds-radius-5: 10px;
+  --eds-radius-6: 12px;
+  --eds-radius-7: 14px;
+  --eds-radius-8: 16px;
+  --eds-radius-9: 20px;
+  --eds-radius-none: 0px;
+  --eds-spacing-0\.5: 2px;
+  --eds-spacing-1: 4px;
+  --eds-spacing-1\.5: 6px;
+  --eds-spacing-10: 40px;
+  --eds-spacing-11: 44px;
+  --eds-spacing-12: 48px;
+  --eds-spacing-2: 8px;
+  --eds-spacing-2\.5: 10px;
+  --eds-spacing-3: 12px;
+  --eds-spacing-3\.5: 14px;
+  --eds-spacing-4: 16px;
+  --eds-spacing-4\.5: 18px;
+  --eds-spacing-5: 20px;
+  --eds-spacing-6: 24px;
+  --eds-spacing-7: 28px;
+  --eds-spacing-7\.5: 30px;
+  --eds-spacing-8: 32px;
+  --eds-spacing-9: 36px;
+  --eds-spacing-none: 0px;
   --eds-typography-body1-fontFamily: Pretendard, system-ui, sans-serif;
   --eds-typography-body1-fontSize: 1.125rem;
   --eds-typography-body1-fontWeight: 500;

package/dist/tokens.d.mts

@@ -1,16 +1,20 @@
-type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
+type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "radius-1" | "radius-10" | "radius-2" | "radius-3" | "radius-4" | "radius-5" | "radius-6" | "radius-7" | "radius-8" | "radius-9" | "radius-none" | "spacing-0.5" | "spacing-1" | "spacing-1.5" | "spacing-10" | "spacing-11" | "spacing-12" | "spacing-2" | "spacing-2.5" | "spacing-3" | "spacing-3.5" | "spacing-4" | "spacing-4.5" | "spacing-5" | "spacing-6" | "spacing-7" | "spacing-7.5" | "spacing-8" | "spacing-9" | "spacing-none" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
 type SemanticTokenType = "color" | "dimension" | "fontFamily" | "fontWeight";
-type SemanticTokenCssVariable = `--eds-${SemanticTokenName}`;
+type EscapeCssDots<Name extends string> = Name extends `${infer Head}.${infer Tail}` ? `${Head}\\.${EscapeCssDots<Tail>}` : Name;
+type SemanticTokenCssVariable = `--eds-${EscapeCssDots<SemanticTokenName>}`;
 type SemanticTokenCssReference = `var(${SemanticTokenCssVariable})`;
 interface SemanticToken {
     readonly name: SemanticTokenName;
     readonly type: SemanticTokenType;
+    /** 빌드 시 해석된 참고용 값입니다. 스타일에는 cssVariable 또는 cssVar()를 씁니다. */
     readonly value: unknown;
     readonly cssVariable: string;
 }
 type SemanticTokenMap = Readonly<Record<SemanticTokenName, SemanticToken>>;
+/** 공개 token manifest입니다. 이름 목록은 tokenNames, CSS 참조는 cssVar()입니다. */
 declare const tokens: SemanticTokenMap;
 declare const tokenNames: readonly SemanticTokenName[];
+/** 공개 token 이름을 var(--eds-…) 참조로 바꿉니다. 이름은 SemanticTokenName 리터럴로 전달하며, tokenNames에 없는 문자열은 런타임 오류입니다. */
 declare function cssVar(name: SemanticTokenName): SemanticTokenCssReference;
 
-export { type SemanticToken, type SemanticTokenCssReference, type SemanticTokenCssVariable, type SemanticTokenMap, type SemanticTokenName, type SemanticTokenType, cssVar, tokenNames, tokens };
+export { type EscapeCssDots, type SemanticToken, type SemanticTokenCssReference, type SemanticTokenCssVariable, type SemanticTokenMap, type SemanticTokenName, type SemanticTokenType, cssVar, tokenNames, tokens };

package/dist/tokens.d.ts

@@ -1,16 +1,20 @@
-type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
+type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "radius-1" | "radius-10" | "radius-2" | "radius-3" | "radius-4" | "radius-5" | "radius-6" | "radius-7" | "radius-8" | "radius-9" | "radius-none" | "spacing-0.5" | "spacing-1" | "spacing-1.5" | "spacing-10" | "spacing-11" | "spacing-12" | "spacing-2" | "spacing-2.5" | "spacing-3" | "spacing-3.5" | "spacing-4" | "spacing-4.5" | "spacing-5" | "spacing-6" | "spacing-7" | "spacing-7.5" | "spacing-8" | "spacing-9" | "spacing-none" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
 type SemanticTokenType = "color" | "dimension" | "fontFamily" | "fontWeight";
-type SemanticTokenCssVariable = `--eds-${SemanticTokenName}`;
+type EscapeCssDots<Name extends string> = Name extends `${infer Head}.${infer Tail}` ? `${Head}\\.${EscapeCssDots<Tail>}` : Name;
+type SemanticTokenCssVariable = `--eds-${EscapeCssDots<SemanticTokenName>}`;
 type SemanticTokenCssReference = `var(${SemanticTokenCssVariable})`;
 interface SemanticToken {
     readonly name: SemanticTokenName;
     readonly type: SemanticTokenType;
+    /** 빌드 시 해석된 참고용 값입니다. 스타일에는 cssVariable 또는 cssVar()를 씁니다. */
     readonly value: unknown;
     readonly cssVariable: string;
 }
 type SemanticTokenMap = Readonly<Record<SemanticTokenName, SemanticToken>>;
+/** 공개 token manifest입니다. 이름 목록은 tokenNames, CSS 참조는 cssVar()입니다. */
 declare const tokens: SemanticTokenMap;
 declare const tokenNames: readonly SemanticTokenName[];
+/** 공개 token 이름을 var(--eds-…) 참조로 바꿉니다. 이름은 SemanticTokenName 리터럴로 전달하며, tokenNames에 없는 문자열은 런타임 오류입니다. */
 declare function cssVar(name: SemanticTokenName): SemanticTokenCssReference;
 
-export { type SemanticToken, type SemanticTokenCssReference, type SemanticTokenCssVariable, type SemanticTokenMap, type SemanticTokenName, type SemanticTokenType, cssVar, tokenNames, tokens };
+export { type EscapeCssDots, type SemanticToken, type SemanticTokenCssReference, type SemanticTokenCssVariable, type SemanticTokenMap, type SemanticTokenName, type SemanticTokenType, cssVar, tokenNames, tokens };