@ngneers/controls-themes 0.0.1-next.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/LICENSE +21 -0
- package/README.md +29 -0
- package/api/color/index.d.ts +53 -0
- package/api/color/index.d.ts.map +1 -0
- package/api/color/index.js +129 -0
- package/api/index.d.ts +18 -0
- package/api/index.d.ts.map +1 -0
- package/api/index.js +17 -0
- package/api/style/apply-theme.d.ts +33 -0
- package/api/style/apply-theme.d.ts.map +1 -0
- package/api/style/apply-theme.js +285 -0
- package/api/style/get-class-name.d.ts +2 -0
- package/api/style/get-class-name.d.ts.map +1 -0
- package/api/style/get-class-name.js +8 -0
- package/api/style/style-scope.d.ts +15 -0
- package/api/style/style-scope.d.ts.map +1 -0
- package/api/style/style-scope.js +0 -0
- package/api/style/upsert-theme-style-element.d.ts +2 -0
- package/api/style/upsert-theme-style-element.d.ts.map +1 -0
- package/api/style/upsert-theme-style-element.js +23 -0
- package/api/theme/classes.d.ts +7 -0
- package/api/theme/classes.d.ts.map +1 -0
- package/api/theme/classes.js +0 -0
- package/api/theme/combine-variable-variations.d.ts +10 -0
- package/api/theme/combine-variable-variations.d.ts.map +1 -0
- package/api/theme/combine-variable-variations.js +9 -0
- package/api/theme/combine-variations.d.ts +9 -0
- package/api/theme/combine-variations.d.ts.map +1 -0
- package/api/theme/combine-variations.js +9 -0
- package/api/theme/control-template.d.ts +25 -0
- package/api/theme/control-template.d.ts.map +1 -0
- package/api/theme/control-template.js +7 -0
- package/api/theme/css.d.ts +4 -0
- package/api/theme/css.d.ts.map +1 -0
- package/api/theme/css.js +1 -0
- package/api/theme/repeat-variables.d.ts +10 -0
- package/api/theme/repeat-variables.d.ts.map +1 -0
- package/api/theme/repeat-variables.js +7 -0
- package/api/theme/scoped.d.ts +4 -0
- package/api/theme/scoped.d.ts.map +1 -0
- package/api/theme/scoped.js +0 -0
- package/api/theme/template-variable.d.ts +4 -0
- package/api/theme/template-variable.d.ts.map +1 -0
- package/api/theme/template-variable.js +0 -0
- package/api/theme/theme-part.d.ts +45 -0
- package/api/theme/theme-part.d.ts.map +1 -0
- package/api/theme/theme-part.js +13 -0
- package/api/theme/theme.d.ts +14 -0
- package/api/theme/theme.d.ts.map +1 -0
- package/api/theme/theme.js +11 -0
- package/api/theme/variable-template.d.ts +14 -0
- package/api/theme/variable-template.d.ts.map +1 -0
- package/api/theme/variable-template.js +7 -0
- package/api/theme/variable.d.ts +9 -0
- package/api/theme/variable.d.ts.map +1 -0
- package/api/theme/variable.js +0 -0
- package/api/utils/deep-keys.d.ts +6 -0
- package/api/utils/deep-keys.d.ts.map +1 -0
- package/api/utils/deep-keys.js +0 -0
- package/api/utils/deep-merge.d.ts +7 -0
- package/api/utils/deep-merge.d.ts.map +1 -0
- package/api/utils/deep-merge.js +20 -0
- package/api/utils/deep-set.d.ts +2 -0
- package/api/utils/deep-set.d.ts.map +1 -0
- package/api/utils/deep-set.js +15 -0
- package/api/utils/group-array-using.d.ts +2 -0
- package/api/utils/group-array-using.d.ts.map +1 -0
- package/api/utils/group-array-using.js +11 -0
- package/api/utils/sub-key.d.ts +3 -0
- package/api/utils/sub-key.d.ts.map +1 -0
- package/api/utils/sub-key.js +5 -0
- package/api/utils/union-to-intersection.d.ts +2 -0
- package/api/utils/union-to-intersection.d.ts.map +1 -0
- package/api/utils/union-to-intersection.js +0 -0
- package/base/accordion/index.d.ts +2 -0
- package/base/accordion/index.d.ts.map +1 -0
- package/base/accordion/index.js +9 -0
- package/base/accordion-panel/index.d.ts +2 -0
- package/base/accordion-panel/index.d.ts.map +1 -0
- package/base/accordion-panel/index.js +43 -0
- package/base/api/index.d.ts +4 -0
- package/base/api/index.d.ts.map +1 -0
- package/base/api/index.js +3 -0
- package/base/api/movable.d.ts +2 -0
- package/base/api/movable.d.ts.map +1 -0
- package/base/api/movable.js +13 -0
- package/base/api/resizable.d.ts +2 -0
- package/base/api/resizable.d.ts.map +1 -0
- package/base/api/resizable.js +13 -0
- package/base/api/scroll-shadow.d.ts +2 -0
- package/base/api/scroll-shadow.d.ts.map +1 -0
- package/base/api/scroll-shadow.js +9 -0
- package/base/avatar/index.d.ts +259 -0
- package/base/avatar/index.d.ts.map +1 -0
- package/base/avatar/index.js +41 -0
- package/base/breadcrumb/index.d.ts +11 -0
- package/base/breadcrumb/index.d.ts.map +1 -0
- package/base/breadcrumb/index.js +26 -0
- package/base/button/index.d.ts +2 -0
- package/base/button/index.d.ts.map +1 -0
- package/base/button/index.js +19 -0
- package/base/button-group/index.d.ts +10 -0
- package/base/button-group/index.d.ts.map +1 -0
- package/base/button-group/index.js +30 -0
- package/base/calendar/index.d.ts +75 -0
- package/base/calendar/index.d.ts.map +1 -0
- package/base/calendar/index.js +69 -0
- package/base/checkbox/index.d.ts +2 -0
- package/base/checkbox/index.d.ts.map +1 -0
- package/base/checkbox/index.js +40 -0
- package/base/chip/index.d.ts +2 -0
- package/base/chip/index.d.ts.map +1 -0
- package/base/chip/index.js +19 -0
- package/base/colors/index.d.ts +24 -0
- package/base/colors/index.d.ts.map +1 -0
- package/base/colors/index.js +112 -0
- package/base/dialog/index.d.ts +6 -0
- package/base/dialog/index.d.ts.map +1 -0
- package/base/dialog/index.js +36 -0
- package/base/drawer/index.d.ts +2 -0
- package/base/drawer/index.d.ts.map +1 -0
- package/base/drawer/index.js +35 -0
- package/base/edit-inplace/index.d.ts +5 -0
- package/base/edit-inplace/index.d.ts.map +1 -0
- package/base/edit-inplace/index.js +21 -0
- package/base/filter/index.d.ts +164 -0
- package/base/filter/index.d.ts.map +1 -0
- package/base/filter/index.js +70 -0
- package/base/global/index.d.ts +2 -0
- package/base/global/index.d.ts.map +1 -0
- package/base/global/index.js +25 -0
- package/base/hint/index.d.ts +2 -0
- package/base/hint/index.d.ts.map +1 -0
- package/base/hint/index.js +27 -0
- package/base/icon/index.d.ts +2 -0
- package/base/icon/index.d.ts.map +1 -0
- package/base/icon/index.js +32 -0
- package/base/index.d.ts +1679 -0
- package/base/index.d.ts.map +1 -0
- package/base/index.js +103 -0
- package/base/inplace/index.d.ts +2 -0
- package/base/inplace/index.d.ts.map +1 -0
- package/base/inplace/index.js +7 -0
- package/base/input/index.d.ts +2 -0
- package/base/input/index.d.ts.map +1 -0
- package/base/input/index.js +20 -0
- package/base/input-field/index.d.ts +6 -0
- package/base/input-field/index.d.ts.map +1 -0
- package/base/input-field/index.js +45 -0
- package/base/item-view/index.d.ts +2 -0
- package/base/item-view/index.d.ts.map +1 -0
- package/base/item-view/index.js +47 -0
- package/base/list-box/index.d.ts +8 -0
- package/base/list-box/index.d.ts.map +1 -0
- package/base/list-box/index.js +33 -0
- package/base/mask-input/index.d.ts +2 -0
- package/base/mask-input/index.d.ts.map +1 -0
- package/base/mask-input/index.js +57 -0
- package/base/menu/index.d.ts +5 -0
- package/base/menu/index.d.ts.map +1 -0
- package/base/menu/index.js +19 -0
- package/base/message/index.d.ts +2 -0
- package/base/message/index.d.ts.map +1 -0
- package/base/message/index.js +23 -0
- package/base/paginator/index.d.ts +17 -0
- package/base/paginator/index.d.ts.map +1 -0
- package/base/paginator/index.js +16 -0
- package/base/popover/index.d.ts +2 -0
- package/base/popover/index.d.ts.map +1 -0
- package/base/popover/index.js +45 -0
- package/base/progress/index.d.ts +2 -0
- package/base/progress/index.d.ts.map +1 -0
- package/base/progress/index.js +41 -0
- package/base/radio/index.d.ts +2 -0
- package/base/radio/index.d.ts.map +1 -0
- package/base/radio/index.js +34 -0
- package/base/radio-group/index.d.ts +2 -0
- package/base/radio-group/index.d.ts.map +1 -0
- package/base/radio-group/index.js +18 -0
- package/base/scroller/index.d.ts +2 -0
- package/base/scroller/index.d.ts.map +1 -0
- package/base/scroller/index.js +47 -0
- package/base/select/index.d.ts +21 -0
- package/base/select/index.d.ts.map +1 -0
- package/base/select/index.js +39 -0
- package/base/select-button/index.d.ts +16 -0
- package/base/select-button/index.d.ts.map +1 -0
- package/base/select-button/index.js +13 -0
- package/base/slider/index.d.ts +2 -0
- package/base/slider/index.d.ts.map +1 -0
- package/base/slider/index.js +65 -0
- package/base/snackbar/index.d.ts +2 -0
- package/base/snackbar/index.d.ts.map +1 -0
- package/base/snackbar/index.js +77 -0
- package/base/spin-buttons/index.d.ts +8 -0
- package/base/spin-buttons/index.d.ts.map +1 -0
- package/base/spin-buttons/index.js +49 -0
- package/base/spinner/index.d.ts +2 -0
- package/base/spinner/index.d.ts.map +1 -0
- package/base/spinner/index.js +29 -0
- package/base/splitter/index.d.ts +2 -0
- package/base/splitter/index.d.ts.map +1 -0
- package/base/splitter/index.js +159 -0
- package/base/state/index.d.ts +20 -0
- package/base/state/index.d.ts.map +1 -0
- package/base/state/index.js +93 -0
- package/base/switch/index.d.ts +2 -0
- package/base/switch/index.d.ts.map +1 -0
- package/base/switch/index.js +30 -0
- package/base/table/index.d.ts +208 -0
- package/base/table/index.d.ts.map +1 -0
- package/base/table/index.js +222 -0
- package/base/tabs/index.d.ts +2 -0
- package/base/tabs/index.d.ts.map +1 -0
- package/base/tabs/index.js +68 -0
- package/base/tag/index.d.ts +2 -0
- package/base/tag/index.d.ts.map +1 -0
- package/base/tag/index.js +23 -0
- package/base/toast/index.d.ts +2 -0
- package/base/toast/index.d.ts.map +1 -0
- package/base/toast/index.js +34 -0
- package/base/toggle-button/index.d.ts +2 -0
- package/base/toggle-button/index.d.ts.map +1 -0
- package/base/toggle-button/index.js +33 -0
- package/base/tooltip/index.d.ts +2 -0
- package/base/tooltip/index.d.ts.map +1 -0
- package/base/tooltip/index.js +92 -0
- package/base/tree/index.d.ts +8 -0
- package/base/tree/index.d.ts.map +1 -0
- package/base/tree/index.js +65 -0
- package/base/upload/index.d.ts +2 -0
- package/base/upload/index.d.ts.map +1 -0
- package/base/upload/index.js +125 -0
- package/index.d.ts +3 -0
- package/index.d.ts.map +1 -0
- package/index.js +2 -0
- package/nova/accordion/index.d.ts +254 -0
- package/nova/accordion/index.d.ts.map +1 -0
- package/nova/accordion/index.js +19 -0
- package/nova/accordion-panel/index.d.ts +254 -0
- package/nova/accordion-panel/index.d.ts.map +1 -0
- package/nova/accordion-panel/index.js +74 -0
- package/nova/api/index.d.ts +4 -0
- package/nova/api/index.d.ts.map +1 -0
- package/nova/api/index.js +3 -0
- package/nova/api/movable.d.ts +2 -0
- package/nova/api/movable.d.ts.map +1 -0
- package/nova/api/movable.js +18 -0
- package/nova/api/resizable.d.ts +2 -0
- package/nova/api/resizable.d.ts.map +1 -0
- package/nova/api/resizable.js +13 -0
- package/nova/api/scroll-shadow.d.ts +2 -0
- package/nova/api/scroll-shadow.d.ts.map +1 -0
- package/nova/api/scroll-shadow.js +11 -0
- package/nova/avatar/index.d.ts +511 -0
- package/nova/avatar/index.d.ts.map +1 -0
- package/nova/avatar/index.js +50 -0
- package/nova/base/animation.d.ts +21 -0
- package/nova/base/animation.d.ts.map +1 -0
- package/nova/base/animation.js +30 -0
- package/nova/base/colors.d.ts +453 -0
- package/nova/base/colors.d.ts.map +1 -0
- package/nova/base/colors.js +222 -0
- package/nova/base/font.d.ts +37 -0
- package/nova/base/font.d.ts.map +1 -0
- package/nova/base/font.js +46 -0
- package/nova/base/index.d.ts +6 -0
- package/nova/base/index.d.ts.map +1 -0
- package/nova/base/index.js +5 -0
- package/nova/base/shadow.d.ts +13 -0
- package/nova/base/shadow.d.ts.map +1 -0
- package/nova/base/shadow.js +22 -0
- package/nova/base/sizes.d.ts +29 -0
- package/nova/base/sizes.d.ts.map +1 -0
- package/nova/base/sizes.js +38 -0
- package/nova/breadcrumb/index.d.ts +263 -0
- package/nova/breadcrumb/index.d.ts.map +1 -0
- package/nova/breadcrumb/index.js +45 -0
- package/nova/button/index.d.ts +254 -0
- package/nova/button/index.d.ts.map +1 -0
- package/nova/button/index.js +101 -0
- package/nova/button-group/index.d.ts +262 -0
- package/nova/button-group/index.d.ts.map +1 -0
- package/nova/button-group/index.js +72 -0
- package/nova/calendar/index.d.ts +327 -0
- package/nova/calendar/index.d.ts.map +1 -0
- package/nova/calendar/index.js +111 -0
- package/nova/checkbox/index.d.ts +246 -0
- package/nova/checkbox/index.d.ts.map +1 -0
- package/nova/checkbox/index.js +56 -0
- package/nova/chip/index.d.ts +254 -0
- package/nova/chip/index.d.ts.map +1 -0
- package/nova/chip/index.js +78 -0
- package/nova/colors/index.d.ts +44 -0
- package/nova/colors/index.d.ts.map +1 -0
- package/nova/colors/index.js +47 -0
- package/nova/dialog/index.d.ts +272 -0
- package/nova/dialog/index.d.ts.map +1 -0
- package/nova/dialog/index.js +64 -0
- package/nova/drawer/index.d.ts +268 -0
- package/nova/drawer/index.d.ts.map +1 -0
- package/nova/drawer/index.js +77 -0
- package/nova/edit-inplace/index.d.ts +240 -0
- package/nova/edit-inplace/index.d.ts.map +1 -0
- package/nova/edit-inplace/index.js +48 -0
- package/nova/filter/index.d.ts +399 -0
- package/nova/filter/index.d.ts.map +1 -0
- package/nova/filter/index.js +89 -0
- package/nova/hint/index.d.ts +254 -0
- package/nova/hint/index.d.ts.map +1 -0
- package/nova/hint/index.js +42 -0
- package/nova/icon/index.d.ts +224 -0
- package/nova/icon/index.d.ts.map +1 -0
- package/nova/icon/index.js +12 -0
- package/nova/index.d.ts +12422 -0
- package/nova/index.d.ts.map +1 -0
- package/nova/index.js +129 -0
- package/nova/inplace/index.d.ts +237 -0
- package/nova/inplace/index.d.ts.map +1 -0
- package/nova/inplace/index.js +29 -0
- package/nova/input/index.d.ts +237 -0
- package/nova/input/index.d.ts.map +1 -0
- package/nova/input/index.js +12 -0
- package/nova/input-field/index.d.ts +267 -0
- package/nova/input-field/index.d.ts.map +1 -0
- package/nova/input-field/index.js +247 -0
- package/nova/item-view/index.d.ts +237 -0
- package/nova/item-view/index.d.ts.map +1 -0
- package/nova/item-view/index.js +16 -0
- package/nova/list-box/index.d.ts +260 -0
- package/nova/list-box/index.d.ts.map +1 -0
- package/nova/list-box/index.js +71 -0
- package/nova/mask-input/index.d.ts +237 -0
- package/nova/mask-input/index.d.ts.map +1 -0
- package/nova/mask-input/index.js +25 -0
- package/nova/menu/index.d.ts +240 -0
- package/nova/menu/index.d.ts.map +1 -0
- package/nova/menu/index.js +60 -0
- package/nova/message/index.d.ts +254 -0
- package/nova/message/index.d.ts.map +1 -0
- package/nova/message/index.js +46 -0
- package/nova/paginator/index.d.ts +252 -0
- package/nova/paginator/index.d.ts.map +1 -0
- package/nova/paginator/index.js +43 -0
- package/nova/popover/index.d.ts +251 -0
- package/nova/popover/index.d.ts.map +1 -0
- package/nova/popover/index.js +49 -0
- package/nova/progress/index.d.ts +246 -0
- package/nova/progress/index.d.ts.map +1 -0
- package/nova/progress/index.js +84 -0
- package/nova/radio/index.d.ts +246 -0
- package/nova/radio/index.d.ts.map +1 -0
- package/nova/radio/index.js +50 -0
- package/nova/radio-group/index.d.ts +237 -0
- package/nova/radio-group/index.d.ts.map +1 -0
- package/nova/radio-group/index.js +18 -0
- package/nova/scroller/index.d.ts +237 -0
- package/nova/scroller/index.d.ts.map +1 -0
- package/nova/scroller/index.js +12 -0
- package/nova/select/index.d.ts +256 -0
- package/nova/select/index.d.ts.map +1 -0
- package/nova/select/index.js +42 -0
- package/nova/select-button/index.d.ts +251 -0
- package/nova/select-button/index.d.ts.map +1 -0
- package/nova/select-button/index.js +17 -0
- package/nova/slider/index.d.ts +237 -0
- package/nova/slider/index.d.ts.map +1 -0
- package/nova/slider/index.js +98 -0
- package/nova/snackbar/index.d.ts +268 -0
- package/nova/snackbar/index.d.ts.map +1 -0
- package/nova/snackbar/index.js +155 -0
- package/nova/spin-buttons/index.d.ts +243 -0
- package/nova/spin-buttons/index.d.ts.map +1 -0
- package/nova/spin-buttons/index.js +62 -0
- package/nova/spinner/index.d.ts +237 -0
- package/nova/spinner/index.d.ts.map +1 -0
- package/nova/spinner/index.js +57 -0
- package/nova/splitter/index.d.ts +224 -0
- package/nova/splitter/index.d.ts.map +1 -0
- package/nova/splitter/index.js +60 -0
- package/nova/state/index.d.ts +272 -0
- package/nova/state/index.d.ts.map +1 -0
- package/nova/state/index.js +28 -0
- package/nova/switch/index.d.ts +246 -0
- package/nova/switch/index.d.ts.map +1 -0
- package/nova/switch/index.js +61 -0
- package/nova/table/index.d.ts +465 -0
- package/nova/table/index.d.ts.map +1 -0
- package/nova/table/index.js +235 -0
- package/nova/tabs/index.d.ts +254 -0
- package/nova/tabs/index.d.ts.map +1 -0
- package/nova/tabs/index.js +80 -0
- package/nova/tag/index.d.ts +254 -0
- package/nova/tag/index.d.ts.map +1 -0
- package/nova/tag/index.js +34 -0
- package/nova/theme-types.d.ts +10 -0
- package/nova/toast/index.d.ts +268 -0
- package/nova/toast/index.d.ts.map +1 -0
- package/nova/toast/index.js +93 -0
- package/nova/toggle-button/index.d.ts +263 -0
- package/nova/toggle-button/index.d.ts.map +1 -0
- package/nova/toggle-button/index.js +65 -0
- package/nova/tooltip/index.d.ts +246 -0
- package/nova/tooltip/index.d.ts.map +1 -0
- package/nova/tooltip/index.js +53 -0
- package/nova/tree/index.d.ts +260 -0
- package/nova/tree/index.d.ts.map +1 -0
- package/nova/tree/index.js +81 -0
- package/nova/upload/index.d.ts +263 -0
- package/nova/upload/index.d.ts.map +1 -0
- package/nova/upload/index.js +88 -0
- package/package.json +834 -0
- package/shade/accordion/index.d.ts +146 -0
- package/shade/accordion/index.d.ts.map +1 -0
- package/shade/accordion/index.js +20 -0
- package/shade/accordion-panel/index.d.ts +146 -0
- package/shade/accordion-panel/index.d.ts.map +1 -0
- package/shade/accordion-panel/index.js +68 -0
- package/shade/api/index.d.ts +4 -0
- package/shade/api/index.d.ts.map +1 -0
- package/shade/api/index.js +3 -0
- package/shade/api/movable.d.ts +2 -0
- package/shade/api/movable.d.ts.map +1 -0
- package/shade/api/movable.js +18 -0
- package/shade/api/resizable.d.ts +2 -0
- package/shade/api/resizable.d.ts.map +1 -0
- package/shade/api/resizable.js +13 -0
- package/shade/api/scroll-shadow.d.ts +2 -0
- package/shade/api/scroll-shadow.d.ts.map +1 -0
- package/shade/api/scroll-shadow.js +13 -0
- package/shade/avatar/index.d.ts +295 -0
- package/shade/avatar/index.d.ts.map +1 -0
- package/shade/avatar/index.js +50 -0
- package/shade/base/animation.d.ts +21 -0
- package/shade/base/animation.d.ts.map +1 -0
- package/shade/base/animation.js +30 -0
- package/shade/base/colors.d.ts +353 -0
- package/shade/base/colors.d.ts.map +1 -0
- package/shade/base/colors.js +153 -0
- package/shade/base/focus.d.ts +17 -0
- package/shade/base/focus.d.ts.map +1 -0
- package/shade/base/focus.js +31 -0
- package/shade/base/font.d.ts +39 -0
- package/shade/base/font.d.ts.map +1 -0
- package/shade/base/font.js +48 -0
- package/shade/base/index.d.ts +7 -0
- package/shade/base/index.d.ts.map +1 -0
- package/shade/base/index.js +6 -0
- package/shade/base/shadow.d.ts +13 -0
- package/shade/base/shadow.d.ts.map +1 -0
- package/shade/base/shadow.js +25 -0
- package/shade/base/sizes.d.ts +31 -0
- package/shade/base/sizes.d.ts.map +1 -0
- package/shade/base/sizes.js +40 -0
- package/shade/breadcrumb/index.d.ts +155 -0
- package/shade/breadcrumb/index.d.ts.map +1 -0
- package/shade/breadcrumb/index.js +48 -0
- package/shade/button/index.d.ts +160 -0
- package/shade/button/index.d.ts.map +1 -0
- package/shade/button/index.js +127 -0
- package/shade/button-group/index.d.ts +154 -0
- package/shade/button-group/index.d.ts.map +1 -0
- package/shade/button-group/index.js +72 -0
- package/shade/calendar/index.d.ts +219 -0
- package/shade/calendar/index.d.ts.map +1 -0
- package/shade/calendar/index.js +117 -0
- package/shade/checkbox/index.d.ts +142 -0
- package/shade/checkbox/index.d.ts.map +1 -0
- package/shade/checkbox/index.js +77 -0
- package/shade/chip/index.d.ts +146 -0
- package/shade/chip/index.d.ts.map +1 -0
- package/shade/chip/index.js +72 -0
- package/shade/colors/index.d.ts +42 -0
- package/shade/colors/index.d.ts.map +1 -0
- package/shade/colors/index.js +72 -0
- package/shade/dialog/index.d.ts +164 -0
- package/shade/dialog/index.d.ts.map +1 -0
- package/shade/dialog/index.js +85 -0
- package/shade/drawer/index.d.ts +160 -0
- package/shade/drawer/index.d.ts.map +1 -0
- package/shade/drawer/index.js +78 -0
- package/shade/edit-inplace/index.d.ts +131 -0
- package/shade/edit-inplace/index.d.ts.map +1 -0
- package/shade/edit-inplace/index.js +46 -0
- package/shade/filter/index.d.ts +290 -0
- package/shade/filter/index.d.ts.map +1 -0
- package/shade/filter/index.js +80 -0
- package/shade/hint/index.d.ts +146 -0
- package/shade/hint/index.d.ts.map +1 -0
- package/shade/hint/index.js +43 -0
- package/shade/icon/index.d.ts +2 -0
- package/shade/icon/index.d.ts.map +1 -0
- package/shade/icon/index.js +12 -0
- package/shade/index.d.ts +7258 -0
- package/shade/index.d.ts.map +1 -0
- package/shade/index.js +129 -0
- package/shade/inplace/index.d.ts +128 -0
- package/shade/inplace/index.d.ts.map +1 -0
- package/shade/inplace/index.js +32 -0
- package/shade/input/index.d.ts +160 -0
- package/shade/input/index.d.ts.map +1 -0
- package/shade/input/index.js +58 -0
- package/shade/input-field/index.d.ts +159 -0
- package/shade/input-field/index.d.ts.map +1 -0
- package/shade/input-field/index.js +236 -0
- package/shade/item-view/index.d.ts +146 -0
- package/shade/item-view/index.d.ts.map +1 -0
- package/shade/item-view/index.js +17 -0
- package/shade/list-box/index.d.ts +152 -0
- package/shade/list-box/index.d.ts.map +1 -0
- package/shade/list-box/index.js +76 -0
- package/shade/mask-input/index.d.ts +128 -0
- package/shade/mask-input/index.d.ts.map +1 -0
- package/shade/mask-input/index.js +24 -0
- package/shade/menu/index.d.ts +163 -0
- package/shade/menu/index.d.ts.map +1 -0
- package/shade/menu/index.js +61 -0
- package/shade/message/index.d.ts +146 -0
- package/shade/message/index.d.ts.map +1 -0
- package/shade/message/index.js +39 -0
- package/shade/paginator/index.d.ts +143 -0
- package/shade/paginator/index.d.ts.map +1 -0
- package/shade/paginator/index.js +36 -0
- package/shade/popover/index.d.ts +142 -0
- package/shade/popover/index.d.ts.map +1 -0
- package/shade/popover/index.js +47 -0
- package/shade/progress/index.d.ts +137 -0
- package/shade/progress/index.d.ts.map +1 -0
- package/shade/progress/index.js +80 -0
- package/shade/radio/index.d.ts +142 -0
- package/shade/radio/index.d.ts.map +1 -0
- package/shade/radio/index.js +51 -0
- package/shade/radio-group/index.d.ts +128 -0
- package/shade/radio-group/index.d.ts.map +1 -0
- package/shade/radio-group/index.js +18 -0
- package/shade/scroller/index.d.ts +128 -0
- package/shade/scroller/index.d.ts.map +1 -0
- package/shade/scroller/index.js +13 -0
- package/shade/select/index.d.ts +147 -0
- package/shade/select/index.d.ts.map +1 -0
- package/shade/select/index.js +43 -0
- package/shade/select-button/index.d.ts +142 -0
- package/shade/select-button/index.d.ts.map +1 -0
- package/shade/select-button/index.js +18 -0
- package/shade/slider/index.d.ts +133 -0
- package/shade/slider/index.d.ts.map +1 -0
- package/shade/slider/index.js +59 -0
- package/shade/snackbar/index.d.ts +160 -0
- package/shade/snackbar/index.d.ts.map +1 -0
- package/shade/snackbar/index.js +150 -0
- package/shade/spin-buttons/index.d.ts +134 -0
- package/shade/spin-buttons/index.d.ts.map +1 -0
- package/shade/spin-buttons/index.js +63 -0
- package/shade/spinner/index.d.ts +128 -0
- package/shade/spinner/index.d.ts.map +1 -0
- package/shade/spinner/index.js +55 -0
- package/shade/splitter/index.d.ts +115 -0
- package/shade/splitter/index.d.ts.map +1 -0
- package/shade/splitter/index.js +65 -0
- package/shade/state/index.d.ts +164 -0
- package/shade/state/index.d.ts.map +1 -0
- package/shade/state/index.js +28 -0
- package/shade/switch/index.d.ts +142 -0
- package/shade/switch/index.d.ts.map +1 -0
- package/shade/switch/index.js +66 -0
- package/shade/table/index.d.ts +361 -0
- package/shade/table/index.d.ts.map +1 -0
- package/shade/table/index.js +243 -0
- package/shade/tabs/index.d.ts +160 -0
- package/shade/tabs/index.d.ts.map +1 -0
- package/shade/tabs/index.js +81 -0
- package/shade/tag/index.d.ts +146 -0
- package/shade/tag/index.d.ts.map +1 -0
- package/shade/tag/index.js +51 -0
- package/shade/theme-types.d.ts +10 -0
- package/shade/toast/index.d.ts +160 -0
- package/shade/toast/index.d.ts.map +1 -0
- package/shade/toast/index.js +94 -0
- package/shade/toggle-button/index.d.ts +160 -0
- package/shade/toggle-button/index.d.ts.map +1 -0
- package/shade/toggle-button/index.js +71 -0
- package/shade/tooltip/index.d.ts +155 -0
- package/shade/tooltip/index.d.ts.map +1 -0
- package/shade/tooltip/index.js +59 -0
- package/shade/tree/index.d.ts +152 -0
- package/shade/tree/index.d.ts.map +1 -0
- package/shade/tree/index.js +87 -0
- package/shade/upload/index.d.ts +155 -0
- package/shade/upload/index.d.ts.map +1 -0
- package/shade/upload/index.js +83 -0
- package/templates/accordion/index.d.ts +2 -0
- package/templates/accordion/index.d.ts.map +1 -0
- package/templates/accordion/index.js +5 -0
- package/templates/accordion-panel/index.d.ts +2 -0
- package/templates/accordion-panel/index.d.ts.map +1 -0
- package/templates/accordion-panel/index.js +13 -0
- package/templates/api/index.d.ts +4 -0
- package/templates/api/index.d.ts.map +1 -0
- package/templates/api/index.js +3 -0
- package/templates/api/movable.d.ts +2 -0
- package/templates/api/movable.d.ts.map +1 -0
- package/templates/api/movable.js +5 -0
- package/templates/api/resizable.d.ts +2 -0
- package/templates/api/resizable.d.ts.map +1 -0
- package/templates/api/resizable.js +5 -0
- package/templates/api/scroll-shadow.d.ts +2 -0
- package/templates/api/scroll-shadow.d.ts.map +1 -0
- package/templates/api/scroll-shadow.js +5 -0
- package/templates/avatar/index.d.ts +7 -0
- package/templates/avatar/index.d.ts.map +1 -0
- package/templates/avatar/index.js +10 -0
- package/templates/breadcrumb/index.d.ts +11 -0
- package/templates/breadcrumb/index.d.ts.map +1 -0
- package/templates/breadcrumb/index.js +11 -0
- package/templates/button/index.d.ts +2 -0
- package/templates/button/index.d.ts.map +1 -0
- package/templates/button/index.js +5 -0
- package/templates/button-group/index.d.ts +10 -0
- package/templates/button-group/index.d.ts.map +1 -0
- package/templates/button-group/index.js +11 -0
- package/templates/calendar/index.d.ts +75 -0
- package/templates/calendar/index.d.ts.map +1 -0
- package/templates/calendar/index.js +39 -0
- package/templates/checkbox/index.d.ts +2 -0
- package/templates/checkbox/index.d.ts.map +1 -0
- package/templates/checkbox/index.js +14 -0
- package/templates/chip/index.d.ts +2 -0
- package/templates/chip/index.d.ts.map +1 -0
- package/templates/chip/index.js +13 -0
- package/templates/dialog/index.d.ts +6 -0
- package/templates/dialog/index.d.ts.map +1 -0
- package/templates/dialog/index.js +16 -0
- package/templates/drawer/index.d.ts +2 -0
- package/templates/drawer/index.d.ts.map +1 -0
- package/templates/drawer/index.js +15 -0
- package/templates/edit-inplace/index.d.ts +5 -0
- package/templates/edit-inplace/index.d.ts.map +1 -0
- package/templates/edit-inplace/index.js +18 -0
- package/templates/filter/index.d.ts +164 -0
- package/templates/filter/index.d.ts.map +1 -0
- package/templates/filter/index.js +38 -0
- package/templates/global/index.d.ts +2 -0
- package/templates/global/index.d.ts.map +1 -0
- package/templates/global/index.js +5 -0
- package/templates/hint/index.d.ts +2 -0
- package/templates/hint/index.d.ts.map +1 -0
- package/templates/hint/index.js +5 -0
- package/templates/icon/index.d.ts +2 -0
- package/templates/icon/index.d.ts.map +1 -0
- package/templates/icon/index.js +5 -0
- package/templates/index.d.ts +56 -0
- package/templates/index.d.ts.map +1 -0
- package/templates/index.js +0 -0
- package/templates/inplace/index.d.ts +2 -0
- package/templates/inplace/index.d.ts.map +1 -0
- package/templates/inplace/index.js +5 -0
- package/templates/input/index.d.ts +3 -0
- package/templates/input/index.d.ts.map +1 -0
- package/templates/input/index.js +6 -0
- package/templates/input-field/index.d.ts +6 -0
- package/templates/input-field/index.d.ts.map +1 -0
- package/templates/input-field/index.js +16 -0
- package/templates/item-view/index.d.ts +2 -0
- package/templates/item-view/index.d.ts.map +1 -0
- package/templates/item-view/index.js +13 -0
- package/templates/list-box/index.d.ts +8 -0
- package/templates/list-box/index.d.ts.map +1 -0
- package/templates/list-box/index.js +22 -0
- package/templates/mask-input/index.d.ts +2 -0
- package/templates/mask-input/index.d.ts.map +1 -0
- package/templates/mask-input/index.js +14 -0
- package/templates/menu/index.d.ts +5 -0
- package/templates/menu/index.d.ts.map +1 -0
- package/templates/menu/index.js +7 -0
- package/templates/message/index.d.ts +2 -0
- package/templates/message/index.d.ts.map +1 -0
- package/templates/message/index.js +5 -0
- package/templates/paginator/index.d.ts +17 -0
- package/templates/paginator/index.d.ts.map +1 -0
- package/templates/paginator/index.js +14 -0
- package/templates/popover/index.d.ts +2 -0
- package/templates/popover/index.d.ts.map +1 -0
- package/templates/popover/index.js +5 -0
- package/templates/progress/index.d.ts +2 -0
- package/templates/progress/index.d.ts.map +1 -0
- package/templates/progress/index.js +5 -0
- package/templates/radio/index.d.ts +2 -0
- package/templates/radio/index.d.ts.map +1 -0
- package/templates/radio/index.js +5 -0
- package/templates/radio-group/index.d.ts +2 -0
- package/templates/radio-group/index.d.ts.map +1 -0
- package/templates/radio-group/index.js +5 -0
- package/templates/scroller/index.d.ts +2 -0
- package/templates/scroller/index.d.ts.map +1 -0
- package/templates/scroller/index.js +5 -0
- package/templates/select/index.d.ts +21 -0
- package/templates/select/index.d.ts.map +1 -0
- package/templates/select/index.js +22 -0
- package/templates/select-button/index.d.ts +16 -0
- package/templates/select-button/index.d.ts.map +1 -0
- package/templates/select-button/index.js +11 -0
- package/templates/slider/index.d.ts +2 -0
- package/templates/slider/index.d.ts.map +1 -0
- package/templates/slider/index.js +5 -0
- package/templates/snackbar/index.d.ts +2 -0
- package/templates/snackbar/index.d.ts.map +1 -0
- package/templates/snackbar/index.js +19 -0
- package/templates/spin-buttons/index.d.ts +8 -0
- package/templates/spin-buttons/index.d.ts.map +1 -0
- package/templates/spin-buttons/index.js +18 -0
- package/templates/spinner/index.d.ts +2 -0
- package/templates/spinner/index.d.ts.map +1 -0
- package/templates/spinner/index.js +5 -0
- package/templates/splitter/index.d.ts +2 -0
- package/templates/splitter/index.d.ts.map +1 -0
- package/templates/splitter/index.js +15 -0
- package/templates/state/index.d.ts +20 -0
- package/templates/state/index.d.ts.map +1 -0
- package/templates/state/index.js +21 -0
- package/templates/switch/index.d.ts +2 -0
- package/templates/switch/index.d.ts.map +1 -0
- package/templates/switch/index.js +5 -0
- package/templates/table/index.d.ts +208 -0
- package/templates/table/index.d.ts.map +1 -0
- package/templates/table/index.js +66 -0
- package/templates/tabs/index.d.ts +2 -0
- package/templates/tabs/index.d.ts.map +1 -0
- package/templates/tabs/index.js +15 -0
- package/templates/tag/index.d.ts +2 -0
- package/templates/tag/index.d.ts.map +1 -0
- package/templates/tag/index.js +5 -0
- package/templates/toast/index.d.ts +2 -0
- package/templates/toast/index.d.ts.map +1 -0
- package/templates/toast/index.js +14 -0
- package/templates/toggle-button/index.d.ts +2 -0
- package/templates/toggle-button/index.d.ts.map +1 -0
- package/templates/toggle-button/index.js +6 -0
- package/templates/tooltip/index.d.ts +2 -0
- package/templates/tooltip/index.d.ts.map +1 -0
- package/templates/tooltip/index.js +23 -0
- package/templates/tree/index.d.ts +8 -0
- package/templates/tree/index.d.ts.map +1 -0
- package/templates/tree/index.js +28 -0
- package/templates/upload/index.d.ts +2 -0
- package/templates/upload/index.d.ts.map +1 -0
- package/templates/upload/index.js +40 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 NGneers
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# @ngneers/controls-themes
|
|
2
|
+
|
|
3
|
+
Theme presets and the theming engine for **[@ngneers/controls](https://ngneers.dev)**.
|
|
4
|
+
|
|
5
|
+
Controls in `@ngneers/controls` are headless — this package supplies their styling. The
|
|
6
|
+
engine maps each control's named scopes to CSS built on `--ngn-*` design tokens and
|
|
7
|
+
injects it into `<head>` at runtime (no stylesheet import, no Tailwind required).
|
|
8
|
+
|
|
9
|
+
## Presets
|
|
10
|
+
|
|
11
|
+
- **`nova`** — a fully themed, dark-mode-aware preset (import `novaCoral` from
|
|
12
|
+
`@ngneers/controls-themes/nova`).
|
|
13
|
+
- **`shade`** — a shadcn-style preset (`@ngneers/controls-themes/shade`).
|
|
14
|
+
|
|
15
|
+
Both are `Theme` objects you pass to `provideNgnControls({ theme: { preset } })`. You can
|
|
16
|
+
also author your own theme with the `createTheme` / `createThemePart` /
|
|
17
|
+
`createControlTemplate` API.
|
|
18
|
+
|
|
19
|
+
## Install
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
pnpm add @ngneers/controls @ngneers/controls-themes
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
📚 Theming guide: **[ngneers.dev](https://ngneers.dev)**
|
|
26
|
+
|
|
27
|
+
## License
|
|
28
|
+
|
|
29
|
+
MIT © NGneers
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export type RGB = {
|
|
2
|
+
r: number;
|
|
3
|
+
g: number;
|
|
4
|
+
b: number;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* WCAG 2.x relative luminance of an sRGB color.
|
|
8
|
+
* https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
|
|
9
|
+
*/
|
|
10
|
+
export declare function relativeLuminance({ r, g, b }: RGB): number;
|
|
11
|
+
/**
|
|
12
|
+
* WCAG 2.x contrast ratio between two colors (1..21).
|
|
13
|
+
*/
|
|
14
|
+
export declare function contrastRatio(color1: RGB, color2: RGB): number;
|
|
15
|
+
export type ContrastCandidate<K extends string = string> = {
|
|
16
|
+
key: K;
|
|
17
|
+
rgb: RGB;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Pick the candidate with the highest contrast against `background`.
|
|
21
|
+
*
|
|
22
|
+
* Best-effort: returns the highest-ratio candidate regardless of whether it
|
|
23
|
+
* meets any WCAG threshold. Accepts any number of candidates so mid-tone
|
|
24
|
+
* fallbacks (e.g. pure white/black) can be added later without an API change.
|
|
25
|
+
*/
|
|
26
|
+
export declare function bestContrast<K extends string>(background: RGB, candidates: ContrastCandidate<K>[]): (ContrastCandidate<K> & {
|
|
27
|
+
ratio: number;
|
|
28
|
+
}) | undefined;
|
|
29
|
+
/** Parse `#rgb` / `#rrggbb` into 8-bit sRGB channels. */
|
|
30
|
+
export declare function hexToRgb(hex: string): RGB;
|
|
31
|
+
/**
|
|
32
|
+
* Derive a palette shade from a base color, mirroring the CSS
|
|
33
|
+
* `hsl(from <base> h s <lightness>)` trick in pure JS: keep the base hue and
|
|
34
|
+
* saturation, override lightness with `(1000 - level) / 10` percent.
|
|
35
|
+
*/
|
|
36
|
+
export declare function shadeRgb(baseHex: string, level: number): RGB;
|
|
37
|
+
/** Serialize to a modern space-separated `rgb()` string. */
|
|
38
|
+
export declare function rgbToCss({ r, g, b }: RGB): string;
|
|
39
|
+
/**
|
|
40
|
+
* Pure-CSS auto-contrast foreground for an ARBITRARY runtime background —
|
|
41
|
+
* custom colors (e.g. a user-supplied `--color`) or consumer var overrides —
|
|
42
|
+
* where a value cannot be precomputed. Picks black or white via a relative
|
|
43
|
+
* OKLCH lightness threshold, resolved live by the browser.
|
|
44
|
+
*
|
|
45
|
+
* This is a heuristic (perceptual lightness, not a measured WCAG ratio) and can
|
|
46
|
+
* miss AA on mid-tone saturated colors. For the fixed theme palette, prefer the
|
|
47
|
+
* precomputed, WCAG-measured `-contrast` variables instead.
|
|
48
|
+
*
|
|
49
|
+
* @param background any CSS color expression, e.g. `var(--color, #4557ba)`
|
|
50
|
+
* @param threshold OKLCH lightness cutoff (0..1) above which black is chosen
|
|
51
|
+
*/
|
|
52
|
+
export declare function autoContrast(background: string, threshold?: number): string;
|
|
53
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/api/color/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAO1D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CAQ9D;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,GAAG,EAAE,GAAG,CAAA;CAAE,CAAC;AAEhF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,UAAU,EAAE,GAAG,EACf,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GACjC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,SAAS,CAIxD;AAED,yDAAyD;AACzD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAUzC;AA2DD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG,CAI5D;AAED,4DAA4D;AAC5D,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAEjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,SAAO,GAAG,MAAM,CAEzE"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WCAG 2.x relative luminance of an sRGB color.
|
|
3
|
+
* https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
|
|
4
|
+
*/
|
|
5
|
+
export function relativeLuminance({ r, g, b }) {
|
|
6
|
+
const convert = (c) => {
|
|
7
|
+
c /= 255;
|
|
8
|
+
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
9
|
+
};
|
|
10
|
+
return 0.2126 * convert(r) + 0.7152 * convert(g) + 0.0722 * convert(b);
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* WCAG 2.x contrast ratio between two colors (1..21).
|
|
14
|
+
*/
|
|
15
|
+
export function contrastRatio(color1, color2) {
|
|
16
|
+
const l1 = relativeLuminance(color1);
|
|
17
|
+
const l2 = relativeLuminance(color2);
|
|
18
|
+
const lighter = Math.max(l1, l2);
|
|
19
|
+
const darker = Math.min(l1, l2);
|
|
20
|
+
return (lighter + 0.05) / (darker + 0.05);
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Pick the candidate with the highest contrast against `background`.
|
|
24
|
+
*
|
|
25
|
+
* Best-effort: returns the highest-ratio candidate regardless of whether it
|
|
26
|
+
* meets any WCAG threshold. Accepts any number of candidates so mid-tone
|
|
27
|
+
* fallbacks (e.g. pure white/black) can be added later without an API change.
|
|
28
|
+
*/
|
|
29
|
+
export function bestContrast(background, candidates) {
|
|
30
|
+
return candidates
|
|
31
|
+
.map(candidate => ({ ...candidate, ratio: contrastRatio(background, candidate.rgb) }))
|
|
32
|
+
.sort((a, b) => b.ratio - a.ratio)[0];
|
|
33
|
+
}
|
|
34
|
+
/** Parse `#rgb` / `#rrggbb` into 8-bit sRGB channels. */
|
|
35
|
+
export function hexToRgb(hex) {
|
|
36
|
+
let h = hex.trim().replace(/^#/, '');
|
|
37
|
+
if (h.length === 3) {
|
|
38
|
+
h = h
|
|
39
|
+
.split('')
|
|
40
|
+
.map(c => c + c)
|
|
41
|
+
.join('');
|
|
42
|
+
}
|
|
43
|
+
const n = Number.parseInt(h, 16);
|
|
44
|
+
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
|
|
45
|
+
}
|
|
46
|
+
/** sRGB (0-255) → HSL, all channels normalized to 0..1. */
|
|
47
|
+
function rgbToHsl({ r, g, b }) {
|
|
48
|
+
r /= 255;
|
|
49
|
+
g /= 255;
|
|
50
|
+
b /= 255;
|
|
51
|
+
const max = Math.max(r, g, b);
|
|
52
|
+
const min = Math.min(r, g, b);
|
|
53
|
+
const l = (max + min) / 2;
|
|
54
|
+
const d = max - min;
|
|
55
|
+
if (d === 0) {
|
|
56
|
+
return { h: 0, s: 0, l };
|
|
57
|
+
}
|
|
58
|
+
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
59
|
+
let h;
|
|
60
|
+
switch (max) {
|
|
61
|
+
case r:
|
|
62
|
+
h = (g - b) / d + (g < b ? 6 : 0);
|
|
63
|
+
break;
|
|
64
|
+
case g:
|
|
65
|
+
h = (b - r) / d + 2;
|
|
66
|
+
break;
|
|
67
|
+
default:
|
|
68
|
+
h = (r - g) / d + 4;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
return { h: h / 6, s, l };
|
|
72
|
+
}
|
|
73
|
+
/** HSL (0..1 channels) → sRGB (0-255). */
|
|
74
|
+
function hslToRgb(h, s, l) {
|
|
75
|
+
if (s === 0) {
|
|
76
|
+
const v = Math.round(l * 255);
|
|
77
|
+
return { r: v, g: v, b: v };
|
|
78
|
+
}
|
|
79
|
+
const hue2rgb = (p, q, t) => {
|
|
80
|
+
if (t < 0)
|
|
81
|
+
t += 1;
|
|
82
|
+
if (t > 1)
|
|
83
|
+
t -= 1;
|
|
84
|
+
if (t < 1 / 6)
|
|
85
|
+
return p + (q - p) * 6 * t;
|
|
86
|
+
if (t < 1 / 2)
|
|
87
|
+
return q;
|
|
88
|
+
if (t < 2 / 3)
|
|
89
|
+
return p + (q - p) * (2 / 3 - t) * 6;
|
|
90
|
+
return p;
|
|
91
|
+
};
|
|
92
|
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
93
|
+
const p = 2 * l - q;
|
|
94
|
+
return {
|
|
95
|
+
r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
|
|
96
|
+
g: Math.round(hue2rgb(p, q, h) * 255),
|
|
97
|
+
b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Derive a palette shade from a base color, mirroring the CSS
|
|
102
|
+
* `hsl(from <base> h s <lightness>)` trick in pure JS: keep the base hue and
|
|
103
|
+
* saturation, override lightness with `(1000 - level) / 10` percent.
|
|
104
|
+
*/
|
|
105
|
+
export function shadeRgb(baseHex, level) {
|
|
106
|
+
const { h, s } = rgbToHsl(hexToRgb(baseHex));
|
|
107
|
+
const l = (1000 - level) / 1000;
|
|
108
|
+
return hslToRgb(h, s, l);
|
|
109
|
+
}
|
|
110
|
+
/** Serialize to a modern space-separated `rgb()` string. */
|
|
111
|
+
export function rgbToCss({ r, g, b }) {
|
|
112
|
+
return `rgb(${r} ${g} ${b})`;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Pure-CSS auto-contrast foreground for an ARBITRARY runtime background —
|
|
116
|
+
* custom colors (e.g. a user-supplied `--color`) or consumer var overrides —
|
|
117
|
+
* where a value cannot be precomputed. Picks black or white via a relative
|
|
118
|
+
* OKLCH lightness threshold, resolved live by the browser.
|
|
119
|
+
*
|
|
120
|
+
* This is a heuristic (perceptual lightness, not a measured WCAG ratio) and can
|
|
121
|
+
* miss AA on mid-tone saturated colors. For the fixed theme palette, prefer the
|
|
122
|
+
* precomputed, WCAG-measured `-contrast` variables instead.
|
|
123
|
+
*
|
|
124
|
+
* @param background any CSS color expression, e.g. `var(--color, #4557ba)`
|
|
125
|
+
* @param threshold OKLCH lightness cutoff (0..1) above which black is chosen
|
|
126
|
+
*/
|
|
127
|
+
export function autoContrast(background, threshold = 0.62) {
|
|
128
|
+
return `oklch(from ${background} clamp(0, (${threshold} - l) * 1e7, 1) 0 h)`;
|
|
129
|
+
}
|
package/api/index.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export * from './color';
|
|
2
|
+
export * from './style/apply-theme';
|
|
3
|
+
export * from './style/get-class-name';
|
|
4
|
+
export * from './style/style-scope';
|
|
5
|
+
export * from './style/upsert-theme-style-element';
|
|
6
|
+
export * from './theme/classes';
|
|
7
|
+
export * from './theme/combine-variable-variations';
|
|
8
|
+
export * from './theme/combine-variations';
|
|
9
|
+
export * from './theme/control-template';
|
|
10
|
+
export * from './theme/css';
|
|
11
|
+
export * from './theme/repeat-variables';
|
|
12
|
+
export * from './theme/scoped';
|
|
13
|
+
export * from './theme/template-variable';
|
|
14
|
+
export * from './theme/theme';
|
|
15
|
+
export * from './theme/theme-part';
|
|
16
|
+
export * from './theme/variable';
|
|
17
|
+
export * from './theme/variable-template';
|
|
18
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,qCAAqC,CAAC;AACpD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}
|
package/api/index.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export * from './color';
|
|
2
|
+
export * from './style/apply-theme';
|
|
3
|
+
export * from './style/get-class-name';
|
|
4
|
+
export * from './style/style-scope';
|
|
5
|
+
export * from './style/upsert-theme-style-element';
|
|
6
|
+
export * from './theme/classes';
|
|
7
|
+
export * from './theme/combine-variable-variations';
|
|
8
|
+
export * from './theme/combine-variations';
|
|
9
|
+
export * from './theme/control-template';
|
|
10
|
+
export * from './theme/css';
|
|
11
|
+
export * from './theme/repeat-variables';
|
|
12
|
+
export * from './theme/scoped';
|
|
13
|
+
export * from './theme/template-variable';
|
|
14
|
+
export * from './theme/theme';
|
|
15
|
+
export * from './theme/theme-part';
|
|
16
|
+
export * from './theme/variable';
|
|
17
|
+
export * from './theme/variable-template';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { StyleScope } from './style-scope';
|
|
2
|
+
import type { Theme } from '../theme/theme';
|
|
3
|
+
import type { ThemePart } from '../theme/theme-part';
|
|
4
|
+
export type ApplyThemeOptions = {
|
|
5
|
+
/**
|
|
6
|
+
* The document to apply the theme to. Defaults to `window.document`.
|
|
7
|
+
* This is useful for server-side rendering or when you want to apply the theme to a
|
|
8
|
+
* specific document instance.
|
|
9
|
+
* @default `window.document`
|
|
10
|
+
*/
|
|
11
|
+
document: Document;
|
|
12
|
+
/**
|
|
13
|
+
* The CSS layer to apply the theme to.
|
|
14
|
+
* If not provided, the theme will be applied to the default layer.
|
|
15
|
+
* @default `undefined`
|
|
16
|
+
*/
|
|
17
|
+
layer?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Defines whether the theme should be applied globally or scoped to a specific element.
|
|
20
|
+
* If not provided, the theme will be applied globally.
|
|
21
|
+
* @default `undefined`
|
|
22
|
+
*/
|
|
23
|
+
styleScope?: StyleScope;
|
|
24
|
+
/**
|
|
25
|
+
* A prefix to add to the class names and CSS variables of the theme parts.
|
|
26
|
+
* This is useful for avoiding name collisions in the global scope.
|
|
27
|
+
* @default `'ngn-'`
|
|
28
|
+
*/
|
|
29
|
+
namePrefix: string;
|
|
30
|
+
};
|
|
31
|
+
export declare function applyTheme<T extends Theme>(theme: T, scopes: T['parts'][number]['scope'][], options: ApplyThemeOptions): void;
|
|
32
|
+
export declare function applyGlobalStyles(globalStyles: ThemePart, options: ApplyThemeOptions): void;
|
|
33
|
+
//# sourceMappingURL=apply-theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"apply-theme.d.ts","sourceRoot":"","sources":["../../../src/api/style/apply-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EACxC,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,EACrC,OAAO,EAAE,iBAAiB,QA0C3B;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,iBAAiB,QA2BpF"}
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import { getClassName } from './get-class-name';
|
|
2
|
+
import { upsertThemeStyleElement } from './upsert-theme-style-element';
|
|
3
|
+
import { groupArrayUsing } from '../utils/group-array-using';
|
|
4
|
+
export function applyTheme(theme, scopes, options) {
|
|
5
|
+
const opt = {
|
|
6
|
+
document: options.document ?? window.document,
|
|
7
|
+
layer: options.layer,
|
|
8
|
+
scope: options.styleScope,
|
|
9
|
+
namePrefix: options.namePrefix ?? 'ngn-',
|
|
10
|
+
};
|
|
11
|
+
const parts = groupArrayUsing(getThemePartsByScopes(theme, scopes), x => x.scope);
|
|
12
|
+
// variable style elements
|
|
13
|
+
for (const [scope, scopeParts] of parts) {
|
|
14
|
+
const css = buildVariablesCss(scopeParts, opt);
|
|
15
|
+
upsertThemeStyleElement(opt.document, {
|
|
16
|
+
kind: 'variables',
|
|
17
|
+
'theme-scope': scope,
|
|
18
|
+
'style-scope': styleScopeToIdentifier(opt.scope),
|
|
19
|
+
}, css);
|
|
20
|
+
}
|
|
21
|
+
// style element
|
|
22
|
+
const allParts = scopes.map(scope => parts.get(scope) ?? scope);
|
|
23
|
+
for (const part of allParts) {
|
|
24
|
+
if (typeof part === 'string') {
|
|
25
|
+
console.warn(`No theme parts found for scope '${part}'. Skipping style generation.`);
|
|
26
|
+
continue;
|
|
27
|
+
}
|
|
28
|
+
const css = buildStyleCss(part, opt);
|
|
29
|
+
upsertThemeStyleElement(opt.document, {
|
|
30
|
+
kind: 'styles',
|
|
31
|
+
'theme-scope': part[0]?.scope,
|
|
32
|
+
'style-scope': styleScopeToIdentifier(opt.scope),
|
|
33
|
+
}, css);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
export function applyGlobalStyles(globalStyles, options) {
|
|
37
|
+
const opt = {
|
|
38
|
+
document: options.document ?? window.document,
|
|
39
|
+
layer: options.layer,
|
|
40
|
+
scope: options.styleScope,
|
|
41
|
+
namePrefix: options.namePrefix ?? 'ngn-',
|
|
42
|
+
};
|
|
43
|
+
const cssVariables = buildVariablesCss([globalStyles], opt);
|
|
44
|
+
upsertThemeStyleElement(opt.document, {
|
|
45
|
+
kind: 'variables',
|
|
46
|
+
'theme-scope': globalStyles.scope,
|
|
47
|
+
'style-scope': styleScopeToIdentifier(opt.scope),
|
|
48
|
+
}, cssVariables);
|
|
49
|
+
const cssStyles = buildStyleCss([globalStyles], opt);
|
|
50
|
+
upsertThemeStyleElement(opt.document, {
|
|
51
|
+
kind: 'styles',
|
|
52
|
+
'theme-scope': globalStyles.scope,
|
|
53
|
+
'style-scope': styleScopeToIdentifier(opt.scope),
|
|
54
|
+
}, cssStyles);
|
|
55
|
+
}
|
|
56
|
+
function styleScopeToIdentifier(scope) {
|
|
57
|
+
if (!scope)
|
|
58
|
+
return undefined;
|
|
59
|
+
switch (scope.kind) {
|
|
60
|
+
case 'attribute':
|
|
61
|
+
return `attr:${scope.name}${scope.value ? `:${scope.value}` : ''}`;
|
|
62
|
+
case 'class':
|
|
63
|
+
return `class:${scope.name}`;
|
|
64
|
+
case 'id':
|
|
65
|
+
return `id:${scope.name}`;
|
|
66
|
+
case 'tag':
|
|
67
|
+
return `tag:${scope.name}`;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function getThemePartsByScopes(theme, scopes) {
|
|
71
|
+
const result = new Set();
|
|
72
|
+
for (const scope of scopes) {
|
|
73
|
+
collectThemeParts(theme, scope, result);
|
|
74
|
+
}
|
|
75
|
+
return Array.from(result);
|
|
76
|
+
}
|
|
77
|
+
function collectThemeParts(theme, scope, result = new Set()) {
|
|
78
|
+
for (const part of theme.parts) {
|
|
79
|
+
if (part.scope !== scope || result.has(part)) {
|
|
80
|
+
continue;
|
|
81
|
+
}
|
|
82
|
+
result.add(part);
|
|
83
|
+
for (const dep of part.dependencies ?? []) {
|
|
84
|
+
collectThemeParts(theme, dep.scope, result);
|
|
85
|
+
}
|
|
86
|
+
if (part.base) {
|
|
87
|
+
for (const dep of part.base.dependencies ?? []) {
|
|
88
|
+
collectThemeParts(theme, dep.scope, result);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return result;
|
|
93
|
+
}
|
|
94
|
+
function buildVariablesCss(parts, options) {
|
|
95
|
+
const cssParts = parts.map(part => ({
|
|
96
|
+
root: variableCssFromVariableDefinition(part.root?.values, options, part.scope),
|
|
97
|
+
light: variableCssFromVariableDefinition(part.light?.values, options, part.scope),
|
|
98
|
+
dark: variableCssFromVariableDefinition(part.dark?.values, options, part.scope),
|
|
99
|
+
highContrast: variableCssFromVariableDefinition(part.highContrast?.values, options, part.scope),
|
|
100
|
+
}));
|
|
101
|
+
let css = options.layer ? `@layer ${options.layer} { ` : '';
|
|
102
|
+
css += `${getScopeSelector(options.styleScope)} { `;
|
|
103
|
+
for (const { root, dark } of cssParts) {
|
|
104
|
+
if (root) {
|
|
105
|
+
css += root;
|
|
106
|
+
}
|
|
107
|
+
if (dark) {
|
|
108
|
+
// check for special 'dark' class on body
|
|
109
|
+
css += `&.dark { ${dark} }`;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
// TODO: light, dark and highContrast themes
|
|
113
|
+
// TODO: Special handling for @media, @container, ... for scoping
|
|
114
|
+
css += ' }';
|
|
115
|
+
if (options.layer)
|
|
116
|
+
css += ' }';
|
|
117
|
+
return css;
|
|
118
|
+
}
|
|
119
|
+
function variableCssFromVariableDefinition(content, options, scope) {
|
|
120
|
+
if (typeof content !== 'object')
|
|
121
|
+
return '';
|
|
122
|
+
let result = '';
|
|
123
|
+
for (const key in content) {
|
|
124
|
+
const value = content[key];
|
|
125
|
+
if (!value)
|
|
126
|
+
continue;
|
|
127
|
+
if (typeof value === 'object') {
|
|
128
|
+
result += variableCssFromVariableDefinition(value, options, `${scope}-${key}`);
|
|
129
|
+
}
|
|
130
|
+
else if (typeof value === 'string') {
|
|
131
|
+
const varName = getCssVar(options.namePrefix, `${scope}.${key}`);
|
|
132
|
+
if (value.startsWith('{') && value.endsWith('}')) {
|
|
133
|
+
result += `${varName}: var(${getCssVar(options.namePrefix, value.slice(1, -1))});`;
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
result += `${varName}: ${value};`;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
return result;
|
|
141
|
+
}
|
|
142
|
+
function buildStyleCss(parts, options, isBase = false) {
|
|
143
|
+
const varKeySelector = (key) => `var(${getCssVar(options.namePrefix, key)})`;
|
|
144
|
+
const cssParts = parts.map(part => {
|
|
145
|
+
if (!part.root?.css && !part.light?.css && !part.dark?.css && !part.highContrast?.css) {
|
|
146
|
+
return {};
|
|
147
|
+
}
|
|
148
|
+
// Create a selector for unstyled mode. To avoid specificity issues, we use a always-true selector
|
|
149
|
+
// for when unstyled mode is active.
|
|
150
|
+
const unstyledSelector = `:not(${isBase ? '.ngn-css-specificity' : '.ngn-unstyled'})`;
|
|
151
|
+
const args = {
|
|
152
|
+
v: (key) => varKeySelector(key),
|
|
153
|
+
c: (className, kind = 'class') => {
|
|
154
|
+
const prefix = kind === 'animation' ? '' : '.';
|
|
155
|
+
const unstyledSuffix = kind === 'animation' ? '' : unstyledSelector;
|
|
156
|
+
return `${prefix}${getClassName(options.namePrefix, part.scope, className)}${unstyledSuffix}`;
|
|
157
|
+
},
|
|
158
|
+
d: (depClass, arg2, arg3) => {
|
|
159
|
+
const dep = part.controlTemplate?.dependencies?.find(d => d.class === depClass);
|
|
160
|
+
// Projected dependencies (arrive via <ng-content>) have no host element the parent
|
|
161
|
+
// can mark with [ptDep] — there is no marker to anchor on. Resolve directly to the
|
|
162
|
+
// child's own raw class instead.
|
|
163
|
+
if (dep?.projected === true) {
|
|
164
|
+
// no inner class → the raw child scope class itself
|
|
165
|
+
if (arg2 === undefined) {
|
|
166
|
+
return `.${getClassName(options.namePrefix, dep.template.scope)}${unstyledSelector}`;
|
|
167
|
+
}
|
|
168
|
+
// 3-arg grandchild form: (depClass, childScope, innerClassName) — anchor under the
|
|
169
|
+
// raw child class rather than a (nonexistent) marker.
|
|
170
|
+
if (arg3 !== undefined) {
|
|
171
|
+
return `.${getClassName(options.namePrefix, dep.template.scope)}${unstyledSelector} .${getClassName(options.namePrefix, arg2, arg3)}${unstyledSelector}`;
|
|
172
|
+
}
|
|
173
|
+
// 2-arg form: (depClass, innerClassName)
|
|
174
|
+
return `.${getClassName(options.namePrefix, dep.template.scope, arg2)}${unstyledSelector}`;
|
|
175
|
+
}
|
|
176
|
+
const marker = `.${getClassName(options.namePrefix, part.scope, depClass)}${unstyledSelector}`;
|
|
177
|
+
// no inner class → the child host (marker element)
|
|
178
|
+
if (arg2 === undefined) {
|
|
179
|
+
return marker;
|
|
180
|
+
}
|
|
181
|
+
// 3-arg grandchild form: (depClass, childScope, innerClassName)
|
|
182
|
+
if (arg3 !== undefined) {
|
|
183
|
+
return `${marker} .${getClassName(options.namePrefix, arg2, arg3)}${unstyledSelector}`;
|
|
184
|
+
}
|
|
185
|
+
// 2-arg form: (depClass, innerClassName) — resolve child scope from the dep template
|
|
186
|
+
const childScope = dep?.template.scope ?? depClass;
|
|
187
|
+
return `${marker} .${getClassName(options.namePrefix, childScope, arg2)}${unstyledSelector}`;
|
|
188
|
+
},
|
|
189
|
+
};
|
|
190
|
+
return {
|
|
191
|
+
root: part.root?.css?.(args),
|
|
192
|
+
light: part.light?.css?.(args),
|
|
193
|
+
dark: part.dark?.css?.(args),
|
|
194
|
+
highContrast: part.highContrast?.css?.(args),
|
|
195
|
+
};
|
|
196
|
+
});
|
|
197
|
+
let css = options.layer ? `@layer ${options.layer} { ` : '';
|
|
198
|
+
const baseCss = parts
|
|
199
|
+
.filter(p => p.base)
|
|
200
|
+
.map(part => {
|
|
201
|
+
const base = part.base;
|
|
202
|
+
return buildStyleCss([base], { ...options, layer: undefined }, true);
|
|
203
|
+
});
|
|
204
|
+
if (baseCss.length > 0) {
|
|
205
|
+
css += baseCss.join('\n');
|
|
206
|
+
}
|
|
207
|
+
css += `${getScopeSelector(options.styleScope)} { `;
|
|
208
|
+
let unscopableCss = '';
|
|
209
|
+
for (const { root, dark } of cssParts) {
|
|
210
|
+
if (root) {
|
|
211
|
+
const { unscopable, scopable } = splitScopableCss(root);
|
|
212
|
+
css += scopable;
|
|
213
|
+
unscopableCss += unscopable;
|
|
214
|
+
}
|
|
215
|
+
if (dark) {
|
|
216
|
+
const { unscopable, scopable } = splitScopableCss(dark);
|
|
217
|
+
// check for special 'dark' class on body
|
|
218
|
+
css += `&.dark { ${scopable} }`;
|
|
219
|
+
if (unscopable) {
|
|
220
|
+
console.warn('Unscopable CSS inside dark theme is not supported and will be ignored:', unscopable);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
// TODO: light, dark and highContrast themes
|
|
225
|
+
// TODO: Special handling for @media, @container, ... for scoping
|
|
226
|
+
css += ' }';
|
|
227
|
+
css += unscopableCss;
|
|
228
|
+
if (options.layer)
|
|
229
|
+
css += ' }';
|
|
230
|
+
return css;
|
|
231
|
+
}
|
|
232
|
+
function getScopeSelector(scope) {
|
|
233
|
+
if (!scope) {
|
|
234
|
+
return ':root';
|
|
235
|
+
}
|
|
236
|
+
switch (scope.kind) {
|
|
237
|
+
case 'attribute':
|
|
238
|
+
return `[${scope.name}${scope.value ? `="${scope.value}"` : ''}]`;
|
|
239
|
+
case 'class':
|
|
240
|
+
return `.${scope.name}`;
|
|
241
|
+
case 'id':
|
|
242
|
+
return `#${scope.name}`;
|
|
243
|
+
case 'tag':
|
|
244
|
+
return scope.name;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
function getCssVar(prefix, key) {
|
|
248
|
+
// Replace dots with dashes and convert camelCase to kebab-case
|
|
249
|
+
const varName = key
|
|
250
|
+
.replace(/\./g, '-')
|
|
251
|
+
.replace(/([a-z])([A-Z])/g, '$1-$2')
|
|
252
|
+
.toLowerCase();
|
|
253
|
+
return `--${prefix}${varName}`;
|
|
254
|
+
}
|
|
255
|
+
function splitScopableCss(css) {
|
|
256
|
+
let depth = 0;
|
|
257
|
+
let result = {
|
|
258
|
+
scopable: '',
|
|
259
|
+
unscopable: '',
|
|
260
|
+
};
|
|
261
|
+
let start = 0;
|
|
262
|
+
let kind = 'scopable';
|
|
263
|
+
for (let i = 0; i < css.length; i++) {
|
|
264
|
+
const char = css[i];
|
|
265
|
+
// @MaSch0212 review the `!depth` condition here, some queries are allowed inside scopable css
|
|
266
|
+
if (!depth && char === '@' && (!css[i - 1] || css[i - 1] === ' ') && kind === 'scopable') {
|
|
267
|
+
result.scopable += css.slice(start, i - 1);
|
|
268
|
+
start = i;
|
|
269
|
+
kind = 'unscopable';
|
|
270
|
+
}
|
|
271
|
+
else if (char === '{') {
|
|
272
|
+
depth++;
|
|
273
|
+
}
|
|
274
|
+
else if (char === '}') {
|
|
275
|
+
depth--;
|
|
276
|
+
if (depth === 0 && kind === 'unscopable') {
|
|
277
|
+
result.unscopable += css.slice(start, i + 1);
|
|
278
|
+
start = i + 1;
|
|
279
|
+
kind = 'scopable';
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
result[kind] += css.slice(start);
|
|
284
|
+
return result;
|
|
285
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-class-name.d.ts","sourceRoot":"","sources":["../../../src/api/style/get-class-name.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAKR"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type StyleScope = {
|
|
2
|
+
kind: 'attribute';
|
|
3
|
+
name: string;
|
|
4
|
+
value?: string;
|
|
5
|
+
} | {
|
|
6
|
+
kind: 'class';
|
|
7
|
+
name: string;
|
|
8
|
+
} | {
|
|
9
|
+
kind: 'id';
|
|
10
|
+
name: string;
|
|
11
|
+
} | {
|
|
12
|
+
kind: 'tag';
|
|
13
|
+
name: string;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=style-scope.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-scope.d.ts","sourceRoot":"","sources":["../../../src/api/style/style-scope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC"}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"upsert-theme-style-element.d.ts","sourceRoot":"","sources":["../../../src/api/style/upsert-theme-style-element.ts"],"names":[],"mappings":"AAAA,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,GAAG,EAAE,MAAM,GACV,gBAAgB,CAqBlB"}
|