moru-krds-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (247) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +61 -0
  3. package/dist/accordion/index.d.ts +63 -0
  4. package/dist/accordion/index.d.ts.map +1 -0
  5. package/dist/accordion/index.js +145 -0
  6. package/dist/accordion/index.js.map +1 -0
  7. package/dist/alert/index.d.ts +44 -0
  8. package/dist/alert/index.d.ts.map +1 -0
  9. package/dist/alert/index.js +66 -0
  10. package/dist/alert/index.js.map +1 -0
  11. package/dist/avatar/index.d.ts +102 -0
  12. package/dist/avatar/index.d.ts.map +1 -0
  13. package/dist/avatar/index.js +146 -0
  14. package/dist/avatar/index.js.map +1 -0
  15. package/dist/badge/index.d.ts +49 -0
  16. package/dist/badge/index.d.ts.map +1 -0
  17. package/dist/badge/index.js +41 -0
  18. package/dist/badge/index.js.map +1 -0
  19. package/dist/breadcrumb/index.d.ts +43 -0
  20. package/dist/breadcrumb/index.d.ts.map +1 -0
  21. package/dist/breadcrumb/index.js +43 -0
  22. package/dist/breadcrumb/index.js.map +1 -0
  23. package/dist/button/index.d.ts +78 -0
  24. package/dist/button/index.d.ts.map +1 -0
  25. package/dist/button/index.js +83 -0
  26. package/dist/button/index.js.map +1 -0
  27. package/dist/checkbox/index.d.ts +97 -0
  28. package/dist/checkbox/index.d.ts.map +1 -0
  29. package/dist/checkbox/index.js +110 -0
  30. package/dist/checkbox/index.js.map +1 -0
  31. package/dist/combobox/index.d.ts +135 -0
  32. package/dist/combobox/index.d.ts.map +1 -0
  33. package/dist/combobox/index.js +416 -0
  34. package/dist/combobox/index.js.map +1 -0
  35. package/dist/context-menu/index.d.ts +94 -0
  36. package/dist/context-menu/index.d.ts.map +1 -0
  37. package/dist/context-menu/index.js +399 -0
  38. package/dist/context-menu/index.js.map +1 -0
  39. package/dist/critical-alert/index.d.ts +39 -0
  40. package/dist/critical-alert/index.d.ts.map +1 -0
  41. package/dist/critical-alert/index.js +50 -0
  42. package/dist/critical-alert/index.js.map +1 -0
  43. package/dist/data-table/index.d.ts +94 -0
  44. package/dist/data-table/index.d.ts.map +1 -0
  45. package/dist/data-table/index.js +128 -0
  46. package/dist/data-table/index.js.map +1 -0
  47. package/dist/disclosure/index.d.ts +35 -0
  48. package/dist/disclosure/index.d.ts.map +1 -0
  49. package/dist/disclosure/index.js +54 -0
  50. package/dist/disclosure/index.js.map +1 -0
  51. package/dist/drawer/index.d.ts +106 -0
  52. package/dist/drawer/index.d.ts.map +1 -0
  53. package/dist/drawer/index.js +352 -0
  54. package/dist/drawer/index.js.map +1 -0
  55. package/dist/empty-state/index.d.ts +86 -0
  56. package/dist/empty-state/index.d.ts.map +1 -0
  57. package/dist/empty-state/index.js +138 -0
  58. package/dist/empty-state/index.js.map +1 -0
  59. package/dist/env.d.js +1 -0
  60. package/dist/env.d.js.map +1 -0
  61. package/dist/field/index.d.ts +149 -0
  62. package/dist/field/index.d.ts.map +1 -0
  63. package/dist/field/index.js +121 -0
  64. package/dist/field/index.js.map +1 -0
  65. package/dist/file-upload/index.d.ts +140 -0
  66. package/dist/file-upload/index.d.ts.map +1 -0
  67. package/dist/file-upload/index.js +249 -0
  68. package/dist/file-upload/index.js.map +1 -0
  69. package/dist/footer/index.d.ts +155 -0
  70. package/dist/footer/index.d.ts.map +1 -0
  71. package/dist/footer/index.js +186 -0
  72. package/dist/footer/index.js.map +1 -0
  73. package/dist/header/index.d.ts +170 -0
  74. package/dist/header/index.d.ts.map +1 -0
  75. package/dist/header/index.js +258 -0
  76. package/dist/header/index.js.map +1 -0
  77. package/dist/identifier/index.d.ts +38 -0
  78. package/dist/identifier/index.d.ts.map +1 -0
  79. package/dist/identifier/index.js +55 -0
  80. package/dist/identifier/index.js.map +1 -0
  81. package/dist/in-page-navigation/index.d.ts +71 -0
  82. package/dist/in-page-navigation/index.d.ts.map +1 -0
  83. package/dist/in-page-navigation/index.js +137 -0
  84. package/dist/in-page-navigation/index.js.map +1 -0
  85. package/dist/index.d.ts +57 -0
  86. package/dist/index.d.ts.map +1 -0
  87. package/dist/index.js +47 -0
  88. package/dist/index.js.map +1 -0
  89. package/dist/input-group/index.d.ts +66 -0
  90. package/dist/input-group/index.d.ts.map +1 -0
  91. package/dist/input-group/index.js +85 -0
  92. package/dist/input-group/index.js.map +1 -0
  93. package/dist/lib/krds.d.ts +45 -0
  94. package/dist/lib/krds.d.ts.map +1 -0
  95. package/dist/lib/krds.js +11 -0
  96. package/dist/lib/krds.js.map +1 -0
  97. package/dist/lib/link.d.ts +34 -0
  98. package/dist/lib/link.d.ts.map +1 -0
  99. package/dist/lib/link.js +8 -0
  100. package/dist/lib/link.js.map +1 -0
  101. package/dist/main-menu/index.d.ts +123 -0
  102. package/dist/main-menu/index.d.ts.map +1 -0
  103. package/dist/main-menu/index.js +613 -0
  104. package/dist/main-menu/index.js.map +1 -0
  105. package/dist/masthead/index.d.ts +25 -0
  106. package/dist/masthead/index.d.ts.map +1 -0
  107. package/dist/masthead/index.js +21 -0
  108. package/dist/masthead/index.js.map +1 -0
  109. package/dist/modal/index.d.ts +105 -0
  110. package/dist/modal/index.d.ts.map +1 -0
  111. package/dist/modal/index.js +285 -0
  112. package/dist/modal/index.js.map +1 -0
  113. package/dist/pagination/index.d.ts +58 -0
  114. package/dist/pagination/index.d.ts.map +1 -0
  115. package/dist/pagination/index.js +82 -0
  116. package/dist/pagination/index.js.map +1 -0
  117. package/dist/progress/index.d.ts +58 -0
  118. package/dist/progress/index.d.ts.map +1 -0
  119. package/dist/progress/index.js +125 -0
  120. package/dist/progress/index.js.map +1 -0
  121. package/dist/radio/index.d.ts +111 -0
  122. package/dist/radio/index.d.ts.map +1 -0
  123. package/dist/radio/index.js +136 -0
  124. package/dist/radio/index.js.map +1 -0
  125. package/dist/resize/index.d.ts +118 -0
  126. package/dist/resize/index.d.ts.map +1 -0
  127. package/dist/resize/index.js +342 -0
  128. package/dist/resize/index.js.map +1 -0
  129. package/dist/scroll-area/index.d.ts +40 -0
  130. package/dist/scroll-area/index.d.ts.map +1 -0
  131. package/dist/scroll-area/index.js +52 -0
  132. package/dist/scroll-area/index.js.map +1 -0
  133. package/dist/select/index.d.ts +67 -0
  134. package/dist/select/index.d.ts.map +1 -0
  135. package/dist/select/index.js +61 -0
  136. package/dist/select/index.js.map +1 -0
  137. package/dist/separator/index.d.ts +47 -0
  138. package/dist/separator/index.d.ts.map +1 -0
  139. package/dist/separator/index.js +61 -0
  140. package/dist/separator/index.js.map +1 -0
  141. package/dist/side-navigation/index.d.ts +78 -0
  142. package/dist/side-navigation/index.d.ts.map +1 -0
  143. package/dist/side-navigation/index.js +188 -0
  144. package/dist/side-navigation/index.js.map +1 -0
  145. package/dist/skeleton/index.d.ts +76 -0
  146. package/dist/skeleton/index.d.ts.map +1 -0
  147. package/dist/skeleton/index.js +78 -0
  148. package/dist/skeleton/index.js.map +1 -0
  149. package/dist/skip-link/index.d.ts +46 -0
  150. package/dist/skip-link/index.d.ts.map +1 -0
  151. package/dist/skip-link/index.js +37 -0
  152. package/dist/skip-link/index.js.map +1 -0
  153. package/dist/spinner/index.d.ts +58 -0
  154. package/dist/spinner/index.d.ts.map +1 -0
  155. package/dist/spinner/index.js +36 -0
  156. package/dist/spinner/index.js.map +1 -0
  157. package/dist/step-indicator/index.d.ts +41 -0
  158. package/dist/step-indicator/index.d.ts.map +1 -0
  159. package/dist/step-indicator/index.js +63 -0
  160. package/dist/step-indicator/index.js.map +1 -0
  161. package/dist/structured-list/index.d.ts +150 -0
  162. package/dist/structured-list/index.d.ts.map +1 -0
  163. package/dist/structured-list/index.js +194 -0
  164. package/dist/structured-list/index.js.map +1 -0
  165. package/dist/tab/index.d.ts +108 -0
  166. package/dist/tab/index.d.ts.map +1 -0
  167. package/dist/tab/index.js +198 -0
  168. package/dist/tab/index.js.map +1 -0
  169. package/dist/table/index.d.ts +75 -0
  170. package/dist/table/index.d.ts.map +1 -0
  171. package/dist/table/index.js +91 -0
  172. package/dist/table/index.js.map +1 -0
  173. package/dist/tag/index.d.ts +71 -0
  174. package/dist/tag/index.d.ts.map +1 -0
  175. package/dist/tag/index.js +45 -0
  176. package/dist/tag/index.js.map +1 -0
  177. package/dist/text-input/index.d.ts +69 -0
  178. package/dist/text-input/index.d.ts.map +1 -0
  179. package/dist/text-input/index.js +70 -0
  180. package/dist/text-input/index.js.map +1 -0
  181. package/dist/text-list/index.d.ts +71 -0
  182. package/dist/text-list/index.d.ts.map +1 -0
  183. package/dist/text-list/index.js +79 -0
  184. package/dist/text-list/index.js.map +1 -0
  185. package/dist/textarea/index.d.ts +29 -0
  186. package/dist/textarea/index.d.ts.map +1 -0
  187. package/dist/textarea/index.js +69 -0
  188. package/dist/textarea/index.js.map +1 -0
  189. package/dist/toast/index.d.ts +76 -0
  190. package/dist/toast/index.d.ts.map +1 -0
  191. package/dist/toast/index.js +183 -0
  192. package/dist/toast/index.js.map +1 -0
  193. package/dist/tooltip/index.d.ts +84 -0
  194. package/dist/tooltip/index.d.ts.map +1 -0
  195. package/dist/tooltip/index.js +329 -0
  196. package/dist/tooltip/index.js.map +1 -0
  197. package/package.json +57 -0
  198. package/src/accordion/index.tsx +251 -0
  199. package/src/alert/index.tsx +111 -0
  200. package/src/avatar/index.tsx +272 -0
  201. package/src/badge/index.tsx +91 -0
  202. package/src/breadcrumb/index.tsx +125 -0
  203. package/src/button/index.tsx +190 -0
  204. package/src/checkbox/index.tsx +247 -0
  205. package/src/combobox/index.tsx +700 -0
  206. package/src/context-menu/index.tsx +623 -0
  207. package/src/critical-alert/index.tsx +102 -0
  208. package/src/data-table/index.tsx +289 -0
  209. package/src/disclosure/index.tsx +87 -0
  210. package/src/drawer/index.tsx +516 -0
  211. package/src/empty-state/index.tsx +256 -0
  212. package/src/env.d.ts +10 -0
  213. package/src/field/index.tsx +307 -0
  214. package/src/file-upload/index.tsx +492 -0
  215. package/src/footer/index.tsx +393 -0
  216. package/src/header/index.tsx +498 -0
  217. package/src/identifier/index.tsx +96 -0
  218. package/src/in-page-navigation/index.tsx +258 -0
  219. package/src/index.ts +72 -0
  220. package/src/input-group/index.tsx +197 -0
  221. package/src/lib/krds.ts +75 -0
  222. package/src/lib/link.tsx +35 -0
  223. package/src/main-menu/index.tsx +912 -0
  224. package/src/masthead/index.tsx +50 -0
  225. package/src/modal/index.tsx +457 -0
  226. package/src/pagination/index.tsx +198 -0
  227. package/src/progress/index.tsx +198 -0
  228. package/src/radio/index.tsx +283 -0
  229. package/src/resize/index.tsx +541 -0
  230. package/src/scroll-area/index.tsx +96 -0
  231. package/src/select/index.tsx +136 -0
  232. package/src/separator/index.tsx +107 -0
  233. package/src/side-navigation/index.tsx +336 -0
  234. package/src/skeleton/index.tsx +172 -0
  235. package/src/skip-link/index.tsx +89 -0
  236. package/src/spinner/index.tsx +98 -0
  237. package/src/step-indicator/index.tsx +122 -0
  238. package/src/structured-list/index.tsx +395 -0
  239. package/src/tab/index.tsx +348 -0
  240. package/src/table/index.tsx +186 -0
  241. package/src/tag/index.tsx +127 -0
  242. package/src/text-input/index.tsx +156 -0
  243. package/src/text-list/index.tsx +177 -0
  244. package/src/textarea/index.tsx +113 -0
  245. package/src/toast/index.tsx +311 -0
  246. package/src/tooltip/index.tsx +496 -0
  247. package/styles/krds-tailwind.css +335 -0
