@yewdiel21/motion-kit 0.10.0 → 0.15.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.
- package/README.md +81 -0
- package/bin/motion-kit.mjs +3 -3
- package/dist/auto/index.d.ts +56 -3
- package/dist/auto/index.js +107 -3
- package/dist/auto/index.js.map +1 -1
- package/dist/{chunk-XAKC2QY7.js → chunk-6IRJYXJU.js} +3 -28
- package/dist/chunk-6IRJYXJU.js.map +1 -0
- package/dist/chunk-A6QQCF6V.js +21333 -0
- package/dist/chunk-A6QQCF6V.js.map +1 -0
- package/dist/chunk-JXRS3OEA.js +3638 -0
- package/dist/chunk-JXRS3OEA.js.map +1 -0
- package/dist/chunk-QP4QJOEN.js +72 -0
- package/dist/chunk-QP4QJOEN.js.map +1 -0
- package/dist/css/components/activity-feed.css +240 -0
- package/dist/css/components/add-to-cart.css +72 -0
- package/dist/css/components/attachment.css +266 -0
- package/dist/css/components/bidirectional-slider.css +168 -0
- package/dist/css/components/breadcrumb.css +110 -0
- package/dist/css/components/chart-tooltip.css +168 -0
- package/dist/css/components/chart.css +296 -0
- package/dist/css/components/code-block.css +264 -0
- package/dist/css/components/color-area.css +82 -0
- package/dist/css/components/color-field.css +67 -0
- package/dist/css/components/color-picker.css +131 -0
- package/dist/css/components/color-slider.css +113 -0
- package/dist/css/components/command-search.css +252 -0
- package/dist/css/components/context-menu.css +23 -0
- package/dist/css/components/credit-card.css +288 -0
- package/dist/css/components/data-table.css +686 -0
- package/dist/css/components/date-range-picker.css +168 -0
- package/dist/css/components/date-time-picker.css +178 -0
- package/dist/css/components/drawer.css +58 -0
- package/dist/css/components/editable-table.css +201 -0
- package/dist/css/components/empty-state.css +61 -0
- package/dist/css/components/file-explorer.css +633 -0
- package/dist/css/components/filter-builder.css +227 -0
- package/dist/css/components/heatmap-chart.css +391 -0
- package/dist/css/components/hold-confirm.css +87 -0
- package/dist/css/components/hover-card.css +19 -7
- package/dist/css/components/image-preview.css +283 -0
- package/dist/css/components/json-viewer.css +304 -0
- package/dist/css/components/like-button.css +78 -0
- package/dist/css/components/link-preview.css +275 -0
- package/dist/css/components/loading-button.css +77 -0
- package/dist/css/components/multi-select.css +267 -0
- package/dist/css/components/nav.css +102 -102
- package/dist/css/components/notification-bell.css +127 -0
- package/dist/css/components/orbit-menu.css +130 -0
- package/dist/css/components/pagination.css +10 -5
- package/dist/css/components/password-strength.css +183 -0
- package/dist/css/components/pie-chart.css +390 -0
- package/dist/css/components/pill-button.css +135 -0
- package/dist/css/components/popover.css +25 -0
- package/dist/css/components/progress.css +140 -0
- package/dist/css/components/questionnaire.css +217 -0
- package/dist/css/components/radar-chart.css +370 -0
- package/dist/css/components/radial-chart.css +398 -0
- package/dist/css/components/range-calendar.css +186 -0
- package/dist/css/components/range-slider.css +192 -0
- package/dist/css/components/resizable-panel.css +243 -0
- package/dist/css/components/rich-text-editor.css +284 -0
- package/dist/css/components/sankey-chart.css +358 -0
- package/dist/css/components/scratch-card.css +75 -0
- package/dist/css/components/scroll-island.css +111 -0
- package/dist/css/components/select.css +136 -0
- package/dist/css/components/skeleton.css +108 -0
- package/dist/css/components/split-view.css +19 -0
- package/dist/css/components/star-rating.css +80 -0
- package/dist/css/components/stat-card.css +164 -0
- package/dist/css/components/swipe-actions.css +105 -0
- package/dist/css/components/tag-input.css +244 -0
- package/dist/css/components/time-field.css +88 -0
- package/dist/css/components/timeline.css +219 -0
- package/dist/css/components/toolbar.css +122 -0
- package/dist/css/components/tooltip.css +79 -0
- package/dist/css/components/tree-view.css +289 -0
- package/dist/css/components/virtual-list.css +195 -0
- package/dist/css/components/voice-dots.css +70 -0
- package/dist/css/tokens.css +185 -181
- package/dist/elements/index.d.ts +849 -7
- package/dist/elements/index.js +1642 -8
- package/dist/elements/index.js.map +1 -1
- package/dist/{engine-GDGwQnJE.d.ts → engine-5zRIssTO.d.ts} +11 -1
- package/dist/engine-QECQnGz1.d.ts +33 -0
- package/dist/index.css +10890 -311
- package/dist/index.d.ts +89 -5
- package/dist/index.js +273 -9
- package/dist/index.js.map +1 -1
- package/dist/react/index.d.ts +686 -24
- package/dist/react/index.js +2345 -9
- package/dist/react/index.js.map +1 -1
- package/dist/{reduced-BmBzKH94.d.ts → reduced-6X_bns60.d.ts} +9 -2
- package/dist/reveal-BfyKKsw4.d.ts +2474 -0
- package/dist/store-CA2Qcun_.d.ts +453 -0
- package/package.json +9 -16
- package/registry.json +1096 -543
- package/src/auto/auto-init.ts +104 -0
- package/src/components/activity-feed/README.md +56 -0
- package/src/components/activity-feed/activity-feed.css +239 -0
- package/src/components/activity-feed/element.ts +36 -0
- package/src/components/activity-feed/engine.ts +351 -0
- package/src/components/activity-feed/react.tsx +32 -0
- package/src/components/add-to-cart/README.md +34 -0
- package/src/components/add-to-cart/add-to-cart.css +71 -0
- package/src/components/add-to-cart/element.ts +20 -0
- package/src/components/add-to-cart/engine.ts +206 -0
- package/src/components/add-to-cart/react.tsx +29 -0
- package/src/components/attachment/README.md +27 -0
- package/src/components/attachment/attachment.css +265 -0
- package/src/components/attachment/element.ts +50 -0
- package/src/components/attachment/engine.ts +469 -0
- package/src/components/attachment/react.tsx +65 -0
- package/src/components/bidirectional-slider/README.md +46 -0
- package/src/components/bidirectional-slider/bidirectional-slider.css +167 -0
- package/src/components/bidirectional-slider/element.ts +42 -0
- package/src/components/bidirectional-slider/engine.ts +289 -0
- package/src/components/bidirectional-slider/react.tsx +45 -0
- package/src/components/breadcrumb/README.md +38 -0
- package/src/components/breadcrumb/breadcrumb.css +109 -0
- package/src/components/breadcrumb/element.ts +27 -0
- package/src/components/breadcrumb/engine.ts +249 -0
- package/src/components/breadcrumb/react.tsx +30 -0
- package/src/components/chart/README.md +34 -0
- package/src/components/chart/chart.css +295 -0
- package/src/components/chart/element.ts +43 -0
- package/src/components/chart/engine.ts +838 -0
- package/src/components/chart/parts.ts +237 -0
- package/src/components/chart/react.tsx +50 -0
- package/src/components/chart/use-chart.ts +55 -0
- package/src/components/chart-tooltip/README.md +53 -0
- package/src/components/chart-tooltip/chart-tooltip.css +167 -0
- package/src/components/chart-tooltip/element.ts +37 -0
- package/src/components/chart-tooltip/engine.ts +442 -0
- package/src/components/chart-tooltip/react.tsx +47 -0
- package/src/components/code-block/README.md +19 -0
- package/src/components/code-block/code-block.css +263 -0
- package/src/components/code-block/element.ts +34 -0
- package/src/components/code-block/engine.ts +254 -0
- package/src/components/code-block/highlight.ts +244 -0
- package/src/components/code-block/react.tsx +94 -0
- package/src/components/color-area/README.md +50 -0
- package/src/components/color-area/color-area.css +81 -0
- package/src/components/color-area/element.ts +26 -0
- package/src/components/color-area/engine.ts +246 -0
- package/src/components/color-area/react.tsx +42 -0
- package/src/components/color-field/README.md +43 -0
- package/src/components/color-field/color-field.css +66 -0
- package/src/components/color-field/element.ts +26 -0
- package/src/components/color-field/engine.ts +174 -0
- package/src/components/color-field/react.tsx +42 -0
- package/src/components/color-picker/README.md +45 -0
- package/src/components/color-picker/color-picker.css +130 -0
- package/src/components/color-picker/element.ts +45 -0
- package/src/components/color-picker/engine.ts +314 -0
- package/src/components/color-picker/react.tsx +47 -0
- package/src/components/color-slider/README.md +55 -0
- package/src/components/color-slider/color-slider.css +112 -0
- package/src/components/color-slider/element.ts +26 -0
- package/src/components/color-slider/engine.ts +234 -0
- package/src/components/color-slider/react.tsx +45 -0
- package/src/components/command-search/README.md +15 -0
- package/src/components/command-search/command-search.css +251 -0
- package/src/components/command-search/element.ts +36 -0
- package/src/components/command-search/engine.ts +356 -0
- package/src/components/command-search/match.ts +53 -0
- package/src/components/command-search/react.tsx +66 -0
- package/src/components/context-menu/README.md +31 -0
- package/src/components/context-menu/context-menu.css +22 -0
- package/src/components/context-menu/element.ts +40 -0
- package/src/components/context-menu/engine.ts +153 -0
- package/src/components/context-menu/react.tsx +57 -0
- package/src/components/credit-card/README.md +20 -0
- package/src/components/credit-card/card.ts +77 -0
- package/src/components/credit-card/credit-card.css +287 -0
- package/src/components/credit-card/element.ts +33 -0
- package/src/components/credit-card/engine.ts +410 -0
- package/src/components/credit-card/react.tsx +36 -0
- package/src/components/data-table/README.md +83 -0
- package/src/components/data-table/data-table.css +685 -0
- package/src/components/data-table/element.ts +54 -0
- package/src/components/data-table/engine.ts +1111 -0
- package/src/components/data-table/react.tsx +94 -0
- package/src/components/date-range-picker/README.md +51 -0
- package/src/components/date-range-picker/date-range-picker.css +167 -0
- package/src/components/date-range-picker/element.ts +52 -0
- package/src/components/date-range-picker/engine.ts +352 -0
- package/src/components/date-range-picker/react.tsx +57 -0
- package/src/components/date-time-picker/README.md +48 -0
- package/src/components/date-time-picker/date-time-picker.css +177 -0
- package/src/components/date-time-picker/element.ts +47 -0
- package/src/components/date-time-picker/engine.ts +350 -0
- package/src/components/date-time-picker/react.tsx +54 -0
- package/src/components/dialog/README.md +103 -102
- package/src/components/dialog/element.ts +123 -118
- package/src/components/dialog/engine.ts +449 -432
- package/src/components/drawer/README.md +28 -0
- package/src/components/drawer/drawer.css +57 -0
- package/src/components/drawer/element.ts +21 -0
- package/src/components/drawer/engine.ts +56 -0
- package/src/components/drawer/react.tsx +85 -0
- package/src/components/editable-table/README.md +67 -0
- package/src/components/editable-table/editable-table.css +200 -0
- package/src/components/editable-table/element.ts +45 -0
- package/src/components/editable-table/engine.ts +831 -0
- package/src/components/editable-table/react.tsx +79 -0
- package/src/components/empty-state/README.md +41 -0
- package/src/components/empty-state/element.ts +23 -0
- package/src/components/empty-state/empty-state.css +60 -0
- package/src/components/empty-state/engine.ts +232 -0
- package/src/components/empty-state/react.tsx +34 -0
- package/src/components/file-explorer/README.md +67 -0
- package/src/components/file-explorer/element.ts +39 -0
- package/src/components/file-explorer/engine.ts +1307 -0
- package/src/components/file-explorer/file-explorer.css +632 -0
- package/src/components/file-explorer/react.tsx +77 -0
- package/src/components/filter-builder/README.md +47 -0
- package/src/components/filter-builder/element.ts +34 -0
- package/src/components/filter-builder/engine.ts +396 -0
- package/src/components/filter-builder/filter-builder.css +226 -0
- package/src/components/filter-builder/react.tsx +36 -0
- package/src/components/heatmap-chart/README.md +48 -0
- package/src/components/heatmap-chart/element.ts +21 -0
- package/src/components/heatmap-chart/engine.ts +281 -0
- package/src/components/heatmap-chart/heatmap-chart.css +93 -0
- package/src/components/heatmap-chart/react.tsx +14 -0
- package/src/components/hold-confirm/README.md +13 -0
- package/src/components/hold-confirm/element.ts +24 -0
- package/src/components/hold-confirm/engine.ts +216 -0
- package/src/components/hold-confirm/hold-confirm.css +86 -0
- package/src/components/hold-confirm/react.tsx +28 -0
- package/src/components/hover-card/README.md +6 -2
- package/src/components/hover-card/engine.ts +98 -7
- package/src/components/hover-card/hover-card.css +19 -7
- package/src/components/image-preview/README.md +16 -0
- package/src/components/image-preview/element.ts +26 -0
- package/src/components/image-preview/engine.ts +405 -0
- package/src/components/image-preview/image-preview.css +282 -0
- package/src/components/image-preview/react.tsx +43 -0
- package/src/components/json-viewer/README.md +56 -0
- package/src/components/json-viewer/element.ts +37 -0
- package/src/components/json-viewer/engine.ts +449 -0
- package/src/components/json-viewer/json-viewer.css +303 -0
- package/src/components/json-viewer/react.tsx +56 -0
- package/src/components/like-button/README.md +13 -0
- package/src/components/like-button/element.ts +47 -0
- package/src/components/like-button/engine.ts +145 -0
- package/src/components/like-button/like-button.css +77 -0
- package/src/components/like-button/react.tsx +39 -0
- package/src/components/link-preview/README.md +19 -0
- package/src/components/link-preview/element.ts +29 -0
- package/src/components/link-preview/engine.ts +192 -0
- package/src/components/link-preview/link-preview.css +274 -0
- package/src/components/link-preview/react.tsx +101 -0
- package/src/components/loading-button/README.md +45 -0
- package/src/components/loading-button/element.ts +34 -0
- package/src/components/loading-button/engine.ts +201 -0
- package/src/components/loading-button/loading-button.css +76 -0
- package/src/components/loading-button/react.tsx +43 -0
- package/src/components/multi-select/README.md +48 -0
- package/src/components/multi-select/element.ts +28 -0
- package/src/components/multi-select/engine.ts +294 -0
- package/src/components/multi-select/multi-select.css +266 -0
- package/src/components/multi-select/react.tsx +39 -0
- package/src/components/nav/README.md +12 -10
- package/src/components/nav/element.ts +5 -5
- package/src/components/nav/engine.ts +21 -14
- package/src/components/nav/nav.css +102 -102
- package/src/components/nav/react.tsx +4 -4
- package/src/components/notification-bell/README.md +14 -0
- package/src/components/notification-bell/element.ts +48 -0
- package/src/components/notification-bell/engine.ts +202 -0
- package/src/components/notification-bell/notification-bell.css +126 -0
- package/src/components/notification-bell/react.tsx +57 -0
- package/src/components/orbit-menu/README.md +46 -0
- package/src/components/orbit-menu/element.ts +27 -0
- package/src/components/orbit-menu/engine.ts +179 -0
- package/src/components/orbit-menu/orbit-menu.css +129 -0
- package/src/components/orbit-menu/react.tsx +44 -0
- package/src/components/pagination/README.md +1 -1
- package/src/components/pagination/engine.ts +50 -4
- package/src/components/pagination/pagination.css +10 -5
- package/src/components/password-strength/README.md +17 -0
- package/src/components/password-strength/element.ts +22 -0
- package/src/components/password-strength/engine.ts +212 -0
- package/src/components/password-strength/password-strength.css +182 -0
- package/src/components/password-strength/react.tsx +36 -0
- package/src/components/password-strength/score.ts +62 -0
- package/src/components/pie-chart/README.md +48 -0
- package/src/components/pie-chart/element.ts +30 -0
- package/src/components/pie-chart/engine.ts +283 -0
- package/src/components/pie-chart/pie-chart.css +92 -0
- package/src/components/pie-chart/react.tsx +14 -0
- package/src/components/pill-button/README.md +46 -0
- package/src/components/pill-button/element.ts +16 -0
- package/src/components/pill-button/engine.ts +77 -0
- package/src/components/pill-button/pill-button.css +134 -0
- package/src/components/pill-button/react.tsx +32 -0
- package/src/components/popover/README.md +44 -0
- package/src/components/popover/element.ts +31 -0
- package/src/components/popover/engine.ts +114 -0
- package/src/components/popover/popover.css +24 -0
- package/src/components/popover/react.tsx +50 -0
- package/src/components/progress/README.md +17 -0
- package/src/components/progress/element.ts +30 -0
- package/src/components/progress/engine.ts +173 -0
- package/src/components/progress/progress.css +139 -0
- package/src/components/progress/react.tsx +35 -0
- package/src/components/questionnaire/README.md +32 -0
- package/src/components/questionnaire/element.ts +118 -0
- package/src/components/questionnaire/engine.ts +255 -0
- package/src/components/questionnaire/questionnaire.css +216 -0
- package/src/components/questionnaire/react.tsx +140 -0
- package/src/components/radar-chart/README.md +48 -0
- package/src/components/radar-chart/element.ts +30 -0
- package/src/components/radar-chart/engine.ts +327 -0
- package/src/components/radar-chart/radar-chart.css +72 -0
- package/src/components/radar-chart/react.tsx +14 -0
- package/src/components/radial-chart/README.md +48 -0
- package/src/components/radial-chart/element.ts +30 -0
- package/src/components/radial-chart/engine.ts +290 -0
- package/src/components/radial-chart/radial-chart.css +100 -0
- package/src/components/radial-chart/react.tsx +14 -0
- package/src/components/range-calendar/README.md +58 -0
- package/src/components/range-calendar/element.ts +42 -0
- package/src/components/range-calendar/engine.ts +390 -0
- package/src/components/range-calendar/range-calendar.css +185 -0
- package/src/components/range-calendar/react.tsx +56 -0
- package/src/components/range-slider/README.md +23 -0
- package/src/components/range-slider/element.ts +53 -0
- package/src/components/range-slider/engine.ts +316 -0
- package/src/components/range-slider/range-slider.css +191 -0
- package/src/components/range-slider/react.tsx +66 -0
- package/src/components/resizable-panel/README.md +61 -0
- package/src/components/resizable-panel/element.ts +36 -0
- package/src/components/resizable-panel/engine.ts +551 -0
- package/src/components/resizable-panel/react.tsx +74 -0
- package/src/components/resizable-panel/resizable-panel.css +242 -0
- package/src/components/rich-text-editor/README.md +57 -0
- package/src/components/rich-text-editor/element.ts +34 -0
- package/src/components/rich-text-editor/engine.ts +673 -0
- package/src/components/rich-text-editor/react.tsx +60 -0
- package/src/components/rich-text-editor/rich-text-editor.css +283 -0
- package/src/components/sankey-chart/README.md +48 -0
- package/src/components/sankey-chart/element.ts +31 -0
- package/src/components/sankey-chart/engine.ts +401 -0
- package/src/components/sankey-chart/react.tsx +14 -0
- package/src/components/sankey-chart/sankey-chart.css +60 -0
- package/src/components/scratch-card/README.md +15 -0
- package/src/components/scratch-card/element.ts +30 -0
- package/src/components/scratch-card/engine.ts +257 -0
- package/src/components/scratch-card/react.tsx +40 -0
- package/src/components/scratch-card/scratch-card.css +74 -0
- package/src/components/scroll-island/README.md +34 -0
- package/src/components/scroll-island/element.ts +16 -0
- package/src/components/scroll-island/engine.ts +252 -0
- package/src/components/scroll-island/react.tsx +26 -0
- package/src/components/scroll-island/scroll-island.css +110 -0
- package/src/components/select/README.md +34 -0
- package/src/components/select/element.ts +26 -0
- package/src/components/select/engine.ts +267 -0
- package/src/components/select/react.tsx +33 -0
- package/src/components/select/select.css +135 -0
- package/src/components/skeleton/README.md +15 -0
- package/src/components/skeleton/element.ts +32 -0
- package/src/components/skeleton/engine.ts +104 -0
- package/src/components/skeleton/react.tsx +41 -0
- package/src/components/skeleton/skeleton.css +107 -0
- package/src/components/split-view/README.md +50 -0
- package/src/components/split-view/element.ts +34 -0
- package/src/components/split-view/engine.ts +114 -0
- package/src/components/split-view/react.tsx +63 -0
- package/src/components/split-view/split-view.css +18 -0
- package/src/components/star-rating/README.md +14 -0
- package/src/components/star-rating/element.ts +26 -0
- package/src/components/star-rating/engine.ts +217 -0
- package/src/components/star-rating/react.tsx +33 -0
- package/src/components/star-rating/star-rating.css +79 -0
- package/src/components/stat-card/README.md +42 -0
- package/src/components/stat-card/element.ts +40 -0
- package/src/components/stat-card/engine.ts +283 -0
- package/src/components/stat-card/react.tsx +36 -0
- package/src/components/stat-card/stat-card.css +163 -0
- package/src/components/swipe-actions/README.md +19 -0
- package/src/components/swipe-actions/element.ts +26 -0
- package/src/components/swipe-actions/engine.ts +260 -0
- package/src/components/swipe-actions/react.tsx +80 -0
- package/src/components/swipe-actions/swipe-actions.css +104 -0
- package/src/components/tag-input/README.md +42 -0
- package/src/components/tag-input/element.ts +39 -0
- package/src/components/tag-input/engine.ts +313 -0
- package/src/components/tag-input/react.tsx +54 -0
- package/src/components/tag-input/tag-input.css +243 -0
- package/src/components/time-field/README.md +54 -0
- package/src/components/time-field/element.ts +38 -0
- package/src/components/time-field/engine.ts +110 -0
- package/src/components/time-field/react.tsx +45 -0
- package/src/components/time-field/time-field.css +87 -0
- package/src/components/timeline/README.md +57 -0
- package/src/components/timeline/element.ts +31 -0
- package/src/components/timeline/engine.ts +300 -0
- package/src/components/timeline/react.tsx +59 -0
- package/src/components/timeline/timeline.css +218 -0
- package/src/components/toolbar/README.md +46 -0
- package/src/components/toolbar/element.ts +30 -0
- package/src/components/toolbar/engine.ts +230 -0
- package/src/components/toolbar/react.tsx +34 -0
- package/src/components/toolbar/toolbar.css +121 -0
- package/src/components/tooltip/README.md +46 -0
- package/src/components/tooltip/element.ts +22 -0
- package/src/components/tooltip/engine.ts +288 -0
- package/src/components/tooltip/react.tsx +30 -0
- package/src/components/tooltip/tooltip.css +78 -0
- package/src/components/tree-view/README.md +61 -0
- package/src/components/tree-view/element.ts +32 -0
- package/src/components/tree-view/engine.ts +743 -0
- package/src/components/tree-view/react.tsx +82 -0
- package/src/components/tree-view/tree-view.css +288 -0
- package/src/components/virtual-list/README.md +81 -0
- package/src/components/virtual-list/element.ts +42 -0
- package/src/components/virtual-list/engine.ts +678 -0
- package/src/components/virtual-list/react.tsx +101 -0
- package/src/components/virtual-list/virtual-list.css +194 -0
- package/src/components/voice-dots/README.md +48 -0
- package/src/components/voice-dots/element.ts +45 -0
- package/src/components/voice-dots/engine.ts +243 -0
- package/src/components/voice-dots/react.tsx +52 -0
- package/src/components/voice-dots/voice-dots.css +69 -0
- package/src/core/chips.ts +196 -0
- package/src/core/color.ts +304 -0
- package/src/core/date-range.ts +67 -0
- package/src/core/dates.ts +11 -1
- package/src/core/files.ts +107 -0
- package/src/core/filter.ts +229 -0
- package/src/core/gsap.ts +80 -65
- package/src/core/listbox.ts +332 -0
- package/src/core/mark.ts +29 -0
- package/src/core/position.ts +89 -0
- package/src/core/relative-time.ts +77 -0
- package/src/core/segment-field.ts +373 -0
- package/src/core/segments.ts +153 -0
- package/src/core/tree.ts +116 -0
- package/src/core/virtual.ts +79 -0
- package/src/css/tokens.css +186 -182
- package/src/elements/index.ts +186 -0
- package/src/index.ts +88 -0
- package/src/motion/liquid.ts +14 -4
- package/src/motion/micro.ts +248 -0
- package/src/motion/sheet.ts +88 -65
- package/src/motion/surface.ts +9 -0
- package/src/react/index.ts +71 -1
- package/dist/chunk-IKQ5FODN.js +0 -1617
- package/dist/chunk-IKQ5FODN.js.map +0 -1
- package/dist/chunk-J6OCFNGU.js +0 -177
- package/dist/chunk-J6OCFNGU.js.map +0 -1
- package/dist/chunk-TFNRIZHU.js +0 -3977
- package/dist/chunk-TFNRIZHU.js.map +0 -1
- package/dist/chunk-XAKC2QY7.js.map +0 -1
- package/dist/reveal-jsX-uwUz.d.ts +0 -625
- package/dist/store-DYb3tTsZ.d.ts +0 -195
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 */
|