@dryui/ui 0.2.2 → 0.3.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 (433) hide show
  1. package/dist/adjust/adjust.svelte +1 -1
  2. package/dist/aurora/aurora.svelte +58 -11
  3. package/dist/aurora/aurora.svelte.d.ts +1 -0
  4. package/dist/aurora/index.d.ts +2 -0
  5. package/dist/diagram/diagram.svelte +769 -0
  6. package/dist/diagram/diagram.svelte.d.ts +10 -0
  7. package/dist/diagram/edge-routing.d.ts +9 -0
  8. package/dist/diagram/edge-routing.js +281 -0
  9. package/dist/diagram/index.d.ts +9 -0
  10. package/dist/diagram/index.js +1 -0
  11. package/dist/diagram/layout.d.ts +2 -0
  12. package/dist/diagram/layout.js +985 -0
  13. package/dist/diagram/types.d.ts +196 -0
  14. package/dist/displacement/displacement.svelte +39 -3
  15. package/dist/drag-and-drop/context.svelte.d.ts +1 -0
  16. package/dist/drag-and-drop/drag-and-drop-group.svelte +37 -0
  17. package/dist/drag-and-drop/drag-and-drop-group.svelte.d.ts +8 -0
  18. package/dist/drag-and-drop/drag-and-drop-handle.svelte +2 -0
  19. package/dist/drag-and-drop/drag-and-drop-item.svelte +25 -6
  20. package/dist/drag-and-drop/drag-and-drop-root.svelte +624 -34
  21. package/dist/drag-and-drop/group-context.svelte.d.ts +13 -0
  22. package/dist/drag-and-drop/group-context.svelte.js +8 -0
  23. package/dist/drag-and-drop/index.d.ts +2 -0
  24. package/dist/drag-and-drop/index.js +3 -1
  25. package/dist/drawer/drawer-content.svelte +2 -1
  26. package/dist/drawer/drawer-footer.svelte +1 -1
  27. package/dist/gradient-mesh/gradient-mesh.svelte +42 -5
  28. package/dist/halftone/halftone.svelte +16 -36
  29. package/dist/index.d.ts +1 -4
  30. package/dist/index.js +1 -2
  31. package/dist/logo-mark/logo-mark.svelte +2 -2
  32. package/dist/noise/noise.svelte +2 -2
  33. package/dist/shader-canvas/presets.js +1 -1
  34. package/dist/shader-canvas/shader-canvas.svelte +4 -1
  35. package/dist/sidebar/sidebar-footer.svelte +5 -4
  36. package/dist/spotlight/spotlight.svelte +42 -4
  37. package/dist/themes/aurora.css +229 -0
  38. package/dist/themes/dark.css +134 -0
  39. package/dist/themes/default.css +76 -0
  40. package/dist/themes/midnight.css +142 -0
  41. package/dist/themes/terminal.css +175 -0
  42. package/package.json +22 -27
  43. package/skills/dryui/SKILL.md +1 -0
  44. package/dist/system-map/index.d.ts +0 -17
  45. package/dist/system-map/index.js +0 -1
  46. package/dist/system-map/system-map.svelte +0 -311
  47. package/dist/system-map/system-map.svelte.d.ts +0 -25
  48. package/dist/system-map/types.d.ts +0 -99
  49. package/dist/thumbnail/_layout-content.svelte +0 -89
  50. package/dist/thumbnail/_layout-content.svelte.d.ts +0 -9
  51. package/dist/thumbnail/_layout-footer.svelte +0 -54
  52. package/dist/thumbnail/_layout-footer.svelte.d.ts +0 -9
  53. package/dist/thumbnail/_layout-header.svelte +0 -76
  54. package/dist/thumbnail/_layout-header.svelte.d.ts +0 -9
  55. package/dist/thumbnail/_layout-sidebar.svelte +0 -75
  56. package/dist/thumbnail/_layout-sidebar.svelte.d.ts +0 -9
  57. package/dist/thumbnail/accordion.svelte +0 -144
  58. package/dist/thumbnail/accordion.svelte.d.ts +0 -7
  59. package/dist/thumbnail/add-on-selector.svelte +0 -213
  60. package/dist/thumbnail/add-on-selector.svelte.d.ts +0 -7
  61. package/dist/thumbnail/affix-group.svelte +0 -55
  62. package/dist/thumbnail/affix-group.svelte.d.ts +0 -7
  63. package/dist/thumbnail/alert-dialog.svelte +0 -100
  64. package/dist/thumbnail/alert-dialog.svelte.d.ts +0 -7
  65. package/dist/thumbnail/alert.svelte +0 -79
  66. package/dist/thumbnail/alert.svelte.d.ts +0 -7
  67. package/dist/thumbnail/alpha-slider.svelte +0 -55
  68. package/dist/thumbnail/alpha-slider.svelte.d.ts +0 -7
  69. package/dist/thumbnail/amenity-grid.svelte +0 -236
  70. package/dist/thumbnail/amenity-grid.svelte.d.ts +0 -7
  71. package/dist/thumbnail/app-frame.svelte.d.ts +0 -7
  72. package/dist/thumbnail/apply-size.d.ts +0 -3
  73. package/dist/thumbnail/apply-size.js +0 -14
  74. package/dist/thumbnail/aspect-ratio.svelte +0 -64
  75. package/dist/thumbnail/aspect-ratio.svelte.d.ts +0 -7
  76. package/dist/thumbnail/aurora.svelte +0 -88
  77. package/dist/thumbnail/aurora.svelte.d.ts +0 -7
  78. package/dist/thumbnail/avatar-group.svelte.d.ts +0 -7
  79. package/dist/thumbnail/avatar.svelte +0 -60
  80. package/dist/thumbnail/avatar.svelte.d.ts +0 -7
  81. package/dist/thumbnail/backdrop.svelte +0 -73
  82. package/dist/thumbnail/backdrop.svelte.d.ts +0 -7
  83. package/dist/thumbnail/badge.svelte +0 -100
  84. package/dist/thumbnail/badge.svelte.d.ts +0 -7
  85. package/dist/thumbnail/booking-confirmation.svelte +0 -109
  86. package/dist/thumbnail/booking-confirmation.svelte.d.ts +0 -7
  87. package/dist/thumbnail/breadcrumb.svelte +0 -80
  88. package/dist/thumbnail/breadcrumb.svelte.d.ts +0 -7
  89. package/dist/thumbnail/button-group.svelte +0 -76
  90. package/dist/thumbnail/button-group.svelte.d.ts +0 -7
  91. package/dist/thumbnail/button.svelte +0 -62
  92. package/dist/thumbnail/button.svelte.d.ts +0 -7
  93. package/dist/thumbnail/calendar.svelte +0 -86
  94. package/dist/thumbnail/calendar.svelte.d.ts +0 -7
  95. package/dist/thumbnail/card.svelte +0 -113
  96. package/dist/thumbnail/card.svelte.d.ts +0 -7
  97. package/dist/thumbnail/carousel.svelte +0 -111
  98. package/dist/thumbnail/carousel.svelte.d.ts +0 -7
  99. package/dist/thumbnail/chart.svelte +0 -93
  100. package/dist/thumbnail/chart.svelte.d.ts +0 -7
  101. package/dist/thumbnail/chat-message.svelte.d.ts +0 -7
  102. package/dist/thumbnail/chat-thread.svelte +0 -140
  103. package/dist/thumbnail/chat-thread.svelte.d.ts +0 -7
  104. package/dist/thumbnail/checkbox.svelte +0 -71
  105. package/dist/thumbnail/checkbox.svelte.d.ts +0 -7
  106. package/dist/thumbnail/chip-group.svelte +0 -79
  107. package/dist/thumbnail/chip-group.svelte.d.ts +0 -7
  108. package/dist/thumbnail/chip.svelte +0 -76
  109. package/dist/thumbnail/chip.svelte.d.ts +0 -7
  110. package/dist/thumbnail/chromatic-shift.svelte +0 -55
  111. package/dist/thumbnail/chromatic-shift.svelte.d.ts +0 -7
  112. package/dist/thumbnail/clipboard.svelte +0 -68
  113. package/dist/thumbnail/clipboard.svelte.d.ts +0 -7
  114. package/dist/thumbnail/code-block.svelte +0 -125
  115. package/dist/thumbnail/code-block.svelte.d.ts +0 -7
  116. package/dist/thumbnail/collapsible.svelte +0 -101
  117. package/dist/thumbnail/collapsible.svelte.d.ts +0 -7
  118. package/dist/thumbnail/color-picker.svelte +0 -108
  119. package/dist/thumbnail/color-picker.svelte.d.ts +0 -7
  120. package/dist/thumbnail/combobox.svelte +0 -122
  121. package/dist/thumbnail/combobox.svelte.d.ts +0 -7
  122. package/dist/thumbnail/command-palette.svelte +0 -134
  123. package/dist/thumbnail/command-palette.svelte.d.ts +0 -7
  124. package/dist/thumbnail/commerce-header.svelte +0 -55
  125. package/dist/thumbnail/commerce-header.svelte.d.ts +0 -7
  126. package/dist/thumbnail/comparison-table.svelte +0 -193
  127. package/dist/thumbnail/comparison-table.svelte.d.ts +0 -7
  128. package/dist/thumbnail/container.svelte +0 -119
  129. package/dist/thumbnail/container.svelte.d.ts +0 -7
  130. package/dist/thumbnail/context-menu.svelte +0 -108
  131. package/dist/thumbnail/context-menu.svelte.d.ts +0 -7
  132. package/dist/thumbnail/country-select.svelte +0 -111
  133. package/dist/thumbnail/country-select.svelte.d.ts +0 -7
  134. package/dist/thumbnail/currency-selector.svelte +0 -111
  135. package/dist/thumbnail/currency-selector.svelte.d.ts +0 -7
  136. package/dist/thumbnail/data-grid.svelte +0 -230
  137. package/dist/thumbnail/data-grid.svelte.d.ts +0 -7
  138. package/dist/thumbnail/date-field.svelte +0 -132
  139. package/dist/thumbnail/date-field.svelte.d.ts +0 -7
  140. package/dist/thumbnail/date-picker.svelte +0 -126
  141. package/dist/thumbnail/date-picker.svelte.d.ts +0 -7
  142. package/dist/thumbnail/date-range-picker.svelte +0 -100
  143. package/dist/thumbnail/date-range-picker.svelte.d.ts +0 -7
  144. package/dist/thumbnail/date-time-input.svelte +0 -182
  145. package/dist/thumbnail/date-time-input.svelte.d.ts +0 -7
  146. package/dist/thumbnail/description-list.svelte +0 -142
  147. package/dist/thumbnail/description-list.svelte.d.ts +0 -7
  148. package/dist/thumbnail/dialog.svelte +0 -136
  149. package/dist/thumbnail/dialog.svelte.d.ts +0 -7
  150. package/dist/thumbnail/displacement.svelte +0 -55
  151. package/dist/thumbnail/displacement.svelte.d.ts +0 -7
  152. package/dist/thumbnail/drag-and-drop.svelte +0 -139
  153. package/dist/thumbnail/drag-and-drop.svelte.d.ts +0 -7
  154. package/dist/thumbnail/drawer.svelte +0 -112
  155. package/dist/thumbnail/drawer.svelte.d.ts +0 -7
  156. package/dist/thumbnail/drop-zone.svelte +0 -55
  157. package/dist/thumbnail/drop-zone.svelte.d.ts +0 -7
  158. package/dist/thumbnail/dropdown-menu.svelte +0 -128
  159. package/dist/thumbnail/dropdown-menu.svelte.d.ts +0 -7
  160. package/dist/thumbnail/empty-state.svelte.d.ts +0 -7
  161. package/dist/thumbnail/fare-class-picker.svelte +0 -225
  162. package/dist/thumbnail/fare-class-picker.svelte.d.ts +0 -7
  163. package/dist/thumbnail/feature-split-section.svelte.d.ts +0 -7
  164. package/dist/thumbnail/field.svelte +0 -82
  165. package/dist/thumbnail/field.svelte.d.ts +0 -7
  166. package/dist/thumbnail/fieldset.svelte +0 -123
  167. package/dist/thumbnail/fieldset.svelte.d.ts +0 -7
  168. package/dist/thumbnail/file-select.svelte +0 -90
  169. package/dist/thumbnail/file-select.svelte.d.ts +0 -7
  170. package/dist/thumbnail/file-upload.svelte +0 -84
  171. package/dist/thumbnail/file-upload.svelte.d.ts +0 -7
  172. package/dist/thumbnail/filter-sidebar.svelte +0 -201
  173. package/dist/thumbnail/filter-sidebar.svelte.d.ts +0 -7
  174. package/dist/thumbnail/flexible-dates-grid.svelte +0 -210
  175. package/dist/thumbnail/flexible-dates-grid.svelte.d.ts +0 -7
  176. package/dist/thumbnail/flight-timeline.svelte +0 -155
  177. package/dist/thumbnail/flight-timeline.svelte.d.ts +0 -7
  178. package/dist/thumbnail/flip-card.svelte +0 -128
  179. package/dist/thumbnail/flip-card.svelte.d.ts +0 -7
  180. package/dist/thumbnail/float-button.svelte +0 -63
  181. package/dist/thumbnail/float-button.svelte.d.ts +0 -7
  182. package/dist/thumbnail/focus-trap.svelte +0 -110
  183. package/dist/thumbnail/focus-trap.svelte.d.ts +0 -7
  184. package/dist/thumbnail/format-bytes.svelte +0 -51
  185. package/dist/thumbnail/format-bytes.svelte.d.ts +0 -7
  186. package/dist/thumbnail/format-date.svelte +0 -51
  187. package/dist/thumbnail/format-date.svelte.d.ts +0 -7
  188. package/dist/thumbnail/format-number.svelte +0 -51
  189. package/dist/thumbnail/format-number.svelte.d.ts +0 -7
  190. package/dist/thumbnail/gauge.svelte +0 -90
  191. package/dist/thumbnail/gauge.svelte.d.ts +0 -7
  192. package/dist/thumbnail/glass-surface.svelte.d.ts +0 -7
  193. package/dist/thumbnail/glow.svelte +0 -55
  194. package/dist/thumbnail/glow.svelte.d.ts +0 -7
  195. package/dist/thumbnail/gradient-mesh.svelte +0 -55
  196. package/dist/thumbnail/gradient-mesh.svelte.d.ts +0 -7
  197. package/dist/thumbnail/guest-room-selector.svelte +0 -214
  198. package/dist/thumbnail/guest-room-selector.svelte.d.ts +0 -7
  199. package/dist/thumbnail/halftone.svelte +0 -55
  200. package/dist/thumbnail/halftone.svelte.d.ts +0 -7
  201. package/dist/thumbnail/heading.svelte +0 -91
  202. package/dist/thumbnail/heading.svelte.d.ts +0 -7
  203. package/dist/thumbnail/hotel-gallery.svelte +0 -117
  204. package/dist/thumbnail/hotel-gallery.svelte.d.ts +0 -7
  205. package/dist/thumbnail/hotkey.svelte +0 -108
  206. package/dist/thumbnail/hotkey.svelte.d.ts +0 -7
  207. package/dist/thumbnail/hover-card.svelte +0 -117
  208. package/dist/thumbnail/hover-card.svelte.d.ts +0 -7
  209. package/dist/thumbnail/icon.svelte +0 -55
  210. package/dist/thumbnail/icon.svelte.d.ts +0 -7
  211. package/dist/thumbnail/image-comparison.svelte +0 -96
  212. package/dist/thumbnail/image-comparison.svelte.d.ts +0 -7
  213. package/dist/thumbnail/image.svelte +0 -74
  214. package/dist/thumbnail/image.svelte.d.ts +0 -7
  215. package/dist/thumbnail/index.d.ts +0 -12
  216. package/dist/thumbnail/index.js +0 -359
  217. package/dist/thumbnail/infinite-scroll.svelte +0 -129
  218. package/dist/thumbnail/infinite-scroll.svelte.d.ts +0 -7
  219. package/dist/thumbnail/input-group.svelte +0 -55
  220. package/dist/thumbnail/input-group.svelte.d.ts +0 -7
  221. package/dist/thumbnail/input.svelte +0 -74
  222. package/dist/thumbnail/input.svelte.d.ts +0 -7
  223. package/dist/thumbnail/itinerary-timeline.svelte +0 -143
  224. package/dist/thumbnail/itinerary-timeline.svelte.d.ts +0 -7
  225. package/dist/thumbnail/kbd.svelte +0 -112
  226. package/dist/thumbnail/kbd.svelte.d.ts +0 -7
  227. package/dist/thumbnail/label.svelte +0 -54
  228. package/dist/thumbnail/label.svelte.d.ts +0 -7
  229. package/dist/thumbnail/layout-header-content-footer.svelte +0 -64
  230. package/dist/thumbnail/layout-header-content-footer.svelte.d.ts +0 -7
  231. package/dist/thumbnail/layout-header-sidebar-main.svelte +0 -64
  232. package/dist/thumbnail/layout-header-sidebar-main.svelte.d.ts +0 -7
  233. package/dist/thumbnail/layout-sidebar-main.svelte +0 -57
  234. package/dist/thumbnail/layout-sidebar-main.svelte.d.ts +0 -7
  235. package/dist/thumbnail/link-preview.svelte +0 -141
  236. package/dist/thumbnail/link-preview.svelte.d.ts +0 -7
  237. package/dist/thumbnail/link.svelte +0 -70
  238. package/dist/thumbnail/link.svelte.d.ts +0 -7
  239. package/dist/thumbnail/list.svelte +0 -86
  240. package/dist/thumbnail/list.svelte.d.ts +0 -7
  241. package/dist/thumbnail/listbox.svelte +0 -102
  242. package/dist/thumbnail/listbox.svelte.d.ts +0 -7
  243. package/dist/thumbnail/location-autocomplete.svelte +0 -219
  244. package/dist/thumbnail/location-autocomplete.svelte.d.ts +0 -7
  245. package/dist/thumbnail/logo-cloud.svelte.d.ts +0 -7
  246. package/dist/thumbnail/loyalty-points-display.svelte +0 -147
  247. package/dist/thumbnail/loyalty-points-display.svelte.d.ts +0 -7
  248. package/dist/thumbnail/map-list-toggle.svelte +0 -140
  249. package/dist/thumbnail/map-list-toggle.svelte.d.ts +0 -7
  250. package/dist/thumbnail/map.svelte +0 -112
  251. package/dist/thumbnail/map.svelte.d.ts +0 -7
  252. package/dist/thumbnail/markdown-renderer.svelte +0 -113
  253. package/dist/thumbnail/markdown-renderer.svelte.d.ts +0 -7
  254. package/dist/thumbnail/marquee.svelte +0 -114
  255. package/dist/thumbnail/marquee.svelte.d.ts +0 -7
  256. package/dist/thumbnail/mask-reveal.svelte +0 -55
  257. package/dist/thumbnail/mask-reveal.svelte.d.ts +0 -7
  258. package/dist/thumbnail/mega-menu.svelte +0 -176
  259. package/dist/thumbnail/mega-menu.svelte.d.ts +0 -7
  260. package/dist/thumbnail/menubar.svelte +0 -99
  261. package/dist/thumbnail/menubar.svelte.d.ts +0 -7
  262. package/dist/thumbnail/multi-city-search-form.svelte +0 -241
  263. package/dist/thumbnail/multi-city-search-form.svelte.d.ts +0 -7
  264. package/dist/thumbnail/multi-select-combobox.svelte +0 -142
  265. package/dist/thumbnail/multi-select-combobox.svelte.d.ts +0 -7
  266. package/dist/thumbnail/navigation-menu.svelte +0 -102
  267. package/dist/thumbnail/navigation-menu.svelte.d.ts +0 -7
  268. package/dist/thumbnail/noise.svelte +0 -72
  269. package/dist/thumbnail/noise.svelte.d.ts +0 -7
  270. package/dist/thumbnail/notification-center.svelte +0 -152
  271. package/dist/thumbnail/notification-center.svelte.d.ts +0 -7
  272. package/dist/thumbnail/number-input.svelte +0 -113
  273. package/dist/thumbnail/number-input.svelte.d.ts +0 -7
  274. package/dist/thumbnail/option-swatch-group.svelte +0 -55
  275. package/dist/thumbnail/option-swatch-group.svelte.d.ts +0 -7
  276. package/dist/thumbnail/page-header.svelte.d.ts +0 -7
  277. package/dist/thumbnail/pagination.svelte +0 -121
  278. package/dist/thumbnail/pagination.svelte.d.ts +0 -7
  279. package/dist/thumbnail/passenger-class-selector.svelte +0 -142
  280. package/dist/thumbnail/passenger-class-selector.svelte.d.ts +0 -7
  281. package/dist/thumbnail/payment-card-input.svelte +0 -172
  282. package/dist/thumbnail/payment-card-input.svelte.d.ts +0 -7
  283. package/dist/thumbnail/phone-input.svelte +0 -103
  284. package/dist/thumbnail/phone-input.svelte.d.ts +0 -7
  285. package/dist/thumbnail/pin-input.svelte +0 -72
  286. package/dist/thumbnail/pin-input.svelte.d.ts +0 -7
  287. package/dist/thumbnail/popover.svelte +0 -122
  288. package/dist/thumbnail/popover.svelte.d.ts +0 -7
  289. package/dist/thumbnail/portal.svelte +0 -115
  290. package/dist/thumbnail/portal.svelte.d.ts +0 -7
  291. package/dist/thumbnail/price-calendar.svelte +0 -366
  292. package/dist/thumbnail/price-calendar.svelte.d.ts +0 -7
  293. package/dist/thumbnail/price-summary-panel.svelte +0 -165
  294. package/dist/thumbnail/price-summary-panel.svelte.d.ts +0 -7
  295. package/dist/thumbnail/progress-ring.svelte +0 -63
  296. package/dist/thumbnail/progress-ring.svelte.d.ts +0 -7
  297. package/dist/thumbnail/progress.svelte +0 -66
  298. package/dist/thumbnail/progress.svelte.d.ts +0 -7
  299. package/dist/thumbnail/promo-code-input.svelte +0 -111
  300. package/dist/thumbnail/promo-code-input.svelte.d.ts +0 -7
  301. package/dist/thumbnail/promo-mosaic.svelte +0 -55
  302. package/dist/thumbnail/promo-mosaic.svelte.d.ts +0 -7
  303. package/dist/thumbnail/prompt-input.svelte +0 -91
  304. package/dist/thumbnail/prompt-input.svelte.d.ts +0 -7
  305. package/dist/thumbnail/qr-code.svelte +0 -217
  306. package/dist/thumbnail/qr-code.svelte.d.ts +0 -7
  307. package/dist/thumbnail/radio-group.svelte +0 -97
  308. package/dist/thumbnail/radio-group.svelte.d.ts +0 -7
  309. package/dist/thumbnail/range-calendar.svelte +0 -92
  310. package/dist/thumbnail/range-calendar.svelte.d.ts +0 -7
  311. package/dist/thumbnail/rating.svelte +0 -61
  312. package/dist/thumbnail/rating.svelte.d.ts +0 -7
  313. package/dist/thumbnail/recent-searches.svelte +0 -197
  314. package/dist/thumbnail/recent-searches.svelte.d.ts +0 -7
  315. package/dist/thumbnail/relative-time.svelte +0 -51
  316. package/dist/thumbnail/relative-time.svelte.d.ts +0 -7
  317. package/dist/thumbnail/result-card-car.svelte +0 -149
  318. package/dist/thumbnail/result-card-car.svelte.d.ts +0 -7
  319. package/dist/thumbnail/result-card-flight.svelte +0 -170
  320. package/dist/thumbnail/result-card-flight.svelte.d.ts +0 -7
  321. package/dist/thumbnail/result-card-hotel.svelte +0 -174
  322. package/dist/thumbnail/result-card-hotel.svelte.d.ts +0 -7
  323. package/dist/thumbnail/reveal.svelte +0 -109
  324. package/dist/thumbnail/reveal.svelte.d.ts +0 -7
  325. package/dist/thumbnail/review-card.svelte +0 -153
  326. package/dist/thumbnail/review-card.svelte.d.ts +0 -7
  327. package/dist/thumbnail/rich-text-editor.svelte +0 -134
  328. package/dist/thumbnail/rich-text-editor.svelte.d.ts +0 -7
  329. package/dist/thumbnail/room-type-picker.svelte +0 -212
  330. package/dist/thumbnail/room-type-picker.svelte.d.ts +0 -7
  331. package/dist/thumbnail/root.svelte +0 -52
  332. package/dist/thumbnail/root.svelte.d.ts +0 -10
  333. package/dist/thumbnail/route-map.svelte +0 -132
  334. package/dist/thumbnail/route-map.svelte.d.ts +0 -7
  335. package/dist/thumbnail/scroll-area.svelte +0 -124
  336. package/dist/thumbnail/scroll-area.svelte.d.ts +0 -7
  337. package/dist/thumbnail/scroll-to-top.svelte +0 -60
  338. package/dist/thumbnail/scroll-to-top.svelte.d.ts +0 -7
  339. package/dist/thumbnail/search-form-tabs.svelte +0 -192
  340. package/dist/thumbnail/search-form-tabs.svelte.d.ts +0 -7
  341. package/dist/thumbnail/seat-map.svelte +0 -358
  342. package/dist/thumbnail/seat-map.svelte.d.ts +0 -7
  343. package/dist/thumbnail/segmented-control.svelte +0 -93
  344. package/dist/thumbnail/segmented-control.svelte.d.ts +0 -7
  345. package/dist/thumbnail/select.svelte +0 -82
  346. package/dist/thumbnail/select.svelte.d.ts +0 -7
  347. package/dist/thumbnail/selectable-tile-group.svelte +0 -55
  348. package/dist/thumbnail/selectable-tile-group.svelte.d.ts +0 -7
  349. package/dist/thumbnail/separator.svelte +0 -94
  350. package/dist/thumbnail/separator.svelte.d.ts +0 -7
  351. package/dist/thumbnail/shader-canvas.svelte +0 -55
  352. package/dist/thumbnail/shader-canvas.svelte.d.ts +0 -7
  353. package/dist/thumbnail/sidebar.svelte +0 -109
  354. package/dist/thumbnail/sidebar.svelte.d.ts +0 -7
  355. package/dist/thumbnail/skeleton.svelte +0 -94
  356. package/dist/thumbnail/skeleton.svelte.d.ts +0 -7
  357. package/dist/thumbnail/slider.svelte +0 -71
  358. package/dist/thumbnail/slider.svelte.d.ts +0 -7
  359. package/dist/thumbnail/sort-bar.svelte +0 -156
  360. package/dist/thumbnail/sort-bar.svelte.d.ts +0 -7
  361. package/dist/thumbnail/spacer.svelte +0 -95
  362. package/dist/thumbnail/spacer.svelte.d.ts +0 -7
  363. package/dist/thumbnail/sparkline.svelte +0 -59
  364. package/dist/thumbnail/sparkline.svelte.d.ts +0 -7
  365. package/dist/thumbnail/spinner.svelte +0 -63
  366. package/dist/thumbnail/spinner.svelte.d.ts +0 -7
  367. package/dist/thumbnail/splitter.svelte +0 -79
  368. package/dist/thumbnail/splitter.svelte.d.ts +0 -7
  369. package/dist/thumbnail/spotlight.svelte +0 -90
  370. package/dist/thumbnail/spotlight.svelte.d.ts +0 -7
  371. package/dist/thumbnail/star-rating.svelte +0 -106
  372. package/dist/thumbnail/star-rating.svelte.d.ts +0 -7
  373. package/dist/thumbnail/stat-card.svelte.d.ts +0 -7
  374. package/dist/thumbnail/stepper.svelte +0 -94
  375. package/dist/thumbnail/stepper.svelte.d.ts +0 -7
  376. package/dist/thumbnail/svg.svelte +0 -55
  377. package/dist/thumbnail/svg.svelte.d.ts +0 -8
  378. package/dist/thumbnail/swatch-strip.svelte.d.ts +0 -7
  379. package/dist/thumbnail/switch.svelte.d.ts +0 -7
  380. package/dist/thumbnail/system-map.svelte +0 -154
  381. package/dist/thumbnail/system-map.svelte.d.ts +0 -7
  382. package/dist/thumbnail/table-of-contents.svelte +0 -101
  383. package/dist/thumbnail/table-of-contents.svelte.d.ts +0 -7
  384. package/dist/thumbnail/table.svelte +0 -214
  385. package/dist/thumbnail/table.svelte.d.ts +0 -7
  386. package/dist/thumbnail/tabs.svelte +0 -133
  387. package/dist/thumbnail/tabs.svelte.d.ts +0 -7
  388. package/dist/thumbnail/tag.svelte +0 -95
  389. package/dist/thumbnail/tag.svelte.d.ts +0 -7
  390. package/dist/thumbnail/tags-input.svelte +0 -142
  391. package/dist/thumbnail/tags-input.svelte.d.ts +0 -7
  392. package/dist/thumbnail/text.svelte +0 -72
  393. package/dist/thumbnail/text.svelte.d.ts +0 -7
  394. package/dist/thumbnail/textarea.svelte +0 -111
  395. package/dist/thumbnail/textarea.svelte.d.ts +0 -7
  396. package/dist/thumbnail/time-input.svelte +0 -94
  397. package/dist/thumbnail/time-input.svelte.d.ts +0 -7
  398. package/dist/thumbnail/timeline.svelte +0 -123
  399. package/dist/thumbnail/timeline.svelte.d.ts +0 -7
  400. package/dist/thumbnail/toast.svelte +0 -105
  401. package/dist/thumbnail/toast.svelte.d.ts +0 -7
  402. package/dist/thumbnail/toggle-group.svelte +0 -76
  403. package/dist/thumbnail/toggle-group.svelte.d.ts +0 -7
  404. package/dist/thumbnail/toggle.svelte +0 -46
  405. package/dist/thumbnail/toggle.svelte.d.ts +0 -7
  406. package/dist/thumbnail/token-preview.svelte.d.ts +0 -7
  407. package/dist/thumbnail/toolbar.svelte +0 -109
  408. package/dist/thumbnail/toolbar.svelte.d.ts +0 -7
  409. package/dist/thumbnail/tooltip.svelte +0 -85
  410. package/dist/thumbnail/tooltip.svelte.d.ts +0 -7
  411. package/dist/thumbnail/tour.svelte +0 -149
  412. package/dist/thumbnail/tour.svelte.d.ts +0 -7
  413. package/dist/thumbnail/transfer.svelte +0 -168
  414. package/dist/thumbnail/transfer.svelte.d.ts +0 -7
  415. package/dist/thumbnail/tree.svelte +0 -215
  416. package/dist/thumbnail/tree.svelte.d.ts +0 -7
  417. package/dist/thumbnail/trip-card.svelte +0 -137
  418. package/dist/thumbnail/trip-card.svelte.d.ts +0 -7
  419. package/dist/thumbnail/trust-badges.svelte +0 -207
  420. package/dist/thumbnail/trust-badges.svelte.d.ts +0 -7
  421. package/dist/thumbnail/typing-indicator.svelte +0 -65
  422. package/dist/thumbnail/typing-indicator.svelte.d.ts +0 -7
  423. package/dist/thumbnail/typography.svelte +0 -80
  424. package/dist/thumbnail/typography.svelte.d.ts +0 -7
  425. package/dist/thumbnail/user.svelte.d.ts +0 -7
  426. package/dist/thumbnail/video-embed.svelte +0 -87
  427. package/dist/thumbnail/video-embed.svelte.d.ts +0 -7
  428. package/dist/thumbnail/virtual-list.svelte +0 -178
  429. package/dist/thumbnail/virtual-list.svelte.d.ts +0 -7
  430. package/dist/thumbnail/visually-hidden.svelte +0 -106
  431. package/dist/thumbnail/visually-hidden.svelte.d.ts +0 -7
  432. package/dist/thumbnail/wave-divider.svelte.d.ts +0 -7
  433. /package/dist/{system-map → diagram}/types.js +0 -0