package/styles/krds-tailwind.css ADDED
@@ -0,0 +1,335 @@
1
+ /*
2
+ * Tailwind 눈금 ↔ KRDS 토큰 다리.
3
+ *
4
+ * 이 파일이 하는 일은 하나다 — **Tailwind 의 유틸리티 이름을 KRDS 변수에 묶는 것.**
5
+ * 이 결합이 없으면 `text-fg-subtle`·`bg-primary-solid`·`border-line` 같은 이름이 아무 뜻도 없고,
6
+ * 유틸리티로 그린 부분이 KRDS 컴포넌트 옆에서 따로 논다.
7
+ *
8
+ * 부품(`src/`)은 이 이름들을 쓴다. **Tailwind v4 를 쓴다면 이 파일을 반드시 들여와야 한다.**
9
+ * Tailwind 를 안 쓴다면 부품이 붙이는 유틸리티 클래스가 무시될 뿐 킷 클래스는 그대로 동작한다 —
10
+ * 다만 여백·색 보충이 빠져 화면이 성기게 보인다.
11
+ *
12
+ * 규칙 셋
13
+ * 1. KRDS 에 컴포넌트가 있으면 무조건 그것을 쓴다(`src/` 의 부품이 그 껍데기다).
14
+ * 2. 보충은 **유틸리티로만** 한다. 이름 붙인 새 클래스를 만들지 않는다.
15
+ * 3. **눈금은 KRDS 토큰에서 온다** — 아래 @theme 이 그 결합이다. 없는 값을 지어내지 않는다.
16
+ *
17
+ * 전제: 킷이 `html { font-size: 62.5% }` 를 걸어 **1rem = 10px** 이다.
18
+ * 누가 이 값을 바꾸면 아래 모든 rem 이 어긋난다.
19
+ */
20
+
21
+ @layer krds-theme;
22
+
23
+ @import 'tailwindcss/theme.css' layer(krds-theme);
24
+
25
+ /*
26
+ * 유틸리티는 **레이어에 넣지 않고, important 로 들여온다.** 두 가지를 실측하고 내린 결정이다.
27
+ *
28
+ * 1) 캐스케이드 레이어는 레이어 밖 규칙에 무조건 진다. krds.min.css 가 레이어 밖이라
29
+ * layer(utilities) 로 넣으면 `text-sm`·`h-13` 이 하나도 먹지 않는다(실제로 화면이 통째로 깨졌다).
30
+ * 2) 그렇다고 순서로 이기지도 못한다. 실측한 <head> 적재 순서는
31
+ * globals(+tailwind).css → krds.min.css
32
+ * 로 킷이 맨 뒤다. 게다가 킷 규칙은 `.krds-table-wrap .tbl.data tbody td`(0,3,1)처럼 특이도도 높다.
33
+ *
34
+ * 보충 층은 「KRDS 위에 덮는 층」이 설계 의도이므로 important 가 맞다.
35
+ * preflight 는 넣지 않는다 — 기반 층의 주인은 KRDS 다.
36
+ */
37
+ @import 'tailwindcss/utilities.css' important;
38
+
39
+ @source './';
40
+ @source '../src/';
41
+
42
+ @theme {
43
+ /* ── 간격 ───────────────────────────────────────────────────────────
44
+ * `--spacing` 만 두고 눈금 별칭(--spacing-1 … -21)은 두지 않는다.
45
+ *
46
+ * 한때 `--spacing-N` 을 `--krds-number-N` 에 묶었는데 틀린 결합이었다.
47
+ * `--krds-number-*` 는 배수가 아니라 **인덱스**다 — number-4 = 6px, number-8 = 16px.
48
+ * 그래서 `p-4` 가 6px, `gap-2` 가 2px 이 되어 Tailwind 를 아는 사람이 읽는 대로 동작하지 않았고,
49
+ * 21 에서 정의가 끊겨 `p-22` 가 `p-21`(96px)보다 작은 88px 로 역주행했다.
50
+ *
51
+ * KRDS 가 컴포넌트에 실제로 쓰는 눈금은 `--krds-gap-*` 와 `--krds-padding-*` 이고 값은 이렇다.
52
+ * gap 2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80
53
+ * padding 2 · 4 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 40
54
+ * 2 와 10 을 빼면 전부 4 의 배수다. 그래서 눈금을 4px 로 두면 KRDS 값이 전부 표현되고
55
+ * (2px = `0.5`, 10px = `2.5`) 끊기는 지점도 없다.
56
+ */
57
+ --spacing: 0.4rem; /* 4px */
58
+
59
+ /* ── 본문 폭 ─────────────────────────────────────────────────────
60
+ * KRDS: 콘텐츠 1200 · 바깥 감싸개 1248 · 좌우 여백 16.
61
+ * Tailwind 의 `max-w-7xl`(80rem)은 루트 10px 을 타서 800px 이 되므로 쓰면 안 된다. */
62
+ --container-contents: 1200px;
63
+ --container-contents-wrap: 1248px;
64
+
65
+ /* ── 글자 크기 ───────────────────────────────────────────────────
66
+ * KRDS 는 축을 넷으로 가른다 — display / heading / body / label.
67
+ * 예전에는 `--text-lg`(body-large 19px)와 `--text-xl`(heading-small 19px)이 같은 값으로 겹쳐
68
+ * 「본문 큰 글씨」와 「작은 제목」이 구분되지 않았다. 이제 축마다 이름을 따로 준다.
69
+ *
70
+ * Tailwind 기본 별칭(xs·sm·base·lg)은 **body 축**에 그대로 둔다 — 이미 쓰는 곳이 많다.
71
+ * 제목에는 `text-heading-*` 을, 큰 표제에는 `text-display-*` 를 쓴다.
72
+ *
73
+ * 줄간격은 전부 `--krds-line-height-base`(1.5)다. 킷이 body 에 걸어 두는 유일한 값이고
74
+ * KRDS 가 요구하는 최소치이기도 하다. Tailwind 기본값(크기마다 다르고 큰 글자는 1.1까지 내려감)을
75
+ * 그대로 두면 이 요구를 어긴다 — 그래서 크기마다 짝을 명시한다. */
76
+
77
+ /* 본문 — 13 / 15 / 17 / 19 */
78
+ --text-xs: var(--krds-pc-font-size-body-xsmall);
79
+ --text-xs--line-height: var(--krds-line-height-base);
80
+ --text-sm: var(--krds-pc-font-size-body-small);
81
+ --text-sm--line-height: var(--krds-line-height-base);
82
+ --text-base: var(--krds-pc-font-size-body-medium);
83
+ --text-base--line-height: var(--krds-line-height-base);
84
+ --text-lg: var(--krds-pc-font-size-body-large);
85
+ --text-lg--line-height: var(--krds-line-height-base);
86
+
87
+ /* 제목 — 15 / 17 / 19 / 24 / 32 / 40 */
88
+ --text-heading-xxs: var(--krds-pc-font-size-heading-xxsmall);
89
+ --text-heading-xxs--line-height: var(--krds-line-height-base);
90
+ --text-heading-xs: var(--krds-pc-font-size-heading-xsmall);
91
+ --text-heading-xs--line-height: var(--krds-line-height-base);
92
+ --text-heading-sm: var(--krds-pc-font-size-heading-small);
93
+ --text-heading-sm--line-height: var(--krds-line-height-base);
94
+ --text-heading-md: var(--krds-pc-font-size-heading-medium);
95
+ --text-heading-md--line-height: var(--krds-line-height-base);
96
+ --text-heading-lg: var(--krds-pc-font-size-heading-large);
97
+ --text-heading-lg--line-height: var(--krds-line-height-base);
98
+ --text-heading-xl: var(--krds-pc-font-size-heading-xlarge);
99
+ --text-heading-xl--line-height: var(--krds-line-height-base);
100
+
101
+ /* 표제 — 36 / 44 / 60 */
102
+ --text-display-sm: var(--krds-pc-font-size-display-small);
103
+ --text-display-sm--line-height: var(--krds-line-height-base);
104
+ --text-display-md: var(--krds-pc-font-size-display-medium);
105
+ --text-display-md--line-height: var(--krds-line-height-base);
106
+ --text-display-lg: var(--krds-pc-font-size-display-large);
107
+ --text-display-lg--line-height: var(--krds-line-height-base);
108
+
109
+ /* 레이블(폼·버튼·배지) — 13 / 15 / 17 / 19 */
110
+ --text-label-xs: var(--krds-pc-font-size-label-xsmall);
111
+ --text-label-xs--line-height: var(--krds-line-height-base);
112
+ --text-label-sm: var(--krds-pc-font-size-label-small);
113
+ --text-label-sm--line-height: var(--krds-line-height-base);
114
+ --text-label-md: var(--krds-pc-font-size-label-medium);
115
+ --text-label-md--line-height: var(--krds-line-height-base);
116
+ --text-label-lg: var(--krds-pc-font-size-label-large);
117
+ --text-label-lg--line-height: var(--krds-line-height-base);
118
+
119
+ /* 옛 별칭 — 쓰던 곳이 있어 남긴다. 새 코드는 text-heading-* 를 쓴다. */
120
+ --text-xl: var(--krds-pc-font-size-heading-small);
121
+ --text-xl--line-height: var(--krds-line-height-base);
122
+ --text-2xl: var(--krds-pc-font-size-heading-medium);
123
+ --text-2xl--line-height: var(--krds-line-height-base);
124
+ --text-3xl: var(--krds-pc-font-size-heading-large);
125
+ --text-3xl--line-height: var(--krds-line-height-base);
126
+ --text-4xl: var(--krds-pc-font-size-heading-xlarge);
127
+ --text-4xl--line-height: var(--krds-line-height-base);
128
+
129
+ /* ── 글꼴 ───────────────────────────────────────────────────────── */
130
+ --font-sans: var(--krds-font-family-base);
131
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
132
+ --font-weight-regular: var(--krds-font-weight-regular);
133
+ --font-weight-bold: var(--krds-font-weight-bold);
134
+
135
+ /* ── 자간 ───────────────────────────────────────────────────────
136
+ * KRDS 는 0 과 +1px 둘뿐이다. 음수 자간(-0.02em 따위)은 규격에 없다. */
137
+ --tracking-normal: var(--krds-letter-spacing-none);
138
+ --tracking-wide: var(--krds-letter-spacing-wide);
139
+
140
+ /* ── 둥글기 ─────────────────────────────────────────────────────
141
+ * KRDS 실측: xsmall 2 · small 4 · medium1·2 6 · medium3·4 8 · large 10 · xlarge 12 */
142
+ --radius-xs: var(--krds-radius-xsmall1); /* 2 */
143
+ --radius-sm: var(--krds-radius-small1); /* 4 */
144
+ --radius-md: var(--krds-radius-medium1); /* 6 — 버튼·입력 */
145
+ --radius-lg: var(--krds-radius-medium3); /* 8 */
146
+ --radius-xl: var(--krds-radius-large1); /* 10 */
147
+ --radius-2xl: var(--krds-radius-xlarge1); /* 12 */
148
+ --radius-full: var(--krds-radius-max);
149
+
150
+ /* ── 테두리 두께 ─────────────────────────────────────────────── */
151
+ --border-width-regular: var(--krds-light-border-width-static-regular); /* 1 */
152
+ --border-width-medium: var(--krds-light-border-width-static-medium); /* 2 */
153
+
154
+ /* ── 색 ─────────────────────────────────────────────────────────
155
+ * KRDS 는 의미색을 **축 13개 × 색상 8개**로 가른다(라이트만 186개).
156
+ * 예전에는 이 중 text 축 몇 개만 이어 놓아서 `bg-primary` 가 「글자색」을 배경으로 칠했다.
157
+ *
158
+ * 축마다 쓰임이 다르다.
159
+ * text 글자·아이콘 surface 넓은 면(구획 배경)
160
+ * border 테두리·구분선 element 꽉 찬 작은 면(배지·점·막대)
161
+ *
162
+ * 색상마다 네 벌을 준다 — `text-primary` · `bg-primary-surface` · `border-primary-line` · `bg-primary-solid`.
163
+ * 팔레트 원색(--krds-color-light-*)이 아니라 **의미 토큰**(--krds-light-color-*)에 잇는다.
164
+ * 원색을 직접 쓰면 「이 색이 무엇을 뜻하는지」가 사라지고 킷이 팔레트를 바꿀 때 따라가지 못한다. */
165
+
166
+ /* 중립 — 글자 */
167
+ --color-fg: var(--krds-light-color-text-basic);
168
+ --color-fg-bolder: var(--krds-light-color-text-bolder);
169
+ --color-fg-subtle: var(--krds-light-color-text-subtle);
170
+ --color-fg-disabled: var(--krds-light-color-text-disabled);
171
+ --color-fg-inverse: var(--krds-light-color-text-basic-inverse);
172
+
173
+ /* 중립 — 바탕 */
174
+ --color-bg: var(--krds-light-color-background-white);
175
+ --color-bg-subtle: var(--krds-light-color-background-gray-subtler);
176
+ --color-bg-muted: var(--krds-light-color-background-gray-subtle);
177
+ --color-bg-inverse: var(--krds-light-color-background-inverse);
178
+ --color-bg-dim: var(--krds-light-color-background-dim);
179
+
180
+ /* 중립 — 면. 「본문이 초라하다」를 푸는 축이다. 바탕과 달리 구획에 깊이를 준다. */
181
+ --color-surface: var(--krds-light-color-surface-white);
182
+ --color-surface-subtle: var(--krds-light-color-surface-gray-subtle);
183
+ --color-surface-subtler: var(--krds-light-color-surface-gray-subtler);
184
+ --color-surface-inverse: var(--krds-light-color-surface-inverse);
185
+ --color-surface-disabled: var(--krds-light-color-surface-disabled);
186
+
187
+ /* 중립 — 선 */
188
+ --color-line: var(--krds-light-color-border-gray-light);
189
+ --color-line-strong: var(--krds-light-color-border-gray);
190
+ --color-line-darker: var(--krds-light-color-border-gray-darker);
191
+ --color-divider: var(--krds-light-color-divider-gray);
192
+
193
+ /* 주색 */
194
+ --color-primary: var(--krds-light-color-text-primary);
195
+ --color-primary-surface: var(--krds-light-color-surface-primary-subtler);
196
+ --color-primary-line: var(--krds-light-color-border-primary);
197
+ --color-primary-solid: var(--krds-light-color-element-primary);
198
+
199
+ --color-secondary: var(--krds-light-color-text-secondary);
200
+ --color-secondary-surface: var(--krds-light-color-surface-secondary-subtler);
201
+ --color-secondary-line: var(--krds-light-color-border-secondary);
202
+ --color-secondary-solid: var(--krds-light-color-element-secondary);
203
+
204
+ --color-point: var(--krds-light-color-text-point);
205
+ --color-point-surface: var(--krds-light-color-surface-point-subtler);
206
+ --color-point-line: var(--krds-light-color-border-point);
207
+ --color-point-solid: var(--krds-light-color-element-point);
208
+
209
+ /* 상태색 */
210
+ --color-danger: var(--krds-light-color-text-danger);
211
+ --color-danger-surface: var(--krds-light-color-surface-danger-subtler);
212
+ --color-danger-line: var(--krds-light-color-border-danger);
213
+ --color-danger-solid: var(--krds-light-color-element-danger);
214
+
215
+ --color-warning: var(--krds-light-color-text-warning);
216
+ --color-warning-surface: var(--krds-light-color-surface-warning-subtler);
217
+ --color-warning-line: var(--krds-light-color-border-warning);
218
+ --color-warning-solid: var(--krds-light-color-element-warning);
219
+
220
+ --color-success: var(--krds-light-color-text-success);
221
+ --color-success-surface: var(--krds-light-color-surface-success-subtler);
222
+ --color-success-line: var(--krds-light-color-border-success);
223
+ --color-success-solid: var(--krds-light-color-element-success);
224
+
225
+ --color-information: var(--krds-light-color-text-information);
226
+ --color-information-surface: var(--krds-light-color-surface-information-subtler);
227
+ --color-information-line: var(--krds-light-color-border-information);
228
+ --color-information-solid: var(--krds-light-color-element-information);
229
+
230
+ /* 링크 */
231
+ --color-link: var(--krds-light-color-link-default);
232
+ --color-link-hover: var(--krds-light-color-link-hover);
233
+ --color-link-visited: var(--krds-light-color-link-visited);
234
+ }
235
+
236
+ /*
237
+ * ── 모바일 눈금 ────────────────────────────────────────────────────
238
+ * 한때 「킷이 미디어쿼리로 알아서 바꾼다」고 적어 두었는데 **사실이 아니었다.**
239
+ * 킷은 `--krds-pc-font-size-*` 를 재정의하지 않고, 컴포넌트마다 `@media` 안에서
240
+ * `--krds-mobile-font-size-*` 를 따로 지정한다. 그래서 우리 유틸리티는 모바일에서 그대로 남았다.
241
+ *
242
+ * 실제로 줄어드는 것은 **heading-medium 이상과 display 뿐**이다 —
243
+ * body·label 은 PC 와 모바일이 같은 값이라 손댈 필요가 없다.
244
+ * 분기점 767px 은 킷이 쓰는 값 그대로다.
245
+ */
246
+ @media (max-width: 767px) {
247
+ :root {
248
+ --text-heading-md: var(--krds-mobile-font-size-heading-medium); /* 24 → 22 */
249
+ --text-heading-lg: var(--krds-mobile-font-size-heading-large); /* 32 → 24 */
250
+ --text-heading-xl: var(--krds-mobile-font-size-heading-xlarge); /* 40 → 28 */
251
+ --text-display-sm: var(--krds-mobile-font-size-display-small); /* 36 → 28 */
252
+ --text-display-md: var(--krds-mobile-font-size-display-medium); /* 44 → 32 */
253
+ --text-display-lg: var(--krds-mobile-font-size-display-large); /* 60 → 44 */
254
+
255
+ --text-2xl: var(--krds-mobile-font-size-heading-medium);
256
+ --text-3xl: var(--krds-mobile-font-size-heading-large);
257
+ --text-4xl: var(--krds-mobile-font-size-heading-xlarge);
258
+ }
259
+ }
260
+
261
+ /*
262
+ * ── 선명한 화면 모드 ───────────────────────────────────────────────
263
+ * 킷은 고대비를 의미 토큰 교체로 하지 않고 `[data-krds-mode=high-contrast] .form-group` 처럼
264
+ * **컴포넌트별 규칙 수백 개**로 건다(킷 안의 `[data-krds-mode=high-contrast] :root` 는
265
+ * `:root` 가 자기 자손일 수 없어 아무 데도 맞지 않는다 — 킷 자체의 결함이다).
266
+ *
267
+ * 그래서 킷 컴포넌트는 알아서 바뀌지만 **우리가 유틸리티로 그린 부분은 밝은 색 그대로 남는다.**
268
+ * 아래 블록이 보충 층 토큰을 직접 갈아 끼워 그것을 맞춘다.
269
+ * 이름이 1:1 로 대응한다 — `--krds-light-color-X` ↔ `--krds-high-contrast-color-X`.
270
+ *
271
+ * **위 @theme 에 색을 더하면 여기에도 짝을 넣어야 한다.** 안 넣으면 그 색만 고대비에서 안 바뀐다.
272
+ */
273
+ [data-krds-mode='high-contrast'] {
274
+ --color-fg: var(--krds-high-contrast-color-text-basic);
275
+ --color-fg-bolder: var(--krds-high-contrast-color-text-bolder);
276
+ --color-fg-subtle: var(--krds-high-contrast-color-text-subtle);
277
+ --color-fg-disabled: var(--krds-high-contrast-color-text-disabled);
278
+ --color-fg-inverse: var(--krds-high-contrast-color-text-basic-inverse);
279
+
280
+ --color-bg: var(--krds-high-contrast-color-background-white);
281
+ --color-bg-subtle: var(--krds-high-contrast-color-background-gray-subtler);
282
+ --color-bg-muted: var(--krds-high-contrast-color-background-gray-subtle);
283
+ --color-bg-inverse: var(--krds-high-contrast-color-background-inverse);
284
+ --color-bg-dim: var(--krds-high-contrast-color-background-dim);
285
+
286
+ --color-surface: var(--krds-high-contrast-color-surface-white);
287
+ --color-surface-subtle: var(--krds-high-contrast-color-surface-gray-subtle);
288
+ --color-surface-subtler: var(--krds-high-contrast-color-surface-gray-subtler);
289
+ --color-surface-inverse: var(--krds-high-contrast-color-surface-inverse);
290
+ --color-surface-disabled: var(--krds-high-contrast-color-surface-disabled);
291
+
292
+ --color-line: var(--krds-high-contrast-color-border-gray-light);
293
+ --color-line-strong: var(--krds-high-contrast-color-border-gray);
294
+ --color-line-darker: var(--krds-high-contrast-color-border-gray-darker);
295
+ --color-divider: var(--krds-high-contrast-color-divider-gray);
296
+
297
+ --color-primary: var(--krds-high-contrast-color-text-primary);
298
+ --color-primary-surface: var(--krds-high-contrast-color-surface-primary-subtler);
299
+ --color-primary-line: var(--krds-high-contrast-color-border-primary);
300
+ --color-primary-solid: var(--krds-high-contrast-color-element-primary);
301
+
302
+ --color-secondary: var(--krds-high-contrast-color-text-secondary);
303
+ --color-secondary-surface: var(--krds-high-contrast-color-surface-secondary-subtler);
304
+ --color-secondary-line: var(--krds-high-contrast-color-border-secondary);
305
+ --color-secondary-solid: var(--krds-high-contrast-color-element-secondary);
306
+
307
+ --color-point: var(--krds-high-contrast-color-text-point);
308
+ --color-point-surface: var(--krds-high-contrast-color-surface-point-subtler);
309
+ --color-point-line: var(--krds-high-contrast-color-border-point);
310
+ --color-point-solid: var(--krds-high-contrast-color-element-point);
311
+
312
+ --color-danger: var(--krds-high-contrast-color-text-danger);
313
+ --color-danger-surface: var(--krds-high-contrast-color-surface-danger-subtler);
314
+ --color-danger-line: var(--krds-high-contrast-color-border-danger);
315
+ --color-danger-solid: var(--krds-high-contrast-color-element-danger);
316
+
317
+ --color-warning: var(--krds-high-contrast-color-text-warning);
318
+ --color-warning-surface: var(--krds-high-contrast-color-surface-warning-subtler);
319
+ --color-warning-line: var(--krds-high-contrast-color-border-warning);
320
+ --color-warning-solid: var(--krds-high-contrast-color-element-warning);
321
+
322
+ --color-success: var(--krds-high-contrast-color-text-success);
323
+ --color-success-surface: var(--krds-high-contrast-color-surface-success-subtler);
324
+ --color-success-line: var(--krds-high-contrast-color-border-success);
325
+ --color-success-solid: var(--krds-high-contrast-color-element-success);
326
+
327
+ --color-information: var(--krds-high-contrast-color-text-information);
328
+ --color-information-surface: var(--krds-high-contrast-color-surface-information-subtler);
329
+ --color-information-line: var(--krds-high-contrast-color-border-information);
330
+ --color-information-solid: var(--krds-high-contrast-color-element-information);
331
+
332
+ --color-link: var(--krds-high-contrast-color-link-default);
333
+ --color-link-hover: var(--krds-high-contrast-color-link-hover);
334
+ --color-link-visited: var(--krds-high-contrast-color-link-visited);
335
+ }