@heliosgraphics/ui 2.0.0-alpha.62

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 (426) hide show
  1. package/LICENSE.md +21 -0
  2. package/components/Alert/Alert.meta.ts +45 -0
  3. package/components/Alert/Alert.module.css +41 -0
  4. package/components/Alert/Alert.tsx +47 -0
  5. package/components/Alert/Alert.types.ts +13 -0
  6. package/components/Alert/index.ts +1 -0
  7. package/components/Breadcrumb/Breadcrumb.meta.ts +17 -0
  8. package/components/Breadcrumb/Breadcrumb.tsx +31 -0
  9. package/components/Breadcrumb/Breadcrumb.types.ts +13 -0
  10. package/components/Breadcrumb/index.ts +2 -0
  11. package/components/Browser/Browser.meta.ts +27 -0
  12. package/components/Browser/Browser.module.css +3 -0
  13. package/components/Browser/Browser.tsx +10 -0
  14. package/components/Browser/Browser.types.ts +9 -0
  15. package/components/Browser/index.ts +1 -0
  16. package/components/Button/Button.meta.ts +46 -0
  17. package/components/Button/Button.module.css +337 -0
  18. package/components/Button/Button.spec.tsx +6 -0
  19. package/components/Button/Button.tsx +203 -0
  20. package/components/Button/Button.types.ts +27 -0
  21. package/components/Button/index.ts +2 -0
  22. package/components/ButtonGroup/ButtonGroup.meta.ts +37 -0
  23. package/components/ButtonGroup/ButtonGroup.module.css +55 -0
  24. package/components/ButtonGroup/ButtonGroup.spec.tsx +6 -0
  25. package/components/ButtonGroup/ButtonGroup.tsx +41 -0
  26. package/components/ButtonGroup/ButtonGroup.types.ts +11 -0
  27. package/components/ButtonGroup/index.ts +2 -0
  28. package/components/Checkbox/Checkbox.meta.ts +54 -0
  29. package/components/Checkbox/Checkbox.module.css +99 -0
  30. package/components/Checkbox/Checkbox.tsx +58 -0
  31. package/components/Checkbox/Checkbox.types.ts +17 -0
  32. package/components/Checkbox/index.ts +1 -0
  33. package/components/Clock/Clock.meta.ts +14 -0
  34. package/components/Clock/Clock.module.css +27 -0
  35. package/components/Clock/Clock.tsx +78 -0
  36. package/components/Clock/Clock.types.ts +1 -0
  37. package/components/Clock/index.ts +1 -0
  38. package/components/Column/Column.meta.ts +22 -0
  39. package/components/Column/Column.tsx +19 -0
  40. package/components/Column/Column.types.ts +8 -0
  41. package/components/Column/index.ts +2 -0
  42. package/components/Confirm/Confirm.meta.ts +43 -0
  43. package/components/Confirm/Confirm.tsx +27 -0
  44. package/components/Confirm/Confirm.types.ts +13 -0
  45. package/components/Confirm/index.ts +1 -0
  46. package/components/DatePicker/DatePicker.meta.ts +18 -0
  47. package/components/DatePicker/DatePicker.module.css +3 -0
  48. package/components/DatePicker/DatePicker.tsx +10 -0
  49. package/components/DatePicker/DatePicker.types.ts +3 -0
  50. package/components/DatePicker/index.ts +1 -0
  51. package/components/Debug/Debug.meta.ts +22 -0
  52. package/components/Debug/Debug.module.css +17 -0
  53. package/components/Debug/Debug.tsx +42 -0
  54. package/components/Debug/Debug.types.ts +6 -0
  55. package/components/Debug/Debug.utils.ts +23 -0
  56. package/components/Debug/index.ts +1 -0
  57. package/components/Details/Details.meta.ts +22 -0
  58. package/components/Details/Details.module.css +36 -0
  59. package/components/Details/Details.tsx +18 -0
  60. package/components/Details/Details.types.ts +8 -0
  61. package/components/Details/index.ts +1 -0
  62. package/components/Dialog/Dialog.meta.ts +44 -0
  63. package/components/Dialog/Dialog.module.css +108 -0
  64. package/components/Dialog/Dialog.tsx +95 -0
  65. package/components/Dialog/Dialog.types.ts +12 -0
  66. package/components/Dialog/index.ts +1 -0
  67. package/components/Donut/Donut.meta.ts +25 -0
  68. package/components/Donut/Donut.module.css +8 -0
  69. package/components/Donut/Donut.tsx +56 -0
  70. package/components/Donut/Donut.types.ts +12 -0
  71. package/components/Donut/Donut.utils.ts +11 -0
  72. package/components/Donut/index.ts +2 -0
  73. package/components/Dot/Dot.meta.ts +26 -0
  74. package/components/Dot/Dot.module.css +21 -0
  75. package/components/Dot/Dot.spec.tsx +6 -0
  76. package/components/Dot/Dot.tsx +44 -0
  77. package/components/Dot/Dot.types.ts +7 -0
  78. package/components/Dot/index.ts +1 -0
  79. package/components/Dropdown/Dropdown.meta.ts +35 -0
  80. package/components/Dropdown/Dropdown.module.css +77 -0
  81. package/components/Dropdown/Dropdown.tsx +82 -0
  82. package/components/Dropdown/Dropdown.types.ts +10 -0
  83. package/components/Dropdown/index.ts +2 -0
  84. package/components/Fieldset/Fieldset.meta.ts +18 -0
  85. package/components/Fieldset/Fieldset.module.css +3 -0
  86. package/components/Fieldset/Fieldset.tsx +12 -0
  87. package/components/Fieldset/Fieldset.types.ts +7 -0
  88. package/components/Fieldset/index.ts +1 -0
  89. package/components/Flex/Flex.meta.ts +44 -0
  90. package/components/Flex/Flex.tsx +14 -0
  91. package/components/Flex/Flex.types.ts +34 -0
  92. package/components/Flex/Flex.utils.spec.ts +94 -0
  93. package/components/Flex/Flex.utils.ts +122 -0
  94. package/components/Flex/index.ts +6 -0
  95. package/components/Grid/Grid.meta.ts +22 -0
  96. package/components/Grid/Grid.tsx +11 -0
  97. package/components/Grid/Grid.types.ts +8 -0
  98. package/components/Grid/index.ts +1 -0
  99. package/components/Heading/Heading.meta.ts +18 -0
  100. package/components/Heading/Heading.module.css +19 -0
  101. package/components/Heading/Heading.tsx +58 -0
  102. package/components/Heading/Heading.types.ts +8 -0
  103. package/components/Heading/components/H0/H0.meta.ts +11 -0
  104. package/components/Heading/components/H0/H0.module.css +4 -0
  105. package/components/Heading/components/H0/H0.tsx +10 -0
  106. package/components/Heading/components/H0/H0.types.ts +3 -0
  107. package/components/Heading/components/H0/index.ts +1 -0
  108. package/components/Heading/components/H1/H1.meta.ts +11 -0
  109. package/components/Heading/components/H1/H1.tsx +6 -0
  110. package/components/Heading/components/H1/H1.types.ts +3 -0
  111. package/components/Heading/components/H1/index.ts +1 -0
  112. package/components/Heading/components/H2/H2.meta.ts +11 -0
  113. package/components/Heading/components/H2/H2.tsx +6 -0
  114. package/components/Heading/components/H2/H2.types.ts +3 -0
  115. package/components/Heading/components/H2/index.ts +1 -0
  116. package/components/Heading/components/H3/H3.meta.ts +11 -0
  117. package/components/Heading/components/H3/H3.tsx +6 -0
  118. package/components/Heading/components/H3/H3.types.ts +3 -0
  119. package/components/Heading/components/H3/index.ts +1 -0
  120. package/components/Heading/components/H4/H4.meta.ts +11 -0
  121. package/components/Heading/components/H4/H4.tsx +6 -0
  122. package/components/Heading/components/H4/H4.types.ts +3 -0
  123. package/components/Heading/components/H4/index.ts +1 -0
  124. package/components/Heading/components/H5/H5.meta.ts +11 -0
  125. package/components/Heading/components/H5/H5.tsx +6 -0
  126. package/components/Heading/components/H5/H5.types.ts +3 -0
  127. package/components/Heading/components/H5/index.ts +1 -0
  128. package/components/Heading/components/H6/H6.meta.ts +11 -0
  129. package/components/Heading/components/H6/H6.tsx +6 -0
  130. package/components/Heading/components/H6/H6.types.ts +3 -0
  131. package/components/Heading/components/H6/index.ts +1 -0
  132. package/components/Heading/index.ts +2 -0
  133. package/components/Icon/Icon.meta.ts +28 -0
  134. package/components/Icon/Icon.module.css +22 -0
  135. package/components/Icon/Icon.tsx +29 -0
  136. package/components/Icon/Icon.types.ts +8 -0
  137. package/components/Icon/index.ts +1 -0
  138. package/components/Input/Input.meta.ts +53 -0
  139. package/components/Input/Input.module.css +82 -0
  140. package/components/Input/Input.tsx +99 -0
  141. package/components/Input/Input.types.ts +28 -0
  142. package/components/Input/index.ts +1 -0
  143. package/components/Layout/Layout.meta.ts +19 -0
  144. package/components/Layout/Layout.module.css +7 -0
  145. package/components/Layout/Layout.tsx +31 -0
  146. package/components/Layout/Layout.types.ts +17 -0
  147. package/components/Layout/components/LayoutAside/LayoutAside.meta.ts +15 -0
  148. package/components/Layout/components/LayoutAside/LayoutAside.module.css +40 -0
  149. package/components/Layout/components/LayoutAside/LayoutAside.tsx +25 -0
  150. package/components/Layout/components/LayoutAside/LayoutAside.types.ts +14 -0
  151. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.meta.ts +15 -0
  152. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.module.css +5 -0
  153. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx +19 -0
  154. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.types.ts +5 -0
  155. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/index.ts +1 -0
  156. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.meta.ts +15 -0
  157. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.module.css +10 -0
  158. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx +19 -0
  159. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.types.ts +5 -0
  160. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/index.ts +1 -0
  161. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.meta.ts +14 -0
  162. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx +27 -0
  163. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.types.ts +1 -0
  164. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/index.ts +1 -0
  165. package/components/Layout/components/LayoutAside/index.ts +13 -0
  166. package/components/Layout/components/LayoutMain/LayoutMain.meta.ts +15 -0
  167. package/components/Layout/components/LayoutMain/LayoutMain.module.css +10 -0
  168. package/components/Layout/components/LayoutMain/LayoutMain.tsx +21 -0
  169. package/components/Layout/components/LayoutMain/LayoutMain.types.ts +12 -0
  170. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.meta.ts +15 -0
  171. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.module.css +4 -0
  172. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx +30 -0
  173. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.types.ts +5 -0
  174. package/components/Layout/components/LayoutMain/components/LayoutMainContent/index.ts +1 -0
  175. package/components/Layout/components/LayoutMain/index.ts +9 -0
  176. package/components/Layout/components/LayoutNavigation/LayoutNavigation.meta.ts +15 -0
  177. package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css +13 -0
  178. package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx +22 -0
  179. package/components/Layout/components/LayoutNavigation/LayoutNavigation.types.ts +5 -0
  180. package/components/Layout/components/LayoutNavigation/index.ts +1 -0
  181. package/components/Layout/index.ts +15 -0
  182. package/components/Loading/Loading.meta.ts +20 -0
  183. package/components/Loading/Loading.module.css +65 -0
  184. package/components/Loading/Loading.tsx +43 -0
  185. package/components/Loading/Loading.types.ts +7 -0
  186. package/components/Loading/index.ts +1 -0
  187. package/components/Markdown/Markdown.meta.ts +21 -0
  188. package/components/Markdown/Markdown.module.css +268 -0
  189. package/components/Markdown/Markdown.tsx +16 -0
  190. package/components/Markdown/Markdown.types.ts +4 -0
  191. package/components/Markdown/Markdown.utils.spec.ts +11 -0
  192. package/components/Markdown/Markdown.utils.ts +8 -0
  193. package/components/Markdown/index.ts +1 -0
  194. package/components/Masonry/Masonry.meta.ts +28 -0
  195. package/components/Masonry/Masonry.tsx +24 -0
  196. package/components/Masonry/Masonry.types.ts +10 -0
  197. package/components/Masonry/index.ts +1 -0
  198. package/components/Menu/Menu.meta.ts +15 -0
  199. package/components/Menu/Menu.tsx +18 -0
  200. package/components/Menu/Menu.types.ts +15 -0
  201. package/components/Menu/components/MenuCategory/MenuCategory.meta.ts +32 -0
  202. package/components/Menu/components/MenuCategory/MenuCategory.module.css +73 -0
  203. package/components/Menu/components/MenuCategory/MenuCategory.tsx +63 -0
  204. package/components/Menu/components/MenuCategory/MenuCategory.types.ts +10 -0
  205. package/components/Menu/components/MenuCategory/index.ts +1 -0
  206. package/components/Menu/components/MenuFilter/MenuFilter.meta.ts +24 -0
  207. package/components/Menu/components/MenuFilter/MenuFilter.module.css +11 -0
  208. package/components/Menu/components/MenuFilter/MenuFilter.tsx +25 -0
  209. package/components/Menu/components/MenuFilter/MenuFilter.types.ts +7 -0
  210. package/components/Menu/components/MenuFilter/index.ts +1 -0
  211. package/components/Menu/components/MenuItem/MenuItem.meta.ts +42 -0
  212. package/components/Menu/components/MenuItem/MenuItem.module.css +37 -0
  213. package/components/Menu/components/MenuItem/MenuItem.tsx +53 -0
  214. package/components/Menu/components/MenuItem/MenuItem.types.ts +11 -0
  215. package/components/Menu/components/MenuItem/index.ts +1 -0
  216. package/components/Menu/index.ts +14 -0
  217. package/components/Overlay/Overlay.meta.ts +25 -0
  218. package/components/Overlay/Overlay.module.css +61 -0
  219. package/components/Overlay/Overlay.tsx +26 -0
  220. package/components/Overlay/Overlay.types.ts +9 -0
  221. package/components/Overlay/index.ts +1 -0
  222. package/components/Pie/Pie.meta.ts +23 -0
  223. package/components/Pie/Pie.module.css +5 -0
  224. package/components/Pie/Pie.tsx +41 -0
  225. package/components/Pie/Pie.types.ts +12 -0
  226. package/components/Pie/index.ts +2 -0
  227. package/components/Pill/Pill.meta.ts +56 -0
  228. package/components/Pill/Pill.module.css +53 -0
  229. package/components/Pill/Pill.tsx +53 -0
  230. package/components/Pill/Pill.types.ts +15 -0
  231. package/components/Pill/index.ts +1 -0
  232. package/components/Placeholder/Placeholder.meta.ts +25 -0
  233. package/components/Placeholder/Placeholder.module.css +3 -0
  234. package/components/Placeholder/Placeholder.tsx +20 -0
  235. package/components/Placeholder/Placeholder.types.ts +7 -0
  236. package/components/Placeholder/index.ts +1 -0
  237. package/components/Progress/Progress.meta.ts +31 -0
  238. package/components/Progress/Progress.module.css +22 -0
  239. package/components/Progress/Progress.tsx +14 -0
  240. package/components/Progress/Progress.types.ts +8 -0
  241. package/components/Progress/index.ts +1 -0
  242. package/components/Radio/Radio.meta.ts +21 -0
  243. package/components/Radio/Radio.module.css +101 -0
  244. package/components/Radio/Radio.tsx +67 -0
  245. package/components/Radio/Radio.types.ts +8 -0
  246. package/components/Radio/index.ts +1 -0
  247. package/components/Segments/Segments.meta.ts +23 -0
  248. package/components/Segments/Segments.module.css +46 -0
  249. package/components/Segments/Segments.tsx +92 -0
  250. package/components/Segments/Segments.types.ts +14 -0
  251. package/components/Segments/components/SegmentButton/SegmentButton.meta.ts +32 -0
  252. package/components/Segments/components/SegmentButton/SegmentButton.module.css +34 -0
  253. package/components/Segments/components/SegmentButton/SegmentButton.tsx +24 -0
  254. package/components/Segments/components/SegmentButton/SegmentButton.types.ts +10 -0
  255. package/components/Segments/components/SegmentButton/index.ts +1 -0
  256. package/components/Segments/index.ts +9 -0
  257. package/components/Select/Select.meta.ts +39 -0
  258. package/components/Select/Select.module.css +76 -0
  259. package/components/Select/Select.tsx +46 -0
  260. package/components/Select/Select.types.ts +17 -0
  261. package/components/Select/index.ts +2 -0
  262. package/components/Separator/Separator.meta.ts +69 -0
  263. package/components/Separator/Separator.module.css +11 -0
  264. package/components/Separator/Separator.spec.tsx +6 -0
  265. package/components/Separator/Separator.tsx +34 -0
  266. package/components/Separator/Separator.types.ts +10 -0
  267. package/components/Separator/components/HRMarkup/HRMarkup.meta.ts +15 -0
  268. package/components/Separator/components/HRMarkup/HRMarkup.tsx +8 -0
  269. package/components/Separator/components/HRMarkup/HRMarkup.types.ts +5 -0
  270. package/components/Separator/components/HRMarkup/index.ts +1 -0
  271. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.meta.ts +22 -0
  272. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.module.css +22 -0
  273. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx +20 -0
  274. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.types.ts +3 -0
  275. package/components/Separator/components/HorizontalSeparator/index.ts +1 -0
  276. package/components/Separator/components/VerticalSeparator/VerticalSeparator.meta.ts +22 -0
  277. package/components/Separator/components/VerticalSeparator/VerticalSeparator.module.css +20 -0
  278. package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx +20 -0
  279. package/components/Separator/components/VerticalSeparator/VerticalSeparator.types.ts +3 -0
  280. package/components/Separator/components/VerticalSeparator/index.ts +1 -0
  281. package/components/Separator/index.ts +1 -0
  282. package/components/Setup/Setup.meta.ts +14 -0
  283. package/components/Setup/Setup.tsx +56 -0
  284. package/components/Setup/Setup.types.ts +7 -0
  285. package/components/Setup/Setup.utils.ts +48 -0
  286. package/components/Setup/index.ts +1 -0
  287. package/components/Shimmer/Shimmer.meta.ts +32 -0
  288. package/components/Shimmer/Shimmer.module.css +24 -0
  289. package/components/Shimmer/Shimmer.tsx +25 -0
  290. package/components/Shimmer/Shimmer.types.ts +7 -0
  291. package/components/Shimmer/index.ts +1 -0
  292. package/components/Slider/Slider.meta.ts +18 -0
  293. package/components/Slider/Slider.module.css +49 -0
  294. package/components/Slider/Slider.tsx +16 -0
  295. package/components/Slider/Slider.types.ts +5 -0
  296. package/components/Slider/index.ts +1 -0
  297. package/components/Spacer/Spacer.meta.ts +17 -0
  298. package/components/Spacer/Spacer.tsx +6 -0
  299. package/components/Spacer/Spacer.types.ts +3 -0
  300. package/components/Spacer/index.ts +1 -0
  301. package/components/Table/Table.meta.ts +36 -0
  302. package/components/Table/Table.module.css +53 -0
  303. package/components/Table/Table.tsx +19 -0
  304. package/components/Table/Table.types.ts +8 -0
  305. package/components/Table/index.ts +1 -0
  306. package/components/Tabs/Tabs.meta.ts +24 -0
  307. package/components/Tabs/Tabs.module.css +27 -0
  308. package/components/Tabs/Tabs.tsx +31 -0
  309. package/components/Tabs/Tabs.types.ts +7 -0
  310. package/components/Tabs/index.ts +1 -0
  311. package/components/Text/Text.meta.ts +38 -0
  312. package/components/Text/Text.module.css +41 -0
  313. package/components/Text/Text.tsx +54 -0
  314. package/components/Text/Text.types.ts +20 -0
  315. package/components/Text/Text.utils.spec.ts +13 -0
  316. package/components/Text/Text.utils.ts +50 -0
  317. package/components/Text/components/Div/Div.meta.ts +11 -0
  318. package/components/Text/components/Div/Div.tsx +6 -0
  319. package/components/Text/components/Div/Div.types.ts +3 -0
  320. package/components/Text/components/Div/index.ts +1 -0
  321. package/components/Text/components/Micro/Micro.meta.ts +11 -0
  322. package/components/Text/components/Micro/Micro.tsx +6 -0
  323. package/components/Text/components/Micro/Micro.types.ts +3 -0
  324. package/components/Text/components/Micro/index.ts +1 -0
  325. package/components/Text/components/P/P.meta.ts +11 -0
  326. package/components/Text/components/P/P.tsx +6 -0
  327. package/components/Text/components/P/P.types.ts +3 -0
  328. package/components/Text/components/P/index.ts +1 -0
  329. package/components/Text/components/Small/Small.meta.ts +11 -0
  330. package/components/Text/components/Small/Small.tsx +6 -0
  331. package/components/Text/components/Small/Small.types.ts +3 -0
  332. package/components/Text/components/Small/index.ts +1 -0
  333. package/components/Text/components/Tiny/Tiny.meta.ts +11 -0
  334. package/components/Text/components/Tiny/Tiny.tsx +6 -0
  335. package/components/Text/components/Tiny/Tiny.types.ts +3 -0
  336. package/components/Text/components/Tiny/index.ts +1 -0
  337. package/components/Text/index.ts +2 -0
  338. package/components/Textarea/Textarea.meta.ts +26 -0
  339. package/components/Textarea/Textarea.module.css +52 -0
  340. package/components/Textarea/Textarea.tsx +62 -0
  341. package/components/Textarea/Textarea.types.ts +16 -0
  342. package/components/Textarea/index.ts +1 -0
  343. package/components/Tile/Tile.meta.ts +24 -0
  344. package/components/Tile/Tile.module.css +35 -0
  345. package/components/Tile/Tile.tsx +64 -0
  346. package/components/Tile/Tile.types.ts +15 -0
  347. package/components/Tile/index.ts +1 -0
  348. package/components/Timestamp/Timestamp.meta.ts +18 -0
  349. package/components/Timestamp/Timestamp.tsx +19 -0
  350. package/components/Timestamp/Timestamp.types.ts +6 -0
  351. package/components/Timestamp/index.ts +1 -0
  352. package/components/Toggle/Toggle.meta.ts +40 -0
  353. package/components/Toggle/Toggle.module.css +133 -0
  354. package/components/Toggle/Toggle.tsx +56 -0
  355. package/components/Toggle/Toggle.types.ts +9 -0
  356. package/components/Toggle/index.ts +1 -0
  357. package/components/Tooltip/Tooltip.meta.ts +78 -0
  358. package/components/Tooltip/Tooltip.module.css +18 -0
  359. package/components/Tooltip/Tooltip.tsx +132 -0
  360. package/components/Tooltip/Tooltip.types.ts +30 -0
  361. package/components/Tooltip/Tooltip.utils.ts +14 -0
  362. package/components/Tooltip/components/TooltipContent/TooltipContent.meta.ts +12 -0
  363. package/components/Tooltip/components/TooltipContent/TooltipContent.tsx +14 -0
  364. package/components/Tooltip/components/TooltipContent/TooltipContent.types.ts +3 -0
  365. package/components/Tooltip/components/TooltipContent/index.ts +1 -0
  366. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.meta.ts +12 -0
  367. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx +9 -0
  368. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.types.ts +3 -0
  369. package/components/Tooltip/components/TooltipTrigger/index.ts +1 -0
  370. package/components/Tooltip/index.ts +6 -0
  371. package/components/shared/InputLabel/InputLabel.meta.ts +22 -0
  372. package/components/shared/InputLabel/InputLabel.module.css +14 -0
  373. package/components/shared/InputLabel/InputLabel.tsx +18 -0
  374. package/components/shared/InputLabel/InputLabel.types.ts +6 -0
  375. package/components/shared/InputLabel/index.ts +1 -0
  376. package/components/shared/ResultList/ResultList.meta.ts +16 -0
  377. package/components/shared/ResultList/ResultList.module.css +71 -0
  378. package/components/shared/ResultList/ResultList.tsx +64 -0
  379. package/components/shared/ResultList/ResultList.types.ts +18 -0
  380. package/components/shared/ResultList/index.ts +2 -0
  381. package/components.css +12 -0
  382. package/constants/animations.ts +5 -0
  383. package/constants/colors.ts +14 -0
  384. package/constants/components.ts +99 -0
  385. package/constants/emphasis.ts +3 -0
  386. package/constants/hooks.ts +1 -0
  387. package/constants/icons.ts +4 -0
  388. package/constants/intentions.ts +28 -0
  389. package/constants/meta.ts +63 -0
  390. package/constants/positions.ts +3 -0
  391. package/constants/scale.ts +5 -0
  392. package/constants/scope.ts +146 -0
  393. package/contexts/LayoutContext/LayoutContext.tsx +99 -0
  394. package/contexts/LayoutContext/LayoutContext.types.ts +11 -0
  395. package/contexts/LayoutContext/index.ts +2 -0
  396. package/css/core.colors-helpers.css +320 -0
  397. package/css/core.colors.css +416 -0
  398. package/css/core.scale.css +47 -0
  399. package/css/core.setup.css +26 -0
  400. package/css/core.typography.css +55 -0
  401. package/css/feat.atomics.css +95 -0
  402. package/css/feat.markdown.css +37 -0
  403. package/css/feat.responsive.css +162 -0
  404. package/globals.d.ts +2 -0
  405. package/hooks/useChatScroll.tsx +98 -0
  406. package/hooks/useDebounce.tsx +19 -0
  407. package/hooks/useIntersection.tsx +19 -0
  408. package/hooks/useInterval.tsx +27 -0
  409. package/hooks/useKeyPress.tsx +33 -0
  410. package/hooks/useLayoutContext.tsx +15 -0
  411. package/hooks/usePrevious.tsx +13 -0
  412. package/hooks/useResizeObserver.tsx +38 -0
  413. package/hooks/useTheme.tsx +40 -0
  414. package/index.ts +86 -0
  415. package/package.json +63 -0
  416. package/types/colors.ts +13 -0
  417. package/types/icons.ts +3 -0
  418. package/types/intentions.ts +13 -0
  419. package/types/meta.ts +24 -0
  420. package/types/positions.ts +3 -0
  421. package/types/scale.ts +28 -0
  422. package/types/scope.ts +71 -0
  423. package/types/themes.ts +1 -0
  424. package/types/typography.ts +1 -0
  425. package/utils/colors.ts +11 -0
  426. package/utils/dayjs.ts +21 -0