package/dist/themes/aurora.css ADDED
@@ -0,0 +1,229 @@
1
+ /*
2
+ * Aurora — Warm Organic
3
+ *
4
+ * Inspired by: gradient meshes, soft organic blobs, painterly warmth,
5
+ * Conduit brand energy, Stencil sunset washes, the thinking orb.
6
+ *
7
+ * Coral-orange accent, warm gradients, soft glass, serif display font.
8
+ * Use with: <html class="theme-aurora"> or <html data-theme="aurora">
9
+ */
10
+
11
+ [data-theme='aurora'],
12
+ .theme-aurora {
13
+ /* ─── Brand — warm coral instead of cold blue ─────────────────── */
14
+ --dry-color-brand: hsl(15, 85%, 55%);
15
+ --dry-color-text-brand: hsl(15, 80%, 42%);
16
+ --dry-color-fill-brand: hsl(15, 85%, 55%);
17
+ --dry-color-fill-brand-hover: hsl(15, 85%, 47%);
18
+ --dry-color-fill-brand-active: hsl(15, 85%, 41%);
19
+ --dry-color-fill-brand-weak: hsla(15, 85%, 55%, 0.07);
20
+ --dry-color-stroke-brand: hsla(15, 85%, 55%, 0.5);
21
+ --dry-color-stroke-brand-strong: hsla(15, 85%, 55%, 0.8);
22
+ --dry-color-stroke-brand-weak: hsla(15, 85%, 55%, 0.2);
23
+ --dry-color-on-brand: #ffffff;
24
+ --dry-color-focus-ring: hsla(15, 85%, 55%, 0.4);
25
+
26
+ /* ─── Accent — golden amber ───────────────────────────────────── */
27
+ --dry-color-accent: hsl(38, 92%, 55%);
28
+ --dry-color-text-accent: hsl(38, 80%, 35%);
29
+ --dry-color-fill-accent: hsl(38, 92%, 55%);
30
+ --dry-color-fill-accent-hover: hsl(38, 92%, 47%);
31
+ --dry-color-fill-accent-active: hsl(38, 92%, 41%);
32
+ --dry-color-fill-accent-weak: hsla(38, 92%, 55%, 0.08);
33
+ --dry-color-stroke-accent: hsla(38, 92%, 55%, 0.5);
34
+ --dry-color-stroke-accent-strong: hsla(38, 92%, 55%, 0.8);
35
+ --dry-color-stroke-accent-weak: hsla(38, 92%, 55%, 0.2);
36
+ --dry-color-icon-accent: hsla(38, 92%, 55%, 0.8);
37
+ --dry-color-on-accent: #1a1410;
38
+
39
+ /* ─── Backgrounds — warm cream tint ───────────────────────────── */
40
+ --dry-color-bg-base: hsl(30, 25%, 98%);
41
+ --dry-color-bg-raised: hsl(30, 20%, 95%);
42
+ --dry-color-bg-overlay: hsl(30, 15%, 92%);
43
+ --dry-color-bg-elevated: hsl(30, 12%, 89%);
44
+ --dry-color-bg-floating: hsl(30, 30%, 99%);
45
+ --dry-color-bg-sunken: hsl(30, 18%, 94%);
46
+
47
+ /* ─── Neutrals — warm-shifted ─────────────────────────────────── */
48
+ --dry-color-text-strong: hsla(20, 40%, 10%, 0.9);
49
+ --dry-color-text-weak: hsla(20, 30%, 15%, 0.6);
50
+ --dry-color-icon: hsla(20, 30%, 20%, 0.65);
51
+ --dry-color-stroke-strong: hsla(20, 25%, 20%, 0.35);
52
+ --dry-color-stroke-weak: hsla(20, 25%, 25%, 0.1);
53
+ --dry-color-fill: hsla(20, 30%, 30%, 0.04);
54
+ --dry-color-fill-hover: hsla(20, 30%, 30%, 0.06);
55
+ --dry-color-fill-active: hsla(20, 30%, 30%, 0.12);
56
+
57
+ /* ─── Shadows — warm ink ──────────────────────────────────────── */
58
+ --dry-shadow-raised: 0 1px 3px hsla(20, 30%, 20%, 0.06), 0 1px 2px hsla(20, 30%, 20%, 0.04);
59
+ --dry-shadow-overlay: 0 8px 24px hsla(20, 30%, 20%, 0.1), 0 2px 8px hsla(20, 30%, 20%, 0.06);
60
+ --dry-shadow-brand: 0 4px 14px hsla(15, 85%, 55%, 0.2), 0 2px 6px hsla(15, 85%, 55%, 0.12);
61
+ --dry-shadow-accent: 0 4px 14px hsla(38, 92%, 55%, 0.2), 0 2px 6px hsla(38, 92%, 55%, 0.12);
62
+
63
+ /* ─── Glass — warm frosted ────────────────────────────────────── */
64
+ --dry-glass-tint: hsla(30, 25%, 98%, 0.8);
65
+ --dry-glass-opacity: 78%;
66
+ --dry-glass-saturation: 160%;
67
+ --dry-glass-border: hsla(20, 20%, 50%, 0.08);
68
+ --dry-glass-border-strong: hsla(20, 20%, 50%, 0.15);
69
+
70
+ /* ─── Glow — warm halos ───────────────────────────────────────── */
71
+ --dry-glow-color: var(--dry-color-fill-brand);
72
+ --dry-glow-ring: 0 0 0 1px hsla(15, 85%, 55%, 0.3), 0 0 16px 3px hsla(15, 85%, 55%, 0.15);
73
+ --dry-glow-ring-accent: 0 0 0 1px hsla(38, 92%, 55%, 0.3), 0 0 16px 3px hsla(38, 92%, 55%, 0.15);
74
+ --dry-glow-ambient: hsla(15, 85%, 55%, 0.05);
75
+ --dry-glow-ambient-accent: hsla(38, 92%, 55%, 0.05);
76
+
77
+ /* ─── Gradient palette — warm organic ─────────────────────────── */
78
+ --dry-gradient-warm: linear-gradient(
79
+ 135deg,
80
+ hsl(15, 85%, 65%) 0%,
81
+ hsl(38, 90%, 60%) 50%,
82
+ hsl(350, 60%, 62%) 100%
83
+ );
84
+ --dry-gradient-cool: linear-gradient(
85
+ 135deg,
86
+ hsl(25, 50%, 75%) 0%,
87
+ hsl(350, 40%, 70%) 50%,
88
+ hsl(280, 30%, 65%) 100%
89
+ );
90
+ --dry-gradient-sunset: linear-gradient(
91
+ 135deg,
92
+ hsl(45, 95%, 65%) 0%,
93
+ hsl(15, 90%, 58%) 40%,
94
+ hsl(345, 75%, 55%) 100%
95
+ );
96
+ --dry-gradient-ocean: linear-gradient(
97
+ 135deg,
98
+ hsl(30, 70%, 60%) 0%,
99
+ hsl(10, 80%, 55%) 50%,
100
+ hsl(350, 60%, 52%) 100%
101
+ );
102
+ --dry-gradient-surface: linear-gradient(180deg, hsl(30, 25%, 98%) 0%, hsl(30, 20%, 95%) 100%);
103
+
104
+ /* ─── Grain — subtle warmth ───────────────────────────────────── */
105
+ --dry-grain-opacity: 0.03;
106
+ --dry-grain-blend: overlay;
107
+
108
+ /* ─── Typography — serif display ──────────────────────────────── */
109
+ --dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
110
+
111
+ /* ─── Radius — softer corners ─────────────────────────────────── */
112
+ --dry-radius-lg: 10px;
113
+ --dry-radius-xl: 14px;
114
+ --dry-radius-2xl: 20px;
115
+ }
116
+
117
+ /* ─── Aurora Dark variant ────────────────────────────────────────── */
118
+ [data-theme='aurora-dark'],
119
+ .theme-aurora-dark {
120
+ /* ─── Brand — coral, lighter for dark bg ──────────────────────── */
121
+ --dry-color-brand: hsl(15, 90%, 70%);
122
+ --dry-color-text-brand: hsl(15, 90%, 70%);
123
+ --dry-color-fill-brand: hsl(15, 90%, 70%);
124
+ --dry-color-fill-brand-hover: hsl(15, 90%, 62%);
125
+ --dry-color-fill-brand-active: hsl(15, 90%, 56%);
126
+ --dry-color-fill-brand-weak: hsla(15, 90%, 70%, 0.08);
127
+ --dry-color-stroke-brand: hsla(15, 90%, 70%, 0.5);
128
+ --dry-color-stroke-brand-strong: hsla(15, 90%, 70%, 0.8);
129
+ --dry-color-stroke-brand-weak: hsla(15, 90%, 70%, 0.2);
130
+ --dry-color-on-brand: hsl(15, 30%, 10%);
131
+ --dry-color-focus-ring: hsla(15, 90%, 70%, 0.4);
132
+
133
+ /* ─── Accent — golden amber ───────────────────────────────────── */
134
+ --dry-color-accent: hsl(38, 88%, 68%);
135
+ --dry-color-text-accent: hsl(38, 88%, 68%);
136
+ --dry-color-fill-accent: hsl(38, 88%, 68%);
137
+ --dry-color-fill-accent-hover: hsl(38, 88%, 60%);
138
+ --dry-color-fill-accent-active: hsl(38, 88%, 54%);
139
+ --dry-color-fill-accent-weak: hsla(38, 88%, 68%, 0.1);
140
+ --dry-color-stroke-accent: hsla(38, 88%, 68%, 0.5);
141
+ --dry-color-stroke-accent-strong: hsla(38, 88%, 68%, 0.8);
142
+ --dry-color-stroke-accent-weak: hsla(38, 88%, 68%, 0.2);
143
+ --dry-color-icon-accent: hsla(38, 88%, 68%, 0.8);
144
+ --dry-color-on-accent: hsl(38, 30%, 10%);
145
+
146
+ /* ─── Backgrounds — warm dark ─────────────────────────────────── */
147
+ --dry-color-bg-base: hsl(20, 18%, 8%);
148
+ --dry-color-bg-raised: hsl(20, 14%, 12%);
149
+ --dry-color-bg-overlay: hsl(20, 10%, 17%);
150
+ --dry-color-bg-elevated: hsl(20, 8%, 21%);
151
+ --dry-color-bg-floating: hsl(20, 6%, 25%);
152
+ --dry-color-bg-sunken: hsl(20, 20%, 5%);
153
+
154
+ /* ─── Neutrals — warm white on dark ───────────────────────────── */
155
+ --dry-color-text-strong: hsla(30, 30%, 95%, 1);
156
+ --dry-color-text-weak: hsla(30, 20%, 90%, 0.72);
157
+ --dry-color-icon: hsla(30, 20%, 85%, 0.8);
158
+ --dry-color-stroke-strong: hsla(30, 15%, 80%, 0.5);
159
+ --dry-color-stroke-weak: hsla(30, 15%, 70%, 0.12);
160
+ --dry-color-fill: hsla(30, 15%, 80%, 0.06);
161
+ --dry-color-fill-hover: hsla(30, 15%, 80%, 0.1);
162
+ --dry-color-fill-active: hsla(30, 15%, 80%, 0.14);
163
+
164
+ /* ─── Shadows — warm deep ─────────────────────────────────────── */
165
+ --dry-shadow-raised: 0 1px 3px hsla(20, 40%, 5%, 0.5), 0 1px 2px hsla(20, 40%, 5%, 0.35);
166
+ --dry-shadow-overlay: 0 8px 24px hsla(20, 40%, 5%, 0.55), 0 2px 8px hsla(20, 40%, 5%, 0.4);
167
+ --dry-shadow-brand: 0 4px 14px hsla(15, 90%, 70%, 0.18), 0 2px 6px hsla(15, 90%, 70%, 0.1);
168
+ --dry-shadow-accent: 0 4px 14px hsla(38, 88%, 68%, 0.18), 0 2px 6px hsla(38, 88%, 68%, 0.1);
169
+
170
+ /* ─── Glass — dark warm frosted ───────────────────────────────── */
171
+ --dry-glass-tint: hsla(20, 14%, 12%, 0.7);
172
+ --dry-glass-opacity: 62%;
173
+ --dry-glass-saturation: 130%;
174
+ --dry-glass-border: hsla(30, 20%, 80%, 0.06);
175
+ --dry-glass-border-strong: hsla(30, 20%, 80%, 0.12);
176
+
177
+ /* ─── Glow — warm dark halos ──────────────────────────────────── */
178
+ --dry-glow-color: var(--dry-color-fill-brand);
179
+ --dry-glow-ring: 0 0 0 1px hsla(15, 90%, 70%, 0.25), 0 0 16px 3px hsla(15, 90%, 70%, 0.12);
180
+ --dry-glow-ring-accent: 0 0 0 1px hsla(38, 88%, 68%, 0.25), 0 0 16px 3px hsla(38, 88%, 68%, 0.12);
181
+ --dry-glow-ambient: hsla(15, 90%, 70%, 0.04);
182
+ --dry-glow-ambient-accent: hsla(38, 88%, 68%, 0.04);
183
+
184
+ /* ─── Gradient palette — warm dark ────────────────────────────── */
185
+ --dry-gradient-warm: linear-gradient(
186
+ 135deg,
187
+ hsl(15, 85%, 70%) 0%,
188
+ hsl(38, 85%, 65%) 50%,
189
+ hsl(350, 55%, 65%) 100%
190
+ );
191
+ --dry-gradient-cool: linear-gradient(
192
+ 135deg,
193
+ hsl(25, 45%, 70%) 0%,
194
+ hsl(350, 35%, 65%) 50%,
195
+ hsl(280, 25%, 60%) 100%
196
+ );
197
+ --dry-gradient-sunset: linear-gradient(
198
+ 135deg,
199
+ hsl(45, 90%, 68%) 0%,
200
+ hsl(15, 85%, 62%) 40%,
201
+ hsl(345, 70%, 58%) 100%
202
+ );
203
+ --dry-gradient-ocean: linear-gradient(
204
+ 135deg,
205
+ hsl(30, 65%, 62%) 0%,
206
+ hsl(10, 75%, 58%) 50%,
207
+ hsl(350, 55%, 55%) 100%
208
+ );
209
+ --dry-gradient-surface: linear-gradient(180deg, hsl(20, 18%, 8%) 0%, hsl(20, 14%, 12%) 100%);
210
+
211
+ /* ─── Grain — warm dark ───────────────────────────────────────── */
212
+ --dry-grain-opacity: 0.06;
213
+ --dry-grain-blend: soft-light;
214
+
215
+ /* ─── Typography — serif display ──────────────────────────────── */
216
+ --dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
217
+
218
+ /* ─── Beam blend ──────────────────────────────────────────────── */
219
+ --dry-beam-default-blend: screen;
220
+
221
+ /* ─── Overlay backdrops ───────────────────────────────────────── */
222
+ --dry-color-overlay-backdrop: hsla(20, 30%, 3%, 0.6);
223
+ --dry-color-overlay-backdrop-strong: hsla(20, 30%, 3%, 0.75);
224
+
225
+ /* ─── Radius — softer corners ─────────────────────────────────── */
226
+ --dry-radius-lg: 10px;
227
+ --dry-radius-xl: 14px;
228
+ --dry-radius-2xl: 20px;
229
+ }
package/dist/themes/dark.css CHANGED
@@ -122,11 +122,32 @@
122
122
  --dry-color-icon-info: var(--dry-color-stroke-info-strong);
