@gusun/design-system 0.1.0

package/dist-lib/tailwind-preset.cjs

@@ -0,0 +1,1023 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// tailwind.preset.js
+var tailwind_preset_exports = {};
+__export(tailwind_preset_exports, {
+  default: () => tailwind_preset_default
+});
+module.exports = __toCommonJS(tailwind_preset_exports);
+
+// src/tokens/lineHeight.ts
+var lineHeight = {
+  16: "16px",
+  // 촘촘한 행간(사이즈 기본 짝 없음, 좁은 영역용)
+  18: "18px",
+  // 촘촘한 행간(사이즈 기본 짝 없음)
+  20: "20px",
+  // text-12 기본
+  22: "22px",
+  // text-13 기본
+  24: "24px",
+  // text-14 기본
+  26: "26px",
+  // text-15 기본
+  28: "28px",
+  // text-16 기본
+  30: "30px",
+  // text-18 기본
+  32: "32px"
+  // text-20 기본
+};
+
+// src/tokens/typography.ts
+var fontFamily = {
+  pretendard: ["Pretendard Variable", "Pretendard", "system-ui", "sans-serif"]
+};
+var fontSize = {
+  12: ["12px", { lineHeight: lineHeight[20], letterSpacing: "-0.24px" }],
+  13: ["13px", { lineHeight: lineHeight[22], letterSpacing: "-0.26px" }],
+  14: ["14px", { lineHeight: lineHeight[24], letterSpacing: "-0.28px" }],
+  15: ["15px", { lineHeight: lineHeight[26], letterSpacing: "-0.30px" }],
+  16: ["16px", { lineHeight: lineHeight[28], letterSpacing: "-0.32px" }],
+  18: ["18px", { lineHeight: lineHeight[30], letterSpacing: "-0.36px" }],
+  20: ["20px", { lineHeight: lineHeight[32], letterSpacing: "-0.40px" }]
+};
+
+// src/tokens/colors.ts
+var baseColors = {
+  base: {
+    gray: {
+      25: "#fafafa",
+      50: "#f2f2f2",
+      100: "#e3e3e3",
+      125: "#d6d6d6",
+      // 100↔150 중간색(2026-07-03 추가 — 테이블 헤더 구분선용 중간 스텝)
+      150: "#c9c9c9",
+      200: "#b0b0b0",
+      250: "#999999",
+      300: "#878787",
+      400: "#6a6a6a",
+      500: "#505050",
+      600: "#3f3f3f",
+      700: "#353535",
+      800: "#272727",
+      900: "#0d0d0d"
+    },
+    // gray 900 알파 시리즈 (Figma "color/gray/900 *" 변수)
+    // 8자리 HEX: #0d0d0d + 알파 채널 (00=투명 → cf=81% 불투명)
+    "gray-900-00": "#0d0d0d00",
+    "gray-900-10": "#0d0d0d08",
+    "gray-900-25": "#0d0d0d12",
+    "gray-900-50": "#0d0d0d29",
+    "gray-900-75": "#0d0d0d54",
+    "gray-900-100": "#0d0d0d7a",
+    "gray-900-200": "#0d0d0da6",
+    "gray-900-300": "#0d0d0dcf",
+    // white 알파 시리즈 (Figma "color/gray/white *" 변수)
+    "white-00": "#ffffff00",
+    "white-10": "#ffffff08",
+    "white-25": "#ffffff12",
+    "white-50": "#ffffff29",
+    "white-75": "#ffffff54",
+    "white-100": "#ffffff7a",
+    "white-200": "#ffffffa6",
+    "white-300": "#ffffffcf",
+    black: "#000000",
+    // Figma "color/black" 변수 값 기준 (#0d0d0d → #000000 수정)
+    white: "#ffffff",
+    // 피드백(에러/경고 등) 유채색 — Figma "베이직 칼라 토큰"의 red 스케일.
+    // 400(#e74a4a)이 메인이며, 텍스트필드 에러 툴팁 등에 사용한다.
+    red: {
+      25: "#fef1f1",
+      50: "#ffeeee",
+      100: "#fde1e1",
+      150: "#fbc4c4",
+      200: "#f8a8a9",
+      250: "#f58c8d",
+      300: "#f37171",
+      400: "#e74a4a",
+      // error / danger 메인
+      500: "#c42c2c",
+      600: "#ae292c",
+      700: "#942022",
+      800: "#7a1618",
+      900: "#600b0d"
+    },
+    // red 400 알파 시리즈 (Figma "color/red/400 *" 변수) — 8자리 HEX(#e74a4a + 알파)
+    // 알파: 00=0% 10=3% 25=8% 50=16% 75=33% 100=48% 200=65% 300=81%
+    "red-400-00": "#e74a4a00",
+    "red-400-10": "#e74a4a08",
+    "red-400-25": "#e74a4a14",
+    "red-400-50": "#e74a4a29",
+    "red-400-75": "#e74a4a54",
+    "red-400-100": "#e74a4a7a",
+    "red-400-200": "#e74a4aa6",
+    "red-400-300": "#e74a4acf",
+    // 피드백(정보/링크 등) 유채색 — Figma "베이직 칼라 토큰"의 blue 스케일.
+    blue: {
+      25: "#f6fafe",
+      50: "#eff7fe",
+      100: "#e6f3fe",
+      150: "#cce6ff",
+      200: "#9ecefa",
+      250: "#6eb5f7",
+      300: "#41a2fd",
+      400: "#0f85f2",
+      // info 메인
+      500: "#0b69c2",
+      600: "#084f91",
+      700: "#063f74",
+      800: "#063561",
+      900: "#042849"
+    },
+    // blue 400 알파 시리즈 (Figma "color/blue/400 *" 변수) — 8자리 HEX(#0f85f2 + 알파)
+    "blue-400-00": "#0f85f200",
+    "blue-400-10": "#0f85f208",
+    "blue-400-25": "#0f85f214",
+    "blue-400-50": "#0f85f229",
+    "blue-400-75": "#0f85f254",
+    "blue-400-100": "#0f85f27a",
+    "blue-400-200": "#0f85f2a6",
+    "blue-400-300": "#0f85f2cf",
+    // 상태/분류 유채색 — Figma "베이직 칼라 토큰"의 green/orange/violet 스케일(2026-07-13 추가).
+    // 400이 각 메인. 컴포넌트에서 직접 쓰지 말고 시멘틱을 경유한다.
+    // green — success 계열. 400=#0daf4e
+    green: {
+      25: "#eef9f2",
+      50: "#e4f6eb",
+      100: "#daf3e4",
+      150: "#bbe8cd",
+      200: "#90dbae",
+      250: "#6cce93",
+      300: "#47c278",
+      400: "#0daf4e",
+      // success 메인
+      500: "#089a42",
+      600: "#077f36",
+      700: "#05642b",
+      800: "#044b20",
+      900: "#003333"
+    },
+    "green-400-00": "#0daf4e00",
+    "green-400-10": "#0daf4e08",
+    "green-400-25": "#0daf4e14",
+    "green-400-50": "#0daf4e29",
+    "green-400-75": "#0daf4e54",
+    "green-400-100": "#0daf4e7a",
+    "green-400-200": "#0daf4ea6",
+    "green-400-300": "#0daf4ecf",
+    // orange — warning 계열. 400=#f06e2d
+    orange: {
+      25: "#fef6f2",
+      50: "#fef0e8",
+      100: "#fde8db",
+      150: "#fbd0b8",
+      200: "#f9b996",
+      250: "#f8a073",
+      300: "#f68852",
+      400: "#f06e2d",
+      // warning 메인
+      500: "#d75812",
+      600: "#b04b16",
+      700: "#8b3d16",
+      800: "#683014",
+      900: "#472309"
+    },
+    "orange-400-00": "#f06e2d00",
+    "orange-400-10": "#f06e2d08",
+    "orange-400-25": "#f06e2d14",
+    "orange-400-50": "#f06e2d29",
+    "orange-400-75": "#f06e2d54",
+    "orange-400-100": "#f06e2d7a",
+    "orange-400-200": "#f06e2da6",
+    "orange-400-300": "#f06e2dcf",
+    // violet — 강조/분류 계열. 400=#7c57ef
+    violet: {
+      25: "#f7f5fe",
+      50: "#f0edfb",
+      100: "#ebe6fd",
+      150: "#dad0fb",
+      200: "#c6b4f7",
+      250: "#b19af5",
+      300: "#9d81f3",
+      400: "#7c57ef",
+      // 강조 메인
+      500: "#6e4dd2",
+      600: "#5c40ae",
+      700: "#473288",
+      800: "#372666",
+      900: "#251b48"
+    },
+    "violet-400-00": "#7c57ef00",
+    "violet-400-10": "#7c57ef08",
+    "violet-400-25": "#7c57ef14",
+    "violet-400-50": "#7c57ef29",
+    "violet-400-75": "#7c57ef54",
+    "violet-400-100": "#7c57ef7a",
+    "violet-400-200": "#7c57efa6",
+    "violet-400-300": "#7c57efcf",
+    // pink — 강조/분류 계열. 400=#f246b9(지정). 25~900은 red/orange/violet의 밝기·채도 사다리를
+    // pink hue로 채워 같은 톤으로 파생(2026-07-13 지시).
+    pink: {
+      25: "#fef3fa",
+      50: "#fdecf8",
+      100: "#fde1f4",
+      150: "#fbc4e9",
+      200: "#f8a6dd",
+      250: "#f689d2",
+      300: "#f46cc7",
+      400: "#f246b9",
+      // 메인(지정값)
+      500: "#d6279c",
+      600: "#b02983",
+      700: "#8e226a",
+      800: "#6d1b52",
+      900: "#50103b"
+    },
+    "pink-400-00": "#f246b900",
+    "pink-400-10": "#f246b908",
+    "pink-400-25": "#f246b914",
+    "pink-400-50": "#f246b929",
+    "pink-400-75": "#f246b954",
+    "pink-400-100": "#f246b97a",
+    "pink-400-200": "#f246b9a6",
+    "pink-400-300": "#f246b9cf"
+  }
+};
+
+// src/tokens/fontIconColors.ts
+var fontIconColors = {
+  5: baseColors.base.gray[900],
+  // #0d0d0d — 메인, 폰트/아이콘 디폴트 적용 컬러
+  4: baseColors.base.gray[600],
+  // #3f3f3f
+  3: baseColors.base.gray[300],
+  // #878787
+  2: baseColors.base.gray[150],
+  // #c9c9c9
+  1: baseColors.base.white
+  // #ffffff
+};
+
+// src/tokens/colors/buttonColors.ts
+var b = baseColors.base;
+var buttonColors = {
+  fill: {
+    "default-bg": b.gray[900],
+    // fill/gray default bg    → #0d0d0d
+    "default-fg": b.white,
+    // fill/gray default text  → #ffffff
+    "hover-bg": b["gray-900-200"],
+    // fill/gray hover bg      → #0d0d0da6
+    "disabled-bg": b["gray-900-25"],
+    // fill/gray disabled bg  → #0d0d0d12 (2026-07-02 900-50→900-25)
+    "disabled-fg": b.gray[150]
+    // fill/gray disabled text/icon → #c9c9c9 (=font-icon-2)
+  },
+  ghost: {
+    "default-fg": b.gray[900],
+    // ghost/gray default text → #0d0d0d
+    "hover-bg": b["gray-900-25"],
+    // ghost/gray hover bg     → #0d0d0d12
+    "disabled-bg": b["gray-900-25"],
+    // ghost/gray disabled bg → #0d0d0d12 (2026-07-02 900-50→900-25)
+    "disabled-fg": b.gray[150],
+    // ghost/gray disabled text/icon → #c9c9c9 (=font-icon-2)
+    "selected-bg": b.gray[400],
+    // ghost/gray select bg    → #6a6a6a (선택/현재 항목)
+    "selected-text": b.white,
+    // ghost/gray select text  → #ffffff
+    "pagination-fg": b.gray[300]
+    // ghost/gray default text (pagination) → #878787
+    // 페이지네이션 번호 기본색(연함) — hover/pressed 시 default-fg로 진해짐
+  },
+  line: {
+    "default-bg": b.white,
+    // line/gray default bg    → #ffffff
+    "default-fg": b.gray[900],
+    // line/gray default text  → #0d0d0d
+    "default-line": b.gray[150],
+    // line/gray default line  → #c9c9c9
+    "hover-bg": b["gray-900-25"],
+    // line/gray hover bg      → #0d0d0d12
+    "hover-line": b.gray[250],
+    // line/gray hover line    → #999999
+    "disabled-bg": b["gray-900-25"],
+    // line/gray disabled bg  → #0d0d0d12 (2026-07-02 900-50→900-25)
+    "disabled-fg": b.gray[150],
+    // line/gray disabled text/icon → #c9c9c9 (=font-icon-2)
+    "disabled-line": b["gray-900-75"]
+    // line/gray disableld line → #0d0d0d54
+  },
+  // underline(밑줄 텍스트 버튼) 색 변형(2026-07-15) — black(기본, 기존 색)=gray900,
+  // 유채색 6종은 칩 컬러와 짝(각 400). gray는 제외(사용자 지정).
+  underline: {
+    "black-fg": b.gray[900],
+    "red-fg": b.red[400],
+    "blue-fg": b.blue[400],
+    "green-fg": b.green[400],
+    "violet-fg": b.violet[400],
+    "pink-fg": b.pink[400],
+    "orange-fg": b.orange[400]
+  }
+};
+
+// src/tokens/colors/textFieldColors.ts
+var b2 = baseColors.base;
+var textFieldColors = {
+  // default — 값 없음, 인터랙션 없음
+  "default-bg": b2["gray-900-25"],
+  // #0d0d0d12
+  "default-line": b2["gray-900-00"],
+  // #0d0d0d00 (투명)
+  "default-text": b2.gray[300],
+  // #878787 — placeholder (값 없을 때 아이콘색도 이 값 사용)
+  // hover
+  "hover-bg": b2["gray-900-25"],
+  "hover-line": b2["gray-900-200"],
+  // #0d0d0da6
+  "hover-text": b2.gray[300],
+  // focused
+  "focused-bg": b2["gray-900-00"],
+  // 투명
+  "focused-line": b2["gray-900-200"],
+  // filled — 값 있음
+  "filled-bg": b2["gray-900-25"],
+  "filled-line": b2["gray-900-00"],
+  "filled-text": b2.gray[900],
+  // #0d0d0d — 입력된 텍스트
+  // disabled
+  "disabled-bg": b2["gray-900-25"],
+  "disabled-line": b2["gray-900-00"],
+  "disabled-text": b2.gray[150],
+  // #c9c9c9
+  "disabled-icon": b2.gray[150],
+  // read only
+  "readonly-bg": b2["gray-900-25"],
+  "readonly-line": b2["gray-900-00"],
+  "readonly-text": b2.gray[900],
+  // #0d0d0d (읽기는 진하게)
+  "readonly-icon": b2.gray[150],
+  // tooltip — error(빨강) / normal(검정)
+  "error-tooltip-bg": b2.red[400],
+  // #e74a4a
+  "error-tooltip-text": b2.white,
+  // #ffffff
+  "normal-tooltip-bg": b2.gray[900],
+  // #0d0d0d
+  "normal-tooltip-text": b2.white
+  // #ffffff
+};
+
+// src/tokens/colors/labelFieldColors.ts
+var b3 = baseColors.base;
+var labelFieldColors = {
+  "default-text": b3.gray[900],
+  // #0d0d0d — 기본 라벨 텍스트
+  "required-mark": b3.red[400],
+  // #e74a4a — 필수 표시(점)
+  "disabled-text": b3.gray[150],
+  // #c9c9c9 — 비활성 라벨 텍스트
+  "helper-text": b3.gray[600]
+  // #3f3f3f — Field 헬퍼(description) 텍스트
+};
+
+// src/tokens/colors/dividerColors.ts
+var b4 = baseColors.base;
+var dividerColors = {
+  subtle: b4.gray[50],
+  // #f2f2f2
+  default: b4.gray[100],
+  // #e3e3e3
+  strong: b4.gray[150]
+  // #c9c9c9
+};
+
+// src/tokens/colors/chipColors.ts
+var b5 = baseColors.base;
+var make = (defText, defBg, defLine, hovText, hovBg, hovLine) => ({
+  "default-text": defText,
+  "default-icon": defText,
+  "default-bg": defBg,
+  "default-line": defLine,
+  "hover-text": hovText,
+  "hover-icon": hovText,
+  "hover-bg": hovBg,
+  "hover-line": hovLine
+});
+var chipColors = {
+  // gray  : text/icon gray900 · bg white · line gray100 / hover bg gray50 · line gray150
+  gray: make(b5.gray[900], b5.white, b5.gray[100], b5.gray[900], b5.gray[50], b5.gray[150]),
+  // red   : text/icon red400 · bg white · line red100 / hover bg red50 · line red150
+  red: make(b5.red[400], b5.white, b5.red[100], b5.red[400], b5.red[50], b5.red[150]),
+  // blue  : text/icon blue400 · bg white · line blue100 / hover bg blue50 · line blue150
+  blue: make(b5.blue[400], b5.white, b5.blue[100], b5.blue[400], b5.blue[50], b5.blue[150]),
+  // black : text/icon white · bg/line gray500 / hover text/icon gray150 · bg/line gray400
+  black: make(b5.white, b5.gray[500], b5.gray[500], b5.gray[150], b5.gray[400], b5.gray[400]),
+  // ── 함수 계열 대응 색(2026-07-15 추가) — 수식 함수 컬러(formula-*)와 짝: green=AND·OR /
+  //    violet=SUM계열 / pink=CAPMAX계열 / orange=FITBYSCORE계열 (blue=IF는 기존). 사다리 동일(400/100/50/150).
+  green: make(b5.green[400], b5.white, b5.green[100], b5.green[400], b5.green[50], b5.green[150]),
+  violet: make(b5.violet[400], b5.white, b5.violet[100], b5.violet[400], b5.violet[50], b5.violet[150]),
+  pink: make(b5.pink[400], b5.white, b5.pink[100], b5.pink[400], b5.pink[50], b5.pink[150]),
+  orange: make(b5.orange[400], b5.white, b5.orange[100], b5.orange[400], b5.orange[50], b5.orange[150])
+};
+
+// src/tokens/colors/listColors.ts
+var b6 = baseColors.base;
+var listColors = {
+  // list 행 상태별
+  "default-bg": b6.white,
+  // #ffffff
+  "default-text": b6.gray[900],
+  // #0d0d0d
+  "default-icon": b6.gray[900],
+  // #0d0d0d
+  "hover-bg": b6.gray[50],
+  // #f2f2f2
+  "pressed-bg": b6.white,
+  // #ffffff (default와 동일 — 눌림은 순간 효과)
+  "selected-text": b6.blue[400],
+  // #0f85f2 (선택 시 텍스트 파란색)
+  "selected-icon": b6.blue[400],
+  // #0f85f2 (선택 시 chevron 파란색)
+  "disabled-text": b6.gray[150],
+  // #c9c9c9
+  "disabled-icon": b6.gray[150],
+  // #c9c9c9
+  // list group
+  "group-bg": b6.white,
+  // empty
+  "empty-bg": b6.white,
+  // #ffffff
+  "empty-text": b6.gray[300],
+  // #878787
+  // popover menu
+  "popover-bg": b6.gray[100],
+  // #e3e3e3
+  "popover-outline": b6["gray-900-75"],
+  // #0d0d0d54 (gray.900 알파 75)
+  // scroll thumb (default / hover)
+  "scroll-bar": b6["gray-900-50"],
+  // #0d0d0d29
+  "scroll-bar-hover": b6["gray-900-75"],
+  // #0d0d0d54
+  // scroll thumb — light(어두운 배경 위) 변형
+  "scroll-bar-light": b6["white-75"],
+  // #ffffff54
+  "scroll-bar-light-hover": b6["white-100"]
+  // #ffffff7a
+};
+
+// src/tokens/colors/tagColors.ts
+var b7 = baseColors.base;
+var tagColors = {
+  "blue-bg": b7["blue-400-50"],
+  // #0f85f229
+  "blue-text": b7.blue[400],
+  // #0f85f2
+  "red-bg": b7["red-400-50"],
+  // #e74a4a29
+  "red-text": b7.red[400],
+  // #e74a4a
+  "gray-bg": b7["gray-900-25"],
+  // #0d0d0d12
+  "gray-text": b7.gray[600],
+  // #3f3f3f
+  "black-bg": b7.gray[500],
+  // #505050
+  "black-text": b7.white
+  // #ffffff
+};
+
+// src/tokens/colors/newTagColors.ts
+var b8 = baseColors.base;
+var newTagColors = {
+  "title": b8.white,
+  // #ffffff — 'N' 텍스트(new tag/title)
+  "blue-bg": b8.blue[400],
+  // #0f85f2 (new tag/bg, color=blue)
+  "red-bg": b8.red[400],
+  // #e74a4a (color=red)
+  "black-bg": b8.gray[500]
+  // #505050 (color=black — Tag/Chip black과 동일 계열)
+};
+
+// src/tokens/colors/sideNavColors.ts
+var b9 = baseColors.base;
+var sideNavColors = {
+  "default-text": b9.gray[600],
+  // #3f3f3f (add side navi/default text·icon)
+  "default-icon": b9.gray[600],
+  "hover-text": b9.gray[900],
+  // #0d0d0d (hover text·icon)
+  "hover-icon": b9.gray[900],
+  "hover-bg": b9["gray-900-25"],
+  // #0d0d0d12 (hover bg)
+  "select-text": b9.blue[400],
+  // #0f85f2 (select text·icon)
+  "select-icon": b9.blue[400],
+  "select-bg": b9["blue-400-50"],
+  // #0f85f229 (select bg)
+  "disabled-text": b9.gray[150],
+  // #c9c9c9 (disabled text·icon)
+  "disabled-icon": b9.gray[150],
+  "right-line": b9.gray[100]
+  // #e3e3e3 (컨테이너 우측 구분선, add side navi/right line)
+};
+
+// src/tokens/colors/conditionOrderSlotColors.ts
+var b10 = baseColors.base;
+var conditionOrderSlotColors = {
+  "card-default-text": b10.gray[900],
+  // #0d0d0d (default card text·icon)
+  "card-default-icon": b10.gray[900],
+  "card-default-bg": b10.white,
+  // #ffffff
+  "card-default-line": b10.gray[150],
+  // #c9c9c9
+  "card-hover-text": b10.gray[900],
+  // #0d0d0d
+  "card-hover-icon": b10.gray[900],
+  "card-hover-bg": b10.gray[25],
+  // #fafafa
+  "card-hover-line": b10.gray[250],
+  // #999999
+  "card-pressed-text": b10.blue[400],
+  // #0f85f2 (드래그 중)
+  "card-pressed-icon": b10.blue[400],
+  "card-pressed-bg": b10.blue[25],
+  // #f6fafe (2026-07-07 재조정 — blue.50 → blue.25)
+  "card-pressed-line": b10.blue[400],
+  "slot-bg": b10.gray[50]
+  // #f2f2f2 (컨테이너 슬롯 배경)
+};
+
+// src/tokens/colors/conditionCardColors.ts
+var b11 = baseColors.base;
+var conditionCardColors = {
+  "default-card-bg": b11.white,
+  // #ffffff
+  "default-card-line": b11["gray-900-25"],
+  // #0d0d0d12 (2026-07-16 — gray-900 알파 3단계, 배경 투영. 원값 gray.150→100→알파)
+  "default-card-text": b11.gray[900],
+  // #0d0d0d
+  "hover-card-bg": b11.gray[25],
+  // #fafafa (blue.25 시도 후 원복 — 2026-07-16)
+  "hover-card-line": b11["gray-900-75"],
+  // #0d0d0d54 (2026-07-16 — gray-900 알파 5단계(33%), 배경 투영. 원값 gray.250)
+  "hover-card-text": b11.blue[400],
+  // #0f85f2 (2026-07-16 — hover 시 grip·카드명 파랑. 원값 gray.900)
+  "drop-outline": b11.blue[400],
+  // #0f85f2 (드래그 중 라인)
+  "drop-text": b11.blue[400]
+  // #0f85f2 (드래그 중 텍스트·아이콘)
+};
+
+// src/tokens/colors/formulaColors.ts
+var b12 = baseColors.base;
+var formulaColors = {
+  "default-bg": b12.white,
+  // Formula/default bg
+  "default-text": b12.gray[900],
+  // #0d0d0d (설명 코멘트 텍스트 — Formula/default-text)
+  "hover-bg": b12.gray[25],
+  // #fafafa (2026-07-16 확정 — hover 시 수식 배경)
+  "default-outline": b12.gray[100],
+  // Formula/default * outline (#e3e3e3, 전 계열 공통)
+  parentheses: b12.gray[150],
+  // 괄호 ( ) — #c9c9c9
+  comparison: b12.gray[900],
+  // 비교 연산자 ==, 콤마 — #0d0d0d
+  // 함수 계열 텍스트 컬러 (Formula/{family} functions)
+  logical: b12.green[400],
+  // AND, OR — #0daf4e
+  conditional: b12.blue[400],
+  // IF — #0f85f2
+  aggregate: b12.violet[400],
+  // SUM, MAX, MIN, COUNTIF — #7c57ef
+  "score-limit": b12.pink[400],
+  // CAPMAX, CAPMIN — #f246b9
+  evaluation: b12.orange[400],
+  // FITBYSCORE, UNFITBYSCORE — #f06e2d
+  // hover 아웃라인 (Formula/hover {family} outline) — 계열 색 추종
+  "hover-logical-outline": b12.green[400],
+  // (패턴 유추 — Figma 확인 시 조정)
+  "hover-conditional-outline": b12.blue[300],
+  // #41a2fd (IF만 300 — Figma 확정값)
+  "hover-aggregate-outline": b12.violet[400],
+  // #7c57ef (확정)
+  "hover-score-limit-outline": b12.pink[400],
+  // #f246b9 (확정)
+  "hover-evaluation-outline": b12.orange[400],
+  // (패턴 유추 — Figma 확인 시 조정)
+  // '조건 추가' dashed 드롭 존 (Formula/add default|drop * — FormulaAdd 8384:113414, 카드 드롭 대상)
+  "add-text": b12.gray[300],
+  // #878787
+  "add-bg": b12.white,
+  "add-outline": b12.gray[150],
+  // #c9c9c9
+  "add-drop-text": b12.gray[900],
+  // #0d0d0d (드래그 중 위에 올렸을 때)
+  "add-drop-bg": b12.gray[100],
+  // #e3e3e3
+  "add-drop-outline": b12.gray[300],
+  // #878787
+  // compact(요약) 칩 — 파란 텍스트·연파랑 라인 (Figma compact 변형의 chip 값)
+  "compact-chip-text": b12.blue[400],
+  // #0f85f2
+  "compact-chip-line": b12.blue[100]
+  // #e6f3fe
+};
+
+// src/tokens/colors/builderAreaColors.ts
+var b13 = baseColors.base;
+var builderAreaColors = {
+  "add-default-bg": b13.gray[25],
+  // #fafafa
+  "add-default-outline": b13.gray[150],
+  // #c9c9c9 (dashed)
+  "add-default-text": b13.gray[900],
+  // #0d0d0d
+  "add-hover-bg": b13.gray[100],
+  // #e3e3e3 (드래그 오버)
+  "add-hover-outline": b13.gray[250],
+  // #999999
+  // 빌더 전체(카드+수식 영역)를 감싸는 라인 박스(2026-07-16 사용자 지정 — 흰 bg·gray.100 라인)
+  "box-bg": b13.white,
+  "box-line": b13.gray[100],
+  // #e3e3e3 (박스 외곽선 + 카드↔빌더 구분선 공용)
+  "card-area-bg": b13.gray[25],
+  // #fafafa (조건 카드 영역 배경 — 2026-07-16 지정)
+  // 수식 영역 고정 헤더 배경 — 위(흰색 100%)→아래(흰색 0%) 세로 그라디언트(2026-07-14 지시).
+  // 스크롤 콘텐츠가 헤더 아래로 지나가며 점차 사라져 보인다.
+  "header-fade-top": b13.white,
+  // #ffffff (불투명)
+  "header-fade-bottom": b13["white-00"]
+  // #ffffff00 (투명)
+};
+
+// src/tokens/colors/toolbarColors.ts
+var b14 = baseColors.base;
+var toolbarColors = {
+  "bg-top": b14.white,
+  // 그라데이션 위쪽 (Figma to-white)
+  "bg-bottom": b14.gray[50],
+  // 그라데이션 아래쪽 #f2f2f2 (Figma from-gray/50)
+  line: b14["gray-900-50"]
+  // #0d0d0d29 (알파 — 배경 투영)
+};
+
+// src/tokens/colors/accordionColors.ts
+var b15 = baseColors.base;
+var accordionColors = {
+  "list-name": b15.gray[900]
+  // #0d0d0d (리스트 네임 텍스트)
+};
+
+// src/tokens/colors/segmentedColors.ts
+var b16 = baseColors.base;
+var segmentedColors = {
+  "tab-bg": b16.gray[50],
+  // #f2f2f2 (트랙 배경, segmented/tab bg)
+  "select-bg": b16.white,
+  // #ffffff (선택 배경 pill, segmented/select bg)
+  "select-line": b16["gray-900-10"],
+  // #0d0d0d08 (선택 pill 1px 아웃라인 — 한 단계 더 투명, 2026-07-08 지시)
+  "select-text": b16.gray[900],
+  // #0d0d0d (선택 탭 텍스트, segmented/select text)
+  "unselect-text": b16.gray[300],
+  // #878787 (미선택 텍스트, segmented/unselect text)
+  "hover-text": b16.blue[400],
+  // #0f85f2 (hover 텍스트, segmented/hover text)
+  "disabled-text": b16.gray[150]
+  // #c9c9c9 (비활성 텍스트 — unselect보다 한 단계 옅게, DS 표준 disabled=font-icon-2, 2026-07-08)
+};
+
+// src/tokens/colors/checkboxColors.ts
+var b17 = baseColors.base;
+var checkboxColors = {
+  // unselected — box 채움(bg)
+  "unselected-bg": b17["gray-900-75"],
+  // #0d0d0d54
+  "hover-outline": b17["gray-900-100"],
+  // #0d0d0d7a (hover ring)
+  "disabled-bg": b17["gray-900-25"],
+  // #0d0d0d12
+  // selected — box 채움(bg)
+  "selected-bg": b17.blue[400],
+  // #0f85f2
+  "selected-hover-outline": b17["blue-400-200"],
+  // #0f85f2a6 (hover ring)
+  "selected-disabled-bg": b17["blue-400-50"],
+  // #0f85f229
+  // 체크마크(point)
+  "check": b17.white,
+  // #ffffff
+  "disabled-check": b17.blue[400],
+  // #0f85f2 (selected disabled)
+  // 라벨
+  "text": b17.gray[900],
+  // #0d0d0d
+  "disabled-text": b17.gray[300]
+  // #878787
+};
+
+// src/tokens/colors/radioColors.ts
+var b18 = baseColors.base;
+var radioColors = {
+  // unselected — circle 채움(bg)
+  "unselected-bg": b18["gray-900-75"],
+  // #0d0d0d54
+  "hover-outline": b18["gray-900-100"],
+  // #0d0d0d7a (hover ring)
+  "disabled-bg": b18["gray-900-25"],
+  // #0d0d0d12
+  // selected — circle 채움(bg)
+  "selected-bg": b18.blue[400],
+  // #0f85f2
+  "selected-hover-outline": b18["blue-400-200"],
+  // #0f85f2a6 (hover ring)
+  "selected-disabled-bg": b18["blue-400-50"],
+  // #0f85f229
+  // 가운데 점(point)
+  "point": b18.white,
+  // #ffffff (selected default/hover)
+  "disabled-point": b18.blue[400],
+  // #0f85f2 (selected disabled)
+  // 라벨
+  "text": b18.gray[900],
+  // #0d0d0d
+  "disabled-text": b18.gray[300]
+  // #878787
+};
+
+// src/tokens/colors/switchColors.ts
+var b19 = baseColors.base;
+var switchColors = {
+  // off(unselected) — track 채움(bg)
+  "unselected-bg": b19["gray-900-75"],
+  // #0d0d0d54 (렌더 ≈ #afafaf)
+  "hover-outline": b19["gray-900-100"],
+  // #0d0d0d7a (hover ring)
+  "disabled-bg": b19["gray-900-25"],
+  // #0d0d0d12 (렌더 ≈ #eeeeee)
+  // on(selected) — track 채움(bg)
+  "selected-bg": b19.blue[400],
+  // #0f85f2
+  "selected-hover-outline": b19["blue-400-200"],
+  // #0f85f2a6 (hover ring)
+  "selected-disabled-bg": b19["blue-400-50"],
+  // #0f85f229 (렌더 ≈ #d8ebfc)
+  // thumb(손잡이)
+  "thumb": b19.white,
+  // #ffffff (off/on default·hover)
+  "disabled-thumb": b19.blue[400],
+  // #0f85f2 (on + disabled)
+  "disabled-thumb-off": b19.gray[300],
+  // #878787 (off + disabled, 진회색)
+  // 라벨
+  "text": b19.gray[900],
+  // #0d0d0d
+  "disabled-text": b19.gray[300]
+  // #878787
+};
+
+// src/tokens/colors/tabColors.ts
+var b20 = baseColors.base;
+var tabColors = {
+  "default-text": b20.gray[300],
+  // #878787 (미선택)
+  "hover-text": b20.gray[900],
+  // #0d0d0d
+  "selected-text": b20.gray[900],
+  // #0d0d0d (선택)
+  "disabled-text": b20.gray[150],
+  // #c9c9c9 (비활성)
+  "selected-underline": b20.gray[900],
+  // #0d0d0d (선택 하단 2px)
+  "hover-underline": b20.gray[900],
+  // #0d0d0d (hover 하단 2px)
+  "group-underline": b20.gray[100]
+  // #e3e3e3 (그룹 하단 1px)
+};
+
+// src/tokens/colors/tableColors.ts
+var b21 = baseColors.base;
+var tableColors = {
+  "header-bg": b21["gray-900-25"],
+  // #0d0d0d12 — 알파 배경(헤더 행, 2026-07-02 gray.50→gray-900-25)
+  "header-line": b21.gray[125],
+  // #d6d6d6 — 헤더 구분선(2026-07-03 gray150→125: cell-line(100)과 150의 중간색)
+  "cell-line": b21.gray[100],
+  // #e3e3e3 (바디 셀 사이 구분선)
+  "outline": b21.gray[100],
+  // #e3e3e3 (테이블 외곽선)
+  "row-bg": b21.white,
+  // #ffffff (바디 행 기본 배경)
+  "row-hover-bg": b21.gray[25]
+  // #fafafa (행 hover 배경)
+};
+
+// src/tokens/colors/modalColors.ts
+var b22 = baseColors.base;
+var modalColors = {
+  overlay: b22["gray-900-25"],
+  // #0d0d0d12 (rgba 13,13,13,0.07) — 딤 배경
+  inline: b22.gray[100],
+  // #e3e3e3 — ModalBox 배경(1px gap이 구분선으로 비침)
+  outline: b22["gray-900-50"],
+  // #0d0d0d29 — ModalBox 외곽선(1px)
+  "panel-bg": b22.white,
+  // #ffffff — 헤더·바디·푸터 배경
+  "description-bg": b22.gray[50]
+  // #f2f2f2 — Confirm/AlertModal 2뎁스 상세 설명 박스 배경
+};
+
+// src/tokens/colors/calendarColors.ts
+var b23 = baseColors.base;
+var calendarColors = {
+  // 기본(선택 가능한 이번 달 날짜)
+  "day-bg": b23.white,
+  // #ffffff
+  "day-text": b23.gray[900],
+  // #0d0d0d
+  "hover-bg": b23.gray[50],
+  // #f2f2f2 — 기본 날짜 hover(List hover와 동일)
+  // 다른 달 날짜(흐림)
+  "muted-text": b23.gray[150],
+  // #c9c9c9
+  // 오늘
+  "today-bg": b23.gray[500],
+  // #505050
+  "today-text": b23.white,
+  // #ffffff
+  // 선택 / 범위 시작·끝
+  "selected-bg": b23.blue[400],
+  // #0f85f2
+  "selected-text": b23.white,
+  // #ffffff
+  // 범위 안(start~end 사이)
+  "range-bg": b23.blue[100],
+  // #e6f3fe
+  "range-text": b23.blue[400]
+  // #0f85f2
+};
+
+// src/tokens/colors/editorColors.ts
+var b24 = baseColors.base;
+var editorColors = {
+  outline: tableColors["cell-line"],
+  // #e3e3e3 — 에디터 외곽선(인라인 표 셀 구분선과 동일 색으로 연동)
+  "toolbar-bg": b24.gray[25],
+  // #fafafa — 툴바 배경
+  divider: b24.gray[100],
+  // #e3e3e3 — 툴바 그룹/모드 구분선
+  "btn-active-bg": b24.gray[100],
+  // #e3e3e3 — 활성(toggle on) 버튼 배경
+  "btn-active-fg": b24.blue[400],
+  // #0f85f2 — 활성 버튼 아이콘색
+  link: b24.blue[400],
+  // #0f85f2 — 본문 링크색
+  "code-bg": b24.gray[100],
+  // #e3e3e3 — 인라인 코드 배경
+  "code-text": b24.gray[900],
+  // #0d0d0d — 인라인 코드 텍스트
+  "block-bg": b24.gray[25],
+  // #fafafa — 코드블록/인용 배경
+  "source-bg": b24.gray[900],
+  // #0d0d0d — HTML 소스 영역 배경(어두운 코드 톤)
+  "source-text": b24.white,
+  // #ffffff — HTML 소스 텍스트
+  placeholder: b24.gray[300]
+  // #878787 — 빈 본문 placeholder
+};
+var editorTextPalette = [
+  { label: "\uAE30\uBCF8", value: null, swatch: fontIconColors[5] },
+  // null = 색 해제(unsetColor), 원은 디폴트 글자색(font-icon-5)
+  { label: "\uD68C\uC0C9", value: b24.gray[300] },
+  // #878787
+  { label: "\uBE68\uAC15", value: b24.red[400] },
+  // #e74a4a
+  { label: "\uD30C\uB791", value: b24.blue[400] }
+  // #0f85f2
+];
+var editorHighlightPalette = [
+  { label: "\uC5C6\uC74C", value: null },
+  // null = 형광 해제(unsetHighlight)
+  { label: "\uD68C\uC0C9", value: b24.gray[100] },
+  // #e3e3e3
+  { label: "\uBE68\uAC15", value: b24.red[100] },
+  // #fde1e1
+  { label: "\uD30C\uB791", value: b24.blue[100] }
+  // #e6f3fe
+];
+
+// src/tokens/spacing.ts
+var spacing = {
+  "spacing-none": "0px",
+  "spacing-1": "1px",
+  "spacing-2": "2px",
+  "spacing-3": "4px",
+  "spacing-4": "6px",
+  "spacing-5": "8px",
+  "spacing-5-5": "10px",
+  // 중간 스텝(2026-07-02 추가) — 테이블 셀 좌우 패딩 등. 기존 키 순번 유지를 위해 중간 키 사용
+  "spacing-6": "12px",
+  "spacing-7": "16px",
+  "spacing-8": "20px",
+  "spacing-9": "24px",
+  "spacing-10": "28px",
+  "spacing-11": "32px",
+  "spacing-12": "36px"
+};
+
+// src/tokens/radius.ts
+var radius = {
+  "round-2": "2px",
+  "round-3": "4px",
+  "round-4": "6px",
+  "round-5": "8px",
+  "round-6": "10px",
+  "round-7": "12px",
+  "round-8": "16px",
+  "round-9": "20px",
+  "round-10": "24px",
+  "round-11": "28px",
+  "round-12": "32px",
+  "round-00": "999px"
+};
+
+// src/tokens/border.ts
+var borderWidth = {
+  1: "1px",
+  2: "2px",
+  3: "3px",
+  4: "4px"
+};
+
+// tailwind.preset.js
+var tailwind_preset_default = {
+  safelist: [
+    ...Object.keys(fontSize).map((size) => `text-${size}`),
+    ...Object.keys(lineHeight).map((key) => `leading-${key}`),
+    ...Object.keys(radius).map((key) => `rounded-${key}`),
+    ...Object.keys(borderWidth).map((key) => `border-${key}`)
+  ],
+  theme: {
+    extend: {
+      fontFamily,
+      fontSize,
+      lineHeight,
+      colors: {
+        ...baseColors,
+        "font-icon": fontIconColors,
+        button: buttonColors,
+        "text-field": textFieldColors,
+        "label-field": labelFieldColors,
+        divider: dividerColors,
+        chip: chipColors,
+        list: listColors,
+        tag: tagColors,
+        "new-tag": newTagColors,
+        "side-nav": sideNavColors,
+        "condition-slot": conditionOrderSlotColors,
+        "condition-card": conditionCardColors,
+        formula: formulaColors,
+        "builder-area": builderAreaColors,
+        toolbar: toolbarColors,
+        accordion: accordionColors,
+        segmented: segmentedColors,
+        checkbox: checkboxColors,
+        radio: radioColors,
+        switch: switchColors,
+        tab: tabColors,
+        table: tableColors,
+        modal: modalColors,
+        editor: editorColors,
+        calendar: calendarColors
+      },
+      spacing,
+      borderRadius: radius,
+      borderWidth,
+      ringWidth: borderWidth
+      // ring 두께도 border 토큰(border-1~4)을 그대로 사용
+    }
+  }
+};