@yewdiel21/motion-kit 0.10.0 → 0.14.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 (365) hide show
  1. package/README.md +155 -93
  2. package/dist/auto/index.d.ts +53 -3
  3. package/dist/auto/index.js +101 -3
  4. package/dist/auto/index.js.map +1 -1
  5. package/dist/{chunk-IKQ5FODN.js → chunk-6P4P7NU6.js} +2 -218
  6. package/dist/chunk-6P4P7NU6.js.map +1 -0
  7. package/dist/chunk-CU6SXW3E.js +20334 -0
  8. package/dist/chunk-CU6SXW3E.js.map +1 -0
  9. package/dist/{chunk-XAKC2QY7.js → chunk-EY4BJKC4.js} +3 -28
  10. package/dist/chunk-EY4BJKC4.js.map +1 -0
  11. package/dist/chunk-QP4QJOEN.js +72 -0
  12. package/dist/chunk-QP4QJOEN.js.map +1 -0
  13. package/dist/css/components/activity-feed.css +240 -0
  14. package/dist/css/components/attachment.css +266 -0
  15. package/dist/css/components/breadcrumb.css +110 -0
  16. package/dist/css/components/chart-tooltip.css +168 -0
  17. package/dist/css/components/chart.css +296 -0
  18. package/dist/css/components/code-block.css +264 -0
  19. package/dist/css/components/color-area.css +82 -0
  20. package/dist/css/components/color-field.css +67 -0
  21. package/dist/css/components/color-picker.css +131 -0
  22. package/dist/css/components/color-slider.css +113 -0
  23. package/dist/css/components/command-search.css +252 -0
  24. package/dist/css/components/context-menu.css +23 -0
  25. package/dist/css/components/credit-card.css +288 -0
  26. package/dist/css/components/data-table.css +591 -0
  27. package/dist/css/components/date-range-picker.css +168 -0
  28. package/dist/css/components/date-time-picker.css +178 -0
  29. package/dist/css/components/drawer.css +58 -0
  30. package/dist/css/components/editable-table.css +201 -0
  31. package/dist/css/components/empty-state.css +61 -0
  32. package/dist/css/components/file-explorer.css +633 -0
  33. package/dist/css/components/filter-builder.css +232 -0
  34. package/dist/css/components/hold-confirm.css +87 -0
  35. package/dist/css/components/hover-card.css +13 -7
  36. package/dist/css/components/image-preview.css +195 -0
  37. package/dist/css/components/json-viewer.css +272 -0
  38. package/dist/css/components/like-button.css +78 -0
  39. package/dist/css/components/link-preview.css +275 -0
  40. package/dist/css/components/loading-button.css +77 -0
  41. package/dist/css/components/multi-select.css +267 -0
  42. package/dist/css/components/notification-bell.css +127 -0
  43. package/dist/css/components/password-strength.css +183 -0
  44. package/dist/css/components/popover.css +25 -0
  45. package/dist/css/components/progress.css +140 -0
  46. package/dist/css/components/questionnaire.css +217 -0
  47. package/dist/css/components/range-calendar.css +186 -0
  48. package/dist/css/components/range-slider.css +192 -0
  49. package/dist/css/components/resizable-panel.css +243 -0
  50. package/dist/css/components/rich-text-editor.css +284 -0
  51. package/dist/css/components/scratch-card.css +75 -0
  52. package/dist/css/components/skeleton.css +108 -0
  53. package/dist/css/components/split-view.css +19 -0
  54. package/dist/css/components/star-rating.css +80 -0
  55. package/dist/css/components/stat-card.css +164 -0
  56. package/dist/css/components/swipe-actions.css +105 -0
  57. package/dist/css/components/tag-input.css +244 -0
  58. package/dist/css/components/time-field.css +88 -0
  59. package/dist/css/components/timeline.css +219 -0
  60. package/dist/css/components/tooltip.css +79 -0
  61. package/dist/css/components/tree-view.css +210 -0
  62. package/dist/css/components/virtual-list.css +195 -0
  63. package/dist/css/tokens.css +185 -181
  64. package/dist/elements/index.d.ts +674 -5
  65. package/dist/elements/index.js +1361 -8
  66. package/dist/elements/index.js.map +1 -1
  67. package/dist/{engine-GDGwQnJE.d.ts → engine-Cn6IhE3z.d.ts} +1 -1
  68. package/dist/engine-QECQnGz1.d.ts +33 -0
  69. package/dist/index.css +9104 -189
  70. package/dist/index.d.ts +89 -5
  71. package/dist/index.js +243 -9
  72. package/dist/index.js.map +1 -1
  73. package/dist/react/index.d.ts +579 -23
  74. package/dist/react/index.js +2042 -7
  75. package/dist/react/index.js.map +1 -1
  76. package/dist/{reduced-BmBzKH94.d.ts → reduced-BBUusld6.d.ts} +9 -2
  77. package/dist/reveal-DEvp6U6T.d.ts +2381 -0
  78. package/dist/{store-DYb3tTsZ.d.ts → store-DjkTBX7f.d.ts} +2 -2
  79. package/package.json +1 -1
  80. package/registry.json +406 -1
  81. package/src/auto/auto-init.ts +98 -0
  82. package/src/components/activity-feed/README.md +56 -0
  83. package/src/components/activity-feed/activity-feed.css +239 -0
  84. package/src/components/activity-feed/element.ts +36 -0
  85. package/src/components/activity-feed/engine.ts +351 -0
  86. package/src/components/activity-feed/react.tsx +32 -0
  87. package/src/components/attachment/README.md +27 -0
  88. package/src/components/attachment/attachment.css +265 -0
  89. package/src/components/attachment/element.ts +50 -0
  90. package/src/components/attachment/engine.ts +469 -0
  91. package/src/components/attachment/react.tsx +65 -0
  92. package/src/components/breadcrumb/README.md +38 -0
  93. package/src/components/breadcrumb/breadcrumb.css +109 -0
  94. package/src/components/breadcrumb/element.ts +27 -0
  95. package/src/components/breadcrumb/engine.ts +249 -0
  96. package/src/components/breadcrumb/react.tsx +30 -0
  97. package/src/components/chart/README.md +24 -0
  98. package/src/components/chart/chart.css +295 -0
  99. package/src/components/chart/element.ts +41 -0
  100. package/src/components/chart/engine.ts +811 -0
  101. package/src/components/chart/react.tsx +50 -0
  102. package/src/components/chart-tooltip/README.md +53 -0
  103. package/src/components/chart-tooltip/chart-tooltip.css +167 -0
  104. package/src/components/chart-tooltip/element.ts +37 -0
  105. package/src/components/chart-tooltip/engine.ts +442 -0
  106. package/src/components/chart-tooltip/react.tsx +47 -0
  107. package/src/components/code-block/README.md +19 -0
  108. package/src/components/code-block/code-block.css +263 -0
  109. package/src/components/code-block/element.ts +34 -0
  110. package/src/components/code-block/engine.ts +254 -0
  111. package/src/components/code-block/highlight.ts +244 -0
  112. package/src/components/code-block/react.tsx +94 -0
  113. package/src/components/color-area/README.md +50 -0
  114. package/src/components/color-area/color-area.css +81 -0
  115. package/src/components/color-area/element.ts +26 -0
  116. package/src/components/color-area/engine.ts +246 -0
  117. package/src/components/color-area/react.tsx +42 -0
  118. package/src/components/color-field/README.md +43 -0
  119. package/src/components/color-field/color-field.css +66 -0
  120. package/src/components/color-field/element.ts +26 -0
  121. package/src/components/color-field/engine.ts +174 -0
  122. package/src/components/color-field/react.tsx +42 -0
  123. package/src/components/color-picker/README.md +45 -0
  124. package/src/components/color-picker/color-picker.css +130 -0
  125. package/src/components/color-picker/element.ts +45 -0
  126. package/src/components/color-picker/engine.ts +314 -0
  127. package/src/components/color-picker/react.tsx +47 -0
  128. package/src/components/color-slider/README.md +55 -0
  129. package/src/components/color-slider/color-slider.css +112 -0
  130. package/src/components/color-slider/element.ts +26 -0
  131. package/src/components/color-slider/engine.ts +234 -0
  132. package/src/components/color-slider/react.tsx +45 -0
  133. package/src/components/command-search/README.md +15 -0
  134. package/src/components/command-search/command-search.css +251 -0
  135. package/src/components/command-search/element.ts +36 -0
  136. package/src/components/command-search/engine.ts +356 -0
  137. package/src/components/command-search/match.ts +53 -0
  138. package/src/components/command-search/react.tsx +66 -0
  139. package/src/components/context-menu/README.md +31 -0
  140. package/src/components/context-menu/context-menu.css +22 -0
  141. package/src/components/context-menu/element.ts +40 -0
  142. package/src/components/context-menu/engine.ts +153 -0
  143. package/src/components/context-menu/react.tsx +57 -0
  144. package/src/components/credit-card/README.md +20 -0
  145. package/src/components/credit-card/card.ts +77 -0
  146. package/src/components/credit-card/credit-card.css +287 -0
  147. package/src/components/credit-card/element.ts +33 -0
  148. package/src/components/credit-card/engine.ts +410 -0
  149. package/src/components/credit-card/react.tsx +36 -0
  150. package/src/components/data-table/README.md +83 -0
  151. package/src/components/data-table/data-table.css +590 -0
  152. package/src/components/data-table/element.ts +54 -0
  153. package/src/components/data-table/engine.ts +1059 -0
  154. package/src/components/data-table/react.tsx +94 -0
  155. package/src/components/date-range-picker/README.md +51 -0
  156. package/src/components/date-range-picker/date-range-picker.css +167 -0
  157. package/src/components/date-range-picker/element.ts +52 -0
  158. package/src/components/date-range-picker/engine.ts +352 -0
  159. package/src/components/date-range-picker/react.tsx +57 -0
  160. package/src/components/date-time-picker/README.md +48 -0
  161. package/src/components/date-time-picker/date-time-picker.css +177 -0
  162. package/src/components/date-time-picker/element.ts +47 -0
  163. package/src/components/date-time-picker/engine.ts +350 -0
  164. package/src/components/date-time-picker/react.tsx +54 -0
  165. package/src/components/dialog/README.md +103 -102
  166. package/src/components/dialog/element.ts +123 -118
  167. package/src/components/dialog/engine.ts +449 -432
  168. package/src/components/drawer/README.md +28 -0
  169. package/src/components/drawer/drawer.css +57 -0
  170. package/src/components/drawer/element.ts +21 -0
  171. package/src/components/drawer/engine.ts +56 -0
  172. package/src/components/drawer/react.tsx +85 -0
  173. package/src/components/editable-table/README.md +67 -0
  174. package/src/components/editable-table/editable-table.css +200 -0
  175. package/src/components/editable-table/element.ts +45 -0
  176. package/src/components/editable-table/engine.ts +775 -0
  177. package/src/components/editable-table/react.tsx +79 -0
  178. package/src/components/empty-state/README.md +41 -0
  179. package/src/components/empty-state/element.ts +23 -0
  180. package/src/components/empty-state/empty-state.css +60 -0
  181. package/src/components/empty-state/engine.ts +232 -0
  182. package/src/components/empty-state/react.tsx +34 -0
  183. package/src/components/file-explorer/README.md +67 -0
  184. package/src/components/file-explorer/element.ts +39 -0
  185. package/src/components/file-explorer/engine.ts +1307 -0
  186. package/src/components/file-explorer/file-explorer.css +632 -0
  187. package/src/components/file-explorer/react.tsx +77 -0
  188. package/src/components/filter-builder/README.md +47 -0
  189. package/src/components/filter-builder/element.ts +34 -0
  190. package/src/components/filter-builder/engine.ts +365 -0
  191. package/src/components/filter-builder/filter-builder.css +231 -0
  192. package/src/components/filter-builder/react.tsx +36 -0
  193. package/src/components/hold-confirm/README.md +13 -0
  194. package/src/components/hold-confirm/element.ts +24 -0
  195. package/src/components/hold-confirm/engine.ts +216 -0
  196. package/src/components/hold-confirm/hold-confirm.css +86 -0
  197. package/src/components/hold-confirm/react.tsx +28 -0
  198. package/src/components/hover-card/README.md +6 -2
  199. package/src/components/hover-card/engine.ts +68 -6
  200. package/src/components/hover-card/hover-card.css +13 -7
  201. package/src/components/image-preview/README.md +16 -0
  202. package/src/components/image-preview/element.ts +26 -0
  203. package/src/components/image-preview/engine.ts +325 -0
  204. package/src/components/image-preview/image-preview.css +194 -0
  205. package/src/components/image-preview/react.tsx +43 -0
  206. package/src/components/json-viewer/README.md +56 -0
  207. package/src/components/json-viewer/element.ts +37 -0
  208. package/src/components/json-viewer/engine.ts +440 -0
  209. package/src/components/json-viewer/json-viewer.css +271 -0
  210. package/src/components/json-viewer/react.tsx +56 -0
  211. package/src/components/like-button/README.md +13 -0
  212. package/src/components/like-button/element.ts +47 -0
  213. package/src/components/like-button/engine.ts +145 -0
  214. package/src/components/like-button/like-button.css +77 -0
  215. package/src/components/like-button/react.tsx +39 -0
  216. package/src/components/link-preview/README.md +19 -0
  217. package/src/components/link-preview/element.ts +29 -0
  218. package/src/components/link-preview/engine.ts +192 -0
  219. package/src/components/link-preview/link-preview.css +274 -0
  220. package/src/components/link-preview/react.tsx +101 -0
  221. package/src/components/loading-button/README.md +45 -0
  222. package/src/components/loading-button/element.ts +34 -0
  223. package/src/components/loading-button/engine.ts +201 -0
  224. package/src/components/loading-button/loading-button.css +76 -0
  225. package/src/components/loading-button/react.tsx +43 -0
  226. package/src/components/multi-select/README.md +48 -0
  227. package/src/components/multi-select/element.ts +28 -0
  228. package/src/components/multi-select/engine.ts +294 -0
  229. package/src/components/multi-select/multi-select.css +266 -0
  230. package/src/components/multi-select/react.tsx +39 -0
  231. package/src/components/notification-bell/README.md +14 -0
  232. package/src/components/notification-bell/element.ts +48 -0
  233. package/src/components/notification-bell/engine.ts +202 -0
  234. package/src/components/notification-bell/notification-bell.css +126 -0
  235. package/src/components/notification-bell/react.tsx +57 -0
  236. package/src/components/password-strength/README.md +17 -0
  237. package/src/components/password-strength/element.ts +22 -0
  238. package/src/components/password-strength/engine.ts +212 -0
  239. package/src/components/password-strength/password-strength.css +182 -0
  240. package/src/components/password-strength/react.tsx +36 -0
  241. package/src/components/password-strength/score.ts +62 -0
  242. package/src/components/popover/README.md +44 -0
  243. package/src/components/popover/element.ts +31 -0
  244. package/src/components/popover/engine.ts +114 -0
  245. package/src/components/popover/popover.css +24 -0
  246. package/src/components/popover/react.tsx +50 -0
  247. package/src/components/progress/README.md +17 -0
  248. package/src/components/progress/element.ts +30 -0
  249. package/src/components/progress/engine.ts +173 -0
  250. package/src/components/progress/progress.css +139 -0
  251. package/src/components/progress/react.tsx +35 -0
  252. package/src/components/questionnaire/README.md +32 -0
  253. package/src/components/questionnaire/element.ts +118 -0
  254. package/src/components/questionnaire/engine.ts +255 -0
  255. package/src/components/questionnaire/questionnaire.css +216 -0
  256. package/src/components/questionnaire/react.tsx +140 -0
  257. package/src/components/range-calendar/README.md +58 -0
  258. package/src/components/range-calendar/element.ts +42 -0
  259. package/src/components/range-calendar/engine.ts +390 -0
  260. package/src/components/range-calendar/range-calendar.css +185 -0
  261. package/src/components/range-calendar/react.tsx +56 -0
  262. package/src/components/range-slider/README.md +23 -0
  263. package/src/components/range-slider/element.ts +53 -0
  264. package/src/components/range-slider/engine.ts +316 -0
  265. package/src/components/range-slider/range-slider.css +191 -0
  266. package/src/components/range-slider/react.tsx +66 -0
  267. package/src/components/resizable-panel/README.md +61 -0
  268. package/src/components/resizable-panel/element.ts +36 -0
  269. package/src/components/resizable-panel/engine.ts +551 -0
  270. package/src/components/resizable-panel/react.tsx +74 -0
  271. package/src/components/resizable-panel/resizable-panel.css +242 -0
  272. package/src/components/rich-text-editor/README.md +57 -0
  273. package/src/components/rich-text-editor/element.ts +34 -0
  274. package/src/components/rich-text-editor/engine.ts +673 -0
  275. package/src/components/rich-text-editor/react.tsx +60 -0
  276. package/src/components/rich-text-editor/rich-text-editor.css +283 -0
  277. package/src/components/scratch-card/README.md +15 -0
  278. package/src/components/scratch-card/element.ts +30 -0
  279. package/src/components/scratch-card/engine.ts +257 -0
  280. package/src/components/scratch-card/react.tsx +40 -0
  281. package/src/components/scratch-card/scratch-card.css +74 -0
  282. package/src/components/skeleton/README.md +15 -0
  283. package/src/components/skeleton/element.ts +32 -0
  284. package/src/components/skeleton/engine.ts +104 -0
  285. package/src/components/skeleton/react.tsx +41 -0
  286. package/src/components/skeleton/skeleton.css +107 -0
  287. package/src/components/split-view/README.md +50 -0
  288. package/src/components/split-view/element.ts +34 -0
  289. package/src/components/split-view/engine.ts +114 -0
  290. package/src/components/split-view/react.tsx +63 -0
  291. package/src/components/split-view/split-view.css +18 -0
  292. package/src/components/star-rating/README.md +14 -0
  293. package/src/components/star-rating/element.ts +26 -0
  294. package/src/components/star-rating/engine.ts +217 -0
  295. package/src/components/star-rating/react.tsx +33 -0
  296. package/src/components/star-rating/star-rating.css +79 -0
  297. package/src/components/stat-card/README.md +42 -0
  298. package/src/components/stat-card/element.ts +40 -0
  299. package/src/components/stat-card/engine.ts +283 -0
  300. package/src/components/stat-card/react.tsx +36 -0
  301. package/src/components/stat-card/stat-card.css +163 -0
  302. package/src/components/swipe-actions/README.md +19 -0
  303. package/src/components/swipe-actions/element.ts +26 -0
  304. package/src/components/swipe-actions/engine.ts +260 -0
  305. package/src/components/swipe-actions/react.tsx +80 -0
  306. package/src/components/swipe-actions/swipe-actions.css +104 -0
  307. package/src/components/tag-input/README.md +42 -0
  308. package/src/components/tag-input/element.ts +39 -0
  309. package/src/components/tag-input/engine.ts +313 -0
  310. package/src/components/tag-input/react.tsx +54 -0
  311. package/src/components/tag-input/tag-input.css +243 -0
  312. package/src/components/time-field/README.md +54 -0
  313. package/src/components/time-field/element.ts +38 -0
  314. package/src/components/time-field/engine.ts +110 -0
  315. package/src/components/time-field/react.tsx +45 -0
  316. package/src/components/time-field/time-field.css +87 -0
  317. package/src/components/timeline/README.md +57 -0
  318. package/src/components/timeline/element.ts +31 -0
  319. package/src/components/timeline/engine.ts +300 -0
  320. package/src/components/timeline/react.tsx +59 -0
  321. package/src/components/timeline/timeline.css +218 -0
  322. package/src/components/tooltip/README.md +46 -0
  323. package/src/components/tooltip/element.ts +22 -0
  324. package/src/components/tooltip/engine.ts +288 -0
  325. package/src/components/tooltip/react.tsx +30 -0
  326. package/src/components/tooltip/tooltip.css +78 -0
  327. package/src/components/tree-view/README.md +61 -0
  328. package/src/components/tree-view/element.ts +32 -0
  329. package/src/components/tree-view/engine.ts +569 -0
  330. package/src/components/tree-view/react.tsx +78 -0
  331. package/src/components/tree-view/tree-view.css +209 -0
  332. package/src/components/virtual-list/README.md +81 -0
  333. package/src/components/virtual-list/element.ts +42 -0
  334. package/src/components/virtual-list/engine.ts +678 -0
  335. package/src/components/virtual-list/react.tsx +101 -0
  336. package/src/components/virtual-list/virtual-list.css +194 -0
  337. package/src/core/chips.ts +196 -0
  338. package/src/core/color.ts +304 -0
  339. package/src/core/date-range.ts +67 -0
  340. package/src/core/dates.ts +11 -1
  341. package/src/core/files.ts +107 -0
  342. package/src/core/filter.ts +229 -0
  343. package/src/core/gsap.ts +80 -65
  344. package/src/core/listbox.ts +332 -0
  345. package/src/core/mark.ts +29 -0
  346. package/src/core/position.ts +89 -0
  347. package/src/core/relative-time.ts +77 -0
  348. package/src/core/segment-field.ts +373 -0
  349. package/src/core/segments.ts +153 -0
  350. package/src/core/tree.ts +116 -0
  351. package/src/core/virtual.ts +79 -0
  352. package/src/css/tokens.css +186 -182
  353. package/src/elements/index.ts +147 -0
  354. package/src/index.ts +72 -0
  355. package/src/motion/micro.ts +248 -0
  356. package/src/motion/sheet.ts +88 -65
  357. package/src/motion/surface.ts +9 -0
  358. package/src/react/index.ts +57 -0
  359. package/dist/chunk-IKQ5FODN.js.map +0 -1
  360. package/dist/chunk-J6OCFNGU.js +0 -177
  361. package/dist/chunk-J6OCFNGU.js.map +0 -1
  362. package/dist/chunk-TFNRIZHU.js +0 -3977
  363. package/dist/chunk-TFNRIZHU.js.map +0 -1
  364. package/dist/chunk-XAKC2QY7.js.map +0 -1
  365. package/dist/reveal-jsX-uwUz.d.ts +0 -625