123
123
  --dry-color-on-info: #ffffff;
124
124
 
125
+ /* ─── Accent tone (warm counterpoint to brand) ───────────────── */
126
+ --dry-color-accent: hsl(25, 85%, 68%);
127
+ --dry-color-text-accent: hsl(25, 85%, 68%);
128
+ --dry-color-fill-accent: hsl(25, 85%, 68%);
129
+ --dry-color-fill-accent-hover: hsl(25, 85%, 60%);
130
+ --dry-color-fill-accent-active: hsl(25, 85%, 55%);
131
+ --dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
132
+ --dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
133
+ --dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
134
+ --dry-color-stroke-accent-weak: hsla(25, 85%, 68%, 0.2);
135
+ --dry-color-icon-accent: hsla(25, 85%, 68%, 0.8);
136
+ --dry-color-on-accent: hsl(233, 18%, 9%);
137
+
138
+ /* ─── Extended surface depth ──────────────────────────────────── */
139
+ --dry-color-bg-elevated: hsl(234, 9%, 22%);
140
+ --dry-color-bg-floating: hsl(234, 8%, 26%);
141
+
125
142
  /* ─── Semantic shadows ────────────────────────────────────────── */
126
143
  --dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
127
144
  --dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
128
145
  --dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
129
146
 
