tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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 (358) hide show
  1. package/README.md +10 -2
  2. package/css/tyrell-theme.css +192 -180
  3. package/css/tyrell.css +23 -0
  4. package/dist/tyrell-colors-static.css +1 -316
  5. package/dist/tyrell-theme.css +1 -1454
  6. package/dist/tyrell.css +1 -1371
  7. package/dist/tyrell.js +1 -1
  8. package/lib/base/ty-component.d.ts +20 -10
  9. package/lib/base/ty-component.js +196 -319
  10. package/lib/components/button.d.ts +3 -17
  11. package/lib/components/button.js +261 -295
  12. package/lib/components/calendar-month.d.ts +4 -50
  13. package/lib/components/calendar-month.js +443 -582
  14. package/lib/components/calendar-navigation.d.ts +3 -48
  15. package/lib/components/calendar-navigation.js +239 -362
  16. package/lib/components/calendar.d.ts +8 -83
  17. package/lib/components/calendar.js +616 -829
  18. package/lib/components/checkbox.d.ts +5 -72
  19. package/lib/components/checkbox.js +273 -416
  20. package/lib/components/copy.d.ts +4 -57
  21. package/lib/components/copy.js +280 -397
  22. package/lib/components/date-picker.d.ts +21 -163
  23. package/lib/components/date-picker.js +1143 -1674
  24. package/lib/components/file-upload.d.ts +9 -15
  25. package/lib/components/file-upload.js +404 -426
  26. package/lib/components/icon.d.ts +3 -24
  27. package/lib/components/icon.js +141 -230
  28. package/lib/components/input.d.ts +8 -108
  29. package/lib/components/input.js +593 -784
  30. package/lib/components/modal.d.ts +17 -26
  31. package/lib/components/modal.js +340 -484
  32. package/lib/components/option.d.ts +2 -9
  33. package/lib/components/option.js +168 -216
  34. package/lib/components/popup.d.ts +2 -17
  35. package/lib/components/popup.js +249 -380
  36. package/lib/components/radio.d.ts +5 -25
  37. package/lib/components/radio.js +407 -461
  38. package/lib/components/resize-observer.d.ts +3 -30
  39. package/lib/components/resize-observer.js +69 -103
  40. package/lib/components/scroll-container.d.ts +2 -12
  41. package/lib/components/scroll-container.js +293 -338
  42. package/lib/components/select.d.ts +87 -159
  43. package/lib/components/select.js +1609 -2090
  44. package/lib/components/selected-tags.d.ts +5 -48
  45. package/lib/components/selected-tags.js +188 -276
  46. package/lib/components/step.d.ts +1 -6
  47. package/lib/components/step.js +62 -68
  48. package/lib/components/switch.d.ts +1 -12
  49. package/lib/components/switch.js +214 -247
  50. package/lib/components/tab.d.ts +1 -6
  51. package/lib/components/tab.js +62 -69
  52. package/lib/components/tabs.d.ts +6 -63
  53. package/lib/components/tabs.js +545 -777
  54. package/lib/components/tag.d.ts +3 -37
  55. package/lib/components/tag.js +236 -335
  56. package/lib/components/textarea.d.ts +7 -87
  57. package/lib/components/textarea.js +457 -627
  58. package/lib/components/tooltip.d.ts +3 -11
  59. package/lib/components/tooltip.js +307 -443
  60. package/lib/components/wizard.d.ts +6 -54
  61. package/lib/components/wizard.js +405 -618
  62. package/lib/icons/fontawesome/brands.d.ts +0 -1
  63. package/lib/icons/fontawesome/brands.js +0 -8
  64. package/lib/icons/fontawesome/regular.d.ts +0 -1
  65. package/lib/icons/fontawesome/regular.js +0 -8
  66. package/lib/icons/fontawesome/solid.d.ts +0 -1
  67. package/lib/icons/fontawesome/solid.js +0 -8
  68. package/lib/icons/heroicons/micro.d.ts +0 -1
  69. package/lib/icons/heroicons/micro.js +392 -400
  70. package/lib/icons/heroicons/mini.d.ts +0 -1
  71. package/lib/icons/heroicons/mini.js +382 -390
  72. package/lib/icons/heroicons/outline.d.ts +0 -1
  73. package/lib/icons/heroicons/outline.js +337 -345
  74. package/lib/icons/heroicons/solid.d.ts +0 -1
  75. package/lib/icons/heroicons/solid.js +407 -415
  76. package/lib/icons/lucide.d.ts +0 -1
  77. package/lib/icons/lucide.js +24479 -26351
  78. package/lib/icons/material/filled.d.ts +0 -1
  79. package/lib/icons/material/filled.js +9653 -9663
  80. package/lib/icons/material/outlined.d.ts +0 -1
  81. package/lib/icons/material/outlined.js +10271 -10281
  82. package/lib/icons/material/round.d.ts +0 -1
  83. package/lib/icons/material/round.js +10495 -10505
  84. package/lib/icons/material/sharp.d.ts +0 -1
  85. package/lib/icons/material/sharp.js +9905 -9915
  86. package/lib/icons/material/two-tone.d.ts +0 -1
  87. package/lib/icons/material/two-tone.js +12792 -12802
  88. package/lib/index.d.ts +0 -1
  89. package/lib/index.js +21 -41
  90. package/lib/styles/button.d.ts +2 -20
  91. package/lib/styles/button.js +202 -404
  92. package/lib/styles/calendar-month.d.ts +1 -5
  93. package/lib/styles/calendar-month.js +127 -244
  94. package/lib/styles/calendar-navigation.d.ts +2 -6
  95. package/lib/styles/calendar-navigation.js +64 -104
  96. package/lib/styles/calendar.d.ts +1 -2
  97. package/lib/styles/calendar.js +9 -22
  98. package/lib/styles/checkbox.d.ts +0 -1
  99. package/lib/styles/checkbox.js +45 -94
  100. package/lib/styles/copy.d.ts +0 -1
  101. package/lib/styles/copy.js +67 -106
  102. package/lib/styles/custom-scrollbar.d.ts +1 -2
  103. package/lib/styles/custom-scrollbar.js +80 -115
  104. package/lib/styles/date-picker.d.ts +1 -5
  105. package/lib/styles/date-picker.js +261 -335
  106. package/lib/styles/field-size.d.ts +6 -0
  107. package/lib/styles/field-size.js +91 -0
  108. package/lib/styles/file-upload.d.ts +1 -2
  109. package/lib/styles/file-upload.js +143 -188
  110. package/lib/styles/icon.d.ts +2 -6
  111. package/lib/styles/icon.js +92 -170
  112. package/lib/styles/input.d.ts +1 -6
  113. package/lib/styles/input.js +125 -290
  114. package/lib/styles/modal.d.ts +1 -2
  115. package/lib/styles/modal.js +71 -108
  116. package/lib/styles/option.d.ts +2 -6
  117. package/lib/styles/option.js +49 -64
  118. package/lib/styles/popup.d.ts +1 -2
  119. package/lib/styles/popup.js +42 -77
  120. package/lib/styles/radio.d.ts +0 -1
  121. package/lib/styles/radio.js +69 -110
  122. package/lib/styles/resize-observer.d.ts +1 -2
  123. package/lib/styles/resize-observer.js +2 -12
  124. package/lib/styles/scroll-container.d.ts +1 -2
  125. package/lib/styles/scroll-container.js +100 -149
  126. package/lib/styles/select-base.d.ts +0 -1
  127. package/lib/styles/select-base.js +597 -785
  128. package/lib/styles/select.d.ts +1 -2
  129. package/lib/styles/select.js +140 -236
  130. package/lib/styles/step.d.ts +1 -2
  131. package/lib/styles/step.js +22 -33
  132. package/lib/styles/switch.d.ts +0 -1
  133. package/lib/styles/switch.js +34 -73
  134. package/lib/styles/tab.d.ts +1 -2
  135. package/lib/styles/tab.js +22 -34
  136. package/lib/styles/tabs.d.ts +3 -11
  137. package/lib/styles/tabs.js +190 -222
  138. package/lib/styles/tag.d.ts +1 -5
  139. package/lib/styles/tag.js +136 -218
  140. package/lib/styles/textarea.d.ts +1 -2
  141. package/lib/styles/textarea.js +210 -319
  142. package/lib/styles/tooltip.d.ts +0 -1
  143. package/lib/styles/tooltip.js +3 -13
  144. package/lib/styles/wizard.d.ts +5 -21
  145. package/lib/styles/wizard.js +170 -306
  146. package/lib/types/common.d.ts +2 -2
  147. package/lib/types/common.js +6 -17
  148. package/lib/utils/calendar-utils.d.ts +4 -21
  149. package/lib/utils/calendar-utils.js +100 -273
  150. package/lib/utils/custom-scrollbar.d.ts +6 -20
  151. package/lib/utils/custom-scrollbar.js +273 -317
  152. package/lib/utils/flavor-sheet.d.ts +0 -1
  153. package/lib/utils/flavor-sheet.js +14 -37
  154. package/lib/utils/icon-registry.d.ts +0 -2
  155. package/lib/utils/icon-registry.js +137 -243
  156. package/lib/utils/icons.d.ts +0 -1
  157. package/lib/utils/icons.js +0 -9
  158. package/lib/utils/loader-registry.d.ts +0 -1
  159. package/lib/utils/loader-registry.js +3 -35
  160. package/lib/utils/locale.d.ts +2 -23
  161. package/lib/utils/locale.js +34 -120
  162. package/lib/utils/mobile.d.ts +0 -1
  163. package/lib/utils/mobile.js +1 -18
  164. package/lib/utils/number-format.d.ts +6 -3
  165. package/lib/utils/number-format.js +54 -110
  166. package/lib/utils/positioning.d.ts +50 -7
  167. package/lib/utils/positioning.js +224 -234
  168. package/lib/utils/property-capture.d.ts +5 -27
  169. package/lib/utils/property-capture.js +36 -144
  170. package/lib/utils/property-manager.d.ts +0 -1
  171. package/lib/utils/property-manager.js +126 -196
  172. package/lib/utils/resize-observer.d.ts +0 -1
  173. package/lib/utils/resize-observer.js +23 -59
  174. package/lib/utils/scroll-lock.d.ts +4 -11
  175. package/lib/utils/scroll-lock.js +65 -172
  176. package/lib/utils/styles.d.ts +0 -1
  177. package/lib/utils/styles.js +17 -41
  178. package/lib/version.d.ts +1 -2
  179. package/lib/version.js +1 -11
  180. package/package.json +4 -4
  181. package/lib/base/ty-component.d.ts.map +0 -1
  182. package/lib/base/ty-component.js.map +0 -1
  183. package/lib/components/button.d.ts.map +0 -1
  184. package/lib/components/button.js.map +0 -1
  185. package/lib/components/calendar-month.d.ts.map +0 -1
  186. package/lib/components/calendar-month.js.map +0 -1
  187. package/lib/components/calendar-navigation.d.ts.map +0 -1
  188. package/lib/components/calendar-navigation.js.map +0 -1
  189. package/lib/components/calendar.d.ts.map +0 -1
  190. package/lib/components/calendar.js.map +0 -1
  191. package/lib/components/checkbox.d.ts.map +0 -1
  192. package/lib/components/checkbox.js.map +0 -1
  193. package/lib/components/copy.d.ts.map +0 -1
  194. package/lib/components/copy.js.map +0 -1
  195. package/lib/components/date-picker.d.ts.map +0 -1
  196. package/lib/components/date-picker.js.map +0 -1
  197. package/lib/components/file-upload.d.ts.map +0 -1
  198. package/lib/components/file-upload.js.map +0 -1
  199. package/lib/components/icon.d.ts.map +0 -1
  200. package/lib/components/icon.js.map +0 -1
  201. package/lib/components/input.d.ts.map +0 -1
  202. package/lib/components/input.js.map +0 -1
  203. package/lib/components/modal.d.ts.map +0 -1
  204. package/lib/components/modal.js.map +0 -1
  205. package/lib/components/option.d.ts.map +0 -1
  206. package/lib/components/option.js.map +0 -1
  207. package/lib/components/popup.d.ts.map +0 -1
  208. package/lib/components/popup.js.map +0 -1
  209. package/lib/components/radio.d.ts.map +0 -1
  210. package/lib/components/radio.js.map +0 -1
  211. package/lib/components/resize-observer.d.ts.map +0 -1
  212. package/lib/components/resize-observer.js.map +0 -1
  213. package/lib/components/scroll-container.d.ts.map +0 -1
  214. package/lib/components/scroll-container.js.map +0 -1
  215. package/lib/components/select.d.ts.map +0 -1
  216. package/lib/components/select.js.map +0 -1
  217. package/lib/components/selected-tags.d.ts.map +0 -1
  218. package/lib/components/selected-tags.js.map +0 -1
  219. package/lib/components/step.d.ts.map +0 -1
  220. package/lib/components/step.js.map +0 -1
  221. package/lib/components/switch.d.ts.map +0 -1
  222. package/lib/components/switch.js.map +0 -1
  223. package/lib/components/tab.d.ts.map +0 -1
  224. package/lib/components/tab.js.map +0 -1
  225. package/lib/components/tabs.d.ts.map +0 -1
  226. package/lib/components/tabs.js.map +0 -1
  227. package/lib/components/tag.d.ts.map +0 -1
  228. package/lib/components/tag.js.map +0 -1
  229. package/lib/components/textarea.d.ts.map +0 -1
  230. package/lib/components/textarea.js.map +0 -1
  231. package/lib/components/tooltip.d.ts.map +0 -1
  232. package/lib/components/tooltip.js.map +0 -1
  233. package/lib/components/wizard.d.ts.map +0 -1
  234. package/lib/components/wizard.js.map +0 -1
  235. package/lib/icons/fontawesome/brands.d.ts.map +0 -1
  236. package/lib/icons/fontawesome/brands.js.map +0 -1
  237. package/lib/icons/fontawesome/regular.d.ts.map +0 -1
  238. package/lib/icons/fontawesome/regular.js.map +0 -1
  239. package/lib/icons/fontawesome/solid.d.ts.map +0 -1
  240. package/lib/icons/fontawesome/solid.js.map +0 -1
  241. package/lib/icons/heroicons/micro.d.ts.map +0 -1
  242. package/lib/icons/heroicons/micro.js.map +0 -1
  243. package/lib/icons/heroicons/mini.d.ts.map +0 -1
  244. package/lib/icons/heroicons/mini.js.map +0 -1
  245. package/lib/icons/heroicons/outline.d.ts.map +0 -1
  246. package/lib/icons/heroicons/outline.js.map +0 -1
  247. package/lib/icons/heroicons/solid.d.ts.map +0 -1
  248. package/lib/icons/heroicons/solid.js.map +0 -1
  249. package/lib/icons/lucide.d.ts.map +0 -1
  250. package/lib/icons/lucide.js.map +0 -1
  251. package/lib/icons/material/filled.d.ts.map +0 -1
  252. package/lib/icons/material/filled.js.map +0 -1
  253. package/lib/icons/material/outlined.d.ts.map +0 -1
  254. package/lib/icons/material/outlined.js.map +0 -1
  255. package/lib/icons/material/round.d.ts.map +0 -1
  256. package/lib/icons/material/round.js.map +0 -1
  257. package/lib/icons/material/sharp.d.ts.map +0 -1
  258. package/lib/icons/material/sharp.js.map +0 -1
  259. package/lib/icons/material/two-tone.d.ts.map +0 -1
  260. package/lib/icons/material/two-tone.js.map +0 -1
  261. package/lib/index.d.ts.map +0 -1
  262. package/lib/index.js.map +0 -1
  263. package/lib/styles/button.d.ts.map +0 -1
  264. package/lib/styles/button.js.map +0 -1
  265. package/lib/styles/calendar-month.d.ts.map +0 -1
  266. package/lib/styles/calendar-month.js.map +0 -1
  267. package/lib/styles/calendar-navigation.d.ts.map +0 -1
  268. package/lib/styles/calendar-navigation.js.map +0 -1
  269. package/lib/styles/calendar.d.ts.map +0 -1
  270. package/lib/styles/calendar.js.map +0 -1
  271. package/lib/styles/checkbox.d.ts.map +0 -1
  272. package/lib/styles/checkbox.js.map +0 -1
  273. package/lib/styles/copy.d.ts.map +0 -1
  274. package/lib/styles/copy.js.map +0 -1
  275. package/lib/styles/custom-scrollbar.d.ts.map +0 -1
  276. package/lib/styles/custom-scrollbar.js.map +0 -1
  277. package/lib/styles/date-picker.d.ts.map +0 -1
  278. package/lib/styles/date-picker.js.map +0 -1
  279. package/lib/styles/file-upload.d.ts.map +0 -1
  280. package/lib/styles/file-upload.js.map +0 -1
  281. package/lib/styles/icon.d.ts.map +0 -1
  282. package/lib/styles/icon.js.map +0 -1
  283. package/lib/styles/input.d.ts.map +0 -1
  284. package/lib/styles/input.js.map +0 -1
  285. package/lib/styles/modal.d.ts.map +0 -1
  286. package/lib/styles/modal.js.map +0 -1
  287. package/lib/styles/multiselect.d.ts +0 -8
  288. package/lib/styles/multiselect.d.ts.map +0 -1
  289. package/lib/styles/multiselect.js +0 -849
  290. package/lib/styles/multiselect.js.map +0 -1
  291. package/lib/styles/option.d.ts.map +0 -1
  292. package/lib/styles/option.js.map +0 -1
  293. package/lib/styles/popup.d.ts.map +0 -1
  294. package/lib/styles/popup.js.map +0 -1
  295. package/lib/styles/radio.d.ts.map +0 -1
  296. package/lib/styles/radio.js.map +0 -1
  297. package/lib/styles/resize-observer.d.ts.map +0 -1
  298. package/lib/styles/resize-observer.js.map +0 -1
  299. package/lib/styles/scroll-container.d.ts.map +0 -1
  300. package/lib/styles/scroll-container.js.map +0 -1
  301. package/lib/styles/select-base.d.ts.map +0 -1
  302. package/lib/styles/select-base.js.map +0 -1
  303. package/lib/styles/select.d.ts.map +0 -1
  304. package/lib/styles/select.js.map +0 -1
  305. package/lib/styles/step.d.ts.map +0 -1
  306. package/lib/styles/step.js.map +0 -1
  307. package/lib/styles/switch.d.ts.map +0 -1
  308. package/lib/styles/switch.js.map +0 -1
  309. package/lib/styles/tab.d.ts.map +0 -1
  310. package/lib/styles/tab.js.map +0 -1
  311. package/lib/styles/tabs.d.ts.map +0 -1
  312. package/lib/styles/tabs.js.map +0 -1
  313. package/lib/styles/tag.d.ts.map +0 -1
  314. package/lib/styles/tag.js.map +0 -1
  315. package/lib/styles/textarea.d.ts.map +0 -1
  316. package/lib/styles/textarea.js.map +0 -1
  317. package/lib/styles/tooltip.d.ts.map +0 -1
  318. package/lib/styles/tooltip.js.map +0 -1
  319. package/lib/styles/wizard.d.ts.map +0 -1
  320. package/lib/styles/wizard.js.map +0 -1
  321. package/lib/types/common.d.ts.map +0 -1
  322. package/lib/types/common.js.map +0 -1
  323. package/lib/utils/calendar-utils.d.ts.map +0 -1
  324. package/lib/utils/calendar-utils.js.map +0 -1
  325. package/lib/utils/custom-scrollbar.d.ts.map +0 -1
  326. package/lib/utils/custom-scrollbar.js.map +0 -1
  327. package/lib/utils/flavor-sheet.d.ts.map +0 -1
  328. package/lib/utils/flavor-sheet.js.map +0 -1
  329. package/lib/utils/icon-registry.d.ts.map +0 -1
  330. package/lib/utils/icon-registry.js.map +0 -1
  331. package/lib/utils/icons.d.ts.map +0 -1
  332. package/lib/utils/icons.js.map +0 -1
  333. package/lib/utils/loader-registry.d.ts.map +0 -1
  334. package/lib/utils/loader-registry.js.map +0 -1
  335. package/lib/utils/locale.d.ts.map +0 -1
  336. package/lib/utils/locale.js.map +0 -1
  337. package/lib/utils/mobile.d.ts.map +0 -1
  338. package/lib/utils/mobile.js.map +0 -1
  339. package/lib/utils/number-format.d.ts.map +0 -1
  340. package/lib/utils/number-format.js.map +0 -1
  341. package/lib/utils/parse-boolean.d.ts +0 -39
  342. package/lib/utils/parse-boolean.d.ts.map +0 -1
  343. package/lib/utils/parse-boolean.js +0 -58
  344. package/lib/utils/parse-boolean.js.map +0 -1
  345. package/lib/utils/positioning.d.ts.map +0 -1
  346. package/lib/utils/positioning.js.map +0 -1
  347. package/lib/utils/property-capture.d.ts.map +0 -1
  348. package/lib/utils/property-capture.js.map +0 -1
  349. package/lib/utils/property-manager.d.ts.map +0 -1
  350. package/lib/utils/property-manager.js.map +0 -1
  351. package/lib/utils/resize-observer.d.ts.map +0 -1
  352. package/lib/utils/resize-observer.js.map +0 -1
  353. package/lib/utils/scroll-lock.d.ts.map +0 -1
  354. package/lib/utils/scroll-lock.js.map +0 -1
  355. package/lib/utils/styles.d.ts.map +0 -1
  356. package/lib/utils/styles.js.map +0 -1
  357. package/lib/version.d.ts.map +0 -1
  358. package/lib/version.js.map +0 -1
