@angular/material 18.2.0-next.0 → 18.2.0-next.2
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/button/_button-base.scss +0 -6
- package/button/_icon-button-theme.scss +18 -9
- package/checkbox/_checkbox-common.scss +38 -4
- package/checkbox/index.d.ts +6 -1
- package/core/_core.scss +15 -18
- package/core/m2/_typography.scss +129 -2
- package/core/style/_elevation.scss +116 -27
- package/core/theming/_color-api-backwards-compatibility.scss +2 -0
- package/core/tokens/_m3-tokens.scss +13 -13
- package/core/tokens/_token-utils.scss +98 -25
- package/core/tokens/m2/mat/_fab-small.scss +1 -2
- package/core/tokens/m2/mat/_fab.scss +1 -2
- package/core/tokens/m2/mat/_filled-button.scss +1 -2
- package/core/tokens/m2/mat/_form-field.scss +2 -5
- package/core/tokens/m2/mat/_optgroup.scss +0 -9
- package/core/tokens/m2/mat/_option.scss +0 -9
- package/core/tokens/m2/mat/_paginator.scss +1 -2
- package/core/tokens/m2/mat/_protected-button.scss +1 -2
- package/core/tokens/m2/mdc/_checkbox.scss +1 -2
- package/core/tokens/m2/mdc/_circular-progress.scss +2 -2
- package/core/tokens/m2/mdc/_filled-button.scss +1 -2
- package/core/tokens/m2/mdc/_protected-button.scss +1 -2
- package/core/tokens/m2/mdc/_slider.scss +3 -6
- package/core/tokens/m2/mdc/_switch.scss +12 -8
- package/core/tokens/m3/definitions/_index.scss +94 -0
- package/core/tokens/m3/definitions/_md-comp-checkbox.scss +120 -0
- package/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss +27 -0
- package/core/tokens/m3/definitions/_md-comp-data-table.scss +90 -0
- package/core/tokens/m3/definitions/_md-comp-dialog.scss +123 -0
- package/core/tokens/m3/definitions/_md-comp-elevated-button.scss +87 -0
- package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +53 -0
- package/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss +90 -0
- package/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss +91 -0
- package/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss +91 -0
- package/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss +59 -0
- package/core/tokens/m3/definitions/_md-comp-fab-primary.scss +59 -0
- package/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss +60 -0
- package/core/tokens/m3/definitions/_md-comp-fab-secondary.scss +60 -0
- package/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss +60 -0
- package/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss +60 -0
- package/core/tokens/m3/definitions/_md-comp-filled-button.scss +85 -0
- package/core/tokens/m3/definitions/_md-comp-filled-card.scss +52 -0
- package/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss +73 -0
- package/core/tokens/m3/definitions/_md-comp-filled-text-field.scss +189 -0
- package/core/tokens/m3/definitions/_md-comp-icon-button.scss +64 -0
- package/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss +29 -0
- package/core/tokens/m3/definitions/_md-comp-list.scss +252 -0
- package/core/tokens/m3/definitions/_md-comp-outlined-button.scss +80 -0
- package/core/tokens/m3/definitions/_md-comp-outlined-card.scss +59 -0
- package/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss +73 -0
- package/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss +171 -0
- package/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss +51 -0
- package/core/tokens/m3/definitions/_md-comp-radio-button.scss +62 -0
- package/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss +80 -0
- package/core/tokens/m3/definitions/_md-comp-slider.scss +110 -0
- package/core/tokens/m3/definitions/_md-comp-snackbar.scss +125 -0
- package/core/tokens/m3/definitions/_md-comp-switch.scss +130 -0
- package/core/tokens/m3/definitions/_md-comp-text-button.scss +73 -0
- package/core/tokens/m3/definitions/_md-ref-palette.scss +100 -0
- package/core/tokens/m3/definitions/_md-ref-typeface.scss +14 -0
- package/core/tokens/m3/definitions/_md-sys-color.scss +126 -0
- package/core/tokens/m3/definitions/_md-sys-elevation.scss +15 -0
- package/core/tokens/m3/definitions/_md-sys-motion.scss +46 -0
- package/core/tokens/m3/definitions/_md-sys-shape.scss +24 -0
- package/core/tokens/m3/definitions/_md-sys-state.scss +13 -0
- package/core/tokens/m3/definitions/_md-sys-typescale.scss +308 -0
- package/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss +105 -0
- package/core/tokens/m3/definitions/unused/_md-comp-badge.scss +54 -0
- package/core/tokens/m3/definitions/unused/_md-comp-banner.scss +71 -0
- package/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss +29 -0
- package/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss +59 -0
- package/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss +87 -0
- package/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss +248 -0
- package/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss +313 -0
- package/core/tokens/m3/definitions/unused/_md-comp-divider.scss +19 -0
- package/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss +82 -0
- package/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss +86 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss +54 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss +54 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss +59 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss +60 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss +58 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss +58 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss +58 -0
- package/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss +60 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss +269 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss +94 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss +274 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-button.scss +95 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss +80 -0
- package/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss +205 -0
- package/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss +109 -0
- package/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss +180 -0
- package/core/tokens/m3/definitions/unused/_md-comp-menu.scss +31 -0
- package/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss +110 -0
- package/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss +162 -0
- package/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss +127 -0
- package/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss +259 -0
- package/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss +90 -0
- package/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss +108 -0
- package/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss +264 -0
- package/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss +117 -0
- package/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss +121 -0
- package/core/tokens/m3/definitions/unused/_md-comp-scrim.scss +19 -0
- package/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss +97 -0
- package/core/tokens/m3/definitions/unused/_md-comp-search-view.scss +91 -0
- package/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss +39 -0
- package/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss +28 -0
- package/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss +87 -0
- package/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss +94 -0
- package/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss +121 -0
- package/core/tokens/m3/definitions/unused/_md-comp-time-input.scss +222 -0
- package/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss +268 -0
- package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss +59 -0
- package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss +59 -0
- package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss +62 -0
- package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss +60 -0
- package/core/tokens/m3/mat/_icon-button.scss +31 -2
- package/core/tokens/m3/mdc/_icon-button.scss +21 -2
- package/core/tokens/m3/mdc/_slider.scss +9 -2
- package/core/tokens/m3/mdc/_switch.scss +13 -2
- package/esm2022/autocomplete/animations.mjs +1 -2
- package/esm2022/autocomplete/autocomplete-origin.mjs +4 -4
- package/esm2022/autocomplete/autocomplete-trigger.mjs +4 -4
- package/esm2022/autocomplete/autocomplete.mjs +4 -4
- package/esm2022/autocomplete/module.mjs +5 -5
- package/esm2022/badge/badge-module.mjs +5 -5
- package/esm2022/badge/badge.mjs +7 -7
- package/esm2022/bottom-sheet/bottom-sheet-container.mjs +4 -4
- package/esm2022/bottom-sheet/bottom-sheet-module.mjs +5 -5
- package/esm2022/bottom-sheet/bottom-sheet.mjs +4 -4
- package/esm2022/button/button-base.mjs +7 -7
- package/esm2022/button/button.mjs +7 -7
- package/esm2022/button/fab.mjs +17 -17
- package/esm2022/button/icon-button.mjs +7 -7
- package/esm2022/button/module.mjs +5 -5
- package/esm2022/button-toggle/button-toggle-module.mjs +5 -5
- package/esm2022/button-toggle/button-toggle.mjs +7 -7
- package/esm2022/card/card.mjs +43 -43
- package/esm2022/card/module.mjs +5 -5
- package/esm2022/checkbox/checkbox-config.mjs +2 -1
- package/esm2022/checkbox/checkbox-required-validator.mjs +4 -4
- package/esm2022/checkbox/checkbox.mjs +13 -7
- package/esm2022/checkbox/module.mjs +9 -9
- package/esm2022/chips/chip-action.mjs +4 -4
- package/esm2022/chips/chip-edit-input.mjs +4 -4
- package/esm2022/chips/chip-grid.mjs +5 -5
- package/esm2022/chips/chip-icons.mjs +10 -10
- package/esm2022/chips/chip-input.mjs +4 -4
- package/esm2022/chips/chip-listbox.mjs +4 -4
- package/esm2022/chips/chip-option.mjs +4 -4
- package/esm2022/chips/chip-row.mjs +4 -4
- package/esm2022/chips/chip-set.mjs +4 -4
- package/esm2022/chips/chip.mjs +4 -4
- package/esm2022/chips/module.mjs +5 -5
- package/esm2022/core/common-behaviors/common-module.mjs +5 -5
- package/esm2022/core/datetime/index.mjs +9 -9
- package/esm2022/core/datetime/native-date-adapter.mjs +4 -4
- package/esm2022/core/error/error-options.mjs +7 -7
- package/esm2022/core/internal-form-field/internal-form-field.mjs +4 -4
- package/esm2022/core/line/line.mjs +8 -8
- package/esm2022/core/option/index.mjs +5 -5
- package/esm2022/core/option/optgroup.mjs +4 -4
- package/esm2022/core/option/option.mjs +4 -4
- package/esm2022/core/private/ripple-loader.mjs +4 -4
- package/esm2022/core/ripple/index.mjs +5 -5
- package/esm2022/core/ripple/ripple.mjs +4 -4
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +5 -5
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/datepicker/calendar-body.mjs +4 -4
- package/esm2022/datepicker/calendar.mjs +7 -7
- package/esm2022/datepicker/date-range-input-parts.mjs +10 -10
- package/esm2022/datepicker/date-range-input.mjs +4 -4
- package/esm2022/datepicker/date-range-picker.mjs +4 -4
- package/esm2022/datepicker/date-range-selection-strategy.mjs +4 -4
- package/esm2022/datepicker/date-selection-model.mjs +10 -10
- package/esm2022/datepicker/datepicker-actions.mjs +10 -10
- package/esm2022/datepicker/datepicker-base.mjs +7 -7
- package/esm2022/datepicker/datepicker-input-base.mjs +4 -4
- package/esm2022/datepicker/datepicker-input.mjs +4 -4
- package/esm2022/datepicker/datepicker-intl.mjs +4 -4
- package/esm2022/datepicker/datepicker-module.mjs +5 -5
- package/esm2022/datepicker/datepicker-toggle.mjs +7 -7
- package/esm2022/datepicker/datepicker.mjs +4 -4
- package/esm2022/datepicker/month-view.mjs +4 -4
- package/esm2022/datepicker/multi-year-view.mjs +4 -4
- package/esm2022/datepicker/year-view.mjs +4 -4
- package/esm2022/dialog/dialog-container.mjs +4 -7
- package/esm2022/dialog/dialog-content-directives.mjs +16 -16
- package/esm2022/dialog/dialog.mjs +4 -4
- package/esm2022/dialog/module.mjs +5 -5
- package/esm2022/divider/divider-module.mjs +5 -5
- package/esm2022/divider/divider.mjs +4 -4
- package/esm2022/expansion/accordion.mjs +4 -4
- package/esm2022/expansion/expansion-module.mjs +5 -5
- package/esm2022/expansion/expansion-panel-content.mjs +4 -4
- package/esm2022/expansion/expansion-panel-header.mjs +11 -11
- package/esm2022/expansion/expansion-panel.mjs +7 -7
- package/esm2022/form-field/directives/error.mjs +4 -4
- package/esm2022/form-field/directives/floating-label.mjs +4 -4
- package/esm2022/form-field/directives/hint.mjs +4 -4
- package/esm2022/form-field/directives/label.mjs +4 -4
- package/esm2022/form-field/directives/line-ripple.mjs +4 -4
- package/esm2022/form-field/directives/notched-outline.mjs +5 -5
- package/esm2022/form-field/directives/prefix.mjs +4 -4
- package/esm2022/form-field/directives/suffix.mjs +4 -4
- package/esm2022/form-field/form-field-control.mjs +4 -4
- package/esm2022/form-field/form-field.mjs +9 -6
- package/esm2022/form-field/module.mjs +5 -5
- package/esm2022/grid-list/grid-list-module.mjs +5 -5
- package/esm2022/grid-list/grid-list.mjs +4 -4
- package/esm2022/grid-list/grid-tile.mjs +16 -16
- package/esm2022/icon/icon-module.mjs +5 -5
- package/esm2022/icon/icon-registry.mjs +4 -4
- package/esm2022/icon/icon.mjs +4 -4
- package/esm2022/icon/testing/fake-icon-registry.mjs +8 -8
- package/esm2022/input/input.mjs +39 -6
- package/esm2022/input/module.mjs +5 -5
- package/esm2022/list/action-list.mjs +4 -4
- package/esm2022/list/list-base.mjs +7 -7
- package/esm2022/list/list-item-sections.mjs +19 -19
- package/esm2022/list/list-module.mjs +5 -5
- package/esm2022/list/list-option.mjs +6 -6
- package/esm2022/list/list.mjs +7 -7
- package/esm2022/list/nav-list.mjs +4 -4
- package/esm2022/list/selection-list.mjs +4 -4
- package/esm2022/list/subheader.mjs +4 -4
- package/esm2022/list/testing/selection-list-harness.mjs +2 -2
- package/esm2022/menu/menu-content.mjs +4 -4
- package/esm2022/menu/menu-item.mjs +4 -4
- package/esm2022/menu/menu-trigger.mjs +4 -4
- package/esm2022/menu/menu.mjs +4 -4
- package/esm2022/menu/module.mjs +5 -5
- package/esm2022/paginator/module.mjs +5 -5
- package/esm2022/paginator/paginator-intl.mjs +4 -4
- package/esm2022/paginator/paginator.mjs +4 -4
- package/esm2022/progress-bar/module.mjs +5 -5
- package/esm2022/progress-bar/progress-bar.mjs +4 -4
- package/esm2022/progress-spinner/module.mjs +5 -5
- package/esm2022/progress-spinner/progress-spinner.mjs +5 -5
- package/esm2022/radio/module.mjs +5 -5
- package/esm2022/radio/radio.mjs +7 -7
- package/esm2022/select/module.mjs +5 -5
- package/esm2022/select/select.mjs +7 -7
- package/esm2022/sidenav/drawer.mjs +10 -10
- package/esm2022/sidenav/sidenav-module.mjs +5 -5
- package/esm2022/sidenav/sidenav.mjs +10 -10
- package/esm2022/slide-toggle/module.mjs +9 -9
- package/esm2022/slide-toggle/slide-toggle-required-validator.mjs +4 -4
- package/esm2022/slide-toggle/slide-toggle.mjs +6 -6
- package/esm2022/slider/module.mjs +5 -5
- package/esm2022/slider/slider-input.mjs +7 -7
- package/esm2022/slider/slider-thumb.mjs +4 -4
- package/esm2022/slider/slider.mjs +5 -5
- package/esm2022/snack-bar/module.mjs +5 -5
- package/esm2022/snack-bar/simple-snack-bar.mjs +4 -4
- package/esm2022/snack-bar/snack-bar-container.mjs +4 -4
- package/esm2022/snack-bar/snack-bar-content.mjs +10 -10
- package/esm2022/snack-bar/snack-bar.mjs +4 -4
- package/esm2022/sort/sort-header-intl.mjs +4 -4
- package/esm2022/sort/sort-header.mjs +4 -4
- package/esm2022/sort/sort-module.mjs +5 -5
- package/esm2022/sort/sort.mjs +4 -4
- package/esm2022/stepper/step-content.mjs +4 -4
- package/esm2022/stepper/step-header.mjs +4 -4
- package/esm2022/stepper/step-label.mjs +4 -4
- package/esm2022/stepper/stepper-button.mjs +7 -7
- package/esm2022/stepper/stepper-icon.mjs +4 -4
- package/esm2022/stepper/stepper-intl.mjs +4 -4
- package/esm2022/stepper/stepper-module.mjs +5 -5
- package/esm2022/stepper/stepper.mjs +7 -7
- package/esm2022/table/cell.mjs +22 -22
- package/esm2022/table/module.mjs +5 -5
- package/esm2022/table/row.mjs +22 -22
- package/esm2022/table/table.mjs +7 -7
- package/esm2022/table/text-column.mjs +4 -4
- package/esm2022/tabs/ink-bar.mjs +4 -4
- package/esm2022/tabs/module.mjs +5 -5
- package/esm2022/tabs/paginated-tab-header.mjs +4 -4
- package/esm2022/tabs/tab-body.mjs +7 -7
- package/esm2022/tabs/tab-content.mjs +4 -4
- package/esm2022/tabs/tab-group.mjs +4 -4
- package/esm2022/tabs/tab-header.mjs +5 -5
- package/esm2022/tabs/tab-label-wrapper.mjs +4 -4
- package/esm2022/tabs/tab-label.mjs +4 -4
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +11 -11
- package/esm2022/tabs/tab.mjs +4 -4
- package/esm2022/tabs/testing/tab-harness.mjs +2 -2
- package/esm2022/toolbar/toolbar-module.mjs +5 -5
- package/esm2022/toolbar/toolbar.mjs +7 -7
- package/esm2022/tooltip/module.mjs +5 -5
- package/esm2022/tooltip/tooltip.mjs +10 -7
- package/esm2022/tree/data-source/flat-data-source.mjs +9 -1
- package/esm2022/tree/node.mjs +106 -26
- package/esm2022/tree/outlet.mjs +4 -4
- package/esm2022/tree/padding.mjs +4 -4
- package/esm2022/tree/testing/node-harness.mjs +5 -1
- package/esm2022/tree/toggle.mjs +4 -4
- package/esm2022/tree/tree-module.mjs +5 -5
- package/esm2022/tree/tree.mjs +4 -5
- package/fesm2022/autocomplete.mjs +13 -14
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +10 -10
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +10 -10
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +10 -10
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +38 -38
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card.mjs +46 -46
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +24 -17
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +41 -41
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +59 -59
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +82 -82
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog.mjs +25 -28
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider.mjs +7 -7
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion.mjs +26 -26
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +40 -37
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +22 -22
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +7 -7
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +10 -10
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +42 -9
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +1 -1
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +51 -51
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +16 -16
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +10 -10
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +7 -7
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +8 -8
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +10 -10
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +10 -10
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +22 -22
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +16 -16
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs +17 -17
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +22 -22
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort.mjs +13 -13
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper.mjs +31 -31
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +55 -55
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs +1 -1
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +45 -45
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +10 -10
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +13 -10
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs +4 -0
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +130 -43
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-focus-overlay.scss +1 -1
- package/form-field/_form-field-subscript.scss +1 -3
- package/form-field/_form-field-theme.scss +20 -20
- package/form-field/_mdc-text-field-density-overrides.scss +2 -2
- package/form-field/_mdc-text-field-structure-overrides.scss +2 -13
- package/form-field/_mdc-text-field-structure.scss +610 -0
- package/input/index.d.ts +13 -1
- package/list/testing/index.d.ts +1 -1
- package/package.json +3 -51
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-spinner/_progress-spinner-theme.scss +11 -14
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-generate/m3-theme/index_bundled.js +2 -2
- package/schematics/ng-update/index_bundled.js +31 -31
- package/slide-toggle/_slide-toggle-theme.scss +21 -26
- package/slider/_slider-theme.scss +24 -41
- package/tabs/_tabs-common.scss +14 -0
- package/tabs/testing/index.d.ts +1 -1
- package/tooltip/index.d.ts +5 -0
- package/tree/index.d.ts +60 -11
- package/tree/testing/index.d.ts +2 -0
- package/core/mdc-helpers/_mdc-helpers.scss +0 -60
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Design system display name: Material 3
|
|
3
|
+
// Design system version: v0.161
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
@use 'sass:map';
|
|
7
|
+
|
|
8
|
+
@use './md-sys-color';
|
|
9
|
+
|
|
10
|
+
@use './md-sys-shape';
|
|
11
|
+
|
|
12
|
+
@use './md-sys-state';
|
|
13
|
+
|
|
14
|
+
@use './md-sys-typescale';
|
|
15
|
+
|
|
16
|
+
$_default: (
|
|
17
|
+
'md-sys-color': md-sys-color.values-light(),
|
|
18
|
+
'md-sys-shape': md-sys-shape.values(),
|
|
19
|
+
'md-sys-state': md-sys-state.values(),
|
|
20
|
+
'md-sys-typescale': md-sys-typescale.values(),
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
|
24
|
+
@return (
|
|
25
|
+
'container-height': if($exclude-hardcoded-values, null, 40px),
|
|
26
|
+
'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
27
|
+
'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),
|
|
28
|
+
'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
29
|
+
'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),
|
|
30
|
+
'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
31
|
+
'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),
|
|
32
|
+
'focus-state-layer-opacity':
|
|
33
|
+
map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
|
|
34
|
+
'hover-state-layer-opacity':
|
|
35
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
36
|
+
'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),
|
|
37
|
+
'label-text-line-height':
|
|
38
|
+
map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
|
|
39
|
+
'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),
|
|
40
|
+
'label-text-tracking':
|
|
41
|
+
map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
|
|
42
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
43
|
+
// Tokens md.comp.outlined-segmented-button.label-text.tracking cannot be represented in
|
|
44
|
+
// the "font" property shorthand. Consider using the discrete properties instead.
|
|
45
|
+
'label-text-type':
|
|
46
|
+
if(
|
|
47
|
+
$exclude-hardcoded-values,
|
|
48
|
+
null,
|
|
49
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight')
|
|
50
|
+
map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
|
|
51
|
+
$deps,
|
|
52
|
+
'md-sys-typescale',
|
|
53
|
+
'label-large-line-height'
|
|
54
|
+
) map.get($deps, 'md-sys-typescale', 'label-large-font')
|
|
55
|
+
),
|
|
56
|
+
'label-text-weight':
|
|
57
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight'),
|
|
58
|
+
'outline-color': map.get($deps, 'md-sys-color', 'outline'),
|
|
59
|
+
'outline-width': if($exclude-hardcoded-values, null, 1px),
|
|
60
|
+
'pressed-state-layer-opacity':
|
|
61
|
+
map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
|
|
62
|
+
'selected-container-color':
|
|
63
|
+
map.get($deps, 'md-sys-color', 'secondary-container'),
|
|
64
|
+
'selected-focus-icon-color':
|
|
65
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
66
|
+
'selected-focus-label-text-color':
|
|
67
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
68
|
+
'selected-focus-state-layer-color':
|
|
69
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
70
|
+
'selected-hover-icon-color':
|
|
71
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
72
|
+
'selected-hover-label-text-color':
|
|
73
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
74
|
+
'selected-hover-state-layer-color':
|
|
75
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
76
|
+
'selected-label-text-color':
|
|
77
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
78
|
+
'selected-pressed-icon-color':
|
|
79
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
80
|
+
'selected-pressed-label-text-color':
|
|
81
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
82
|
+
'selected-pressed-state-layer-color':
|
|
83
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
84
|
+
'selected-with-icon-icon-color':
|
|
85
|
+
map.get($deps, 'md-sys-color', 'on-secondary-container'),
|
|
86
|
+
'shape': map.get($deps, 'md-sys-shape', 'corner-full'),
|
|
87
|
+
'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
88
|
+
'unselected-focus-label-text-color':
|
|
89
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
90
|
+
'unselected-focus-state-layer-color':
|
|
91
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
92
|
+
'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
93
|
+
'unselected-hover-label-text-color':
|
|
94
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
95
|
+
'unselected-hover-state-layer-color':
|
|
96
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
97
|
+
'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
98
|
+
'unselected-pressed-icon-color':
|
|
99
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
100
|
+
'unselected-pressed-label-text-color':
|
|
101
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
102
|
+
'unselected-pressed-state-layer-color':
|
|
103
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
104
|
+
'unselected-with-icon-icon-color':
|
|
105
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
106
|
+
'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px)
|
|
107
|
+
);
|
|
108
|
+
}
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Design system display name: Material 3
|
|
3
|
+
// Design system version: v0.161
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
@use 'sass:map';
|
|
7
|
+
|
|
8
|
+
@use './md-sys-color';
|
|
9
|
+
|
|
10
|
+
@use './md-sys-elevation';
|
|
11
|
+
|
|
12
|
+
@use './md-sys-shape';
|
|
13
|
+
|
|
14
|
+
@use './md-sys-state';
|
|
15
|
+
|
|
16
|
+
@use './md-sys-typescale';
|
|
17
|
+
|
|
18
|
+
$_default: (
|
|
19
|
+
'md-sys-color': md-sys-color.values-light(),
|
|
20
|
+
'md-sys-elevation': md-sys-elevation.values(),
|
|
21
|
+
'md-sys-shape': md-sys-shape.values(),
|
|
22
|
+
'md-sys-state': md-sys-state.values(),
|
|
23
|
+
'md-sys-typescale': md-sys-typescale.values(),
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
|
27
|
+
@return (
|
|
28
|
+
'menu-cascading-menu-indicator-icon-color':
|
|
29
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
30
|
+
'menu-cascading-menu-indicator-icon-size':
|
|
31
|
+
if($exclude-hardcoded-values, null, 24px),
|
|
32
|
+
'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),
|
|
33
|
+
'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),
|
|
34
|
+
'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
|
|
35
|
+
'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),
|
|
36
|
+
'menu-container-surface-tint-layer-color':
|
|
37
|
+
map.get($deps, 'md-sys-color', 'surface-tint'),
|
|
38
|
+
'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),
|
|
39
|
+
'menu-divider-height': if($exclude-hardcoded-values, null, 1px),
|
|
40
|
+
'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),
|
|
41
|
+
'menu-list-item-label-text-color':
|
|
42
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
43
|
+
'menu-list-item-label-text-font':
|
|
44
|
+
map.get($deps, 'md-sys-typescale', 'label-large-font'),
|
|
45
|
+
'menu-list-item-label-text-line-height':
|
|
46
|
+
map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
|
|
47
|
+
'menu-list-item-label-text-size':
|
|
48
|
+
map.get($deps, 'md-sys-typescale', 'label-large-size'),
|
|
49
|
+
'menu-list-item-label-text-tracking':
|
|
50
|
+
map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
|
|
51
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
52
|
+
// Tokens md.comp.outlined-select.menu.list-item.label-text.tracking cannot be represented
|
|
53
|
+
// in the "font" property shorthand. Consider using the discrete properties instead.
|
|
54
|
+
'menu-list-item-label-text-type':
|
|
55
|
+
if(
|
|
56
|
+
$exclude-hardcoded-values,
|
|
57
|
+
null,
|
|
58
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight')
|
|
59
|
+
map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
|
|
60
|
+
$deps,
|
|
61
|
+
'md-sys-typescale',
|
|
62
|
+
'label-large-line-height'
|
|
63
|
+
) map.get($deps, 'md-sys-typescale', 'label-large-font')
|
|
64
|
+
),
|
|
65
|
+
'menu-list-item-label-text-weight':
|
|
66
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight'),
|
|
67
|
+
'menu-list-item-selected-container-color':
|
|
68
|
+
map.get($deps, 'md-sys-color', 'surface-variant'),
|
|
69
|
+
'menu-list-item-with-leading-icon-leading-icon-color':
|
|
70
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
71
|
+
'menu-list-item-with-leading-icon-leading-icon-size':
|
|
72
|
+
if($exclude-hardcoded-values, null, 24px),
|
|
73
|
+
'menu-list-item-with-trailing-icon-trailing-icon-color':
|
|
74
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
75
|
+
'menu-list-item-with-trailing-icon-trailing-icon-size':
|
|
76
|
+
if($exclude-hardcoded-values, null, 24px),
|
|
77
|
+
'text-field-container-color':
|
|
78
|
+
map.get($deps, 'md-sys-color', 'surface-variant'),
|
|
79
|
+
'text-field-container-shape':
|
|
80
|
+
map.get($deps, 'md-sys-shape', 'corner-extra-small'),
|
|
81
|
+
'text-field-disabled-input-text-color':
|
|
82
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
83
|
+
'text-field-disabled-input-text-opacity':
|
|
84
|
+
if($exclude-hardcoded-values, null, 0.38),
|
|
85
|
+
'text-field-disabled-label-text-color':
|
|
86
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
87
|
+
'text-field-disabled-label-text-opacity':
|
|
88
|
+
if($exclude-hardcoded-values, null, 0.38),
|
|
89
|
+
'text-field-disabled-leading-icon-color':
|
|
90
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
91
|
+
'text-field-disabled-leading-icon-opacity':
|
|
92
|
+
if($exclude-hardcoded-values, null, 0.38),
|
|
93
|
+
'text-field-disabled-outline-color':
|
|
94
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
95
|
+
'text-field-disabled-outline-opacity':
|
|
96
|
+
if($exclude-hardcoded-values, null, 0.12),
|
|
97
|
+
'text-field-disabled-outline-width':
|
|
98
|
+
if($exclude-hardcoded-values, null, 1px),
|
|
99
|
+
'text-field-disabled-supporting-text-color':
|
|
100
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
101
|
+
'text-field-disabled-supporting-text-opacity':
|
|
102
|
+
if($exclude-hardcoded-values, null, 0.38),
|
|
103
|
+
'text-field-disabled-trailing-icon-color':
|
|
104
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
105
|
+
'text-field-disabled-trailing-icon-opacity':
|
|
106
|
+
if($exclude-hardcoded-values, null, 0.38),
|
|
107
|
+
'text-field-error-focus-input-text-color':
|
|
108
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
109
|
+
'text-field-error-focus-label-text-color':
|
|
110
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
111
|
+
'text-field-error-focus-leading-icon-color':
|
|
112
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
113
|
+
'text-field-error-focus-outline-color':
|
|
114
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
115
|
+
'text-field-error-focus-supporting-text-color':
|
|
116
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
117
|
+
'text-field-error-focus-trailing-icon-color':
|
|
118
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
119
|
+
'text-field-error-hover-input-text-color':
|
|
120
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
121
|
+
'text-field-error-hover-label-text-color':
|
|
122
|
+
map.get($deps, 'md-sys-color', 'on-error-container'),
|
|
123
|
+
'text-field-error-hover-leading-icon-color':
|
|
124
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
125
|
+
'text-field-error-hover-outline-color':
|
|
126
|
+
map.get($deps, 'md-sys-color', 'on-error-container'),
|
|
127
|
+
'text-field-error-hover-state-layer-color':
|
|
128
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
129
|
+
'text-field-error-hover-state-layer-opacity':
|
|
130
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
131
|
+
'text-field-error-hover-supporting-text-color':
|
|
132
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
133
|
+
'text-field-error-hover-trailing-icon-color':
|
|
134
|
+
map.get($deps, 'md-sys-color', 'on-error-container'),
|
|
135
|
+
'text-field-error-input-text-color':
|
|
136
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
137
|
+
'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),
|
|
138
|
+
'text-field-error-leading-icon-color':
|
|
139
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
140
|
+
'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'),
|
|
141
|
+
'text-field-error-supporting-text-color':
|
|
142
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
143
|
+
'text-field-error-trailing-icon-color':
|
|
144
|
+
map.get($deps, 'md-sys-color', 'error'),
|
|
145
|
+
'text-field-focus-input-text-color':
|
|
146
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
147
|
+
'text-field-focus-label-text-color':
|
|
148
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
149
|
+
'text-field-focus-leading-icon-color':
|
|
150
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
151
|
+
'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
152
|
+
'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px),
|
|
153
|
+
'text-field-focus-supporting-text-color':
|
|
154
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
155
|
+
'text-field-focus-trailing-icon-color':
|
|
156
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
157
|
+
'text-field-hover-input-text-color':
|
|
158
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
159
|
+
'text-field-hover-label-text-color':
|
|
160
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
161
|
+
'text-field-hover-leading-icon-color':
|
|
162
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
163
|
+
'text-field-hover-outline-color':
|
|
164
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
165
|
+
'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px),
|
|
166
|
+
'text-field-hover-state-layer-color':
|
|
167
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
168
|
+
'text-field-hover-state-layer-opacity':
|
|
169
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
170
|
+
'text-field-hover-supporting-text-color':
|
|
171
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
172
|
+
'text-field-hover-trailing-icon-color':
|
|
173
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
174
|
+
'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
|
|
175
|
+
'text-field-input-text-font':
|
|
176
|
+
map.get($deps, 'md-sys-typescale', 'body-large-font'),
|
|
177
|
+
'text-field-input-text-line-height':
|
|
178
|
+
map.get($deps, 'md-sys-typescale', 'body-large-line-height'),
|
|
179
|
+
'text-field-input-text-size':
|
|
180
|
+
map.get($deps, 'md-sys-typescale', 'body-large-size'),
|
|
181
|
+
'text-field-input-text-tracking':
|
|
182
|
+
map.get($deps, 'md-sys-typescale', 'body-large-tracking'),
|
|
183
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
184
|
+
// Tokens md.comp.outlined-select.text-field.input-text.tracking cannot be represented in
|
|
185
|
+
// the "font" property shorthand. Consider using the discrete properties instead.
|
|
186
|
+
'text-field-input-text-type':
|
|
187
|
+
if(
|
|
188
|
+
$exclude-hardcoded-values,
|
|
189
|
+
null,
|
|
190
|
+
map.get($deps, 'md-sys-typescale', 'body-large-weight')
|
|
191
|
+
map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(
|
|
192
|
+
$deps,
|
|
193
|
+
'md-sys-typescale',
|
|
194
|
+
'body-large-line-height'
|
|
195
|
+
) map.get($deps, 'md-sys-typescale', 'body-large-font')
|
|
196
|
+
),
|
|
197
|
+
'text-field-input-text-weight':
|
|
198
|
+
map.get($deps, 'md-sys-typescale', 'body-large-weight'),
|
|
199
|
+
'text-field-label-text-color':
|
|
200
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
201
|
+
'text-field-label-text-font':
|
|
202
|
+
map.get($deps, 'md-sys-typescale', 'body-large-font'),
|
|
203
|
+
'text-field-label-text-line-height':
|
|
204
|
+
map.get($deps, 'md-sys-typescale', 'body-large-line-height'),
|
|
205
|
+
'text-field-label-text-populated-line-height':
|
|
206
|
+
map.get($deps, 'md-sys-typescale', 'body-small-line-height'),
|
|
207
|
+
'text-field-label-text-populated-size':
|
|
208
|
+
map.get($deps, 'md-sys-typescale', 'body-small-size'),
|
|
209
|
+
'text-field-label-text-size':
|
|
210
|
+
map.get($deps, 'md-sys-typescale', 'body-large-size'),
|
|
211
|
+
'text-field-label-text-tracking':
|
|
212
|
+
map.get($deps, 'md-sys-typescale', 'body-large-tracking'),
|
|
213
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
214
|
+
// Tokens md.comp.outlined-select.text-field.label-text.tracking cannot be represented in
|
|
215
|
+
// the "font" property shorthand. Consider using the discrete properties instead.
|
|
216
|
+
'text-field-label-text-type':
|
|
217
|
+
if(
|
|
218
|
+
$exclude-hardcoded-values,
|
|
219
|
+
null,
|
|
220
|
+
map.get($deps, 'md-sys-typescale', 'body-large-weight')
|
|
221
|
+
map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(
|
|
222
|
+
$deps,
|
|
223
|
+
'md-sys-typescale',
|
|
224
|
+
'body-large-line-height'
|
|
225
|
+
) map.get($deps, 'md-sys-typescale', 'body-large-font')
|
|
226
|
+
),
|
|
227
|
+
'text-field-label-text-weight':
|
|
228
|
+
map.get($deps, 'md-sys-typescale', 'body-large-weight'),
|
|
229
|
+
'text-field-leading-icon-color':
|
|
230
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
231
|
+
'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),
|
|
232
|
+
'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'),
|
|
233
|
+
'text-field-outline-width': if($exclude-hardcoded-values, null, 1px),
|
|
234
|
+
'text-field-supporting-text-color':
|
|
235
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
236
|
+
'text-field-supporting-text-font':
|
|
237
|
+
map.get($deps, 'md-sys-typescale', 'body-small-font'),
|
|
238
|
+
'text-field-supporting-text-line-height':
|
|
239
|
+
map.get($deps, 'md-sys-typescale', 'body-small-line-height'),
|
|
240
|
+
'text-field-supporting-text-size':
|
|
241
|
+
map.get($deps, 'md-sys-typescale', 'body-small-size'),
|
|
242
|
+
'text-field-supporting-text-tracking':
|
|
243
|
+
map.get($deps, 'md-sys-typescale', 'body-small-tracking'),
|
|
244
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
245
|
+
// Tokens md.comp.outlined-select.text-field.supporting-text.tracking cannot be represented
|
|
246
|
+
// in the "font" property shorthand. Consider using the discrete properties instead.
|
|
247
|
+
'text-field-supporting-text-type':
|
|
248
|
+
if(
|
|
249
|
+
$exclude-hardcoded-values,
|
|
250
|
+
null,
|
|
251
|
+
map.get($deps, 'md-sys-typescale', 'body-small-weight')
|
|
252
|
+
map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(
|
|
253
|
+
$deps,
|
|
254
|
+
'md-sys-typescale',
|
|
255
|
+
'body-small-line-height'
|
|
256
|
+
) map.get($deps, 'md-sys-typescale', 'body-small-font')
|
|
257
|
+
),
|
|
258
|
+
'text-field-supporting-text-weight':
|
|
259
|
+
map.get($deps, 'md-sys-typescale', 'body-small-weight'),
|
|
260
|
+
'text-field-trailing-icon-color':
|
|
261
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
262
|
+
'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)
|
|
263
|
+
);
|
|
264
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Design system display name: Material 3
|
|
3
|
+
// Design system version: v0.161
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
@use 'sass:map';
|
|
7
|
+
|
|
8
|
+
@use './md-sys-color';
|
|
9
|
+
|
|
10
|
+
@use './md-sys-elevation';
|
|
11
|
+
|
|
12
|
+
@use './md-sys-shape';
|
|
13
|
+
|
|
14
|
+
@use './md-sys-state';
|
|
15
|
+
|
|
16
|
+
@use './md-sys-typescale';
|
|
17
|
+
|
|
18
|
+
$_default: (
|
|
19
|
+
'md-sys-color': md-sys-color.values-light(),
|
|
20
|
+
'md-sys-elevation': md-sys-elevation.values(),
|
|
21
|
+
'md-sys-shape': md-sys-shape.values(),
|
|
22
|
+
'md-sys-state': md-sys-state.values(),
|
|
23
|
+
'md-sys-typescale': md-sys-typescale.values(),
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
|
27
|
+
@return (
|
|
28
|
+
'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
29
|
+
'active-indicator-height': if($exclude-hardcoded-values, null, 3px),
|
|
30
|
+
'active-indicator-shape':
|
|
31
|
+
if($exclude-hardcoded-values, null, (3px 3px 0 0)),
|
|
32
|
+
'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
33
|
+
'active-focus-state-layer-opacity':
|
|
34
|
+
map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
|
|
35
|
+
'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
36
|
+
'active-hover-state-layer-opacity':
|
|
37
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
38
|
+
'active-pressed-state-layer-color':
|
|
39
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
40
|
+
'active-pressed-state-layer-opacity':
|
|
41
|
+
map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
|
|
42
|
+
'container-color': map.get($deps, 'md-sys-color', 'surface'),
|
|
43
|
+
'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),
|
|
44
|
+
'container-height': if($exclude-hardcoded-values, null, 48px),
|
|
45
|
+
'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),
|
|
46
|
+
'inactive-focus-state-layer-color':
|
|
47
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
48
|
+
'inactive-focus-state-layer-opacity':
|
|
49
|
+
map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
|
|
50
|
+
'inactive-hover-state-layer-color':
|
|
51
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
52
|
+
'inactive-hover-state-layer-opacity':
|
|
53
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
54
|
+
'inactive-pressed-state-layer-color':
|
|
55
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
56
|
+
'inactive-pressed-state-layer-opacity':
|
|
57
|
+
map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
|
|
58
|
+
'with-icon-and-label-text-container-height':
|
|
59
|
+
if($exclude-hardcoded-values, null, 64px),
|
|
60
|
+
'with-icon-active-focus-icon-color':
|
|
61
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
62
|
+
'with-icon-active-hover-icon-color':
|
|
63
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
64
|
+
'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
65
|
+
'with-icon-active-pressed-icon-color':
|
|
66
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
67
|
+
'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px),
|
|
68
|
+
'with-icon-inactive-focus-icon-color':
|
|
69
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
70
|
+
'with-icon-inactive-hover-icon-color':
|
|
71
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
72
|
+
'with-icon-inactive-icon-color':
|
|
73
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
74
|
+
'with-icon-inactive-pressed-icon-color':
|
|
75
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
76
|
+
'with-label-text-active-focus-label-text-color':
|
|
77
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
78
|
+
'with-label-text-active-hover-label-text-color':
|
|
79
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
80
|
+
'with-label-text-active-label-text-color':
|
|
81
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
82
|
+
'with-label-text-active-pressed-label-text-color':
|
|
83
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
84
|
+
'with-label-text-inactive-focus-label-text-color':
|
|
85
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
86
|
+
'with-label-text-inactive-hover-label-text-color':
|
|
87
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
88
|
+
'with-label-text-inactive-label-text-color':
|
|
89
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
90
|
+
'with-label-text-inactive-pressed-label-text-color':
|
|
91
|
+
map.get($deps, 'md-sys-color', 'on-surface'),
|
|
92
|
+
'with-label-text-label-text-font':
|
|
93
|
+
map.get($deps, 'md-sys-typescale', 'title-small-font'),
|
|
94
|
+
'with-label-text-label-text-line-height':
|
|
95
|
+
map.get($deps, 'md-sys-typescale', 'title-small-line-height'),
|
|
96
|
+
'with-label-text-label-text-size':
|
|
97
|
+
map.get($deps, 'md-sys-typescale', 'title-small-size'),
|
|
98
|
+
'with-label-text-label-text-tracking':
|
|
99
|
+
map.get($deps, 'md-sys-typescale', 'title-small-tracking'),
|
|
100
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
101
|
+
// Tokens md.comp.primary-navigation-tab.with-label-text.label-text.tracking cannot be
|
|
102
|
+
// represented in the "font" property shorthand. Consider using the discrete properties instead.
|
|
103
|
+
'with-label-text-label-text-type':
|
|
104
|
+
if(
|
|
105
|
+
$exclude-hardcoded-values,
|
|
106
|
+
null,
|
|
107
|
+
map.get($deps, 'md-sys-typescale', 'title-small-weight')
|
|
108
|
+
map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(
|
|
109
|
+
$deps,
|
|
110
|
+
'md-sys-typescale',
|
|
111
|
+
'title-small-line-height'
|
|
112
|
+
) map.get($deps, 'md-sys-typescale', 'title-small-font')
|
|
113
|
+
),
|
|
114
|
+
'with-label-text-label-text-weight':
|
|
115
|
+
map.get($deps, 'md-sys-typescale', 'title-small-weight')
|
|
116
|
+
);
|
|
117
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Design system display name: Material 3
|
|
3
|
+
// Design system version: v0.161
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
@use 'sass:map';
|
|
7
|
+
|
|
8
|
+
@use './md-sys-color';
|
|
9
|
+
|
|
10
|
+
@use './md-sys-elevation';
|
|
11
|
+
|
|
12
|
+
@use './md-sys-shape';
|
|
13
|
+
|
|
14
|
+
@use './md-sys-state';
|
|
15
|
+
|
|
16
|
+
@use './md-sys-typescale';
|
|
17
|
+
|
|
18
|
+
$_default: (
|
|
19
|
+
'md-sys-color': md-sys-color.values-light(),
|
|
20
|
+
'md-sys-elevation': md-sys-elevation.values(),
|
|
21
|
+
'md-sys-shape': md-sys-shape.values(),
|
|
22
|
+
'md-sys-state': md-sys-state.values(),
|
|
23
|
+
'md-sys-typescale': md-sys-typescale.values(),
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
|
27
|
+
@return (
|
|
28
|
+
'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
29
|
+
'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
30
|
+
'action-focus-state-layer-opacity':
|
|
31
|
+
map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
|
|
32
|
+
'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
33
|
+
'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
34
|
+
'action-hover-state-layer-opacity':
|
|
35
|
+
map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
|
|
36
|
+
'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
37
|
+
'action-label-text-font':
|
|
38
|
+
map.get($deps, 'md-sys-typescale', 'label-large-font'),
|
|
39
|
+
'action-label-text-line-height':
|
|
40
|
+
map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
|
|
41
|
+
'action-label-text-size':
|
|
42
|
+
map.get($deps, 'md-sys-typescale', 'label-large-size'),
|
|
43
|
+
'action-label-text-tracking':
|
|
44
|
+
map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
|
|
45
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
46
|
+
// Tokens md.comp.rich-tooltip.action.label-text.tracking cannot be represented in the
|
|
47
|
+
// "font" property shorthand. Consider using the discrete properties instead.
|
|
48
|
+
'action-label-text-type':
|
|
49
|
+
if(
|
|
50
|
+
$exclude-hardcoded-values,
|
|
51
|
+
null,
|
|
52
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight')
|
|
53
|
+
map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
|
|
54
|
+
$deps,
|
|
55
|
+
'md-sys-typescale',
|
|
56
|
+
'label-large-line-height'
|
|
57
|
+
) map.get($deps, 'md-sys-typescale', 'label-large-font')
|
|
58
|
+
),
|
|
59
|
+
'action-label-text-weight':
|
|
60
|
+
map.get($deps, 'md-sys-typescale', 'label-large-weight'),
|
|
61
|
+
'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
|
|
62
|
+
'action-pressed-state-layer-color':
|
|
63
|
+
map.get($deps, 'md-sys-color', 'primary'),
|
|
64
|
+
'action-pressed-state-layer-opacity':
|
|
65
|
+
map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
|
|
66
|
+
'container-color': map.get($deps, 'md-sys-color', 'surface'),
|
|
67
|
+
'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),
|
|
68
|
+
'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
|
|
69
|
+
'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),
|
|
70
|
+
'container-surface-tint-layer-color':
|
|
71
|
+
map.get($deps, 'md-sys-color', 'surface-tint'),
|
|
72
|
+
'subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
73
|
+
'subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),
|
|
74
|
+
'subhead-line-height':
|
|
75
|
+
map.get($deps, 'md-sys-typescale', 'title-small-line-height'),
|
|
76
|
+
'subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),
|
|
77
|
+
'subhead-tracking':
|
|
78
|
+
map.get($deps, 'md-sys-typescale', 'title-small-tracking'),
|
|
79
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
80
|
+
// Tokens md.comp.rich-tooltip.subhead.tracking cannot be represented in the "font"
|
|
81
|
+
// property shorthand. Consider using the discrete properties instead.
|
|
82
|
+
'subhead-type':
|
|
83
|
+
if(
|
|
84
|
+
$exclude-hardcoded-values,
|
|
85
|
+
null,
|
|
86
|
+
map.get($deps, 'md-sys-typescale', 'title-small-weight')
|
|
87
|
+
map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(
|
|
88
|
+
$deps,
|
|
89
|
+
'md-sys-typescale',
|
|
90
|
+
'title-small-line-height'
|
|
91
|
+
) map.get($deps, 'md-sys-typescale', 'title-small-font')
|
|
92
|
+
),
|
|
93
|
+
'subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'),
|
|
94
|
+
'supporting-text-color':
|
|
95
|
+
map.get($deps, 'md-sys-color', 'on-surface-variant'),
|
|
96
|
+
'supporting-text-font':
|
|
97
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-font'),
|
|
98
|
+
'supporting-text-line-height':
|
|
99
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),
|
|
100
|
+
'supporting-text-size':
|
|
101
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-size'),
|
|
102
|
+
'supporting-text-tracking':
|
|
103
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),
|
|
104
|
+
// Warning: risk of reduced fidelity from using this composite typography token.
|
|
105
|
+
// Tokens md.comp.rich-tooltip.supporting-text.tracking cannot be represented in the
|
|
106
|
+
// "font" property shorthand. Consider using the discrete properties instead.
|
|
107
|
+
'supporting-text-type':
|
|
108
|
+
if(
|
|
109
|
+
$exclude-hardcoded-values,
|
|
110
|
+
null,
|
|
111
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-weight')
|
|
112
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(
|
|
113
|
+
$deps,
|
|
114
|
+
'md-sys-typescale',
|
|
115
|
+
'body-medium-line-height'
|
|
116
|
+
) map.get($deps, 'md-sys-typescale', 'body-medium-font')
|
|
117
|
+
),
|
|
118
|
+
'supporting-text-weight':
|
|
119
|
+
map.get($deps, 'md-sys-typescale', 'body-medium-weight')
|
|
120
|
+
);
|
|
121
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Design system display name: Material 3
|
|
3
|
+
// Design system version: v0.161
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
@use 'sass:map';
|
|
7
|
+
|
|
8
|
+
@use './md-sys-color';
|
|
9
|
+
|
|
10
|
+
$_default: (
|
|
11
|
+
'md-sys-color': md-sys-color.values-light(),
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
|
15
|
+
@return (
|
|
16
|
+
'container-color': map.get($deps, 'md-sys-color', 'scrim'),
|
|
17
|
+
'container-opacity': if($exclude-hardcoded-values, null, 0.32)
|
|
18
|
+
);
|
|
19
|
+
}
|