147
+ /* ─── Tinted shadows ──────────────────────────────────────────── */
148
+ --dry-shadow-brand: 0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
149
+ --dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
150
+
130
151
  /* ─── Overlay backdrops ───────────────────────────────────────── */
131
152
  --dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
132
153
  --dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
@@ -138,6 +159,51 @@
138
159
  /* ─── Glass surface ───────────────────────────────────────────── */
139
160
  --dry-glass-tint: var(--dry-color-bg-raised);
140
161
  --dry-glass-opacity: 64%;
162
+ --dry-glass-saturation: 120%;
163
+ --dry-glass-border: hsla(0, 0%, 100%, 0.06);
164
+ --dry-glass-border-strong: hsla(0, 0%, 100%, 0.12);
165
+
166
+ /* ─── Glow extensions ─────────────────────────────────────────── */
167
+ --dry-glow-ring: 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 100%, 82%, 0.2);
168
+ --dry-glow-ring-accent:
169
+ 0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 85%, 68%, 0.2);
170
+ --dry-glow-ambient: hsla(230, 100%, 82%, 0.04);
171
+ --dry-glow-ambient-accent: hsla(25, 85%, 68%, 0.04);
172
+
173
+ /* ─── Gradient palette ────────────────────────────────────────── */
174
+ --dry-gradient-warm: linear-gradient(
175
+ 135deg,
176
+ hsl(25, 85%, 68%) 0%,
177
+ hsl(350, 65%, 62%) 50%,
178
+ hsl(280, 55%, 58%) 100%
179
+ );
180
+ --dry-gradient-cool: linear-gradient(
181
+ 135deg,
182
+ hsl(210, 75%, 65%) 0%,
183
+ hsl(250, 65%, 60%) 50%,
184
+ hsl(280, 45%, 55%) 100%
185
+ );
186
+ --dry-gradient-sunset: linear-gradient(
187
+ 135deg,
188
+ hsl(40, 90%, 65%) 0%,
189
+ hsl(15, 85%, 62%) 40%,
190
+ hsl(340, 70%, 58%) 100%
191
+ );
192
+ --dry-gradient-ocean: linear-gradient(
193
+ 135deg,
194
+ hsl(195, 75%, 55%) 0%,
195
+ hsl(220, 80%, 60%) 50%,
196
+ hsl(250, 65%, 62%) 100%
197
+ );
198
+ --dry-gradient-surface: linear-gradient(
199
+ 180deg,
200
+ var(--dry-color-bg-base) 0%,
201
+ var(--dry-color-bg-raised) 100%
202
+ );
203
+
204
+ /* ─── Grain / noise texture ───────────────────────────────────── */
205
+ --dry-grain-opacity: 0.06;
206
+ --dry-grain-blend: soft-light;
141
207
  }