package/dist/css/tokens.css CHANGED
@@ -1,185 +1,189 @@
1
1
  /* css/tokens.css */
2
- /* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
3
- :root {
4
- /* Elastic curves */
5
- --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
6
- --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
7
-
8
- /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
9
- --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
10
- /* backdrop tint uses the same curve. */
11
- --mk-ease-tint: var(--mk-ease-signature);
12
- --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
13
- --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
14
- --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
15
- --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
16
- --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
17
- --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
18
- --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
19
- --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
20
- /* Glass, sheet and control curves */
21
- --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
22
- --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
23
- --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
24
- --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
25
- /* springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
26
- --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
27
- --mk-dur-press: 1.346s;
28
- --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
29
- --mk-dur-success: 0.779s;
30
- --mk-dur-fast: 0.25s;
31
- --mk-dur: 0.45s;
32
- --mk-dur-slow: 0.7s;
33
-
34
- /* Layered shadow */
35
- --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
36
- --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
37
-
38
- /* Shape: large capsules */
39
- --mk-radius-card: 1rem;
40
- --mk-radius-xs: 8px;
41
- --mk-radius-sm: 12px;
42
- --mk-radius-md: 16px;
43
- --mk-radius-lg: 24px;
44
- --mk-radius-xl: 32px;
45
- --mk-radius-2xl: 40px;
46
- --mk-radius-3xl: 48px;
47
- --mk-radius-4xl: 64px;
48
- --mk-radius-full: 999px;
49
- --mk-radius-bubble: var(--mk-radius-xl);
50
- --mk-radius-dialog: var(--mk-radius-2xl);
51
- --mk-radius-chat: var(--mk-radius-3xl);
52
- --mk-radius-dock: var(--mk-radius-4xl);
53
-
54
- /* Spacing, 4 px steps. navigation breakpoint is 680px (media queries use it literally). */
55
- --mk-space-1: 4px;
56
- --mk-space-2: 8px;
57
- --mk-space-3: 12px;
58
- --mk-space-4: 16px;
59
- --mk-space-5: 20px;
60
- --mk-space-6: 24px;
61
- --mk-space-7: 28px;
62
- --mk-space-8: 32px;
63
- --mk-space-9: 36px;
64
- --mk-space-10: 40px;
65
- --mk-space-11: 44px;
66
- --mk-space-12: 48px;
67
- --mk-space-13: 52px;
68
- --mk-space-14: 56px;
69
- --mk-space-15: 60px;
70
- --mk-space-16: 64px;
71
- --mk-breakpoint: 680px;
72
-
73
- /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
74
- --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
75
- --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
76
- /* Material 3 type scale; font weights are unitless. */
77
- --md-sys-typescale-display-large-font: var(--mk-font);
78
- --md-sys-typescale-display-large-size: 57px;
79
- --md-sys-typescale-display-large-line-height: 64px;
80
- --md-sys-typescale-display-large-weight: 400;
81
- --md-sys-typescale-display-large-tracking: -0.25px;
82
- --md-sys-typescale-display-medium-font: var(--mk-font);
83
- --md-sys-typescale-display-medium-size: 45px;
84
- --md-sys-typescale-display-medium-line-height: 52px;
85
- --md-sys-typescale-display-medium-weight: 400;
86
- --md-sys-typescale-display-medium-tracking: 0px;
87
- --md-sys-typescale-display-small-font: var(--mk-font);
88
- --md-sys-typescale-display-small-size: 36px;
89
- --md-sys-typescale-display-small-line-height: 44px;
90
- --md-sys-typescale-display-small-weight: 400;
91
- --md-sys-typescale-display-small-tracking: 0px;
92
- --md-sys-typescale-headline-large-font: var(--mk-font);
93
- --md-sys-typescale-headline-large-size: 32px;
94
- --md-sys-typescale-headline-large-line-height: 40px;
95
- --md-sys-typescale-headline-large-weight: 400;
96
- --md-sys-typescale-headline-large-tracking: 0px;
97
- --md-sys-typescale-headline-medium-font: var(--mk-font);
98
- --md-sys-typescale-headline-medium-size: 28px;
99
- --md-sys-typescale-headline-medium-line-height: 36px;
100
- --md-sys-typescale-headline-medium-weight: 400;
101
- --md-sys-typescale-headline-medium-tracking: 0px;
102
- --md-sys-typescale-headline-small-font: var(--mk-font);
103
- --md-sys-typescale-headline-small-size: 24px;
104
- --md-sys-typescale-headline-small-line-height: 32px;
105
- --md-sys-typescale-headline-small-weight: 400;
106
- --md-sys-typescale-headline-small-tracking: 0px;
107
- --md-sys-typescale-title-large-font: var(--mk-font);
108
- --md-sys-typescale-title-large-size: 22px;
109
- --md-sys-typescale-title-large-line-height: 28px;
110
- --md-sys-typescale-title-large-weight: 400;
111
- --md-sys-typescale-title-large-tracking: 0px;
112
- --md-sys-typescale-title-medium-font: var(--mk-font);
113
- --md-sys-typescale-title-medium-size: 16px;
114
- --md-sys-typescale-title-medium-line-height: 24px;
115
- --md-sys-typescale-title-medium-weight: 500;
116
- --md-sys-typescale-title-medium-tracking: 0.15px;
117
- --md-sys-typescale-title-small-font: var(--mk-font);
118
- --md-sys-typescale-title-small-size: 14px;
119
- --md-sys-typescale-title-small-line-height: 20px;
120
- --md-sys-typescale-title-small-weight: 500;
121
- --md-sys-typescale-title-small-tracking: 0.1px;
122
- --md-sys-typescale-body-large-font: var(--mk-font);
123
- --md-sys-typescale-body-large-size: 16px;
124
- --md-sys-typescale-body-large-line-height: 24px;
125
- --md-sys-typescale-body-large-weight: 400;
126
- --md-sys-typescale-body-large-tracking: 0.5px;
127
- --md-sys-typescale-body-medium-font: var(--mk-font);
128
- --md-sys-typescale-body-medium-size: 14px;
129
- --md-sys-typescale-body-medium-line-height: 20px;
130
- --md-sys-typescale-body-medium-weight: 400;
131
- --md-sys-typescale-body-medium-tracking: 0.25px;
132
- --md-sys-typescale-body-small-font: var(--mk-font);
133
- --md-sys-typescale-body-small-size: 12px;
134
- --md-sys-typescale-body-small-line-height: 16px;
135
- --md-sys-typescale-body-small-weight: 400;
136
- --md-sys-typescale-body-small-tracking: 0.4px;
137
- --md-sys-typescale-label-large-font: var(--mk-font);
138
- --md-sys-typescale-label-large-size: 14px;
139
- --md-sys-typescale-label-large-line-height: 20px;
140
- --md-sys-typescale-label-large-weight: 500;
141
- --md-sys-typescale-label-large-tracking: 0.1px;
142
- --md-sys-typescale-label-medium-font: var(--mk-font);
143
- --md-sys-typescale-label-medium-size: 12px;
144
- --md-sys-typescale-label-medium-line-height: 16px;
145
- --md-sys-typescale-label-medium-weight: 500;
146
- --md-sys-typescale-label-medium-tracking: 0.5px;
147
- --md-sys-typescale-label-small-font: var(--mk-font);
148
- --md-sys-typescale-label-small-size: 11px;
149
- --md-sys-typescale-label-small-line-height: 16px;
150
- --md-sys-typescale-label-small-weight: 500;
151
- --md-sys-typescale-label-small-tracking: 0.5px;
152
- }
153
-
154
- /*
155
- * Semantic colour layer over the Material 3 roles. Declared on every themed
156
- * element too, so a nested [data-mk-theme] recomputes it from its own roles.
157
- */
158
- :root,
159
- [data-mk-theme] {
160
- --mk-bg: var(--md-sys-color-background);
161
- --mk-surface: var(--md-sys-color-surface);
162
- --mk-surface-1: var(--md-sys-color-surface-container-lowest);
163
- --mk-surface-2: var(--md-sys-color-surface-container-low);
164
- --mk-surface-3: var(--md-sys-color-surface-container);
165
- --mk-surface-4: var(--md-sys-color-surface-container-high);
166
- --mk-surface-5: var(--md-sys-color-surface-container-highest);
167
- --mk-text: var(--md-sys-color-on-surface);
168
- --mk-muted: var(--md-sys-color-on-surface-variant);
169
- --mk-accent: var(--md-sys-color-primary);
170
- --mk-on-accent: var(--md-sys-color-on-primary);
171
- --mk-accent-soft: var(--md-sys-color-primary-container);
172
- --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
173
- --mk-secondary-soft: var(--md-sys-color-secondary-container);
174
- --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
175
- --mk-outline: var(--md-sys-color-outline);
176
- --mk-outline-soft: var(--md-sys-color-outline-variant);
177
- --mk-error: var(--md-sys-color-error);
178
- --mk-on-error: var(--md-sys-color-on-error);
179
- --mk-error-soft: var(--md-sys-color-error-container);
180
- --mk-on-error-soft: var(--md-sys-color-on-error-container);
181
- --mk-scrim: var(--md-sys-color-scrim);
182
- --mk-shadow-color: var(--md-sys-color-shadow);
2
+ /* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
3
+ :root {
4
+ /* Elastic curves */
5
+ --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
6
+ --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
7
+
8
+ /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
9
+ --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
10
+ /* backdrop tint uses the same curve. */
11
+ --mk-ease-tint: var(--mk-ease-signature);
12
+ --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
13
+ --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
14
+ --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
15
+ --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
16
+ --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
17
+ --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
18
+ --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
19
+ --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
20
+ /* Glass, sheet and control curves */
21
+ --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
22
+ --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
23
+ --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
24
+ --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
25
+ /* springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
26
+ --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
27
+ --mk-dur-press: 1.346s;
28
+ --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
29
+ --mk-dur-success: 0.779s;
30
+ --mk-dur-fast: 0.25s;
31
+ --mk-dur: 0.45s;
32
+ --mk-dur-slow: 0.7s;
33
+
34
+ /* Layered shadow */
35
+ --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
36
+ --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
37
+
38
+ /* Shape: large capsules */
39
+ --mk-radius-card: 1rem;
40
+ --mk-radius-xs: 8px;
41
+ --mk-radius-sm: 12px;
42
+ --mk-radius-md: 16px;
43
+ --mk-radius-lg: 24px;
44
+ --mk-radius-xl: 32px;
45
+ --mk-radius-2xl: 40px;
46
+ --mk-radius-3xl: 48px;
47
+ --mk-radius-4xl: 64px;
48
+ --mk-radius-full: 999px;
49
+ --mk-radius-bubble: var(--mk-radius-xl);
50
+ --mk-radius-dialog: var(--mk-radius-2xl);
51
+ --mk-radius-chat: var(--mk-radius-3xl);
52
+ --mk-radius-dock: var(--mk-radius-4xl);
53
+
54
+ /* Spacing, 4 px steps. navigation breakpoint is 680px (media queries use it literally). */
55
+ --mk-space-1: 4px;
56
+ --mk-space-2: 8px;
57
+ --mk-space-3: 12px;
58
+ --mk-space-4: 16px;
59
+ --mk-space-5: 20px;
60
+ --mk-space-6: 24px;
61
+ --mk-space-7: 28px;
62
+ --mk-space-8: 32px;
63
+ --mk-space-9: 36px;
64
+ --mk-space-10: 40px;
65
+ --mk-space-11: 44px;
66
+ --mk-space-12: 48px;
67
+ --mk-space-13: 52px;
68
+ --mk-space-14: 56px;
69
+ --mk-space-15: 60px;
70
+ --mk-space-16: 64px;
71
+ --mk-breakpoint: 680px;
72
+
73
+ /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
74
+ --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
75
+ --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
76
+ /* Material 3 type scale; font weights are unitless. */
77
+ --md-sys-typescale-display-large-font: var(--mk-font);
78
+ --md-sys-typescale-display-large-size: 57px;
79
+ --md-sys-typescale-display-large-line-height: 64px;
80
+ --md-sys-typescale-display-large-weight: 400;
81
+ --md-sys-typescale-display-large-tracking: -0.25px;
82
+ --md-sys-typescale-display-medium-font: var(--mk-font);
83
+ --md-sys-typescale-display-medium-size: 45px;
84
+ --md-sys-typescale-display-medium-line-height: 52px;
85
+ --md-sys-typescale-display-medium-weight: 400;
86
+ --md-sys-typescale-display-medium-tracking: 0px;
87
+ --md-sys-typescale-display-small-font: var(--mk-font);
88
+ --md-sys-typescale-display-small-size: 36px;
89
+ --md-sys-typescale-display-small-line-height: 44px;
90
+ --md-sys-typescale-display-small-weight: 400;
91
+ --md-sys-typescale-display-small-tracking: 0px;
92
+ --md-sys-typescale-headline-large-font: var(--mk-font);
93
+ --md-sys-typescale-headline-large-size: 32px;
94
+ --md-sys-typescale-headline-large-line-height: 40px;
95
+ --md-sys-typescale-headline-large-weight: 400;
96
+ --md-sys-typescale-headline-large-tracking: 0px;
97
+ --md-sys-typescale-headline-medium-font: var(--mk-font);
98
+ --md-sys-typescale-headline-medium-size: 28px;
99
+ --md-sys-typescale-headline-medium-line-height: 36px;
100
+ --md-sys-typescale-headline-medium-weight: 400;
101
+ --md-sys-typescale-headline-medium-tracking: 0px;
102
+ --md-sys-typescale-headline-small-font: var(--mk-font);
103
+ --md-sys-typescale-headline-small-size: 24px;
104
+ --md-sys-typescale-headline-small-line-height: 32px;
105
+ --md-sys-typescale-headline-small-weight: 400;
106
+ --md-sys-typescale-headline-small-tracking: 0px;
107
+ --md-sys-typescale-title-large-font: var(--mk-font);
108
+ --md-sys-typescale-title-large-size: 22px;
109
+ --md-sys-typescale-title-large-line-height: 28px;
110
+ --md-sys-typescale-title-large-weight: 400;
111
+ --md-sys-typescale-title-large-tracking: 0px;
112
+ --md-sys-typescale-title-medium-font: var(--mk-font);
113
+ --md-sys-typescale-title-medium-size: 16px;
114
+ --md-sys-typescale-title-medium-line-height: 24px;
115
+ --md-sys-typescale-title-medium-weight: 500;
116
+ --md-sys-typescale-title-medium-tracking: 0.15px;
117
+ --md-sys-typescale-title-small-font: var(--mk-font);
118
+ --md-sys-typescale-title-small-size: 14px;
119
+ --md-sys-typescale-title-small-line-height: 20px;
120
+ --md-sys-typescale-title-small-weight: 500;
121
+ --md-sys-typescale-title-small-tracking: 0.1px;
122
+ --md-sys-typescale-body-large-font: var(--mk-font);
123
+ --md-sys-typescale-body-large-size: 16px;
124
+ --md-sys-typescale-body-large-line-height: 24px;
125
+ --md-sys-typescale-body-large-weight: 400;
126
+ --md-sys-typescale-body-large-tracking: 0.5px;
127
+ --md-sys-typescale-body-medium-font: var(--mk-font);
128
+ --md-sys-typescale-body-medium-size: 14px;
129
+ --md-sys-typescale-body-medium-line-height: 20px;
130
+ --md-sys-typescale-body-medium-weight: 400;
131
+ --md-sys-typescale-body-medium-tracking: 0.25px;
132
+ --md-sys-typescale-body-small-font: var(--mk-font);
133
+ --md-sys-typescale-body-small-size: 12px;
134
+ --md-sys-typescale-body-small-line-height: 16px;
135
+ --md-sys-typescale-body-small-weight: 400;
136
+ --md-sys-typescale-body-small-tracking: 0.4px;
137
+ --md-sys-typescale-label-large-font: var(--mk-font);
138
+ --md-sys-typescale-label-large-size: 14px;
139
+ --md-sys-typescale-label-large-line-height: 20px;
140
+ --md-sys-typescale-label-large-weight: 500;
141
+ --md-sys-typescale-label-large-tracking: 0.1px;
142
+ --md-sys-typescale-label-medium-font: var(--mk-font);
143
+ --md-sys-typescale-label-medium-size: 12px;
144
+ --md-sys-typescale-label-medium-line-height: 16px;
145
+ --md-sys-typescale-label-medium-weight: 500;
146
+ --md-sys-typescale-label-medium-tracking: 0.5px;
147
+ --md-sys-typescale-label-small-font: var(--mk-font);
148
+ --md-sys-typescale-label-small-size: 11px;
149
+ --md-sys-typescale-label-small-line-height: 16px;
150
+ --md-sys-typescale-label-small-weight: 500;
151
+ --md-sys-typescale-label-small-tracking: 0.5px;
152
+ }
153
+
154
+ /*
155
+ * Semantic colour layer over the Material 3 roles. Declared on every themed
156
+ * element too, so a nested [data-mk-theme] recomputes it from its own roles.
157
+ */
158
+ :root,
159
+ [data-mk-theme] {
160
+ --mk-bg: var(--md-sys-color-background);
161
+ --mk-surface: var(--md-sys-color-surface);
162
+ --mk-surface-1: var(--md-sys-color-surface-container-lowest);
163
+ --mk-surface-2: var(--md-sys-color-surface-container-low);
164
+ --mk-surface-3: var(--md-sys-color-surface-container);
165
+ --mk-surface-4: var(--md-sys-color-surface-container-high);
166
+ --mk-surface-5: var(--md-sys-color-surface-container-highest);
167
+ --mk-text: var(--md-sys-color-on-surface);
168
+ --mk-muted: var(--md-sys-color-on-surface-variant);
169
+ --mk-accent: var(--md-sys-color-primary);
170
+ --mk-on-accent: var(--md-sys-color-on-primary);
171
+ --mk-accent-soft: var(--md-sys-color-primary-container);
172
+ --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
173
+ --mk-secondary-soft: var(--md-sys-color-secondary-container);
174
+ --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
175
+ --mk-outline: var(--md-sys-color-outline);
176
+ --mk-outline-soft: var(--md-sys-color-outline-variant);
177
+ --mk-error: var(--md-sys-color-error);
178
+ --mk-on-error: var(--md-sys-color-on-error);
179
+ --mk-error-soft: var(--md-sys-color-error-container);
180
+ --mk-on-error-soft: var(--md-sys-color-on-error-container);
181
+ --mk-scrim: var(--md-sys-color-scrim);
182
+ --mk-shadow-color: var(--md-sys-color-shadow);
183
+ /* Melonmind's inverse glass (popovers, command search, chart tooltips): the text colour at 86 %, blurred, bevelled. */
184
+ --mk-glass-inverse: color-mix(in srgb, var(--mk-text) 86%, transparent);
185
+ --mk-on-glass-inverse: var(--mk-bg);
186
+ --mk-glass-bevel: inset 1px 1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), inset -1px -1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--mk-shadow-color) 40%, transparent);
183
187
  }
184
188
 
185
189
  /* css/default-theme.css */