package/css/tyrell.css CHANGED
@@ -382,12 +382,16 @@ DESIGN SYSTEM TOKENS
382
382
  ty-button's 4px ladder (see button.ts): field sm = button md (32px),
383
383
  field md = button lg (36px), field lg = button xl (40px) — a button
384
384
  and a field of the paired size sit flush, same height, in a row. */
385
+ --ty-size-xs: 1.75rem;
386
+ /* 28px */
385
387
  --ty-size-sm: 2rem;
386
388
  /* 32px */
387
389
  --ty-size-md: 2.25rem;
388
390
  /* 36px */
389
391
  --ty-size-lg: 2.5rem;
390
392
  /* 40px */
393
+ --ty-size-xl: 2.75rem;
394
+ /* 44px */
391
395
 
392
396
  /* Z-Index Scale */
393
397
  --ty-z-auto: auto;
@@ -1369,3 +1373,22 @@ RESPONSIVE VARIANTS
1369
1373
  --ty-font-sm: 1rem;
1370
1374
  }
1371
1375
  }
1376
+
1377
+ /* =================================================================
1378
+ MODAL BACKDROP ZOOM (opt-in)
1379
+ While any <ty-modal backdrop-zoom open> is open, the component toggles
1380
+ .ty-modal-zoom on <html> and the page body scales down slightly
1381
+ (Vaul/shadcn-style). The modal itself renders in the top layer, which
1382
+ escapes ancestor transforms — only the page behind it moves.
1383
+ Caveat: a scaled <body> becomes the containing block for position:fixed
1384
+ descendants — apps with fixed headers/sidebars should not use backdrop-zoom.
1385
+ ================================================================= */
1386
+
1387
+ body {
1388
+ transition: scale var(--ty-modal-duration, 200ms) ease-out;
1389
+ }
1390
+
1391
+ html.ty-modal-zoom body {
1392
+ scale: 0.99;
1393
+ transform-origin: 50% 50%;
1394
+ }
package/dist/tyrell-colors-static.css CHANGED
@@ -1,316 +1 @@
1
- /* =================================================================
2
- Tyrell Static Colors — hardcoded fallback color tokens
3
-
4
- Every --ty-color-*, --ty-bg-{flavor}-*, --ty-border-*, --ty-surface-*,
5
- --ty-text-*, --ty-input-{color-related}-* and --ty-solid-* token tyrell.css
6
- used to hardcode directly, now split out here. Load this file alongside
7
- tyrell.css if you want static, no-theme-engine colors.
8
-
9
- If you want dynamic theming (custom seeds, live theme switching, per-flavor
10
- tuning), load tyrell-theme.css INSTEAD — it defines the same token names via
11
- oklch() formulas and, loaded after tyrell.css, wins by source order. Loading
12
- both is harmless (tyrell-theme.css always wins) but redundant.
13
- ================================================================= */
14
-
15
- html {
16
- /* Primary */
17
- --ty-color-primary-strong: #163793;
18
- --ty-color-primary-bold: #304c9f;
19
- --ty-color-primary: #466bce;
20
- --ty-color-primary-soft: #60a5fa;
21
- --ty-color-primary-faint: #93c5fd;
22
-
23
- /* Success */
24
- --ty-color-success-strong: #177858;
25
- --ty-color-success-bold: #3e9779;
26
- --ty-color-success: #3eaa86;
27
- --ty-color-success-soft: #64b399;
28
- --ty-color-success-faint: #7fd4b2;
29
-
30
- /* Danger */
31
- --ty-color-danger-strong: #b91c1c;
32
- --ty-color-danger-bold: #dc2626;
33
- --ty-color-danger: #ef4444;
34
- --ty-color-danger-soft: #f87171;
35
- --ty-color-danger-faint: #fca5a5;
36
-
37
- /* Warning */
38
- --ty-color-warning-strong: #e86400;
39
- --ty-color-warning-bold: #ee7f00;
40
- --ty-color-warning: #f59e0b;
41
- --ty-color-warning-soft: #fbbf24;
42
- --ty-color-warning-faint: #fcd34d;
43
-
44
- /* Neutral */
45
- --ty-color-neutral-strong: #000000;
46
- --ty-color-neutral-bold: #000000;
47
- --ty-color-neutral: #111827;
48
- --ty-color-neutral-soft: #374151;
49
- --ty-color-neutral-faint: #9ca3af;
50
-
51
- /* Semantic backgrounds */
52
- --ty-bg-primary: #e3eefc;
53
- --ty-bg-primary-bold: #d5e4f8;
54
- --ty-bg-primary-soft: #eff6ff;
55
- --ty-bg-success: #d1fae5;
56
- --ty-bg-success-bold: #a7f3d0;
57
- --ty-bg-success-soft: #ecfdf5;
58
- --ty-bg-danger: #fee2e2;
59
- --ty-bg-danger-bold: #fecaca;
60
- --ty-bg-danger-soft: #fef2f2;
61
- --ty-bg-warning: #fef3c7;
62
- --ty-bg-warning-bold: #fde68a;
63
- --ty-bg-warning-soft: #fffbeb;
64
- --ty-bg-neutral: #e0e0e0;
65
- --ty-bg-neutral-bold: #cecece;
66
- --ty-bg-neutral-soft: #ededed;
67
-
68
- /* Borders */
69
- --ty-border: #e5e7eb;
70
- --ty-border-bold: #d1d5db;
71
- --ty-border-strong: #6b7280;
72
- --ty-border-soft: #f3f4f6;
73
- --ty-border-faint: #fafafa;
74
-
75
- /* Semantic borders */
76
- --ty-border-primary: var(--ty-color-primary);
77
- --ty-border-success: var(--ty-color-success);
78
- --ty-border-danger: var(--ty-color-danger);
79
- --ty-border-warning: var(--ty-color-warning);
80
- --ty-border-neutral: var(--ty-color-neutral);
81
-
82
- /* Surfaces */
83
- --ty-surface-canvas: #fcfcfc;
84
- --ty-surface-content: #ffffff;
85
- --ty-surface-elevated: #ffffff;
86
- --ty-surface-floating: #ffffff;
87
- --ty-surface-input: #ffffff;
88
-
89
- /* Surface borders */
90
- --ty-elevated-border: #e5e7eb;
91
- --ty-floating-border: #e5e7eb;
92
- --ty-content-border: #e5e7eb;
93
-
94
- /* Text hierarchy */
95
- --ty-text: #111827;
96
- --ty-text-bold: #000000;
97
- --ty-text-strong: #000000;
98
- --ty-text-soft: #374151;
99
- --ty-text-faint: #9ca3af;
100
-
101
- /* Input component tokens */
102
- --ty-input-bg: #ffffff;
103
- --ty-input-color: #111827;
104
- --ty-input-border: #e5e7eb;
105
- --ty-input-border-hover: #d1d5db;
106
- --ty-input-border-focus: var(--ty-color-primary);
107
- --ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
108
- --ty-input-placeholder: #9ca3af;
109
- --ty-input-disabled-bg: #f9fafb;
110
- --ty-input-disabled-border: #e5e7eb;
111
- --ty-input-disabled-color: #9ca3af;
112
-
113
- /* Input semantic state borders */
114
- --ty-input-success-border: var(--ty-color-success-soft);
115
- --ty-input-danger-border: var(--ty-color-danger-soft);
116
- --ty-input-warning-border: var(--ty-color-warning-soft);
117
-
118
- /* Solid button fills — Primary */
119
- --ty-solid-primary: #4076b9;
120
- --ty-solid-primary-strong: var(--ty-color-primary-bold);
121
- --ty-solid-primary-soft: #7ea7d9;
122
- --ty-solid-primary-hover: var(--ty-solid-primary-strong);
123
- --ty-solid-primary-active: var(--ty-solid-primary-strong);
124
- --ty-solid-primary-fg: white;
125
- --ty-solid-primary-strong-fg: white;
126
- --ty-solid-primary-soft-fg: black;
127
-
128
- /* Solid button fills — Success */
129
- --ty-solid-success: #3bb68d;
130
- --ty-solid-success-strong: #27956e;
131
- --ty-solid-success-soft: #69b99e;
132
- --ty-solid-success-hover: var(--ty-solid-success-strong);
133
- --ty-solid-success-active: var(--ty-solid-success-strong);
134
- --ty-solid-success-fg: black;
135
- --ty-solid-success-strong-fg: black;
136
- --ty-solid-success-soft-fg: black;
137
-
138
- /* Solid button fills — Danger */
139
- --ty-solid-danger: #df5b5b;
140
- --ty-solid-danger-strong: #cc3e3e;
141
- --ty-solid-danger-soft: #d57a7a;
142
- --ty-solid-danger-hover: var(--ty-solid-danger-strong);
143
- --ty-solid-danger-active: var(--ty-solid-danger-strong);
144
- --ty-solid-danger-fg: black;
145
- --ty-solid-danger-strong-fg: white;
146
- --ty-solid-danger-soft-fg: black;
147
-
148
- /* Solid button fills — Warning */
149
- --ty-solid-warning: #e1a644;
150
- --ty-solid-warning-strong: #f59e0b;
151
- --ty-solid-warning-soft: #fbc56d;
152
- --ty-solid-warning-hover: var(--ty-solid-warning-strong);
153
- --ty-solid-warning-active: var(--ty-solid-warning-strong);
154
- --ty-solid-warning-fg: black;
155
- --ty-solid-warning-strong-fg: black;
156
- --ty-solid-warning-soft-fg: black;
157
-
158
- /* Solid button fills — Neutral */
159
- --ty-solid-neutral: #414141;
160
- --ty-solid-neutral-strong: #000000;
161
- --ty-solid-neutral-soft: #6e6e6e;
162
- --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
163
- --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
164
- --ty-solid-neutral-fg: white;
165
- --ty-solid-neutral-strong-fg: white;
166
- --ty-solid-neutral-soft-fg: white;
167
-
168
- }
169
-
170
- /* =================================================================
171
- DARK THEME OVERRIDES
172
- ================================================================= */
173
-
174
- html.dark,
175
- html[data-theme="dark"] {
176
- /* Primary */
177
- --ty-color-primary-strong: #9cbde5;
178
- --ty-color-primary-bold: #6c9bd5;
179
- --ty-color-primary: #4976ae;
180
- --ty-color-primary-soft: #4b698b;
181
- --ty-color-primary-faint: #445b77;
182
-
183
- /* Success */
184
- --ty-color-success-strong: #c2f0df;
185
- --ty-color-success-bold: #6ee7b7;
186
- --ty-color-success: #3aba8b;
187
- --ty-color-success-soft: #459679;
188
- --ty-color-success-faint: #1b795c;
189
-
190
- /* Danger */
191
- --ty-color-danger-strong: #ffabab;
192
- --ty-color-danger-bold: #e58787;
193
- --ty-color-danger: #d06f6f;
194
- --ty-color-danger-soft: #b06666;
195
- --ty-color-danger-faint: #aa6e6e;
196
-
197
- /* Warning */
198
- --ty-color-warning-strong: #fde68a;
199
- --ty-color-warning-bold: #fcd34d;
200
- --ty-color-warning: #fbbf24;
201
- --ty-color-warning-soft: #f59e0b;
202
- --ty-color-warning-faint: #a06726;
203
-
204
- /* Neutral */
205
- --ty-color-neutral-strong: #ffffff;
206
- --ty-color-neutral-bold: #f9fafb;
207
- --ty-color-neutral: #d6d6d6;
208
- --ty-color-neutral-soft: #696969;
209
- --ty-color-neutral-faint: #474747;
210
-
211
- /* Semantic backgrounds */
212
- --ty-bg-primary: #394159;
213
- --ty-bg-primary-bold: #43517a;
214
- --ty-bg-primary-soft: #323a4f;
215
- --ty-bg-success: #3a4442;
216
- --ty-bg-success-bold: #405752;
217
- --ty-bg-success-soft: #2f3b38;
218
- --ty-bg-danger: #522828;
219
- --ty-bg-danger-bold: #853535;
220
- --ty-bg-danger-soft: #483c3c;
221
- --ty-bg-warning: #694555;
222
- --ty-bg-warning-bold: #743953;
223
- --ty-bg-warning-soft: #45333b;
224
- --ty-bg-neutral: #323232;
225
- --ty-bg-neutral-bold: #414141;
226
- --ty-bg-neutral-soft: #242424;
227
-
228
- /* Borders */
229
- --ty-border: #3e3e3e;
230
- --ty-border-bold: #666666;
231
- --ty-border-strong: #8c8c8c;
232
- --ty-border-soft: #1f2937;
233
- --ty-border-faint: #030712;
234
-
235
- /* Surfaces */
236
- --ty-surface-canvas: black;
237
- --ty-surface-content: #1a1a1a;
238
- --ty-surface-elevated: #282828;
239
- --ty-surface-floating: #343434;
240
- --ty-surface-input: #1f2937;
241
-
242
- /* Surface borders */
243
- --ty-elevated-border: #414141;
244
- --ty-floating-border: #494949;
245
- --ty-content-border: #030712;
246
-
247
- /* Text hierarchy */
248
- --ty-text: #d6d6d6;
249
- --ty-text-bold: #f9fafb;
250
- --ty-text-strong: #ffffff;
251
- --ty-text-soft: #7f8590;
252
- --ty-text-faint: #555a63;
253
-
254
- /* Input component tokens */
255
- --ty-input-bg: #1b1b1b;
256
- --ty-input-color: #f9fafb;
257
- --ty-input-border: #3a3a3a;
258
- --ty-input-border-hover: #505050;
259
- --ty-input-border-focus: var(--ty-color-primary);
260
- --ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
261
- --ty-input-placeholder: #717171;
262
- --ty-input-disabled-bg: #282828;
263
- --ty-input-disabled-border: #2e2e2e;
264
- --ty-input-disabled-color: #717171;
265
-
266
- /* Solid button fills — Primary */
267
- --ty-solid-primary: #3e536c;
268
- --ty-solid-primary-strong: #426084;
269
- --ty-solid-primary-soft: #343f4c;
270
- --ty-solid-primary-hover: var(--ty-solid-primary-strong);
271
- --ty-solid-primary-active: var(--ty-solid-primary-strong);
272
- --ty-solid-primary-fg: white;
273
- --ty-solid-primary-strong-fg: white;
274
- --ty-solid-primary-soft-fg: white;
275
-
276
- /* Solid button fills — Success */
277
- --ty-solid-success: #3bb68d;
278
- --ty-solid-success-strong: #459679;
279
- --ty-solid-success-soft: #285748;
280
- --ty-solid-success-hover: var(--ty-solid-success-strong);
281
- --ty-solid-success-active: var(--ty-solid-success-strong);
282
- --ty-solid-success-fg: black;
283
- --ty-solid-success-strong-fg: black;
284
- --ty-solid-success-soft-fg: white;
285
-
286
- /* Solid button fills — Danger */
287
- --ty-solid-danger: #df5b5b;
288
- --ty-solid-danger-strong: #cc3e3e;
289
- --ty-solid-danger-soft: #875656;
290
- --ty-solid-danger-hover: var(--ty-solid-danger-strong);
291
- --ty-solid-danger-active: var(--ty-solid-danger-strong);
292
- --ty-solid-danger-fg: black;
293
- --ty-solid-danger-strong-fg: white;
294
- --ty-solid-danger-soft-fg: white;
295
-
296
- /* Solid button fills — Warning */
297
- --ty-solid-warning: #e1a644;
298
- --ty-solid-warning-strong: #f59e0b;
299
- --ty-solid-warning-soft: #8b6334;
300
- --ty-solid-warning-hover: var(--ty-solid-warning-strong);
301
- --ty-solid-warning-active: var(--ty-solid-warning-strong);
302
- --ty-solid-warning-fg: black;
303
- --ty-solid-warning-strong-fg: black;
304
- --ty-solid-warning-soft-fg: white;
305
-
306
- /* Solid button fills — Neutral */
307
- --ty-solid-neutral: #414141;
308
- --ty-solid-neutral-strong: #f5f5f5;
309
- --ty-solid-neutral-soft: #2a2a2a;
310
- --ty-solid-neutral-hover: #4c4c4c;
311
- --ty-solid-neutral-active: #4c4c4c;
312
- --ty-solid-neutral-fg: white;
313
- --ty-solid-neutral-strong-fg: black;
314
- --ty-solid-neutral-soft-fg: white;
315
-
316
- }
1
+ html{--ty-color-primary-strong: #163793;--ty-color-primary-bold: #304c9f;--ty-color-primary: #466bce;--ty-color-primary-soft: #60a5fa;--ty-color-primary-faint: #93c5fd;--ty-color-success-strong: #177858;--ty-color-success-bold: #3e9779;--ty-color-success: #3eaa86;--ty-color-success-soft: #64b399;--ty-color-success-faint: #7fd4b2;--ty-color-danger-strong: #b91c1c;--ty-color-danger-bold: #dc2626;--ty-color-danger: #ef4444;--ty-color-danger-soft: #f87171;--ty-color-danger-faint: #fca5a5;--ty-color-warning-strong: #e86400;--ty-color-warning-bold: #ee7f00;--ty-color-warning: #f59e0b;--ty-color-warning-soft: #fbbf24;--ty-color-warning-faint: #fcd34d;--ty-color-neutral-strong: #000000;--ty-color-neutral-bold: #000000;--ty-color-neutral: #111827;--ty-color-neutral-soft: #374151;--ty-color-neutral-faint: #9ca3af;--ty-bg-primary: #e3eefc;--ty-bg-primary-bold: #d5e4f8;--ty-bg-primary-soft: #eff6ff;--ty-bg-success: #d1fae5;--ty-bg-success-bold: #a7f3d0;--ty-bg-success-soft: #ecfdf5;--ty-bg-danger: #fee2e2;--ty-bg-danger-bold: #fecaca;--ty-bg-danger-soft: #fef2f2;--ty-bg-warning: #fef3c7;--ty-bg-warning-bold: #fde68a;--ty-bg-warning-soft: #fffbeb;--ty-bg-neutral: #e0e0e0;--ty-bg-neutral-bold: #cecece;--ty-bg-neutral-soft: #ededed;--ty-border: #e5e7eb;--ty-border-bold: #d1d5db;--ty-border-strong: #6b7280;--ty-border-soft: #f3f4f6;--ty-border-faint: #fafafa;--ty-border-primary: var(--ty-color-primary);--ty-border-success: var(--ty-color-success);--ty-border-danger: var(--ty-color-danger);--ty-border-warning: var(--ty-color-warning);--ty-border-neutral: var(--ty-color-neutral);--ty-surface-canvas: #fcfcfc;--ty-surface-content: #ffffff;--ty-surface-elevated: #ffffff;--ty-surface-floating: #ffffff;--ty-surface-input: #ffffff;--ty-elevated-border: #e5e7eb;--ty-floating-border: #e5e7eb;--ty-content-border: #e5e7eb;--ty-text: #111827;--ty-text-bold: #000000;--ty-text-strong: #000000;--ty-text-soft: #374151;--ty-text-faint: #9ca3af;--ty-input-bg: #ffffff;--ty-input-color: #111827;--ty-input-border: #e5e7eb;--ty-input-border-hover: #d1d5db;--ty-input-border-focus: var(--ty-color-primary);--ty-input-shadow-focus: rgba(59, 130, 246, .1);--ty-input-placeholder: #9ca3af;--ty-input-disabled-bg: #f9fafb;--ty-input-disabled-border: #e5e7eb;--ty-input-disabled-color: #9ca3af;--ty-input-success-border: var(--ty-color-success-soft);--ty-input-danger-border: var(--ty-color-danger-soft);--ty-input-warning-border: var(--ty-color-warning-soft);--ty-solid-primary: #4076b9;--ty-solid-primary-strong: var(--ty-color-primary-bold);--ty-solid-primary-soft: #7ea7d9;--ty-solid-primary-hover: var(--ty-solid-primary-strong);--ty-solid-primary-active: var(--ty-solid-primary-strong);--ty-solid-primary-fg: white;--ty-solid-primary-strong-fg: white;--ty-solid-primary-soft-fg: black;--ty-solid-success: #3bb68d;--ty-solid-success-strong: #27956e;--ty-solid-success-soft: #69b99e;--ty-solid-success-hover: var(--ty-solid-success-strong);--ty-solid-success-active: var(--ty-solid-success-strong);--ty-solid-success-fg: black;--ty-solid-success-strong-fg: black;--ty-solid-success-soft-fg: black;--ty-solid-danger: #df5b5b;--ty-solid-danger-strong: #cc3e3e;--ty-solid-danger-soft: #d57a7a;--ty-solid-danger-hover: var(--ty-solid-danger-strong);--ty-solid-danger-active: var(--ty-solid-danger-strong);--ty-solid-danger-fg: black;--ty-solid-danger-strong-fg: white;--ty-solid-danger-soft-fg: black;--ty-solid-warning: #e1a644;--ty-solid-warning-strong: #f59e0b;--ty-solid-warning-soft: #fbc56d;--ty-solid-warning-hover: var(--ty-solid-warning-strong);--ty-solid-warning-active: var(--ty-solid-warning-strong);--ty-solid-warning-fg: black;--ty-solid-warning-strong-fg: black;--ty-solid-warning-soft-fg: black;--ty-solid-neutral: #414141;--ty-solid-neutral-strong: #000000;--ty-solid-neutral-soft: #6e6e6e;--ty-solid-neutral-hover: var(--ty-solid-neutral-strong);--ty-solid-neutral-active: var(--ty-solid-neutral-strong);--ty-solid-neutral-fg: white;--ty-solid-neutral-strong-fg: white;--ty-solid-neutral-soft-fg: white}html.dark,html[data-theme=dark]{--ty-color-primary-strong: #9cbde5;--ty-color-primary-bold: #6c9bd5;--ty-color-primary: #4976ae;--ty-color-primary-soft: #4b698b;--ty-color-primary-faint: #445b77;--ty-color-success-strong: #c2f0df;--ty-color-success-bold: #6ee7b7;--ty-color-success: #3aba8b;--ty-color-success-soft: #459679;--ty-color-success-faint: #1b795c;--ty-color-danger-strong: #ffabab;--ty-color-danger-bold: #e58787;--ty-color-danger: #d06f6f;--ty-color-danger-soft: #b06666;--ty-color-danger-faint: #aa6e6e;--ty-color-warning-strong: #fde68a;--ty-color-warning-bold: #fcd34d;--ty-color-warning: #fbbf24;--ty-color-warning-soft: #f59e0b;--ty-color-warning-faint: #a06726;--ty-color-neutral-strong: #ffffff;--ty-color-neutral-bold: #f9fafb;--ty-color-neutral: #d6d6d6;--ty-color-neutral-soft: #696969;--ty-color-neutral-faint: #474747;--ty-bg-primary: #394159;--ty-bg-primary-bold: #43517a;--ty-bg-primary-soft: #323a4f;--ty-bg-success: #3a4442;--ty-bg-success-bold: #405752;--ty-bg-success-soft: #2f3b38;--ty-bg-danger: #522828;--ty-bg-danger-bold: #853535;--ty-bg-danger-soft: #483c3c;--ty-bg-warning: #694555;--ty-bg-warning-bold: #743953;--ty-bg-warning-soft: #45333b;--ty-bg-neutral: #323232;--ty-bg-neutral-bold: #414141;--ty-bg-neutral-soft: #242424;--ty-border: #3e3e3e;--ty-border-bold: #666666;--ty-border-strong: #8c8c8c;--ty-border-soft: #1f2937;--ty-border-faint: #030712;--ty-surface-canvas: black;--ty-surface-content: #1a1a1a;--ty-surface-elevated: #282828;--ty-surface-floating: #343434;--ty-surface-input: #1f2937;--ty-elevated-border: #414141;--ty-floating-border: #494949;--ty-content-border: #030712;--ty-text: #d6d6d6;--ty-text-bold: #f9fafb;--ty-text-strong: #ffffff;--ty-text-soft: #7f8590;--ty-text-faint: #555a63;--ty-input-bg: #1b1b1b;--ty-input-color: #f9fafb;--ty-input-border: #3a3a3a;--ty-input-border-hover: #505050;--ty-input-border-focus: var(--ty-color-primary);--ty-input-shadow-focus: rgba(96, 165, 250, .1);--ty-input-placeholder: #717171;--ty-input-disabled-bg: #282828;--ty-input-disabled-border: #2e2e2e;--ty-input-disabled-color: #717171;--ty-solid-primary: #3e536c;--ty-solid-primary-strong: #426084;--ty-solid-primary-soft: #343f4c;--ty-solid-primary-hover: var(--ty-solid-primary-strong);--ty-solid-primary-active: var(--ty-solid-primary-strong);--ty-solid-primary-fg: white;--ty-solid-primary-strong-fg: white;--ty-solid-primary-soft-fg: white;--ty-solid-success: #3bb68d;--ty-solid-success-strong: #459679;--ty-solid-success-soft: #285748;--ty-solid-success-hover: var(--ty-solid-success-strong);--ty-solid-success-active: var(--ty-solid-success-strong);--ty-solid-success-fg: black;--ty-solid-success-strong-fg: black;--ty-solid-success-soft-fg: white;--ty-solid-danger: #df5b5b;--ty-solid-danger-strong: #cc3e3e;--ty-solid-danger-soft: #875656;--ty-solid-danger-hover: var(--ty-solid-danger-strong);--ty-solid-danger-active: var(--ty-solid-danger-strong);--ty-solid-danger-fg: black;--ty-solid-danger-strong-fg: white;--ty-solid-danger-soft-fg: white;--ty-solid-warning: #e1a644;--ty-solid-warning-strong: #f59e0b;--ty-solid-warning-soft: #8b6334;--ty-solid-warning-hover: var(--ty-solid-warning-strong);--ty-solid-warning-active: var(--ty-solid-warning-strong);--ty-solid-warning-fg: black;--ty-solid-warning-strong-fg: black;--ty-solid-warning-soft-fg: white;--ty-solid-neutral: #414141;--ty-solid-neutral-strong: #f5f5f5;--ty-solid-neutral-soft: #2a2a2a;--ty-solid-neutral-hover: #4c4c4c;--ty-solid-neutral-active: #4c4c4c;--ty-solid-neutral-fg: white;--ty-solid-neutral-strong-fg: black;--ty-solid-neutral-soft-fg: white}