142
208
 
143
209
  .theme-auto {
@@ -266,11 +332,33 @@
266
332
  --dry-color-icon-info: var(--dry-color-stroke-info-strong);
267
333
  --dry-color-on-info: #ffffff;
268
334
 
335
+ /* ─── Accent tone (warm counterpoint to brand) ───────────────── */
336
+ --dry-color-accent: hsl(25, 85%, 68%);
337
+ --dry-color-text-accent: hsl(25, 85%, 68%);
338
+ --dry-color-fill-accent: hsl(25, 85%, 68%);
339
+ --dry-color-fill-accent-hover: hsl(25, 85%, 60%);
340
+ --dry-color-fill-accent-active: hsl(25, 85%, 55%);
341
+ --dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
342
+ --dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
343
+ --dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
344
+ --dry-color-stroke-accent-weak: hsla(25, 85%, 68%, 0.2);
345
+ --dry-color-icon-accent: hsla(25, 85%, 68%, 0.8);
346
+ --dry-color-on-accent: hsl(233, 18%, 9%);
347
+
348
+ /* ─── Extended surface depth ──────────────────────────────────── */
349
+ --dry-color-bg-elevated: hsl(234, 9%, 22%);
350
+ --dry-color-bg-floating: hsl(234, 8%, 26%);
351
+
269
352
  /* ─── Semantic shadows ────────────────────────────────────────── */
270
353
  --dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
271
354
  --dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
272
355
  --dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
273
356
 
357
+ /* ─── Tinted shadows ──────────────────────────────────────────── */
358
+ --dry-shadow-brand:
359
+ 0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
360
+ --dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
361
+
274
362
  /* ─── Overlay backdrops ───────────────────────────────────────── */
275
363
  --dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
276
364
  --dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
@@ -282,6 +370,52 @@
282
370
  /* ─── Glass surface ───────────────────────────────────────────── */
283
371
  --dry-glass-tint: var(--dry-color-bg-raised);
284
372
  --dry-glass-opacity: 64%;
373
+ --dry-glass-saturation: 120%;
374
+ --dry-glass-border: hsla(0, 0%, 100%, 0.06);
375
+ --dry-glass-border-strong: hsla(0, 0%, 100%, 0.12);
376
+
377
+ /* ─── Glow extensions ─────────────────────────────────────────── */
378
+ --dry-glow-ring:
379
+ 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 100%, 82%, 0.2);
380
+ --dry-glow-ring-accent:
381
+ 0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 85%, 68%, 0.2);
382
+ --dry-glow-ambient: hsla(230, 100%, 82%, 0.04);
383
+ --dry-glow-ambient-accent: hsla(25, 85%, 68%, 0.04);
384
+
385
+ /* ─── Gradient palette ────────────────────────────────────────── */
386
+ --dry-gradient-warm: linear-gradient(
387
+ 135deg,
388
+ hsl(25, 85%, 68%) 0%,
389
+ hsl(350, 65%, 62%) 50%,
390
+ hsl(280, 55%, 58%) 100%
391
+ );
392
+ --dry-gradient-cool: linear-gradient(
393
+ 135deg,
394
+ hsl(210, 75%, 65%) 0%,
395
+ hsl(250, 65%, 60%) 50%,
396
+ hsl(280, 45%, 55%) 100%
397
+ );
398
+ --dry-gradient-sunset: linear-gradient(
399
+ 135deg,
400
+ hsl(40, 90%, 65%) 0%,
401
+ hsl(15, 85%, 62%) 40%,
402
+ hsl(340, 70%, 58%) 100%
403
+ );
404
+ --dry-gradient-ocean: linear-gradient(
405
+ 135deg,
406
+ hsl(195, 75%, 55%) 0%,
407
+ hsl(220, 80%, 60%) 50%,
408
+ hsl(250, 65%, 62%) 100%
409
+ );
410
+ --dry-gradient-surface: linear-gradient(
411
+ 180deg,
412
+ var(--dry-color-bg-base) 0%,
413
+ var(--dry-color-bg-raised) 100%
414
+ );
415
+
416
+ /* ─── Grain / noise texture ───────────────────────────────────── */
417
+ --dry-grain-opacity: 0.06;
418
+ --dry-grain-blend: soft-light;
285
419
  }