package/css/core.colors.css ADDED
@@ -0,0 +1,416 @@
1
+ :root {
2
+ /* chroma */
3
+ --ui-chroma: 0.228;
4
+ --ui-chroma-soft: 0.072;
5
+ --ui-chroma-tone: 0.004;
6
+
7
+ /* hue */
8
+ --ui-purple: 306;
9
+ --ui-blue: 260;
10
+ --ui-aqua: 200;
11
+ --ui-green: 144;
12
+ --ui-olive: 108;
13
+ --ui-yellow: 96;
14
+ --ui-orange: 78;
15
+ --ui-red: 24;
16
+ --ui-gray: 20;
17
+ --ui-pink: 6;
18
+
19
+ /* background */
20
+ --ui-bg-primary: oklch(var(--ui-bg-primary-l) var(--ui-chroma-tone) var(--ui-gray));
21
+ --ui-bg-secondary: oklch(var(--ui-bg-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
22
+ --ui-bg-tertiary: oklch(var(--ui-bg-tertiary-l) var(--ui-chroma-tone) var(--ui-gray));
23
+ --ui-bg-glass: oklch(var(--ui-bg-primary-l) var(--ui-chroma-tone) var(--ui-gray) / 0.66);
24
+
25
+ /* text */
26
+ --ui-text-primary: oklch(var(--ui-text-primary-l) var(--ui-chroma-tone) var(--ui-gray));
27
+ --ui-text-secondary: oklch(var(--ui-text-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
28
+ --ui-text-tertiary: oklch(var(--ui-text-tertiary-l) var(--ui-chroma-tone) var(--ui-gray));
29
+
30
+ --ui-border-primary: oklch(var(--ui-border-primary-l) var(--ui-chroma-tone) var(--ui-gray));
31
+ --ui-border-secondary: oklch(var(--ui-border-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
32
+ --ui-border-tertiary: oklch(var(--ui-border-tertiary-l) var(--ui-chroma-tone) var(--ui-gray));
33
+
34
+ /* tone & gray */
35
+ --ui-bg-gray: oklch(var(--ui-bg-l) var(--ui-chroma-tone) var(--ui-gray));
36
+ --ui-bg-hover-gray: oklch(var(--ui-bg-hover-l) var(--ui-chroma-tone) var(--ui-gray));
37
+ --ui-bg-active-gray: oklch(var(--ui-bg-active-l) var(--ui-chroma-tone) var(--ui-gray));
38
+ --ui-bg-disabled-gray: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-gray));
39
+ --ui-text-gray: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-gray));
40
+ --ui-text-disabled-gray: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
41
+
42
+ --ui-border-gray: oklch(var(--ui-border-l) var(--ui-chroma-tone) var(--ui-gray));
43
+ --ui-border-hover-gray: oklch(var(--ui-border-hover-l) var(--ui-chroma-tone) var(--ui-gray));
44
+ --ui-border-active-gray: oklch(var(--ui-border-active-l) var(--ui-chroma-tone) var(--ui-gray));
45
+ --ui-border-focus-gray: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-tone) var(--ui-gray));
46
+ --ui-border-selected-gray: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-tone) var(--ui-gray));
47
+
48
+ --ui-border-soft-gray: oklch(var(--ui-border-soft-l) var(--ui-chroma-tone) var(--ui-gray));
49
+ --ui-border-soft-hover-gray: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-tone) var(--ui-gray));
50
+ --ui-border-soft-active-gray: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-tone) var(--ui-gray));
51
+ --ui-border-soft-focus-gray: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-tone) var(--ui-gray));
52
+ --ui-border-soft-selected-gray: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-tone) var(--ui-gray));
53
+
54
+ --ui-bg-soft-gray: oklch(var(--ui-bg-soft-l) var(--ui-chroma-tone) var(--ui-gray));
55
+ --ui-bg-soft-hover-gray: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-tone) var(--ui-gray));
56
+ --ui-bg-soft-active-gray: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-tone) var(--ui-gray));
57
+ --ui-bg-soft-disabled-gray: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-tone) var(--ui-gray));
58
+ --ui-text-soft-gray: oklch(var(--ui-text-soft-l) var(--ui-chroma-tone) var(--ui-gray));
59
+ --ui-text-soft-disabled-gray: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
60
+
61
+ /* blue */
62
+ --ui-bg-blue: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-blue));
63
+ --ui-bg-hover-blue: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-blue));
64
+ --ui-bg-active-blue: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-blue));
65
+ --ui-bg-disabled-blue: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-blue));
66
+ --ui-text-blue: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-blue));
67
+ --ui-text-disabled-blue: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-blue));
68
+
69
+ --ui-border-blue: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-blue));
70
+ --ui-border-hover-blue: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-blue));
71
+ --ui-border-active-blue: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-blue));
72
+ --ui-border-focus-blue: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-blue));
73
+ --ui-border-selected-blue: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-blue));
74
+
75
+ --ui-border-soft-blue: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-blue));
76
+ --ui-border-soft-hover-blue: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-blue));
77
+ --ui-border-soft-active-blue: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-blue));
78
+ --ui-border-soft-focus-blue: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-blue));
79
+ --ui-border-soft-selected-blue: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-blue));
80
+
81
+ --ui-bg-soft-blue: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-blue));
82
+ --ui-bg-soft-hover-blue: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-blue));
83
+ --ui-bg-soft-active-blue: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-blue));
84
+ --ui-bg-soft-disabled-blue: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-blue));
85
+ --ui-text-soft-blue: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-blue));
86
+ --ui-text-soft-disabled-blue: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-blue));
87
+
88
+ /* purple */
89
+ --ui-bg-purple: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-purple));
90
+ --ui-bg-hover-purple: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-purple));
91
+ --ui-bg-active-purple: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-purple));
92
+ --ui-bg-disabled-purple: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-purple));
93
+ --ui-text-purple: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-purple));
94
+ --ui-text-disabled-purple: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-purple));
95
+
96
+ --ui-border-purple: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-purple));
97
+ --ui-border-hover-purple: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-purple));
98
+ --ui-border-active-purple: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-purple));
99
+ --ui-border-focus-purple: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-purple));
100
+ --ui-border-selected-purple: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-purple));
101
+
102
+ --ui-border-soft-purple: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-purple));
103
+ --ui-border-soft-hover-purple: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-purple));
104
+ --ui-border-soft-active-purple: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-purple));
105
+ --ui-border-soft-focus-purple: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-purple));
106
+ --ui-border-soft-selected-purple: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-purple));
107
+
108
+ --ui-bg-soft-purple: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-purple));
109
+ --ui-bg-soft-hover-purple: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-purple));
110
+ --ui-bg-soft-active-purple: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-purple));
111
+ --ui-bg-soft-disabled-purple: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-purple));
112
+ --ui-text-soft-purple: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-purple));
113
+ --ui-text-soft-disabled-purple: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-purple));
114
+
115
+ /* pink */
116
+ --ui-bg-pink: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-pink));
117
+ --ui-bg-hover-pink: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-pink));
118
+ --ui-bg-active-pink: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-pink));
119
+ --ui-bg-disabled-pink: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-pink));
120
+ --ui-text-pink: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-pink));
121
+ --ui-text-disabled-pink: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-pink));
122
+
123
+ --ui-border-pink: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-pink));
124
+ --ui-border-hover-pink: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-pink));
125
+ --ui-border-active-pink: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-pink));
126
+ --ui-border-focus-pink: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-pink));
127
+ --ui-border-selected-pink: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-pink));
128
+
129
+ --ui-border-soft-pink: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-pink));
130
+ --ui-border-soft-hover-pink: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-pink));
131
+ --ui-border-soft-active-pink: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-pink));
132
+ --ui-border-soft-focus-pink: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-pink));
133
+ --ui-border-soft-selected-pink: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-pink));
134
+
135
+ --ui-bg-soft-pink: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-pink));
136
+ --ui-bg-soft-hover-pink: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-pink));
137
+ --ui-bg-soft-active-pink: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-pink));
138
+ --ui-bg-soft-disabled-pink: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-pink));
139
+ --ui-text-soft-pink: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-pink));
140
+ --ui-text-soft-disabled-pink: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-pink));
141
+
142
+ /* red */
143
+ --ui-bg-red: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-red));
144
+ --ui-bg-hover-red: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-red));
145
+ --ui-bg-active-red: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-red));
146
+ --ui-bg-disabled-red: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-red));
147
+ --ui-text-red: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-red));
148
+ --ui-text-disabled-red: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-red));
149
+
150
+ --ui-border-red: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-red));
151
+ --ui-border-hover-red: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-red));
152
+ --ui-border-active-red: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-red));
153
+ --ui-border-focus-red: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-red));
154
+ --ui-border-selected-red: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-red));
155
+
156
+ --ui-border-soft-red: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-red));
157
+ --ui-border-soft-hover-red: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-red));
158
+ --ui-border-soft-active-red: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-red));
159
+ --ui-border-soft-focus-red: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-red));
160
+ --ui-border-soft-selected-red: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-red));
161
+
162
+ --ui-bg-soft-red: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-red));
163
+ --ui-bg-soft-hover-red: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-red));
164
+ --ui-bg-soft-active-red: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-red));
165
+ --ui-bg-soft-disabled-red: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-red));
166
+ --ui-text-soft-red: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-red));
167
+ --ui-text-soft-disabled-red: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-red));
168
+
169
+ /* orange */
170
+ --ui-bg-orange: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-orange));
171
+ --ui-bg-hover-orange: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-orange));
172
+ --ui-bg-active-orange: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-orange));
173
+ --ui-bg-disabled-orange: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-orange));
174
+ --ui-text-orange: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-orange));
175
+ --ui-text-disabled-orange: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-orange));
176
+
177
+ --ui-border-orange: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-orange));
178
+ --ui-border-hover-orange: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-orange));
179
+ --ui-border-active-orange: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-orange));
180
+ --ui-border-focus-orange: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-orange));
181
+ --ui-border-selected-orange: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-orange));
182
+
183
+ --ui-border-soft-orange: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-orange));
184
+ --ui-border-soft-hover-orange: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-orange));
185
+ --ui-border-soft-active-orange: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-orange));
186
+ --ui-border-soft-focus-orange: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-orange));
187
+ --ui-border-soft-selected-orange: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-orange));
188
+
189
+ --ui-bg-soft-orange: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-orange));
190
+ --ui-bg-soft-hover-orange: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-orange));
191
+ --ui-bg-soft-active-orange: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-orange));
192
+ --ui-bg-soft-disabled-orange: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-orange));
193
+ --ui-text-soft-orange: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-orange));
194
+ --ui-text-soft-disabled-orange: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-orange));
195
+
196
+ /* yellow */
197
+ --ui-bg-yellow: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-yellow));
198
+ --ui-bg-hover-yellow: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-yellow));
199
+ --ui-bg-active-yellow: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-yellow));
200
+ --ui-bg-disabled-yellow: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-yellow));
201
+ --ui-text-yellow: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-yellow));
202
+ --ui-text-disabled-yellow: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-yellow));
203
+
204
+ --ui-border-yellow: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-yellow));
205
+ --ui-border-hover-yellow: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-yellow));
206
+ --ui-border-active-yellow: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-yellow));
207
+ --ui-border-focus-yellow: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-yellow));
208
+ --ui-border-selected-yellow: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-yellow));
209
+
210
+ --ui-border-soft-yellow: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-yellow));
211
+ --ui-border-soft-hover-yellow: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-yellow));
212
+ --ui-border-soft-active-yellow: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-yellow));
213
+ --ui-border-soft-focus-yellow: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-yellow));
214
+ --ui-border-soft-selected-yellow: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-yellow));
215
+
216
+ --ui-bg-soft-yellow: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-yellow));
217
+ --ui-bg-soft-hover-yellow: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-yellow));
218
+ --ui-bg-soft-active-yellow: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-yellow));
219
+ --ui-bg-soft-disabled-yellow: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-yellow));
220
+ --ui-text-soft-yellow: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-yellow));
221
+ --ui-text-soft-disabled-yellow: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-yellow));
222
+
223
+ /* olive */
224
+ --ui-bg-olive: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-olive));
225
+ --ui-bg-hover-olive: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-olive));
226
+ --ui-bg-active-olive: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-olive));
227
+ --ui-bg-disabled-olive: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-olive));
228
+ --ui-text-olive: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-olive));
229
+ --ui-text-disabled-olive: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-olive));
230
+
231
+ --ui-border-olive: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-olive));
232
+ --ui-border-hover-olive: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-olive));
233
+ --ui-border-active-olive: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-olive));
234
+ --ui-border-focus-olive: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-olive));
235
+ --ui-border-selected-olive: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-olive));
236
+
237
+ --ui-border-soft-olive: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-olive));
238
+ --ui-border-soft-hover-olive: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-olive));
239
+ --ui-border-soft-active-olive: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-olive));
240
+ --ui-border-soft-focus-olive: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-olive));
241
+ --ui-border-soft-selected-olive: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-olive));
242
+
243
+ --ui-bg-soft-olive: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-olive));
244
+ --ui-bg-soft-hover-olive: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-olive));
245
+ --ui-bg-soft-active-olive: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-olive));
246
+ --ui-bg-soft-disabled-olive: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-olive));
247
+ --ui-text-soft-olive: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-olive));
248
+ --ui-text-soft-disabled-olive: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-olive));
249
+
250
+ /* green */
251
+ --ui-bg-green: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-green));
252
+ --ui-bg-hover-green: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-green));
253
+ --ui-bg-active-green: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-green));
254
+ --ui-bg-disabled-green: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-green));
255
+ --ui-text-green: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-green));
256
+ --ui-text-disabled-green: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-green));
257
+
258
+ --ui-border-green: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-green));
259
+ --ui-border-hover-green: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-green));
260
+ --ui-border-active-green: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-green));
261
+ --ui-border-focus-green: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-green));
262
+ --ui-border-selected-green: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-green));
263
+
264
+ --ui-border-soft-green: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-green));
265
+ --ui-border-soft-hover-green: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-green));
266
+ --ui-border-soft-active-green: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-green));
267
+ --ui-border-soft-focus-green: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-green));
268
+ --ui-border-soft-selected-green: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-green));
269
+
270
+ --ui-bg-soft-green: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-green));
271
+ --ui-bg-soft-hover-green: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-green));
272
+ --ui-bg-soft-active-green: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-green));
273
+ --ui-bg-soft-disabled-green: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-green));
274
+ --ui-text-soft-green: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-green));
275
+ --ui-text-soft-disabled-green: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-green));
276
+
277
+ /* aqua */
278
+ --ui-bg-aqua: oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-aqua));
279
+ --ui-bg-hover-aqua: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-aqua));
280
+ --ui-bg-active-aqua: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-aqua));
281
+ --ui-bg-disabled-aqua: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-aqua));
282
+ --ui-text-aqua: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-aqua));
283
+ --ui-text-disabled-aqua: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-aqua));
284
+
285
+ --ui-border-aqua: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-aqua));
286
+ --ui-border-hover-aqua: oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-aqua));
287
+ --ui-border-active-aqua: oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-aqua));
288
+ --ui-border-focus-aqua: oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-aqua));
289
+ --ui-border-selected-aqua: oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-aqua));
290
+
291
+ --ui-border-soft-aqua: oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-aqua));
292
+ --ui-border-soft-hover-aqua: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-aqua));
293
+ --ui-border-soft-active-aqua: oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-aqua));
294
+ --ui-border-soft-focus-aqua: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-aqua));
295
+ --ui-border-soft-selected-aqua: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-soft) var(--ui-aqua));
296
+
297
+ --ui-bg-soft-aqua: oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-aqua));
298
+ --ui-bg-soft-hover-aqua: oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-aqua));
299
+ --ui-bg-soft-active-aqua: oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-aqua));
300
+ --ui-bg-soft-disabled-aqua: oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-aqua));
301
+ --ui-text-soft-aqua: oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-aqua));
302
+ --ui-text-soft-disabled-aqua: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-aqua));
303
+ }
304
+
305
+ :root[data-theme="dark"] {
306
+ color-scheme: dark;
307
+
308
+ /* chromas */
309
+ --ui-chroma: 0.162;
310
+ }
311
+
312
+ :root {
313
+ color-scheme: light;
314
+
315
+ /* emphasis background lightness */
316
+ --ui-bg-primary-l: 100%;
317
+ --ui-bg-secondary-l: 98%;
318
+ --ui-bg-tertiary-l: 96%;
319
+
320
+ /* emphasis border lightness */
321
+ --ui-border-primary-l: 82%;
322
+ --ui-border-secondary-l: 92%;
323
+ --ui-border-tertiary-l: 96%;
324
+
325
+ /* emphasis text lightness */
326
+ --ui-text-primary-l: 12%;
327
+ --ui-text-secondary-l: 56%;
328
+ --ui-text-tertiary-l: 72%;
329
+
330
+ /* element background lightness */
331
+ --ui-bg-disabled-l: 90%;
332
+ --ui-bg-l: 50%;
333
+ --ui-bg-hover-l: 42%;
334
+ --ui-bg-active-l: 36%;
335
+
336
+ --ui-bg-soft-l: 98%;
337
+ --ui-bg-soft-hover-l: 96%;
338
+ --ui-bg-soft-active-l: 90%;
339
+ --ui-bg-soft-disabled-l: 88%;
340
+
341
+ /* element border lightness */
342
+ --ui-border-l: 86%;
343
+ --ui-border-hover-l: 80%;
344
+ --ui-border-active-l: 72%;
345
+ --ui-border-focus-l: 60%;
346
+ --ui-border-selected-l: 40%;
347
+
348
+ --ui-border-soft-l: 90%;
349
+ --ui-border-soft-hover-l: 84%;
350
+ --ui-border-soft-active-l: 78%;
351
+ --ui-border-soft-focus-l: 60%;
352
+ --ui-border-soft-selected-l: 40%;
353
+
354
+ /* element text lightness */
355
+ --ui-text-l: 96%;
356
+ --ui-text-soft-secondary-l: 64%;
357
+ --ui-text-soft-l: 48%;
358
+
359
+ /* elevation */
360
+ --ui-elevation-sm: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.06);
361
+ --ui-elevation-md: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 6px 0 rgba(0, 0, 0, 0.08), 0 8px 16px 0 rgba(0, 0, 0, 0.06);
362
+ --ui-elevation-lg: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.08);
363
+ }
364
+
365
+ :root[data-theme="dark"] {
366
+ color-scheme: dark;
367
+
368
+ /* emphasis background lightness */
369
+ --ui-bg-primary-l: 4%;
370
+ --ui-bg-secondary-l: 16%;
371
+ --ui-bg-tertiary-l: 22%;
372
+
373
+ /* emphasis text lightness */
374
+ --ui-text-primary-l: 92%;
375
+ --ui-text-secondary-l: 64%;
376
+ --ui-text-tertiary-l: 48%;
377
+
378
+ /* emphasis border lightness */
379
+ --ui-border-primary-l: 32%;
380
+ --ui-border-secondary-l: 24%;
381
+ --ui-border-tertiary-l: 18%;
382
+
383
+ /* element background lightness */
384
+ --ui-bg-disabled-l: 24%;
385
+ --ui-bg-l: 36%;
386
+ --ui-bg-hover-l: 40%;
387
+ --ui-bg-active-l: 44%;
388
+
389
+ --ui-bg-soft-l: 22%;
390
+ --ui-bg-soft-hover-l: 26%;
391
+ --ui-bg-soft-active-l: 30%;
392
+ --ui-bg-soft-disabled-l: 20%;
393
+
394
+ /* element border lightness */
395
+ --ui-border-l: 36%;
396
+ --ui-border-hover-l: 50%;
397
+ --ui-border-active-l: 64%;
398
+ --ui-border-focus-l: 48%;
399
+ --ui-border-selected-l: 78%;
400
+
401
+ --ui-border-soft-l: 32%;
402
+ --ui-border-soft-hover-l: 40%;
403
+ --ui-border-soft-active-l: 48%;
404
+ --ui-border-soft-focus-l: 40%;
405
+ --ui-border-soft-selected-l: 78%;
406
+
407
+ /* element text lightness */
408
+ --ui-text-l: 96%;
409
+ --ui-text-soft-secondary-l: 48%;
410
+ --ui-text-soft-l: 80%;
411
+
412
+ /* elevation */
413
+ --ui-elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.024);
414
+ --ui-elevation-md: 0 0 4px 4px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--ui-border);
415
+ --ui-elevation-lg: 0 0 0 1px rgba(255, 255, 255, 0.024), 0 8px 24px 0 rgba(0, 0, 0, 0.4);
416
+ }
package/css/core.scale.css ADDED
@@ -0,0 +1,47 @@
1
+ :root {
2
+ --space-px: 1px;
3
+ --space-1: 2px;
4
+ --space-2: 4px;
5
+ --space-3: 6px;
6
+ --space-4: 8px;
7
+ --space-5: 10px;
8
+ --space-6: 12px;
9
+ --space-7: 14px;
10
+ --space-8: 16px;
11
+ --space-9: 18px;
12
+ --space-10: 20px;
13
+ --space-11: 22px;
14
+ --space-12: 24px;
15
+ --space-13: 26px;
16
+ --space-14: 28px;
17
+ --space-15: 30px;
18
+ --space-16: 32px;
19
+ --space-24: 48px;
20
+ --space-32: 64px;
21
+ --space-40: 80px;
22
+ --space-48: 96px;
23
+
24
+ --radius-xs: 2px;
25
+ --radius-sm: 4px;
26
+ --radius-md: 8px;
27
+ --radius-lg: 12px;
28
+ --radius-xl: 16px;
29
+
30
+ --speed-xs: 64ms;
31
+ --speed-sm: 96ms;
32
+ --speed-md: 128ms;
33
+ --speed-lg: 160ms;
34
+ --speed-xl: 192ms;
35
+
36
+ --z-index-0: 0;
37
+ --z-index-1: 10;
38
+ --z-index-2: 20;
39
+ --z-index-3: 30;
40
+ --z-index-4: 40;
41
+ --z-index-5: 50;
42
+ --z-index-6: 60;
43
+ --z-index-7: 70;
44
+ --z-index-8: 80;
45
+ --z-index-9: 90;
46
+ --z-index-10: 100;
47
+ }
package/css/core.setup.css ADDED
@@ -0,0 +1,26 @@
1
+ html {
2
+ overscroll-behavior: none;
3
+ }
4
+
5
+ body {
6
+ min-width: 100vw;
7
+
8
+ background-color: var(--ui-bg-secondary);
9
+ color: var(--ui-text-primary);
10
+
11
+ font-size: 100%;
12
+ }
13
+
14
+ a {
15
+ color: currentcolor;
16
+ cursor: pointer;
17
+ }
18
+
19
+ *:focus-visible {
20
+ outline: 2px solid var(--ui-border-active-orange);
21
+ outline-offset: 2px;
22
+ }
23
+
24
+ *::selection {
25
+ background-color: var(--ui-bg-soft-active-orange);
26
+ }
package/css/core.typography.css ADDED
@@ -0,0 +1,55 @@
1
+ :root {
2
+ font-family: var(--font-family-sans);
3
+ font-feature-settings:
4
+ "calt" 1,
5
+ "cv01" 1,
6
+ "cv02" 1,
7
+ "cv03" 1,
8
+ "cv04" 1,
9
+ "cv06" 1,
10
+ "cv10" 1,
11
+ "cv09" 1,
12
+ "dlig" 1,
13
+ "ordn" 1,
14
+ "tnum" 1,
15
+ "ss03" 1,
16
+ "zero" 1;
17
+
18
+ --font-size-h0: 48px;
19
+ --font-size-h1: 36px;
20
+ --font-size-h2: 32px;
21
+ --font-size-h3: 28px;
22
+ --font-size-h4: 24px;
23
+ --font-size-h5: 20px;
24
+ --font-size-h6: 18px;
25
+ --font-size-p: 16px;
26
+ --font-size-small: 14px;
27
+ --font-size-tiny: 12px;
28
+ --font-size-micro: 10px;
29
+
30
+ --line-height-h0: 64px;
31
+ --line-height-h1: 44px;
32
+ --line-height-h2: 40px;
33
+ --line-height-h3: 36px;
34
+ --line-height-h4: 32px;
35
+ --line-height-h5: 26px;
36
+ --line-height-h6: 24px;
37
+ --line-height-p: 24px;
38
+ --line-height-small: 22px;
39
+ --line-height-tiny: 18px;
40
+ --line-height-micro: 14px;
41
+
42
+ --font-family-sans: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
43
+ --font-family-mono: "JetBrains Mono", courier, monospace;
44
+ --font-family-serif: "Times New Roman", Times, Georgia;
45
+
46
+ --font-weight-thin: 100;
47
+ --font-weight-extra-light: 200;
48
+ --font-weight-light: 300;
49
+ --font-weight-normal: 400;
50
+ --font-weight-medium: 500;
51
+ --font-weight-semi-bold: 600;
52
+ --font-weight-bold: 700;
53
+ --font-weight-extra-bold: 800;
54
+ --font-weight-black: 900;
55
+ }
package/css/feat.atomics.css ADDED
@@ -0,0 +1,95 @@
1
+ /* TODO sync with css */
2
+
3
+ /* background */
4
+ .ui-bg,
5
+ .ui-bg-primary {
6
+ background-color: var(--ui-bg-primary);
7
+ }
8
+
9
+ .ui-bg-secondary {
10
+ background-color: var(--ui-bg-secondary);
11
+ }
12
+
13
+ .ui-bg-tertiary {
14
+ background-color: var(--ui-bg-tertiary);
15
+ }
16
+
17
+ .ui-bg-glass {
18
+ background-color: var(--ui-bg-glass);
19
+ backdrop-filter: blur(3px);
20
+ }
21
+
22
+ /* scrollbar */
23
+ .ui-scrollbar::-webkit-scrollbar {
24
+ height: 10px;
25
+ width: 10px;
26
+ }
27
+
28
+ .ui-scrollbar--narrow::-webkit-scrollbar {
29
+ height: 6px;
30
+ width: 6px;
31
+ }
32
+
33
+ .ui-scrollbar::-webkit-scrollbar-corner {
34
+ background-color: var(--ui-bg-disabled);
35
+ }
36
+
37
+ .ui-scrollbar::-webkit-scrollbar-thumb {
38
+ background-color: var(--ui-bg-secondary);
39
+ border-left: 1px solid var(--ui-border-secondary);
40
+ border-right: 1px solid var(--ui-border-secondary);
41
+ box-shadow: 1px 0 0 1px var(--ui-border-secondary);
42
+ transition: all var(--speed-sm) var(--ease-in-out-sine);
43
+ }
44
+
45
+ .ui-scrollbar::-webkit-scrollbar-track {
46
+ background-color: var(--ui-bg-light);
47
+ }
48
+
49
+ .ui-scrollbar::-webkit-scrollbar-thumb:hover {
50
+ background-color: var(--ui-bg-secondary);
51
+ }
52
+
53
+ .ui-scrollbar::-webkit-scrollbar-thumb:active {
54
+ background-color: var(--ui-bg-disabled);
55
+ }
56
+
57
+ /* elevation */
58
+ .elevation-sm {
59
+ box-shadow: var(--ui-elevation-sm);
60
+ }
61
+
62
+ .elevation-md {
63
+ box-shadow: var(--ui-elevation-md);
64
+ }
65
+
66
+ .elevation-lg {
67
+ box-shadow: var(--ui-elevation-lg);
68
+ }
69
+
70
+ /* debug */
71
+ .debug * {
72
+ box-shadow: inset 0 0 0 1px var(--ui-bg-red);
73
+ }
74
+
75
+ .debug *[data-ui-component] {
76
+ box-shadow: inset 0 0 0 1px var(--ui-bg-red);
77
+ }
78
+
79
+ .debug *[data-ui-component]::before {
80
+ position: absolute;
81
+ top: 0;
82
+ left: 0;
83
+
84
+ padding: 0 4px;
85
+
86
+ background-color: var(--ui-bg-red);
87
+ border-radius: var(--radius-sm);
88
+ color: white;
89
+
90
+ line-height: var(--line-height-micro);
91
+ font-size: var(--font-size-micro);
92
+ pointer-events: none;
93
+ user-select: none;
94
+ content: attr(data-ui-component);
95
+ }
package/css/feat.markdown.css ADDED
@@ -0,0 +1,37 @@
1
+ .hljs-title,
2
+ .hljs-property,
3
+ .hljs-name,
4
+ .hljs-keyword {
5
+ font-weight: var(--font-weight-bold);
6
+ }
7
+
8
+ .hljs-literal,
9
+ .hljs-keyword {
10
+ color: var(--ui-text-intent-danger);
11
+ }
12
+
13
+ .hljs-number {
14
+ color: var(--ui-text-intent-silent);
15
+ }
16
+
17
+ .hljs-title,
18
+ .hljs-property {
19
+ color: var(--ui-text-intent-advise);
20
+ }
21
+
22
+ .hljs-function {
23
+ color: var(--ui-text-intent-silent);
24
+ }
25
+
26
+ .hljs-attr,
27
+ .hljs-title.function_ {
28
+ color: var(--ui-text-intent-confirmation);
29
+ }
30
+
31
+ .hljs-string {
32
+ color: var(--ui-text-intent-advise);
33
+ }
34
+
35
+ .hljs-name {
36
+ color: var(--ui-text-intent-success);
37
+ }