tyrell-components 1.0.0-RC12 → 1.0.0-RC14

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 (354) hide show
  1. package/README.md +2 -1
  2. package/css/tyrell-colors-static.css +316 -0
  3. package/css/tyrell-theme.css +1443 -0
  4. package/css/tyrell.css +127 -423
  5. package/dist/tyrell-colors-static.css +316 -0
  6. package/dist/tyrell-theme.css +1443 -0
  7. package/dist/tyrell.css +127 -423
  8. package/dist/tyrell.js +1 -1
  9. package/lib/base/ty-component.d.ts +20 -10
  10. package/lib/base/ty-component.js +21 -144
  11. package/lib/components/button.d.ts +9 -16
  12. package/lib/components/button.js +12 -37
  13. package/lib/components/calendar-month.d.ts +17 -46
  14. package/lib/components/calendar-month.js +97 -145
  15. package/lib/components/calendar-navigation.d.ts +3 -48
  16. package/lib/components/calendar-navigation.js +3 -126
  17. package/lib/components/calendar.d.ts +6 -81
  18. package/lib/components/calendar.js +24 -236
  19. package/lib/components/checkbox.d.ts +8 -74
  20. package/lib/components/checkbox.js +21 -177
  21. package/lib/components/copy.d.ts +7 -59
  22. package/lib/components/copy.js +19 -137
  23. package/lib/components/date-picker.d.ts +23 -161
  24. package/lib/components/date-picker.js +127 -588
  25. package/lib/components/file-upload.d.ts +9 -15
  26. package/lib/components/file-upload.js +19 -41
  27. package/lib/components/icon.d.ts +3 -24
  28. package/lib/components/icon.js +1 -90
  29. package/lib/components/input.d.ts +10 -109
  30. package/lib/components/input.js +24 -209
  31. package/lib/components/modal.d.ts +17 -26
  32. package/lib/components/modal.js +67 -192
  33. package/lib/components/option.d.ts +2 -20
  34. package/lib/components/option.js +1 -148
  35. package/lib/components/popup.d.ts +2 -17
  36. package/lib/components/popup.js +35 -132
  37. package/lib/components/radio.d.ts +7 -24
  38. package/lib/components/radio.js +24 -68
  39. package/lib/components/resize-observer.d.ts +3 -30
  40. package/lib/components/resize-observer.js +12 -46
  41. package/lib/components/scroll-container.d.ts +2 -12
  42. package/lib/components/scroll-container.js +3 -46
  43. package/lib/components/select.d.ts +130 -151
  44. package/lib/components/select.js +327 -516
  45. package/lib/components/selected-tags.d.ts +8 -38
  46. package/lib/components/selected-tags.js +20 -78
  47. package/lib/components/step.d.ts +1 -6
  48. package/lib/components/step.js +0 -6
  49. package/lib/components/switch.d.ts +4 -14
  50. package/lib/components/switch.js +15 -61
  51. package/lib/components/tab.d.ts +1 -6
  52. package/lib/components/tab.js +0 -7
  53. package/lib/components/tabs.d.ts +5 -63
  54. package/lib/components/tabs.js +159 -267
  55. package/lib/components/tag.d.ts +2 -36
  56. package/lib/components/tag.js +5 -105
  57. package/lib/components/textarea.d.ts +6 -86
  58. package/lib/components/textarea.js +2 -173
  59. package/lib/components/tooltip.d.ts +7 -13
  60. package/lib/components/tooltip.js +83 -180
  61. package/lib/components/wizard.d.ts +6 -54
  62. package/lib/components/wizard.js +27 -221
  63. package/lib/icons/fontawesome/brands.d.ts +0 -1
  64. package/lib/icons/fontawesome/brands.js +0 -8
  65. package/lib/icons/fontawesome/regular.d.ts +0 -1
  66. package/lib/icons/fontawesome/regular.js +0 -8
  67. package/lib/icons/fontawesome/solid.d.ts +0 -1
  68. package/lib/icons/fontawesome/solid.js +0 -8
  69. package/lib/icons/heroicons/micro.d.ts +0 -1
  70. package/lib/icons/heroicons/micro.js +0 -8
  71. package/lib/icons/heroicons/mini.d.ts +0 -1
  72. package/lib/icons/heroicons/mini.js +0 -8
  73. package/lib/icons/heroicons/outline.d.ts +0 -1
  74. package/lib/icons/heroicons/outline.js +0 -8
  75. package/lib/icons/heroicons/solid.d.ts +0 -1
  76. package/lib/icons/heroicons/solid.js +0 -8
  77. package/lib/icons/lucide.d.ts +0 -1
  78. package/lib/icons/lucide.js +0 -1872
  79. package/lib/icons/material/filled.d.ts +0 -1
  80. package/lib/icons/material/filled.js +0 -10
  81. package/lib/icons/material/outlined.d.ts +0 -1
  82. package/lib/icons/material/outlined.js +0 -10
  83. package/lib/icons/material/round.d.ts +0 -1
  84. package/lib/icons/material/round.js +0 -10
  85. package/lib/icons/material/sharp.d.ts +0 -1
  86. package/lib/icons/material/sharp.js +0 -10
  87. package/lib/icons/material/two-tone.d.ts +0 -1
  88. package/lib/icons/material/two-tone.js +0 -10
  89. package/lib/index.d.ts +2 -2
  90. package/lib/index.js +2 -21
  91. package/lib/styles/button.d.ts +19 -7
  92. package/lib/styles/button.js +180 -77
  93. package/lib/styles/calendar-month.d.ts +4 -6
  94. package/lib/styles/calendar-month.js +57 -59
  95. package/lib/styles/calendar-navigation.d.ts +2 -6
  96. package/lib/styles/calendar-navigation.js +3 -28
  97. package/lib/styles/calendar.d.ts +1 -2
  98. package/lib/styles/calendar.js +1 -14
  99. package/lib/styles/checkbox.d.ts +3 -2
  100. package/lib/styles/checkbox.js +24 -68
  101. package/lib/styles/copy.d.ts +3 -2
  102. package/lib/styles/copy.js +25 -17
  103. package/lib/styles/custom-scrollbar.d.ts +1 -2
  104. package/lib/styles/custom-scrollbar.js +5 -20
  105. package/lib/styles/date-picker.d.ts +4 -6
  106. package/lib/styles/date-picker.js +80 -130
  107. package/lib/styles/file-upload.d.ts +1 -2
  108. package/lib/styles/file-upload.js +4 -19
  109. package/lib/styles/icon.d.ts +2 -6
  110. package/lib/styles/icon.js +7 -21
  111. package/lib/styles/input.d.ts +4 -7
  112. package/lib/styles/input.js +55 -160
  113. package/lib/styles/modal.d.ts +1 -2
  114. package/lib/styles/modal.js +21 -23
  115. package/lib/styles/option.d.ts +2 -6
  116. package/lib/styles/option.js +17 -63
  117. package/lib/styles/popup.d.ts +1 -2
  118. package/lib/styles/popup.js +26 -30
  119. package/lib/styles/radio.d.ts +3 -2
  120. package/lib/styles/radio.js +21 -32
  121. package/lib/styles/resize-observer.d.ts +1 -2
  122. package/lib/styles/resize-observer.js +0 -7
  123. package/lib/styles/scroll-container.d.ts +1 -2
  124. package/lib/styles/scroll-container.js +0 -19
  125. package/lib/styles/select-base.d.ts +8 -0
  126. package/lib/styles/{multiselect.js → select-base.js} +264 -127
  127. package/lib/styles/select.d.ts +3 -4
  128. package/lib/styles/select.js +103 -43
  129. package/lib/styles/step.d.ts +1 -2
  130. package/lib/styles/step.js +0 -4
  131. package/lib/styles/switch.d.ts +3 -2
  132. package/lib/styles/switch.js +20 -23
  133. package/lib/styles/tab.d.ts +1 -2
  134. package/lib/styles/tab.js +0 -5
  135. package/lib/styles/tabs.d.ts +3 -11
  136. package/lib/styles/tabs.js +77 -45
  137. package/lib/styles/tag.d.ts +1 -5
  138. package/lib/styles/tag.js +6 -32
  139. package/lib/styles/textarea.d.ts +1 -2
  140. package/lib/styles/textarea.js +7 -50
  141. package/lib/styles/tooltip.d.ts +4 -3
  142. package/lib/styles/tooltip.js +0 -125
  143. package/lib/styles/wizard.d.ts +5 -21
  144. package/lib/styles/wizard.js +23 -91
  145. package/lib/types/common.d.ts +1 -3
  146. package/lib/types/common.js +0 -10
  147. package/lib/utils/calendar-utils.d.ts +4 -21
  148. package/lib/utils/calendar-utils.js +4 -177
  149. package/lib/utils/custom-scrollbar.d.ts +6 -20
  150. package/lib/utils/custom-scrollbar.js +1 -45
  151. package/lib/utils/flavor-sheet.d.ts +0 -1
  152. package/lib/utils/flavor-sheet.js +0 -23
  153. package/lib/utils/icon-registry.d.ts +0 -2
  154. package/lib/utils/icon-registry.js +1 -107
  155. package/lib/utils/icons.d.ts +9 -0
  156. package/lib/utils/icons.js +1 -0
  157. package/lib/utils/loader-registry.d.ts +2 -3
  158. package/lib/utils/loader-registry.js +0 -32
  159. package/lib/utils/locale.d.ts +2 -23
  160. package/lib/utils/locale.js +0 -86
  161. package/lib/utils/mobile.d.ts +0 -1
  162. package/lib/utils/mobile.js +0 -17
  163. package/lib/utils/number-format.d.ts +6 -3
  164. package/lib/utils/number-format.js +11 -67
  165. package/lib/utils/positioning.d.ts +77 -3
  166. package/lib/utils/positioning.js +67 -58
  167. package/lib/utils/property-capture.d.ts +5 -27
  168. package/lib/utils/property-capture.js +0 -108
  169. package/lib/utils/property-manager.d.ts +0 -1
  170. package/lib/utils/property-manager.js +0 -70
  171. package/lib/utils/resize-observer.d.ts +0 -1
  172. package/lib/utils/resize-observer.js +0 -36
  173. package/lib/utils/scroll-lock.d.ts +4 -11
  174. package/lib/utils/scroll-lock.js +0 -107
  175. package/lib/utils/styles.d.ts +0 -1
  176. package/lib/utils/styles.js +0 -24
  177. package/lib/version.d.ts +1 -2
  178. package/lib/version.js +1 -11
  179. package/package.json +8 -5
  180. package/css/tyrell-brand.css +0 -1015
  181. package/dist/tyrell-brand.css +0 -1015
  182. package/lib/base/ty-component.d.ts.map +0 -1
  183. package/lib/base/ty-component.js.map +0 -1
  184. package/lib/components/button.d.ts.map +0 -1
  185. package/lib/components/button.js.map +0 -1
  186. package/lib/components/calendar-month.d.ts.map +0 -1
  187. package/lib/components/calendar-month.js.map +0 -1
  188. package/lib/components/calendar-navigation.d.ts.map +0 -1
  189. package/lib/components/calendar-navigation.js.map +0 -1
  190. package/lib/components/calendar.d.ts.map +0 -1
  191. package/lib/components/calendar.js.map +0 -1
  192. package/lib/components/checkbox.d.ts.map +0 -1
  193. package/lib/components/checkbox.js.map +0 -1
  194. package/lib/components/copy.d.ts.map +0 -1
  195. package/lib/components/copy.js.map +0 -1
  196. package/lib/components/date-picker.d.ts.map +0 -1
  197. package/lib/components/date-picker.js.map +0 -1
  198. package/lib/components/file-upload.d.ts.map +0 -1
  199. package/lib/components/file-upload.js.map +0 -1
  200. package/lib/components/icon.d.ts.map +0 -1
  201. package/lib/components/icon.js.map +0 -1
  202. package/lib/components/input.d.ts.map +0 -1
  203. package/lib/components/input.js.map +0 -1
  204. package/lib/components/modal.d.ts.map +0 -1
  205. package/lib/components/modal.js.map +0 -1
  206. package/lib/components/option.d.ts.map +0 -1
  207. package/lib/components/option.js.map +0 -1
  208. package/lib/components/popup.d.ts.map +0 -1
  209. package/lib/components/popup.js.map +0 -1
  210. package/lib/components/radio.d.ts.map +0 -1
  211. package/lib/components/radio.js.map +0 -1
  212. package/lib/components/resize-observer.d.ts.map +0 -1
  213. package/lib/components/resize-observer.js.map +0 -1
  214. package/lib/components/scroll-container.d.ts.map +0 -1
  215. package/lib/components/scroll-container.js.map +0 -1
  216. package/lib/components/select.d.ts.map +0 -1
  217. package/lib/components/select.js.map +0 -1
  218. package/lib/components/selected-tags.d.ts.map +0 -1
  219. package/lib/components/selected-tags.js.map +0 -1
  220. package/lib/components/step.d.ts.map +0 -1
  221. package/lib/components/step.js.map +0 -1
  222. package/lib/components/switch.d.ts.map +0 -1
  223. package/lib/components/switch.js.map +0 -1
  224. package/lib/components/tab.d.ts.map +0 -1
  225. package/lib/components/tab.js.map +0 -1
  226. package/lib/components/tabs.d.ts.map +0 -1
  227. package/lib/components/tabs.js.map +0 -1
  228. package/lib/components/tag.d.ts.map +0 -1
  229. package/lib/components/tag.js.map +0 -1
  230. package/lib/components/textarea.d.ts.map +0 -1
  231. package/lib/components/textarea.js.map +0 -1
  232. package/lib/components/tooltip.d.ts.map +0 -1
  233. package/lib/components/tooltip.js.map +0 -1
  234. package/lib/components/wizard.d.ts.map +0 -1
  235. package/lib/components/wizard.js.map +0 -1
  236. package/lib/icons/fontawesome/brands.d.ts.map +0 -1
  237. package/lib/icons/fontawesome/brands.js.map +0 -1
  238. package/lib/icons/fontawesome/regular.d.ts.map +0 -1
  239. package/lib/icons/fontawesome/regular.js.map +0 -1
  240. package/lib/icons/fontawesome/solid.d.ts.map +0 -1
  241. package/lib/icons/fontawesome/solid.js.map +0 -1
  242. package/lib/icons/heroicons/micro.d.ts.map +0 -1
  243. package/lib/icons/heroicons/micro.js.map +0 -1
  244. package/lib/icons/heroicons/mini.d.ts.map +0 -1
  245. package/lib/icons/heroicons/mini.js.map +0 -1
  246. package/lib/icons/heroicons/outline.d.ts.map +0 -1
  247. package/lib/icons/heroicons/outline.js.map +0 -1
  248. package/lib/icons/heroicons/solid.d.ts.map +0 -1
  249. package/lib/icons/heroicons/solid.js.map +0 -1
  250. package/lib/icons/lucide.d.ts.map +0 -1
  251. package/lib/icons/lucide.js.map +0 -1
  252. package/lib/icons/material/filled.d.ts.map +0 -1
  253. package/lib/icons/material/filled.js.map +0 -1
  254. package/lib/icons/material/outlined.d.ts.map +0 -1
  255. package/lib/icons/material/outlined.js.map +0 -1
  256. package/lib/icons/material/round.d.ts.map +0 -1
  257. package/lib/icons/material/round.js.map +0 -1
  258. package/lib/icons/material/sharp.d.ts.map +0 -1
  259. package/lib/icons/material/sharp.js.map +0 -1
  260. package/lib/icons/material/two-tone.d.ts.map +0 -1
  261. package/lib/icons/material/two-tone.js.map +0 -1
  262. package/lib/index.d.ts.map +0 -1
  263. package/lib/index.js.map +0 -1
  264. package/lib/styles/button.d.ts.map +0 -1
  265. package/lib/styles/button.js.map +0 -1
  266. package/lib/styles/calendar-month.d.ts.map +0 -1
  267. package/lib/styles/calendar-month.js.map +0 -1
  268. package/lib/styles/calendar-navigation.d.ts.map +0 -1
  269. package/lib/styles/calendar-navigation.js.map +0 -1
  270. package/lib/styles/calendar.d.ts.map +0 -1
  271. package/lib/styles/calendar.js.map +0 -1
  272. package/lib/styles/checkbox.d.ts.map +0 -1
  273. package/lib/styles/checkbox.js.map +0 -1
  274. package/lib/styles/copy.d.ts.map +0 -1
  275. package/lib/styles/copy.js.map +0 -1
  276. package/lib/styles/custom-scrollbar.d.ts.map +0 -1
  277. package/lib/styles/custom-scrollbar.js.map +0 -1
  278. package/lib/styles/date-picker.d.ts.map +0 -1
  279. package/lib/styles/date-picker.js.map +0 -1
  280. package/lib/styles/file-upload.d.ts.map +0 -1
  281. package/lib/styles/file-upload.js.map +0 -1
  282. package/lib/styles/icon.d.ts.map +0 -1
  283. package/lib/styles/icon.js.map +0 -1
  284. package/lib/styles/input.d.ts.map +0 -1
  285. package/lib/styles/input.js.map +0 -1
  286. package/lib/styles/modal.d.ts.map +0 -1
  287. package/lib/styles/modal.js.map +0 -1
  288. package/lib/styles/multiselect.d.ts +0 -6
  289. package/lib/styles/multiselect.d.ts.map +0 -1
  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.d.ts.map +0 -1
  302. package/lib/styles/select.js.map +0 -1
  303. package/lib/styles/step.d.ts.map +0 -1
  304. package/lib/styles/step.js.map +0 -1
  305. package/lib/styles/switch.d.ts.map +0 -1
  306. package/lib/styles/switch.js.map +0 -1
  307. package/lib/styles/tab.d.ts.map +0 -1
  308. package/lib/styles/tab.js.map +0 -1
  309. package/lib/styles/tabs.d.ts.map +0 -1
  310. package/lib/styles/tabs.js.map +0 -1
  311. package/lib/styles/tag.d.ts.map +0 -1
  312. package/lib/styles/tag.js.map +0 -1
  313. package/lib/styles/textarea.d.ts.map +0 -1
  314. package/lib/styles/textarea.js.map +0 -1
  315. package/lib/styles/tooltip.d.ts.map +0 -1
  316. package/lib/styles/tooltip.js.map +0 -1
  317. package/lib/styles/wizard.d.ts.map +0 -1
  318. package/lib/styles/wizard.js.map +0 -1
  319. package/lib/types/common.d.ts.map +0 -1
  320. package/lib/types/common.js.map +0 -1
  321. package/lib/utils/calendar-utils.d.ts.map +0 -1
  322. package/lib/utils/calendar-utils.js.map +0 -1
  323. package/lib/utils/custom-scrollbar.d.ts.map +0 -1
  324. package/lib/utils/custom-scrollbar.js.map +0 -1
  325. package/lib/utils/flavor-sheet.d.ts.map +0 -1
  326. package/lib/utils/flavor-sheet.js.map +0 -1
  327. package/lib/utils/icon-registry.d.ts.map +0 -1
  328. package/lib/utils/icon-registry.js.map +0 -1
  329. package/lib/utils/loader-registry.d.ts.map +0 -1
  330. package/lib/utils/loader-registry.js.map +0 -1
  331. package/lib/utils/locale.d.ts.map +0 -1
  332. package/lib/utils/locale.js.map +0 -1
  333. package/lib/utils/mobile.d.ts.map +0 -1
  334. package/lib/utils/mobile.js.map +0 -1
  335. package/lib/utils/number-format.d.ts.map +0 -1
  336. package/lib/utils/number-format.js.map +0 -1
  337. package/lib/utils/parse-boolean.d.ts +0 -39
  338. package/lib/utils/parse-boolean.d.ts.map +0 -1
  339. package/lib/utils/parse-boolean.js +0 -58
  340. package/lib/utils/parse-boolean.js.map +0 -1
  341. package/lib/utils/positioning.d.ts.map +0 -1
  342. package/lib/utils/positioning.js.map +0 -1
  343. package/lib/utils/property-capture.d.ts.map +0 -1
  344. package/lib/utils/property-capture.js.map +0 -1
  345. package/lib/utils/property-manager.d.ts.map +0 -1
  346. package/lib/utils/property-manager.js.map +0 -1
  347. package/lib/utils/resize-observer.d.ts.map +0 -1
  348. package/lib/utils/resize-observer.js.map +0 -1
  349. package/lib/utils/scroll-lock.d.ts.map +0 -1
  350. package/lib/utils/scroll-lock.js.map +0 -1
  351. package/lib/utils/styles.d.ts.map +0 -1
  352. package/lib/utils/styles.js.map +0 -1
  353. package/lib/version.d.ts.map +0 -1
  354. package/lib/version.js.map +0 -1
package/README.md CHANGED
@@ -36,6 +36,7 @@ import 'tyrell-components/input'
36
36
  <html>
37
37
  <head>
38
38
  <link rel="stylesheet" href="path/to/tyrell.css">
39
+ <link rel="stylesheet" href="path/to/tyrell-theme.css">
39
40
  </head>
40
41
  <body class="ty-canvas">
41
42
 
@@ -61,7 +62,7 @@ import 'tyrell-components/input'
61
62
 
62
63
  ## Available Components
63
64
 
64
- - **ty-button** - Button with multiple flavors (primary, secondary, success, danger, warning)
65
+ - **ty-button** - Button with multiple flavors (primary, success, danger, warning, neutral)
65
66
  - **ty-modal** - Modal dialog with backdrop, ESC key, focus trap
66
67
  - **ty-input** - Input field with validation, number formatting
67
68
  - **ty-dropdown** - Dropdown with positioning, keyboard navigation
package/css/tyrell-colors-static.css ADDED
@@ -0,0 +1,316 @@
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
+ }