286
420
  }
287
421
  }
package/dist/themes/default.css CHANGED
@@ -148,11 +148,32 @@ samp {
148
148
  --dry-color-icon-info: var(--dry-color-stroke-info-strong);
149
149
  --dry-color-on-info: #ffffff;
150
150
 
151
+ /* ─── Accent tone (warm counterpoint to brand) ───────────────── */
152
+ --dry-color-accent: hsl(25, 90%, 58%);
153
+ --dry-color-text-accent: hsl(25, 80%, 38%);
154
+ --dry-color-fill-accent: hsl(25, 90%, 58%);
155
+ --dry-color-fill-accent-hover: hsl(25, 90%, 50%);
156
+ --dry-color-fill-accent-active: hsl(25, 90%, 44%);
157
+ --dry-color-fill-accent-weak: hsla(25, 90%, 58%, 0.08);
158
+ --dry-color-stroke-accent: hsla(25, 90%, 58%, 0.5);
159
+ --dry-color-stroke-accent-strong: hsla(25, 90%, 58%, 0.8);
160
+ --dry-color-stroke-accent-weak: hsla(25, 90%, 58%, 0.2);
161
+ --dry-color-icon-accent: hsla(25, 90%, 58%, 0.8);
162
+ --dry-color-on-accent: #ffffff;
163
+
164
+ /* ─── Extended surface depth ──────────────────────────────────── */
165
+ --dry-color-bg-elevated: #eceef2;
166
+ --dry-color-bg-floating: #ffffff;
167
+
151
168
  /* ─── Semantic shadows ────────────────────────────────────────── */
152
169
  --dry-shadow-raised: 0 1px 3px hsla(230, 20%, 20%, 0.08), 0 1px 2px hsla(230, 20%, 20%, 0.06);
153
170
  --dry-shadow-overlay: 0 8px 24px hsla(230, 20%, 20%, 0.12), 0 2px 8px hsla(230, 20%, 20%, 0.08);
154
171
  --dry-shadow-sunken: inset 0 1px 4px rgba(0, 0, 0, 0.08);
155
172
 
173
+ /* ─── Tinted shadows ──────────────────────────────────────────── */
174
+ --dry-shadow-brand: 0 4px 14px hsla(230, 64%, 57%, 0.2), 0 2px 6px hsla(230, 64%, 57%, 0.12);
175
+ --dry-shadow-accent: 0 4px 14px hsla(25, 90%, 58%, 0.2), 0 2px 6px hsla(25, 90%, 58%, 0.12);
176
+
156
177
  /* ─── Overlay backdrops ───────────────────────────────────────── */
157
178
  --dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.4);
158
179
  --dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.6);
@@ -189,6 +210,7 @@ samp {
189
210
  --dry-space-256: 16rem;
190
211
 
191
212
  /* ─── Radius ──────────────────────────────────────────────────── */
213
+ --dry-radius-none: 0;
192
214
  --dry-radius-sm: 4px;
193
215
  --dry-radius-md: 8px;
194
216
  --dry-radius-lg: 8px;
@@ -203,6 +225,14 @@ samp {
203
225
  --dry-font-mono:
204
226
  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
205
227
  monospace;
228
+ --dry-font-display: var(--dry-font-sans);
229
+
230
+ /* ─── Font weights ────────────────────────────────────────────── */
231
+ --dry-font-weight-light: 300;
232
+ --dry-font-weight-normal: 400;
233
+ --dry-font-weight-medium: 500;
234
+ --dry-font-weight-semibold: 600;
235
+ --dry-font-weight-bold: 700;
206
236
 
207
237
  /* Practical UI-style named scale tokens */
208
238
  --dry-type-display-size: 3.5rem;
@@ -304,15 +334,61 @@ samp {
304
334
  --dry-glass-blur: 12px;
305
335
  --dry-glass-tint: var(--dry-color-bg-raised);
306
336
  --dry-glass-opacity: 72%;
337
+ --dry-glass-saturation: 180%;
338
+ --dry-glass-border: hsla(0, 0%, 100%, 0.08);
339
+ --dry-glass-border-strong: hsla(0, 0%, 100%, 0.15);
307
340
 
308
341
  /* ─── Glow ────────────────────────────────────────────────────── */
309
342
  --dry-glow-color: var(--dry-color-fill-brand);
310
343
  --dry-glow-blur: 24px;
311
344
  --dry-glow-spread: 48px;
345
+ --dry-glow-ring: 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 64%, 57%, 0.25);
346
+ --dry-glow-ring-accent:
347
+ 0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 90%, 58%, 0.25);
348
+ --dry-glow-ambient: hsla(230, 64%, 57%, 0.06);
349
+ --dry-glow-ambient-accent: hsla(25, 90%, 58%, 0.06);
350
+
351
+ /* ─── Gradient palette ────────────────────────────────────────── */
352
+ --dry-gradient-warm: linear-gradient(
353
+ 135deg,
354
+ hsl(25, 90%, 65%) 0%,
355
+ hsl(350, 70%, 60%) 50%,
356
+ hsl(280, 60%, 55%) 100%
357
+ );
358
+ --dry-gradient-cool: linear-gradient(
359
+ 135deg,
360
+ hsl(210, 80%, 60%) 0%,
361
+ hsl(250, 70%, 55%) 50%,
362
+ hsl(280, 50%, 50%) 100%
363
+ );
364
+ --dry-gradient-sunset: linear-gradient(
365
+ 135deg,
366
+ hsl(40, 95%, 60%) 0%,
367
+ hsl(15, 90%, 58%) 40%,
368
+ hsl(340, 75%, 55%) 100%
369
+ );
370
+ --dry-gradient-ocean: linear-gradient(
371
+ 135deg,
372
+ hsl(195, 80%, 50%) 0%,
373
+ hsl(220, 85%, 55%) 50%,
374
+ hsl(250, 70%, 60%) 100%
375
+ );
376
+ --dry-gradient-surface: linear-gradient(
377
+ 180deg,
378
+ var(--dry-color-bg-base) 0%,
379
+ var(--dry-color-bg-raised) 100%
380
+ );
381
+
382
+ /* ─── Grain / noise texture ───────────────────────────────────── */
383
+ --dry-grain-opacity: 0.04;
384
+ --dry-grain-size: 0.65;
385
+ --dry-grain-blend: overlay;
312
386
 
313
387
  /* ─── Typography extras ───────────────────────────────────────── */
314
388
  --dry-tracking-tight: -0.025em;
315
389
  --dry-tracking-normal: 0;
390
+ --dry-tracking-wide: 0.05em;
391
+ --dry-tracking-wider: 0.1em;
316
392
 
317
393
  /* ─── Utility shadows (fixed dark ink for depth across themes) ── */
318
394
  --dry-shadow-sm: 0 1px 2px 0 color-mix(in srgb, #020617 12%, transparent);
package/dist/themes/midnight.css ADDED
@@ -0,0 +1,142 @@
1
+ /*
2
+ * Midnight — Dark Glass
3
+ *
4
+ * Inspired by: the "New thread" glassmorphic menus, Cyrizon Saturn rings,
5
+ * frosted dark surfaces with inset glow borders, soft rose accents,
6
+ * ambient light bleeding through translucent layers.
7
+ *
8
+ * Deep dark base, frosted glass cards, rose accent, layered depth.
9
+ * Dark-only theme.
10
+ * Use with: <html class="theme-midnight"> or <html data-theme="midnight">
11
+ */
12
+
13
+ [data-theme='midnight'],
14
+ .theme-midnight {
15
+ /* ─── Brand — soft lavender ───────────────────────────────────── */
16
+ --dry-color-brand: hsl(250, 70%, 75%);
17
+ --dry-color-text-brand: hsl(250, 70%, 75%);
18
+ --dry-color-fill-brand: hsl(250, 70%, 75%);
19
+ --dry-color-fill-brand-hover: hsl(250, 70%, 67%);
20
+ --dry-color-fill-brand-active: hsl(250, 70%, 62%);
21
+ --dry-color-fill-brand-weak: hsla(250, 70%, 75%, 0.08);
22
+ --dry-color-stroke-brand: hsla(250, 70%, 75%, 0.45);
23
+ --dry-color-stroke-brand-strong: hsla(250, 70%, 75%, 0.75);
24
+ --dry-color-stroke-brand-weak: hsla(250, 70%, 75%, 0.18);
25
+ --dry-color-on-brand: hsl(250, 30%, 8%);
26
+ --dry-color-focus-ring: hsla(250, 70%, 75%, 0.35);
27
+
28
+ /* ─── Accent — soft rose (the avatar ring glow) ───────────────── */
29
+ --dry-color-accent: hsl(350, 60%, 70%);
30
+ --dry-color-text-accent: hsl(350, 60%, 70%);
31
+ --dry-color-fill-accent: hsl(350, 60%, 70%);
32
+ --dry-color-fill-accent-hover: hsl(350, 60%, 62%);
33
+ --dry-color-fill-accent-active: hsl(350, 60%, 56%);
34
+ --dry-color-fill-accent-weak: hsla(350, 60%, 70%, 0.08);
35
+ --dry-color-stroke-accent: hsla(350, 60%, 70%, 0.45);
36
+ --dry-color-stroke-accent-strong: hsla(350, 60%, 70%, 0.75);
37
+ --dry-color-stroke-accent-weak: hsla(350, 60%, 70%, 0.18);
38
+ --dry-color-icon-accent: hsla(350, 60%, 70%, 0.75);
39
+ --dry-color-on-accent: hsl(350, 20%, 8%);
40
+
41
+ /* ─── Backgrounds — deep layered dark ─────────────────────────── */
42
+ --dry-color-bg-base: hsl(240, 20%, 6%);
43
+ --dry-color-bg-raised: hsl(240, 15%, 10%);
44
+ --dry-color-bg-overlay: hsl(240, 12%, 14%);
45
+ --dry-color-bg-elevated: hsl(240, 10%, 18%);
46
+ --dry-color-bg-floating: hsl(240, 8%, 22%);
47
+ --dry-color-bg-sunken: hsl(240, 22%, 4%);
48
+ --dry-color-bg-brand: var(--dry-color-fill-brand);
49
+ --dry-color-bg-inverse: hsl(240, 10%, 95%);
50
+
51
+ /* ─── Neutrals — cool silver white ────────────────────────────── */
52
+ --dry-color-text-strong: hsla(240, 20%, 98%, 1);
53
+ --dry-color-text-weak: hsla(240, 15%, 90%, 0.7);
54
+ --dry-color-icon: hsla(240, 15%, 88%, 0.78);
55
+ --dry-color-stroke-strong: hsla(240, 15%, 85%, 0.5);
56
+ --dry-color-stroke-weak: hsla(240, 15%, 80%, 0.1);
57
+ --dry-color-fill: hsla(240, 15%, 85%, 0.05);
58
+ --dry-color-fill-hover: hsla(240, 15%, 85%, 0.08);
59
+ --dry-color-fill-active: hsla(240, 15%, 85%, 0.13);
60
+
61
+ /* ─── Shadows — deep midnight ─────────────────────────────────── */
62
+ --dry-shadow-raised: 0 1px 4px hsla(240, 40%, 3%, 0.5), 0 1px 2px hsla(240, 40%, 3%, 0.4);
63
+ --dry-shadow-overlay: 0 8px 32px hsla(240, 40%, 3%, 0.6), 0 2px 8px hsla(240, 40%, 3%, 0.45);
64
+ --dry-shadow-sunken: inset 0 1px 4px hsla(240, 40%, 3%, 0.4);
65
+ --dry-shadow-brand: 0 4px 20px hsla(250, 70%, 75%, 0.12), 0 2px 8px hsla(250, 70%, 75%, 0.08);
66
+ --dry-shadow-accent: 0 4px 20px hsla(350, 60%, 70%, 0.12), 0 2px 8px hsla(350, 60%, 70%, 0.08);
67
+
68
+ /* ─── Glass — the hero feature of this theme ──────────────────── */
69
+ --dry-glass-blur: 16px;
70
+ --dry-glass-tint: hsla(240, 15%, 10%, 0.65);
71
+ --dry-glass-opacity: 58%;
72
+ --dry-glass-saturation: 150%;
73
+ --dry-glass-border: hsla(240, 20%, 90%, 0.06);
74
+ --dry-glass-border-strong: hsla(240, 20%, 90%, 0.12);
75
+
76
+ /* ─── Glow — ethereal halos ───────────────────────────────────── */
77
+ --dry-glow-color: var(--dry-color-fill-brand);
78
+ --dry-glow-blur: 32px;
79
+ --dry-glow-spread: 64px;
80
+ --dry-glow-ring: 0 0 0 1px hsla(250, 70%, 75%, 0.2), 0 0 20px 4px hsla(250, 70%, 75%, 0.1);
81
+ --dry-glow-ring-accent: 0 0 0 1px hsla(350, 60%, 70%, 0.2), 0 0 20px 4px hsla(350, 60%, 70%, 0.1);
82
+ --dry-glow-ambient: hsla(250, 70%, 75%, 0.03);
83
+ --dry-glow-ambient-accent: hsla(350, 60%, 70%, 0.03);
84
+
85
+ /* ─── Gradient palette — cool ethereal ────────────────────────── */
86
+ --dry-gradient-warm: linear-gradient(
87
+ 135deg,
88
+ hsl(350, 55%, 65%) 0%,
89
+ hsl(280, 50%, 60%) 50%,
90
+ hsl(250, 60%, 65%) 100%
91
+ );
92
+ --dry-gradient-cool: linear-gradient(
93
+ 135deg,
94
+ hsl(220, 70%, 65%) 0%,
95
+ hsl(260, 60%, 60%) 50%,
96
+ hsl(290, 40%, 58%) 100%
97
+ );
98
+ --dry-gradient-sunset: linear-gradient(
99
+ 135deg,
100
+ hsl(350, 65%, 68%) 0%,
101
+ hsl(310, 50%, 58%) 40%,
102
+ hsl(260, 55%, 55%) 100%
103
+ );
104
+ --dry-gradient-ocean: linear-gradient(
105
+ 135deg,
106
+ hsl(210, 65%, 60%) 0%,
107
+ hsl(240, 60%, 58%) 50%,
108
+ hsl(270, 50%, 55%) 100%
109
+ );
110
+ --dry-gradient-surface: linear-gradient(180deg, hsl(240, 20%, 6%) 0%, hsl(240, 15%, 10%) 100%);
111
+
112
+ /* ─── Grain — subtle texture ──────────────────────────────────── */
113
+ --dry-grain-opacity: 0.05;
114
+ --dry-grain-blend: soft-light;
115
+
116
+ /* ─── Motion — slightly slower, dreamier ──────────────────────── */
117
+ --dry-duration-normal: 260ms;
118
+ --dry-duration-slow: 420ms;
119
+ --dry-ease-spring: var(--dry-ease-spring-soft);
120
+
121
+ /* ─── Beam blend ──────────────────────────────────────────────── */
122
+ --dry-beam-default-blend: screen;
123
+
124
+ /* ─── Overlay backdrops ───────────────────────────────────────── */
125
+ --dry-color-overlay-backdrop: hsla(240, 30%, 3%, 0.65);
126
+ --dry-color-overlay-backdrop-strong: hsla(240, 30%, 3%, 0.8);
127
+
128
+ /* ─── Radius — generous, pill-like ────────────────────────────── */
129
+ --dry-radius-lg: 12px;
130
+ --dry-radius-xl: 16px;
131
+ --dry-radius-2xl: 24px;
132
+
133
+ /* ─── Toggle — midnight themed ────────────────────────────────── */
134
+ --dry-toggle-track-bg: hsla(240, 15%, 85%, 0.06);
135
+ --dry-toggle-track-stroke: hsla(240, 15%, 85%, 0.5);
136
+ --dry-toggle-selected-bg: hsl(350, 60%, 70%);
137
+ --dry-toggle-selected-stroke: hsl(350, 60%, 70%);
138
+ --dry-toggle-thumb-bg: hsl(240, 20%, 8%);
139
+ --dry-toggle-hover-bg: hsla(240, 15%, 85%, 0.08);
140
+ --dry-toggle-press-bg: hsla(240, 15%, 85%, 0.12);
141
+ --dry-toggle-focus-ring: hsl(350, 60%, 70%);
142
+ }