From d94af9c4fde3c92ce1acb92610ea472e4b4e8ce7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 20 Feb 2021 09:13:43 +0100 Subject: [PATCH] refactor(material/core): run sass module migration --- src/cdk/a11y/_a11y.import.scss | 3 +- src/cdk/a11y/_a11y.scss | 4 +- src/cdk/a11y/a11y-prebuilt.scss | 4 +- src/cdk/overlay/_overlay.import.scss | 11 +- src/cdk/overlay/_overlay.scss | 26 +- src/cdk/overlay/overlay-prebuilt.scss | 4 +- src/cdk/text-field/_text-field.import.scss | 6 +- src/cdk/text-field/_text-field.scss | 16 +- src/cdk/text-field/text-field-prebuilt.scss | 4 +- src/dev-app/datepicker/datepicker-demo.scss | 4 +- src/dev-app/input/input-demo.scss | 4 +- src/dev-app/mdc-dialog/mdc-dialog-demo.scss | 4 +- src/dev-app/mdc-input/mdc-input-demo.scss | 4 +- src/dev-app/theme.scss | 88 +++---- src/e2e-app/theme.scss | 23 +- .../column-resize/_column-resize.import.scss | 14 +- .../column-resize/_column-resize.scss | 51 ++-- .../_autocomplete-theme.import.scss | 5 +- .../mdc-autocomplete/_autocomplete-theme.scss | 43 ++-- .../mdc-autocomplete/autocomplete.scss | 6 +- .../mdc-button/_button-base.import.scss | 4 +- .../mdc-button/_button-base.scss | 6 +- .../mdc-button/_button-theme.import.scss | 20 +- .../mdc-button/_button-theme.scss | 223 +++++++++--------- .../mdc-button/button.scss | 16 +- src/material-experimental/mdc-button/fab.scss | 10 +- .../mdc-button/icon-button.scss | 10 +- .../mdc-card/_card-theme.import.scss | 7 +- .../mdc-card/_card-theme.scss | 49 ++-- src/material-experimental/mdc-card/card.scss | 4 +- .../mdc-checkbox/_checkbox-theme.import.scss | 15 +- .../mdc-checkbox/_checkbox-theme.scss | 60 ++--- .../mdc-checkbox/checkbox.scss | 19 +- .../mdc-chips/_chips-theme.import.scss | 8 +- .../mdc-chips/_chips-theme.scss | 74 +++--- .../mdc-chips/chips.scss | 24 +- .../mdc-color/_all-color.import.scss | 97 +++++++- .../mdc-color/_all-color.scss | 9 +- .../mdc-core/_core-theme.import.scss | 14 +- .../mdc-core/_core-theme.scss | 16 +- .../option/_optgroup-theme.import.scss | 8 +- .../mdc-core/option/_optgroup-theme.scss | 38 +-- .../mdc-core/option/_option-theme.import.scss | 8 +- .../mdc-core/option/_option-theme.scss | 50 ++-- .../mdc-core/option/optgroup.scss | 8 +- .../mdc-core/option/option.scss | 20 +- .../mdc-density/_all-density.import.scss | 97 +++++++- .../mdc-density/_all-density.scss | 9 +- .../_dialog-legacy-padding.import.scss | 2 +- .../mdc-dialog/_dialog-legacy-padding.scss | 14 +- .../mdc-dialog/_dialog-theme.import.scss | 5 +- .../mdc-dialog/_dialog-theme.scss | 42 ++-- ...mdc-dialog-structure-overrides.import.scss | 2 +- .../_mdc-dialog-structure-overrides.scss | 2 +- .../mdc-dialog/dialog.scss | 12 +- .../_form-field-density.import.scss | 9 +- .../mdc-form-field/_form-field-density.scss | 29 +-- .../_form-field-focus-overlay.import.scss | 6 +- .../_form-field-focus-overlay.scss | 8 +- .../_form-field-native-select.import.scss | 12 +- .../_form-field-native-select.scss | 18 +- .../_form-field-subscript.import.scss | 6 +- .../mdc-form-field/_form-field-subscript.scss | 17 +- .../_form-field-theme.import.scss | 37 ++- .../mdc-form-field/_form-field-theme.scss | 79 ++++--- ...text-field-structure-overrides.import.scss | 7 +- .../_mdc-text-field-structure-overrides.scss | 8 +- ...-text-field-textarea-overrides.import.scss | 4 +- .../_mdc-text-field-textarea-overrides.scss | 4 +- ...t-field-theme-variable-refresh.import.scss | 11 +- ...mdc-text-field-theme-variable-refresh.scss | 2 +- .../mdc-form-field/form-field.scss | 33 +-- .../mdc-helpers/_focus-indicators.import.scss | 12 +- .../mdc-helpers/_focus-indicators.scss | 38 +-- .../mdc-helpers/_mdc-helpers.import.scss | 10 +- .../mdc-helpers/_mdc-helpers.scss | 62 ++--- .../mdc-input/_input-theme.import.scss | 5 +- .../mdc-input/_input-theme.scss | 35 +-- .../_interactive-list-theme.import.scss | 5 +- .../mdc-list/_interactive-list-theme.scss | 16 +- .../mdc-list/_list-option-theme.import.scss | 15 +- .../mdc-list/_list-option-theme.scss | 15 +- .../mdc-list/_list-theme.import.scss | 19 +- .../mdc-list/_list-theme.scss | 57 ++--- .../mdc-list/list-option.scss | 4 +- src/material-experimental/mdc-list/list.scss | 9 +- .../mdc-menu/_menu-theme.import.scss | 5 +- .../mdc-menu/_menu-theme.scss | 47 ++-- src/material-experimental/mdc-menu/menu.scss | 24 +- .../_paginator-theme.import.scss | 11 +- .../mdc-paginator/_paginator-theme.scss | 64 ++--- .../_paginator-variables.import.scss | 2 +- .../mdc-paginator/_paginator-variables.scss | 14 +- .../mdc-paginator/paginator.scss | 38 +-- .../_progress-bar-theme.import.scss | 6 +- .../mdc-progress-bar/_progress-bar-theme.scss | 38 +-- .../mdc-progress-bar/progress-bar.scss | 4 +- .../_progress-spinner-theme.import.scss | 6 +- .../_progress-spinner-theme.scss | 33 +-- .../progress-spinner.scss | 4 +- .../mdc-radio/_radio-theme.import.scss | 7 +- .../mdc-radio/_radio-theme.scss | 50 ++-- .../mdc-radio/radio.scss | 14 +- .../mdc-select/_select-theme.import.scss | 10 +- .../mdc-select/_select-theme.scss | 45 ++-- .../mdc-select/select.scss | 14 +- .../mdc-sidenav/_sidenav-theme.import.scss | 5 +- .../mdc-sidenav/_sidenav-theme.scss | 29 +-- .../_slide-toggle-theme.import.scss | 11 +- .../mdc-slide-toggle/_slide-toggle-theme.scss | 58 ++--- .../mdc-slide-toggle/slide-toggle.scss | 21 +- .../mdc-slider/_slider-theme.import.scss | 5 +- .../mdc-slider/_slider-theme.scss | 35 +-- .../mdc-slider/slider.scss | 6 +- .../_snack-bar-theme.import.scss | 8 +- .../mdc-snack-bar/_snack-bar-theme.scss | 50 ++-- .../mdc-snack-bar/snack-bar-container.scss | 8 +- .../mdc-table/_table-theme.import.scss | 11 +- .../mdc-table/_table-theme.scss | 44 ++-- .../mdc-table/table.scss | 8 +- .../mdc-tabs/_tabs-common.import.scss | 17 +- .../mdc-tabs/_tabs-common.scss | 35 +-- .../mdc-tabs/_tabs-theme.import.scss | 8 +- .../mdc-tabs/_tabs-theme.scss | 49 ++-- .../mdc-tabs/tab-body.scss | 6 +- .../mdc-tabs/tab-group.scss | 18 +- .../mdc-tabs/tab-header.scss | 14 +- .../mdc-tabs/tab-nav-bar/tab-link.scss | 16 +- .../mdc-tabs/tab-nav-bar/tab-nav-bar.scss | 12 +- .../mdc-theming/_all-theme.import.scss | 139 +++++++++-- .../mdc-theming/_all-theme.scss | 94 ++++---- .../mdc-theming/prebuilt/indigo-pink.scss | 21 +- .../mdc-tooltip/_tooltip-theme.import.scss | 5 + .../mdc-tooltip/_tooltip-theme.scss | 41 ++-- .../_all-typography.import.scss | 99 +++++++- .../mdc-typography/_all-typography.scss | 50 ++-- .../menubar/_menubar-theme.import.scss | 1 - .../popover-edit/_popover-edit.import.scss | 20 +- .../popover-edit/_popover-edit.scss | 69 +++--- .../selection/_selection.import.scss | 6 +- .../selection/_selection.scss | 10 +- .../_autocomplete-theme.import.scss | 9 +- .../autocomplete/_autocomplete-theme.scss | 41 ++-- src/material/autocomplete/autocomplete.scss | 22 +- src/material/badge/_badge-theme.import.scss | 16 +- src/material/badge/_badge-theme.scss | 97 ++++---- .../_bottom-sheet-theme.import.scss | 14 +- .../bottom-sheet/_bottom-sheet-theme.scss | 45 ++-- .../bottom-sheet/bottom-sheet-container.scss | 12 +- .../_button-toggle-theme.import.scss | 21 +- .../button-toggle/_button-toggle-theme.scss | 87 +++---- .../_button-toggle-variables.import.scss | 2 +- .../_button-toggle-variables.scss | 14 +- src/material/button-toggle/button-toggle.scss | 46 ++-- src/material/button/_button-base.import.scss | 25 +- src/material/button/_button-base.scss | 76 +++--- src/material/button/_button-theme.import.scss | 14 +- src/material/button/_button-theme.scss | 112 ++++----- src/material/button/button.scss | 44 ++-- src/material/card/_card-theme.import.scss | 14 +- src/material/card/_card-theme.scss | 57 ++--- src/material/card/card.scss | 44 ++-- .../checkbox/_checkbox-theme.import.scss | 10 +- src/material/checkbox/_checkbox-theme.scss | 65 ++--- src/material/checkbox/checkbox.scss | 90 +++---- src/material/chips/_chips-theme.import.scss | 18 +- src/material/chips/_chips-theme.scss | 68 +++--- src/material/chips/chips.scss | 122 +++++----- src/material/core/_core.import.scss | 69 +++++- src/material/core/_core.scss | 71 +++--- .../core/color/_all-color.import.scss | 52 +++- src/material/core/color/_all-color.scss | 10 +- .../density/private/_all-density.import.scss | 24 +- .../core/density/private/_all-density.scss | 34 +-- .../private/_compatibility.import.scss | 5 +- .../core/density/private/_compatibility.scss | 31 +-- .../_focus-indicators.import.scss | 31 ++- .../focus-indicators/_focus-indicators.scss | 38 +-- .../core/option/_optgroup-theme.import.scss | 35 ++- src/material/core/option/_optgroup-theme.scss | 39 +-- .../core/option/_option-theme.import.scss | 35 ++- src/material/core/option/_option-theme.scss | 63 ++--- src/material/core/option/optgroup.scss | 8 +- src/material/core/option/option.scss | 24 +- src/material/core/ripple/_ripple.import.scss | 26 +- src/material/core/ripple/_ripple.scss | 36 +-- .../_pseudo-checkbox-theme.import.scss | 23 +- .../_pseudo-checkbox-theme.scss | 45 ++-- .../pseudo-checkbox/pseudo-checkbox.scss | 41 ++-- .../core/style/_button-common.import.scss | 6 +- src/material/core/style/_button-common.scss | 6 +- .../core/style/_checkbox-common.import.scss | 13 +- src/material/core/style/_checkbox-common.scss | 8 +- .../core/style/_elevation.import.scss | 20 +- src/material/core/style/_elevation.scss | 55 +++-- .../core/style/_form-common.import.scss | 22 +- src/material/core/style/_form-common.scss | 13 +- .../core/style/_layout-common.import.scss | 2 +- src/material/core/style/_layout-common.scss | 2 +- .../core/style/_list-common.import.scss | 3 +- src/material/core/style/_list-common.scss | 12 +- .../core/style/_menu-common.import.scss | 23 +- src/material/core/style/_menu-common.scss | 44 ++-- src/material/core/style/_private.import.scss | 17 +- src/material/core/style/_private.scss | 25 +- .../core/style/_variables.import.scss | 9 +- src/material/core/style/_variables.scss | 14 +- .../core/theming/_all-theme.import.scss | 119 +++++++--- src/material/core/theming/_all-theme.scss | 144 +++++------ .../core/theming/_palette.import.scss | 10 +- src/material/core/theming/_palette.scss | 85 +++---- .../core/theming/_theming.import.scss | 31 ++- src/material/core/theming/_theming.scss | 211 +++++++++-------- .../theming/prebuilt/deeppurple-amber.scss | 15 +- .../core/theming/prebuilt/indigo-pink.scss | 15 +- .../core/theming/prebuilt/pink-bluegrey.scss | 15 +- .../core/theming/prebuilt/purple-green.scss | 15 +- .../tests/test-css-variables-theme.scss | 18 +- .../core/theming/tests/test-theming-api.scss | 184 ++++++++------- .../typography/_all-typography.import.scss | 112 ++++++--- .../core/typography/_all-typography.scss | 155 ++++++------ .../typography/_typography-utils.import.scss | 11 +- .../core/typography/_typography-utils.scss | 35 +-- .../core/typography/_typography.import.scss | 17 +- src/material/core/typography/_typography.scss | 151 ++++++------ .../datepicker/_datepicker-theme.import.scss | 21 +- .../datepicker/_datepicker-theme.scss | 146 ++++++------ src/material/datepicker/calendar-body.scss | 90 +++---- src/material/datepicker/calendar.scss | 62 ++--- src/material/datepicker/date-range-input.scss | 28 +-- .../datepicker/datepicker-content.scss | 50 ++-- src/material/dialog/_dialog-theme.import.scss | 14 +- src/material/dialog/_dialog-theme.scss | 45 ++-- src/material/dialog/dialog.scss | 30 +-- .../divider/_divider-offset.import.scss | 2 +- src/material/divider/_divider-offset.scss | 2 +- .../divider/_divider-theme.import.scss | 9 +- src/material/divider/_divider-theme.scss | 33 +-- src/material/divider/divider.scss | 12 +- .../expansion/_expansion-mixins.import.scss | 2 +- src/material/expansion/_expansion-mixins.scss | 2 +- .../expansion/_expansion-theme.import.scss | 20 +- src/material/expansion/_expansion-theme.scss | 89 +++---- .../_expansion-variables.import.scss | 2 +- .../expansion/_expansion-variables.scss | 32 +-- .../expansion/expansion-panel-header.scss | 16 +- src/material/expansion/expansion-panel.scss | 12 +- .../_form-field-fill-theme.import.scss | 19 +- .../form-field/_form-field-fill-theme.scss | 59 ++--- .../_form-field-legacy-theme.import.scss | 20 +- .../form-field/_form-field-legacy-theme.scss | 63 ++--- .../_form-field-outline-theme.import.scss | 19 +- .../form-field/_form-field-outline-theme.scss | 73 +++--- .../_form-field-standard-theme.import.scss | 16 +- .../_form-field-standard-theme.scss | 43 ++-- .../form-field/_form-field-theme.import.scss | 37 ++- .../form-field/_form-field-theme.scss | 109 ++++----- src/material/form-field/form-field-fill.scss | 42 ++-- src/material/form-field/form-field-input.scss | 18 +- .../form-field/form-field-legacy.scss | 22 +- .../form-field/form-field-outline.scss | 54 ++--- .../form-field/form-field-standard.scss | 26 +- src/material/form-field/form-field.scss | 30 +-- .../grid-list/_grid-list-theme.import.scss | 15 +- src/material/grid-list/_grid-list-theme.scss | 34 +-- src/material/grid-list/grid-list.scss | 26 +- src/material/icon/_icon-theme.import.scss | 7 +- src/material/icon/_icon-theme.scss | 41 ++-- src/material/icon/icon.scss | 8 +- src/material/input/_input-theme.import.scss | 17 +- src/material/input/_input-theme.scss | 67 +++--- src/material/list/_list-theme.import.scss | 15 +- src/material/list/_list-theme.scss | 77 +++--- src/material/list/list.scss | 132 +++++------ src/material/menu/_menu-theme.import.scss | 14 +- src/material/menu/_menu-theme.scss | 55 ++--- src/material/menu/menu.scss | 36 +-- .../paginator/_paginator-theme.import.scss | 16 +- src/material/paginator/_paginator-theme.scss | 65 ++--- .../_paginator-variables.import.scss | 2 +- .../paginator/_paginator-variables.scss | 14 +- src/material/paginator/paginator.scss | 38 +-- .../_progress-bar-theme.import.scss | 9 +- .../progress-bar/_progress-bar-theme.scss | 51 ++-- src/material/progress-bar/progress-bar.scss | 94 ++++---- .../_progress-spinner-theme.import.scss | 9 +- .../_progress-spinner-theme.scss | 39 +-- .../progress-spinner/progress-spinner.scss | 34 +-- src/material/radio/_radio-theme.import.scss | 12 +- src/material/radio/_radio-theme.scss | 57 ++--- src/material/radio/radio.scss | 50 ++-- src/material/select/_select-theme.import.scss | 16 +- src/material/select/_select-theme.scss | 77 +++--- src/material/select/select.scss | 50 ++-- .../sidenav/_sidenav-theme.import.scss | 11 +- src/material/sidenav/_sidenav-theme.scss | 65 ++--- src/material/sidenav/drawer.scss | 48 ++-- .../_slide-toggle-theme.import.scss | 15 +- .../slide-toggle/_slide-toggle-theme.scss | 61 ++--- src/material/slide-toggle/slide-toggle.scss | 72 +++--- src/material/slider/_slider-theme.import.scss | 12 +- src/material/slider/_slider-theme.scss | 80 ++++--- src/material/slider/slider.scss | 194 +++++++-------- .../snack-bar/_snack-bar-theme.import.scss | 15 +- src/material/snack-bar/_snack-bar-theme.scss | 51 ++-- src/material/snack-bar/simple-snack-bar.scss | 28 +-- .../snack-bar/snack-bar-container.scss | 28 +-- src/material/sort/_sort-theme.import.scss | 7 +- src/material/sort/_sort-theme.scss | 39 +-- src/material/sort/sort-header.scss | 54 ++--- .../stepper/_stepper-theme.import.scss | 21 +- src/material/stepper/_stepper-theme.scss | 117 ++++----- .../stepper/_stepper-variables.import.scss | 7 +- src/material/stepper/_stepper-variables.scss | 32 +-- src/material/stepper/step-header.scss | 26 +- src/material/stepper/stepper.scss | 40 ++-- .../table/_table-flex-styles.import.scss | 4 +- src/material/table/_table-flex-styles.scss | 20 +- src/material/table/_table-theme.import.scss | 12 +- src/material/table/_table-theme.scss | 51 ++-- src/material/table/table.scss | 16 +- src/material/tabs/_tabs-common.import.scss | 15 +- src/material/tabs/_tabs-common.scss | 28 +-- src/material/tabs/_tabs-theme.import.scss | 13 +- src/material/tabs/_tabs-theme.scss | 77 +++--- src/material/tabs/tab-body.scss | 2 +- src/material/tabs/tab-group.scss | 20 +- src/material/tabs/tab-header.scss | 19 +- .../tabs/tab-nav-bar/tab-nav-bar.scss | 16 +- .../toolbar/_toolbar-theme.import.scss | 20 +- src/material/toolbar/_toolbar-theme.scss | 75 +++--- .../toolbar/_toolbar-variables.import.scss | 2 +- src/material/toolbar/_toolbar-variables.scss | 30 +-- src/material/toolbar/toolbar.scss | 10 +- .../tooltip/_tooltip-theme.import.scss | 13 +- src/material/tooltip/_tooltip-theme.scss | 63 ++--- src/material/tooltip/tooltip.scss | 30 +-- src/material/tree/_tree-theme.import.scss | 13 +- src/material/tree/_tree-theme.scss | 59 ++--- src/material/tree/_tree-variables.import.scss | 2 +- src/material/tree/_tree-variables.scss | 14 +- src/universal-app/theme.scss | 23 +- 342 files changed, 6353 insertions(+), 4808 deletions(-) create mode 100644 src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss delete mode 100644 src/material-experimental/menubar/_menubar-theme.import.scss diff --git a/src/cdk/a11y/_a11y.import.scss b/src/cdk/a11y/_a11y.import.scss index 4eabc5c5f48b..957c7bf1fcae 100644 --- a/src/cdk/a11y/_a11y.import.scss +++ b/src/cdk/a11y/_a11y.import.scss @@ -1 +1,2 @@ -@forward 'a11y'; +@forward 'a11y' hide a11y, high-contrast; +@forward 'a11y' as cdk-* hide cdk-optionally-nest-content; diff --git a/src/cdk/a11y/_a11y.scss b/src/cdk/a11y/_a11y.scss index 0b2d77c17b0d..749454de9048 100644 --- a/src/cdk/a11y/_a11y.scss +++ b/src/cdk/a11y/_a11y.scss @@ -1,4 +1,4 @@ -@mixin cdk-a11y { +@mixin a11y { .cdk-visually-hidden { border: 0; clip: rect(0 0 0 0); @@ -42,7 +42,7 @@ /// * `on` - works for `Emulated`, `Native`, and `ShadowDom` /// * `off` - works for `None` /// * `any` - works for all encapsulation modes by emitting the CSS twice (default). -@mixin cdk-high-contrast($target: active, $encapsulation: 'any') { +@mixin high-contrast($target: active, $encapsulation: 'any') { @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') { @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' + 'Allowed values are "active", "black-on-white", and "white-on-black"'; diff --git a/src/cdk/a11y/a11y-prebuilt.scss b/src/cdk/a11y/a11y-prebuilt.scss index e30963e8ccf9..c6264873e472 100644 --- a/src/cdk/a11y/a11y-prebuilt.scss +++ b/src/cdk/a11y/a11y-prebuilt.scss @@ -1,3 +1,3 @@ -@import './a11y'; +@use './a11y'; -@include cdk-a11y(); +@include a11y.a11y(); diff --git a/src/cdk/overlay/_overlay.import.scss b/src/cdk/overlay/_overlay.import.scss index 707cc5e2d8d8..af15d33e5cce 100644 --- a/src/cdk/overlay/_overlay.import.scss +++ b/src/cdk/overlay/_overlay.import.scss @@ -1 +1,10 @@ -@forward 'overlay'; +@forward '../a11y/a11y' as cdk-*; +@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop, +$z-index-overlay-container, overlay; +@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration, +$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background; +@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration, +$cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay, +$cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay; + +@import '../a11y/a11y'; diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index 33fae7cbfb93..1612a3770f8f 100644 --- a/src/cdk/overlay/_overlay.scss +++ b/src/cdk/overlay/_overlay.scss @@ -1,21 +1,21 @@ -@import '../a11y/a11y'; +@use '../a11y/a11y'; // We want overlays to always appear over user content, so set a baseline // very high z-index for the overlay container, which is where we create the new // stacking context for all overlays. -$cdk-z-index-overlay-container: 1000 !default; -$cdk-z-index-overlay: 1000 !default; -$cdk-z-index-overlay-backdrop: 1000 !default; +$z-index-overlay-container: 1000 !default; +$z-index-overlay: 1000 !default; +$z-index-overlay-backdrop: 1000 !default; // Background color for all of the backdrops -$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default; +$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default; // Default backdrop animation is based on the Material Design swift-ease-out. $backdrop-animation-duration: 400ms !default; $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; -@mixin cdk-overlay() { +@mixin overlay() { .cdk-overlay-container, .cdk-global-overlay-wrapper { // Disable events from being captured on the overlay container. pointer-events: none; @@ -30,7 +30,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // The overlay-container is an invisible element which contains all individual overlays. .cdk-overlay-container { position: fixed; - z-index: $cdk-z-index-overlay-container; + z-index: $z-index-overlay-container; &:empty { // Hide the element when it doesn't have any child nodes. This doesn't @@ -46,7 +46,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; .cdk-global-overlay-wrapper { display: flex; position: absolute; - z-index: $cdk-z-index-overlay; + z-index: $z-index-overlay; } // A single overlay pane. @@ -56,7 +56,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; position: absolute; pointer-events: auto; box-sizing: border-box; - z-index: $cdk-z-index-overlay; + z-index: $z-index-overlay; // For connected-position overlays, we set `display: flex` in // order to force `max-width` and `max-height` to take effect. @@ -73,7 +73,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; left: 0; right: 0; - z-index: $cdk-z-index-overlay-backdrop; + z-index: $z-index-overlay-backdrop; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function; @@ -86,14 +86,14 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast` // mixin, because we can't normalize the import path to the _a11y.scss both for the // source and when this file is distributed. See #10908. - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { opacity: 0.6; } } } .cdk-overlay-dark-backdrop { - background: $cdk-overlay-dark-backdrop-background; + background: $dark-backdrop-background; } .cdk-overlay-transparent-backdrop { @@ -110,7 +110,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // overlay element's size to fit within the viewport. .cdk-overlay-connected-position-bounding-box { position: absolute; - z-index: $cdk-z-index-overlay; + z-index: $z-index-overlay; // We use `display: flex` on this element exclusively for centering connected overlays. // When *not* centering, a top/left/bottom/right will be set which overrides the normal diff --git a/src/cdk/overlay/overlay-prebuilt.scss b/src/cdk/overlay/overlay-prebuilt.scss index 5c3798a319e1..66a188416384 100644 --- a/src/cdk/overlay/overlay-prebuilt.scss +++ b/src/cdk/overlay/overlay-prebuilt.scss @@ -1,3 +1,3 @@ -@import './overlay'; +@use './overlay'; -@include cdk-overlay(); +@include overlay.overlay(); diff --git a/src/cdk/text-field/_text-field.import.scss b/src/cdk/text-field/_text-field.import.scss index 2fd336ff9d65..7a30de8e34ad 100644 --- a/src/cdk/text-field/_text-field.import.scss +++ b/src/cdk/text-field/_text-field.import.scss @@ -1 +1,5 @@ -@forward 'text-field'; +@forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field; +@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color, +cdk-textarea-autosize-measuring-base; +@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field, +cdk-text-field-textarea-autosize-measuring-base; diff --git a/src/cdk/text-field/_text-field.scss b/src/cdk/text-field/_text-field.scss index 0649a51f3624..5a313b9951b9 100644 --- a/src/cdk/text-field/_text-field.scss +++ b/src/cdk/text-field/_text-field.scss @@ -1,5 +1,5 @@ // Core styles that enable monitoring autofill state of text fields. -@mixin cdk-text-field { +@mixin text-field { // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is // needed to prevent LibSass from stripping the keyframes out. @@ -52,13 +52,13 @@ } // Used to generate UIDs for keyframes used to change the text field autofill styles. -$cdk-text-field-autofill-color-frame-count: 0; +$autofill-color-frame-count: 0; // Mixin used to apply custom background and foreground colors to an autofilled text field. // Based on: https://stackoverflow.com/questions/2781549/ // removing-input-background-colour-for-chrome-autocomplete#answer-37432260 -@mixin cdk-text-field-autofill-color($background, $foreground:'') { - @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} { +@mixin autofill-color($background, $foreground:'') { + @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} { to { background: $background; @if $foreground != '' { color: $foreground; } @@ -66,16 +66,16 @@ $cdk-text-field-autofill-color-frame-count: 0; } &:-webkit-autofill { - animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both; + animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both; } &.cdk-text-field-autofill-monitored:-webkit-autofill { // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart // event won't fire. animation: cdk-text-field-autofill-start 0s 1ms, - cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both; + cdk-text-field-autofill-color-#{$autofill-color-frame-count} both; } - $cdk-text-field-autofill-color-frame-count: - $cdk-text-field-autofill-color-frame-count + 1 !global; + $autofill-color-frame-count: + $autofill-color-frame-count + 1 !global; } diff --git a/src/cdk/text-field/text-field-prebuilt.scss b/src/cdk/text-field/text-field-prebuilt.scss index b18d18728100..756402a7ddfb 100644 --- a/src/cdk/text-field/text-field-prebuilt.scss +++ b/src/cdk/text-field/text-field-prebuilt.scss @@ -1,3 +1,3 @@ -@import 'text-field'; +@use 'text-field'; -@include cdk-text-field(); +@include text-field.text-field(); diff --git a/src/dev-app/datepicker/datepicker-demo.scss b/src/dev-app/datepicker/datepicker-demo.scss index a6ee15ac6eae..64852c658d1c 100644 --- a/src/dev-app/datepicker/datepicker-demo.scss +++ b/src/dev-app/datepicker/datepicker-demo.scss @@ -1,4 +1,4 @@ -@import '../../material/datepicker/datepicker-theme'; +@use '../../material/datepicker/datepicker-theme'; mat-calendar { width: 300px; @@ -9,5 +9,5 @@ mat-calendar { } .demo-custom-range { - @include mat-date-range-colors(hotpink, teal, yellow, purple); + @include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple); } diff --git a/src/dev-app/input/input-demo.scss b/src/dev-app/input/input-demo.scss index 00f861b2f63f..8046a7aa74df 100644 --- a/src/dev-app/input/input-demo.scss +++ b/src/dev-app/input/input-demo.scss @@ -1,4 +1,4 @@ -@import '../../cdk/text-field/text-field'; +@use '../../cdk/text-field/text-field'; .demo-basic { padding: 0; @@ -33,7 +33,7 @@ } .demo-custom-autofill-style { - @include cdk-text-field-autofill-color(transparent, red); + @include text-field.autofill-color(transparent, red); } .demo-rows { diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.scss b/src/dev-app/mdc-dialog/mdc-dialog-demo.scss index 6ae99bd4c379..9f5897363ce7 100644 --- a/src/dev-app/mdc-dialog/mdc-dialog-demo.scss +++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.scss @@ -1,4 +1,4 @@ -@import '../../material-experimental/mdc-dialog/dialog-legacy-padding'; +@use '../../material-experimental/mdc-dialog/dialog-legacy-padding'; .demo-dialog-card { max-width: 600px; @@ -24,5 +24,5 @@ } .demo-dialog-legacy-padding { - @include mat-mdc-dialog-legacy-padding(); + @include dialog-legacy-padding.legacy-padding(); } diff --git a/src/dev-app/mdc-input/mdc-input-demo.scss b/src/dev-app/mdc-input/mdc-input-demo.scss index cef3470bdf9f..93639f9e3dd0 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.scss +++ b/src/dev-app/mdc-input/mdc-input-demo.scss @@ -1,4 +1,4 @@ -@import '../../cdk/text-field/text-field'; +@use '../../cdk/text-field/text-field'; .demo-basic { padding: 0; @@ -41,7 +41,7 @@ } .demo-custom-autofill-style { - @include cdk-text-field-autofill-color(transparent, red); + @include text-field.autofill-color(transparent, red); } .demo-rows { diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index 4d72afaf51dd..48cbeb066954 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -1,37 +1,41 @@ -@import '../material/core/color/all-color'; -@import '../material/core/density/private/all-density'; -@import '../material/core/focus-indicators/focus-indicators'; -@import '../material/core/theming/all-theme'; -@import '../material-experimental/column-resize/column-resize'; -@import '../material-experimental/mdc-helpers/mdc-helpers'; -@import '../material-experimental/mdc-helpers/focus-indicators'; -@import '../material-experimental/mdc-color/all-color'; -@import '../material-experimental/mdc-theming/all-theme'; -@import '../material-experimental/mdc-typography/all-typography'; -@import '../material-experimental/mdc-density/all-density'; -@import '../material-experimental/mdc-slider/slider-theme'; -@import '../material-experimental/popover-edit/popover-edit'; -@import '../material-experimental/mdc-table/table-theme'; +@use '../material/core/color/all-color' as color-all-color; +@use '../material/core/density/private/all-density' as private-all-density; +@use '../material/core/focus-indicators/focus-indicators' as focus-indicators-focus-indicators; +@use '../material/core/theming/all-theme' as theming-all-theme; +@use '../material-experimental/column-resize/column-resize'; +@use '../material-experimental/mdc-helpers/mdc-helpers'; +@use '../material-experimental/mdc-helpers/focus-indicators'; +@use '../material-experimental/mdc-color/all-color'; +@use '../material-experimental/mdc-theming/all-theme'; +@use '../material-experimental/mdc-typography/all-typography'; +@use '../material-experimental/mdc-density/all-density'; +@use '../material-experimental/mdc-slider/slider-theme'; +@use '../material-experimental/popover-edit/popover-edit'; +@use '../material-experimental/mdc-table/table-theme'; +@use '../material/core/core'; +@use '../material/core/theming/palette'; +@use '../material/core/theming/theming'; +@use '../material/core/typography/typography'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** -@include mat-core(); -@include angular-material-mdc-typography(mat-mdc-typography-config()); -@include mat-popover-edit-typography(mat-typography-config()); +@include core.core(); +@include all-typography.angular-material-mdc-typography(all-typography.config()); +@include popover-edit.typography(typography.config()); // Include base styles for strong focus indicators. .demo-strong-focus { - @include mat-strong-focus-indicators(); - @include mat-mdc-strong-focus-indicators(); + @include focus-indicators-focus-indicators.strong-focus-indicators(); + @include focus-indicators.strong-focus-indicators(); } // Define the default theme (same as the example above). -$candy-app-primary: mat-palette($mat-indigo); -$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); -$candy-app-theme: mat-light-theme(( +$candy-app-primary: theming.palette(palette.$indigo); +$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400); +$candy-app-theme: theming.light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent @@ -39,19 +43,19 @@ $candy-app-theme: mat-light-theme(( )); // Include the default theme styles. -@include angular-material-theme($candy-app-theme); -@include angular-material-mdc-theme($candy-app-theme); -@include mat-column-resize-theme($candy-app-theme); -@include mat-popover-edit-theme($candy-app-theme); +@include theming-all-theme.angular-material-theme($candy-app-theme); +@include all-theme.angular-material-mdc-theme($candy-app-theme); +@include column-resize.theme($candy-app-theme); +@include popover-edit.theme($candy-app-theme); // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`. -@include mat-mdc-slider-theme($candy-app-theme); +@include slider-theme.theme($candy-app-theme); // Define an alternate dark theme. -$dark-primary: mat-palette($mat-blue-grey); -$dark-accent: mat-palette($mat-amber, A200, A100, A400); -$dark-warn: mat-palette($mat-deep-orange); -$dark-theme: mat-dark-theme(( +$dark-primary: theming.palette(palette.$blue-grey); +$dark-accent: theming.palette(palette.$amber, A200, A100, A400); +$dark-warn: theming.palette(palette.$deep-orange); +$dark-theme: theming.dark-theme(( color: ( primary: $dark-primary, accent: $dark-accent, @@ -61,8 +65,8 @@ $dark-theme: mat-dark-theme(( // Include the default theme for focus indicators. .demo-strong-focus { - @include mat-strong-focus-indicators-theme($candy-app-theme); - @include mat-mdc-strong-focus-indicators-theme($candy-app-theme); + @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme); + @include focus-indicators.strong-focus-indicators-theme($candy-app-theme); } // Include the alternative theme styles inside of a block with a CSS class. You can make this @@ -70,17 +74,17 @@ $dark-theme: mat-dark-theme(( // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the // default theme. .demo-unicorn-dark-theme { - @include angular-material-color($dark-theme); - @include angular-material-mdc-color($dark-theme); - @include mat-column-resize-color($dark-theme); - @include mat-popover-edit-color($dark-theme); - @include mat-mdc-slider-color($dark-theme); + @include color-all-color.angular-material-color($dark-theme); + @include all-color.angular-material-mdc-color($dark-theme); + @include column-resize.color($dark-theme); + @include popover-edit.color($dark-theme); + @include slider-theme.color($dark-theme); } // Include the dark theme for focus indicators. .demo-unicorn-dark-theme.demo-strong-focus { - @include mat-strong-focus-indicators-color($dark-theme); - @include mat-mdc-strong-focus-indicators-color($dark-theme); + @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme); + @include focus-indicators.strong-focus-indicators-color($dark-theme); } // Create classes for all density scales which are supported by all MDC-based components. @@ -89,7 +93,7 @@ $dark-theme: mat-dark-theme(( $density-scales: (-1, -2, minimum, maximum); @each $density in $density-scales { .demo-density-#{$density} { - @include angular-material-density($density); - @include angular-material-mdc-density($density); + @include private-all-density.angular-material-density($density); + @include all-density.angular-material-mdc-density($density); } } diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index b4ef263e63e0..f2ded56bfbe1 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -1,20 +1,23 @@ -@import '../material/core/theming/all-theme'; -@import '../material-experimental/mdc-theming/all-theme'; -@import '../material-experimental/mdc-typography/all-typography'; +@use '../material/core/theming/all-theme' as theming-all-theme; +@use '../material-experimental/mdc-theming/all-theme'; +@use '../material-experimental/mdc-typography/all-typography'; +@use '../material/core/core'; +@use '../material/core/theming/palette'; +@use '../material/core/theming/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** -@include mat-core(); -@include angular-material-mdc-typography(); +@include core.core(); +@include all-typography.angular-material-mdc-typography(); // Define the default theme (same as the example above). -$candy-app-primary: mat-palette($mat-indigo); -$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); -$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent); +$candy-app-primary: theming.palette(palette.$indigo); +$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400); +$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent); // Include the default theme styles. -@include angular-material-theme($candy-app-theme); -@include angular-material-mdc-theme($candy-app-theme); +@include theming-all-theme.angular-material-theme($candy-app-theme); +@include all-theme.angular-material-mdc-theme($candy-app-theme); diff --git a/src/material-experimental/column-resize/_column-resize.import.scss b/src/material-experimental/column-resize/_column-resize.import.scss index 15a54b13f43c..8d50674fb726 100644 --- a/src/material-experimental/column-resize/_column-resize.import.scss +++ b/src/material-experimental/column-resize/_column-resize.import.scss @@ -1,5 +1,9 @@ -@forward 'column-resize'; -@forward '../../material/core/style/variables'; -@forward '../../material/core/style/vendor-prefixes'; -@forward '../../material/core/theming/palette'; -@forward '../../material/core/theming/theming'; +@forward '../../material/core/style/variables.import'; +@forward '../../material/core/theming/theming.import'; +@forward '../../material/core/style/vendor-prefixes.import'; +@forward 'column-resize' as mat-column-resize-*; + +@import '../../material/core/style/variables'; +@import '../../material/core/style/vendor-prefixes'; +@import '../../material/core/theming/palette'; +@import '../../material/core/theming/theming'; diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss index 4cb7f2359c6c..493b79d4455c 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize.scss @@ -1,16 +1,17 @@ -@import '../../material/core/style/variables'; -@import '../../material/core/style/vendor-prefixes'; -@import '../../material/core/theming/palette'; -@import '../../material/core/theming/theming'; +@use 'sass:map'; +@use '../../material/core/style/variables'; +@use '../../material/core/style/vendor-prefixes'; +@use '../../material/core/theming/palette'; +@use '../../material/core/theming/theming'; -@mixin mat-column-resize-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - $primary: map-get($config, primary); - $foreground: map-get($config, foreground); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $primary: map.get($config, primary); + $foreground: map.get($config, foreground); - $non-resizable-hover-divider: mat-color($foreground, divider); - $resizable-hover-divider: mat-color($primary, 200); - $resizable-active-divider: mat-color($primary, 500); + $non-resizable-hover-divider: theming.color($foreground, divider); + $resizable-hover-divider: theming.color($primary, 200); + $resizable-active-divider: theming.color($primary, 500); // Required for resizing to work properly. .mat-column-resize-table.cdk-column-resize-with-resized-column { @@ -39,7 +40,7 @@ bottom: 0; position: absolute; top: 0; - transition: background $swift-ease-in-duration $swift-ease-in-timing-function; + transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; width: 1px; } @@ -83,8 +84,8 @@ background: transparent; cursor: col-resize; height: 100%; - transition: background $swift-ease-in-duration $swift-ease-in-timing-function; - @include user-select(none); + transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; + @include vendor-prefixes.user-select(none); width: 100%; &:active { @@ -97,25 +98,25 @@ } } -@mixin mat-column-resize-typography($config-or-theme) {} +@mixin typography($config-or-theme) {} -@mixin mat-column-resize-density($config-or-theme) {} +@mixin density($config-or-theme) {} -@mixin mat-column-resize-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-column-resize') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-column-resize') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-column-resize-color($color); + @include color($color); } @if $density != null { - @include mat-column-resize-density($density); + @include density($density); } @if $typography != null { - @include mat-column-resize-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss index 0da16dce0340..ab1d1c528e40 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss +++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss @@ -1,2 +1,5 @@ -@forward 'autocomplete-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'autocomplete-theme' as mat-mdc-autocomplete-*; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss index 0e438094eef7..7bbaeb9308a5 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss +++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss @@ -1,45 +1,46 @@ +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/menu-surface/mixins.import'; @import '@material/list/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; -@mixin mat-mdc-autocomplete-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { - @include mdc-menu-surface-core-styles($mat-theme-styles-query); - @include mdc-list-deprecated-without-ripple($mat-theme-styles-query); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { + @include mdc-menu-surface-core-styles(mdc-helpers.$mat-theme-styles-query); + @include mdc-list-deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query); } } -@mixin mat-mdc-autocomplete-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-menu-surface-core-styles($mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-menu-surface-core-styles(mdc-helpers.$mat-typography-styles-query); .mat-mdc-autocomplete-panel { // Note that we include this private mixin, because the public one adds // a bunch of styles that we aren't using for the autocomplete panel. - @include mdc-list-deprecated-base_($mat-typography-styles-query); + @include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query); } } } -@mixin mat-mdc-autocomplete-density($config-or-theme) {} +@mixin density($config-or-theme) {} -@mixin mat-mdc-autocomplete-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-autocomplete-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-autocomplete-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-autocomplete-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss index dcde40752a3d..4b00d58101e6 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.scss +++ b/src/material-experimental/mdc-autocomplete/autocomplete.scss @@ -1,8 +1,8 @@ +@use '../../cdk/a11y/a11y'; +@use '../mdc-helpers/mdc-helpers'; @import '@material/menu-surface/mixins.import'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; -@import '../../cdk/a11y/a11y'; -@import '../mdc-helpers/mdc-helpers'; @include mdc-menu-surface-core-styles($query: structure); @@ -20,7 +20,7 @@ // Note that we include this private mixin, because the public // one adds a bunch of styles that we aren't using for the menu. @include mdc-list-deprecated-base_($query: structure); - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { outline: solid 1px; } diff --git a/src/material-experimental/mdc-button/_button-base.import.scss b/src/material-experimental/mdc-button/_button-base.import.scss index 8d2c6af60580..e7375e4618bf 100644 --- a/src/material-experimental/mdc-button/_button-base.import.scss +++ b/src/material-experimental/mdc-button/_button-base.import.scss @@ -1,2 +1,4 @@ +@forward '../../material/core/style/layout-common.import'; @forward 'button-base'; -@forward '../../material/core/style/layout-common'; + +@import '../../material/core/style/layout-common'; diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss index 4b0c8a9bcd49..0a4e26950871 100644 --- a/src/material-experimental/mdc-button/_button-base.scss +++ b/src/material-experimental/mdc-button/_button-base.scss @@ -1,4 +1,4 @@ -@import '../../material/core/style/layout-common'; +@use '../../material/core/style/layout-common'; // Adds styles necessary to provide stateful interactions with the button. This includes providing // content for the state container's ::before and ::after so that they can be given a background @@ -21,7 +21,7 @@ // The ripple container should match the bounds of the entire button. .mat-mdc-button-ripple, .mdc-button__ripple { - @include mat-fill; + @include layout-common.fill; // Disable pointer events for the ripple container and state overlay because the container // will overlay the user content and we don't want to disable mouse events on the user content. @@ -43,7 +43,7 @@ // The focus indicator should match the bounds of the entire button. .mat-mdc-focus-indicator { - @include mat-fill(); + @include layout-common.fill(); } } diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss index f304e8512793..b722129a8f5b 100644 --- a/src/material-experimental/mdc-button/_button-theme.import.scss +++ b/src/material-experimental/mdc-button/_button-theme.import.scss @@ -1,3 +1,19 @@ -@forward 'button-theme'; -@forward '../../material/core/ripple/ripple'; +@forward '../mdc-helpers/mdc-helpers.import'; +@forward '../../material/core/ripple/ripple.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography, +icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme, +typography; +@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, +mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background, +mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme, +mat-mdc-typography; +@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target, +mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme, +mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, mat-mdc-button-icon-button-density, +mat-mdc-button-icon-button-theme, mat-mdc-button-icon-button-typography, +mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background, +mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color; + +@import '../../material/core/ripple/ripple'; +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 8a45866656eb..71329e343977 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -1,11 +1,12 @@ +@use '../../material/core/ripple/ripple'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/button/mixins.import'; @import '@material/button/variables.import'; @import '@material/fab/mixins.import'; @import '@material/ripple/mixins.import'; @import '@material/icon-button/mixins.import'; @import '@material/theme/mixins.import'; -@import '../../material/core/ripple/ripple'; -@import '../mdc-helpers/mdc-helpers'; // Selector for the element that has a background color and opacity applied to its ::before and // ::after for state interactions (hover, active, focus). Their API calls this their @@ -15,7 +16,7 @@ $mat-button-state-target: '.mdc-button__ripple'; // Applies the disabled theme color to the text color. @mixin _mat-button-disabled-color() { @include mdc-theme-prop(color, - mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background)); + mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background)); } // Wraps the content style in a selector for the disabled state. @@ -34,7 +35,7 @@ $mat-button-state-target: '.mdc-button__ripple'; // which is what the ripple mixin uses. This creates a new theme that sets the color to the // foreground base to appropriately color the ink. @mixin _mat-button-ripple-ink-color($mdcColor) { - @include mat-ripple-theme(( + @include ripple.theme(( foreground: ( base: mdc-theme-prop-value($mdcColor) ), @@ -50,39 +51,39 @@ $mat-button-state-target: '.mdc-button__ripple'; } -@mixin mat-mdc-button-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { // Add state interactions for hover, focus, press, active. Colors are changed based on // the mixin mdc-states-base-color .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button { @include mdc-states( - $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); } .mat-mdc-button, .mat-mdc-outlined-button { &.mat-unthemed { - @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { - @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query); + @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(primary); } &.mat-accent { - @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query); + @include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(secondary); } &.mat-warn { - @include mdc-button-ink-color(error, $query: $mat-theme-styles-query); + @include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(error); } } @@ -91,34 +92,34 @@ $mat-button-state-target: '.mdc-button__ripple'; .mat-mdc-unelevated-button { &.mat-unthemed { @include mdc-button-container-fill-color( - $mdc-theme-surface, $query: $mat-theme-styles-query); - @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - $mdc-theme-on-surface, $query: $mat-theme-styles-query, + mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); } &.mat-primary { - @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query); - @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query); + @include mdc-button-container-fill-color(primary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-button-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(on-primary); } &.mat-accent { - @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query); - @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query); + @include mdc-button-container-fill-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-button-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(on-secondary); } &.mat-warn { - @include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query); - @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query); + @include mdc-button-container-fill-color(error, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-button-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-states-base-color( - on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(on-error); } @@ -129,30 +130,30 @@ $mat-button-state-target: '.mdc-button__ripple'; .mat-mdc-outlined-button { &.mat-unthemed { - @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { - @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query); + @include mdc-button-outline-color(primary, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-accent { - @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query); + @include mdc-button-outline-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-warn { - @include mdc-button-outline-color(error, $query: $mat-theme-styles-query); + @include mdc-button-outline-color(error, $query: mdc-helpers.$mat-theme-styles-query); } @include _mat-button-apply-disabled-style() { @include mdc-theme-prop(border-color, - mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background)); + mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background)); } } .mat-mdc-raised-button { @include _mat-button-apply-disabled-style() { - @include mdc-elevation(0, $query: $mat-theme-styles-query); + @include mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query); } } @@ -162,157 +163,157 @@ $mat-button-state-target: '.mdc-button__ripple'; } } - @include mdc-button-without-ripple($query: $mat-theme-styles-query); + @include mdc-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query); } } -@mixin mat-mdc-button-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-button-without-ripple($query: $mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query); } } -@mixin mat-mdc-button-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button { - @include mdc-button-density($density-scale, $query: $mat-base-styles-query); + @include mdc-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query); } } -@mixin mat-mdc-button-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-button') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-button') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-button-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-button-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-button-typography($typography); + @include typography($typography); } } } -@mixin mat-mdc-fab-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { +@mixin fab-color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { .mat-mdc-fab, .mat-mdc-mini-fab { @include mdc-states( - $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); &.mat-unthemed { @include mdc-states-base-color( - $mdc-theme-on-surface, $query: $mat-theme-styles-query, + mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query); - @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { @include mdc-states-base-color( - on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query); - @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query); + on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(on-primary); } &.mat-accent { @include mdc-states-base-color( - on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query); - @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query); + on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(on-secondary); } &.mat-warn { @include mdc-states-base-color( - on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-fab-container-color(error, $query: $mat-theme-styles-query); - @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query); + on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(on-error); } @include _mat-button-apply-disabled-style() { @include _mat-button-disabled-color(); @include _mat-button-disabled-background(); - @include mdc-elevation(0, $query: $mat-theme-styles-query); + @include mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query); } } - @include mdc-fab-without-ripple($query: $mat-theme-styles-query); + @include mdc-fab-without-ripple($query: mdc-helpers.$mat-theme-styles-query); } } -@mixin mat-mdc-fab-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-fab-without-ripple($query: $mat-typography-styles-query); +@mixin fab-typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-fab-without-ripple($query: mdc-helpers.$mat-typography-styles-query); } } -@mixin mat-mdc-fab-density($config-or-theme) {} +@mixin fab-density($config-or-theme) {} -@mixin mat-mdc-fab-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin fab-theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-fab') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-fab-color($color); + @include fab-color($color); } @if $density != null { - @include mat-mdc-fab-density($density); + @include fab-density($density); } @if $typography != null { - @include mat-mdc-fab-typography($typography); + @include fab-typography($typography); } } } -@mixin mat-mdc-icon-button-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { +@mixin icon-button-color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { .mat-mdc-icon-button { @include mdc-states( - $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); + $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); &.mat-unthemed { @include mdc-states-base-color( - $mdc-theme-on-surface, $query: $mat-theme-styles-query, + mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { @include mdc-states-base-color( - primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query); + primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-icon-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(primary); } &.mat-accent { @include mdc-states-base-color( - secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query); + secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(secondary); } &.mat-warn { @include mdc-states-base-color( - error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target); - @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query); + error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); @include _mat-button-ripple-ink-color(error); } @@ -321,39 +322,39 @@ $mat-button-state-target: '.mdc-button__ripple'; } } - @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query); + @include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query); } } -@mixin mat-mdc-icon-button-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query); +@mixin icon-button-typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query); } } -@mixin mat-mdc-icon-button-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin icon-button-density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); .mat-mdc-icon-button { - @include mdc-icon-button-density($density-scale, $query: $mat-base-styles-query); + @include mdc-icon-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query); } } -@mixin mat-mdc-icon-button-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin icon-button-theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-icon-button-color($color); + @include icon-button-color($color); } @if $density != null { - @include mat-mdc-icon-button-density($density); + @include icon-button-density($density); } @if $typography != null { - @include mat-mdc-icon-button-typography($typography); + @include icon-button-typography($typography); } } } diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss index a771bd6a8ccb..6eef3f6522ee 100644 --- a/src/material-experimental/mdc-button/button.scss +++ b/src/material-experimental/mdc-button/button.scss @@ -1,17 +1,17 @@ @use '@material/button/button'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../cdk/a11y/a11y'; +@use '_button-base'; @import '@material/button/mixins.import'; @import '@material/button/variables.import'; @import '@material/ripple/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; -@import '../../cdk/a11y/a11y'; -@import '_button-base'; -@include mdc-button-without-ripple($query: $mat-base-styles-query); +@include mdc-button-without-ripple($query: mdc-helpers.$mat-base-styles-query); .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button { - @include mat-private-button-interactive(); - @include mat-private-button-disabled(); + @include button-base.mat-private-button-interactive(); + @include button-base.mat-private-button-disabled(); } // MDC expects button icons to contain this HTML content: @@ -48,12 +48,12 @@ .mat-mdc-raised-button:not(.mdc-button--outlined), .mat-mdc-outlined-button:not(.mdc-button--outlined), .mat-mdc-icon-button { - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { outline: solid 1px; } } -@include cdk-high-contrast(active, off) { +@include a11y.high-contrast(active, off) { .mat-mdc-button-base:focus { outline: solid 3px; } diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss index 1b08c219188d..25810fc8e007 100644 --- a/src/material-experimental/mdc-button/fab.scss +++ b/src/material-experimental/mdc-button/fab.scss @@ -1,15 +1,15 @@ +@use '../mdc-helpers/mdc-helpers'; +@use '_button-base'; @import '@material/fab/mixins.import'; @import '@material/fab/variables.import'; @import '@material/button/variables.import'; @import '@material/theme/variables.import'; -@import '../mdc-helpers/mdc-helpers'; -@import '_button-base'; -@include mdc-fab-without-ripple($query: $mat-base-styles-query); +@include mdc-fab-without-ripple($query: mdc-helpers.$mat-base-styles-query); .mat-mdc-fab, .mat-mdc-mini-fab { - @include mat-private-button-interactive(); - @include mat-private-button-disabled(); + @include button-base.mat-private-button-interactive(); + @include button-base.mat-private-button-disabled(); // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator // styles and don't actually do anything. This undoes those conflicting styles. diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss index 19f62af24bd2..d0f945ef98ba 100644 --- a/src/material-experimental/mdc-button/icon-button.scss +++ b/src/material-experimental/mdc-button/icon-button.scss @@ -1,18 +1,18 @@ +@use '../mdc-helpers/mdc-helpers'; +@use '_button-base'; @import '@material/icon-button/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; -@import '_button-base'; -@include mdc-icon-button-without-ripple($query: $mat-base-styles-query); +@include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-base-styles-query); .mat-mdc-icon-button { - @include mat-private-button-interactive() { + @include button-base.mat-private-button-interactive() { border-radius: 50%; } // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round. border-radius: 50%; - @include mat-private-button-disabled(); + @include button-base.mat-private-button-disabled(); // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles // and don't actually do anything. This undoes those conflicting styles. diff --git a/src/material-experimental/mdc-card/_card-theme.import.scss b/src/material-experimental/mdc-card/_card-theme.import.scss index a0d11f240edd..d7c3c008e9b5 100644 --- a/src/material-experimental/mdc-card/_card-theme.import.scss +++ b/src/material-experimental/mdc-card/_card-theme.import.scss @@ -1,2 +1,7 @@ -@forward 'card-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'card-theme' hide color, density, theme, typography; +@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, +$mat-mdc-card-mdc-card-outline-color; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss index ba596c5bc2eb..b34b07d9be8d 100644 --- a/src/material-experimental/mdc-card/_card-theme.scss +++ b/src/material-experimental/mdc-card/_card-theme.scss @@ -1,29 +1,32 @@ +@use 'sass:color'; +@use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/card/mixins.import'; @import '@material/theme/functions.import'; @import '@material/card/variables.import'; @import '@material/typography/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; -@mixin mat-mdc-card-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - $foreground: map-get($config, foreground); - $is-dark-theme: map-get($config, is-dark); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $foreground: map.get($config, foreground); + $is-dark-theme: map.get($config, is-dark); $orig-mdc-card-action-icon-color: $mdc-card-action-icon-color; $orig-mdc-card-outline-color: $mdc-card-outline-color; - @include mat-using-mdc-theme($config) { + @include mdc-helpers.mat-using-mdc-theme($config) { $mdc-card-action-icon-color: rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(medium)) !global; $mdc-card-outline-color: - mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global; + color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global; - @include mdc-card-without-ripple($query: $mat-theme-styles-query); + @include mdc-card-without-ripple($query: mdc-helpers.$mat-theme-styles-query); // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their // color to secondary text here. .mat-mdc-card-subtitle { - color: mat-color($foreground, secondary-text); + color: theming.color($foreground, secondary-text); } } @@ -31,10 +34,10 @@ $mdc-card-outline-color: $orig-mdc-card-outline-color !global; } -@mixin mat-mdc-card-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-card-without-ripple($query: $mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-card-without-ripple($query: mdc-helpers.$mat-typography-styles-query); // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly // set their typographic styles here. @@ -48,23 +51,23 @@ } } -@mixin mat-mdc-card-density($config-or-theme) {} +@mixin density($config-or-theme) {} -@mixin mat-mdc-card-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-card') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-card') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-card-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-card-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-card-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss index 2cbe800c0cc0..8b569b19dff6 100644 --- a/src/material-experimental/mdc-card/card.scss +++ b/src/material-experimental/mdc-card/card.scss @@ -1,5 +1,5 @@ +@use '../mdc-helpers/mdc-helpers'; @import '@material/card/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; // TODO(jelbourn): move header and title-group styles to their own files. @@ -10,7 +10,7 @@ $mat-card-header-size: 40px !default; $mat-card-default-padding: 16px !default; // Include all MDC card styles except for color and typography. -@include mdc-card-without-ripple($query: $mat-base-styles-query); +@include mdc-card-without-ripple($query: mdc-helpers.$mat-base-styles-query); // Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards. // Maintained here for backwards compatibility with the previous generation MatCard. diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss index f1634537e5dc..0eae93c210dd 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss @@ -1,2 +1,15 @@ -@forward 'checkbox-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, +typography; +@forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, +$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-background-focus-density, +mat-mdc-background-focus-indicator-checked-color, mat-mdc-background-focus-indicator-color, +mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; +@forward 'checkbox-theme' as mat-mdc-checkbox-* hide $mat-mdc-checkbox-mdc-checkbox-border-color, +$mat-mdc-checkbox-mdc-checkbox-disabled-color, mat-mdc-checkbox-background-focus-density, +mat-mdc-checkbox-background-focus-indicator-checked-color, +mat-mdc-checkbox-background-focus-indicator-color, +mat-mdc-checkbox-private-checkbox-styles-with-color; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index eb44c922a575..38f904eefc05 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -1,17 +1,19 @@ @use '@material/checkbox/checkbox-theme' as checkbox-theme; @use '@material/ripple/ripple-theme' as ripple-theme; @use '@material/theme/theme'; +@use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/checkbox/mixins.import'; @import '@material/checkbox/variables.import'; @import '@material/form-field/mixins.import'; @import '@material/ripple/variables.import'; @import '@material/theme/functions.import'; -@import '../mdc-helpers/mdc-helpers'; // Mixin that includes the checkbox theme styles with a given palette. // By default, the MDC checkbox always uses the `secondary` palette. -@mixin mat-mdc-private-checkbox-styles-with-color($color) { +@mixin private-checkbox-styles-with-color($color) { @include checkbox-theme.theme( ( density-scale: null, @@ -47,18 +49,18 @@ } } -@mixin mat-mdc-checkbox-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - $primary: mat-color(map-get($config, primary)); - $accent: mat-color(map-get($config, accent)); - $warn: mat-color(map-get($config, warn)); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $primary: theming.color(map.get($config, primary)); + $accent: theming.color(map.get($config, accent)); + $warn: theming.color(map.get($config, warn)); // Save original values of MDC global variables. We need to save these so we can restore the // variables to their original values and prevent unintended side effects from using this mixin. $orig-mdc-checkbox-border-color: $mdc-checkbox-border-color; $orig-mdc-checkbox-disabled-color: $mdc-checkbox-disabled-color; - @include mat-using-mdc-theme($config) { + @include mdc-helpers.mat-using-mdc-theme($config) { $mdc-checkbox-border-color: rgba( mdc-theme-prop-value(on-surface), 0.54 @@ -69,8 +71,8 @@ ) !global; .mat-mdc-checkbox { - @include mat-mdc-private-checkbox-styles-with-color(primary); - @include mdc-form-field-core-styles($query: $mat-theme-styles-query); + @include private-checkbox-styles-with-color(primary); + @include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query); } // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS @@ -87,7 +89,7 @@ } &.mat-accent { - @include mat-mdc-private-checkbox-styles-with-color(secondary); + @include private-checkbox-styles-with-color(secondary); .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element { background: $accent; @@ -95,7 +97,7 @@ } &.mat-warn { - @include mat-mdc-private-checkbox-styles-with-color(error); + @include private-checkbox-styles-with-color(error); .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element { background: $warn; @@ -109,11 +111,11 @@ $mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global; } -@mixin mat-mdc-checkbox-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query); - @include mdc-form-field-core-styles($query: $mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query); + @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query); } } @@ -130,32 +132,32 @@ } } -@mixin mat-mdc-checkbox-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); .mat-mdc-checkbox .mdc-checkbox { @include mdc-checkbox-density( $density-scale, - $query: $mat-base-styles-query + $query: mdc-helpers.$mat-base-styles-query ); @include _background-focus-density($density-scale); } } -@mixin mat-mdc-checkbox-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-checkbox-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-checkbox-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-checkbox-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss index ee9520ddf987..419ae21f957f 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.scss +++ b/src/material-experimental/mdc-checkbox/checkbox.scss @@ -1,15 +1,16 @@ @use '@material/checkbox/checkbox'; @use '@material/checkbox/checkbox-theme'; @use '@material/theme/theme'; +@use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/style/_layout-common.scss'; @import '@material/checkbox/functions.import'; @import '@material/checkbox/mixins.import'; @import '@material/form-field/mixins.import'; @import '@material/ripple/variables.import'; -@import '../mdc-helpers/mdc-helpers'; -@import '../../material/core/style/_layout-common.scss'; -@include mdc-checkbox-without-ripple($query: $mat-base-styles-query); -@include mdc-form-field-core-styles($query: $mat-base-styles-query); +@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-base-styles-query); +@include mdc-form-field-core-styles($query: mdc-helpers.$mat-base-styles-query); // TODO(b/175233410): Use ripple element to show focus indicator. @mixin _background-focus-styles() { @@ -44,7 +45,7 @@ // additional styles to restore the hover state. .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__background::before { - opacity: map-get($mdc-ripple-dark-ink-opacities, hover); + opacity: map.get($mdc-ripple-dark-ink-opacities, hover); transform: scale(1); transition: mdc-checkbox-transition-enter(opacity, 0, 80ms), mdc-checkbox-transition-enter(transform, 0, 80ms); @@ -54,14 +55,14 @@ // extra specificity so that the hover styles don't override the focus styles. .mdc-checkbox .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__background::before { - opacity: map-get($mdc-ripple-dark-ink-opacities, hover) + - map-get($mdc-ripple-dark-ink-opacities, focus); + opacity: map.get($mdc-ripple-dark-ink-opacities, hover) + + map.get($mdc-ripple-dark-ink-opacities, focus); } // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to // style it appropriately. .mat-ripple-element { - opacity: map-get($mdc-ripple-dark-ink-opacities, press); + opacity: map.get($mdc-ripple-dark-ink-opacities, press); } // Angular Material supports disabling all animations when NoopAnimationsModule is imported. @@ -85,7 +86,7 @@ } .mat-mdc-checkbox-ripple { - @include mat-fill(); + @include layout-common.fill(); // Usually the ripple radius would be specified through the MatRipple input, but // since we dynamically adjust the size of the ripple container, we cannot use a diff --git a/src/material-experimental/mdc-chips/_chips-theme.import.scss b/src/material-experimental/mdc-chips/_chips-theme.import.scss index 3b58d512d89b..f9b85caa6a14 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.import.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.import.scss @@ -1,2 +1,8 @@ -@forward 'chips-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'chips-theme' hide color, density, theme, typography; +@forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default, +$mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default, +mat-mdc-chips-selected-color; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss index d3c906916cf0..783cf025151c 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.scss @@ -1,25 +1,29 @@ +@use 'sass:color'; +@use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/chips/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; + @import '@material/theme/functions.import'; @mixin _selected-color($color) { - @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query); - @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query); + @include mdc-chip-fill-color($color, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-ink-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-chip-selected-ink-color-without-ripple_( text-primary-on-dark, - $query: $mat-theme-styles-query + $query: mdc-helpers.$mat-theme-styles-query ); - @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query); - @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query); + @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query); } -@mixin mat-mdc-chips-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - $primary: mat-color(map-get($config, primary)); - $accent: mat-color(map-get($config, accent)); - $warn: mat-color(map-get($config, warn)); - $background: map-get($config, background); - $unselected-background: mat-color($background, unselected-chip); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $primary: theming.color(map.get($config, primary)); + $accent: theming.color(map.get($config, accent)); + $warn: theming.color(map.get($config, warn)); + $background: map.get($config, background); + $unselected-background: theming.color($background, unselected-chip); // Save original values of MDC global variables. We need to save these so we can restore the // variables to their original values and prevent unintended side effects from using this mixin. @@ -27,18 +31,18 @@ $orig-mdc-chips-ink-color-default: $mdc-chips-ink-color-default; $orig-mdc-chips-icon-color: $mdc-chips-icon-color; - @include mat-using-mdc-theme($config) { + @include mdc-helpers.mat-using-mdc-theme($config) { $mdc-chips-fill-color-default: - mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global; + color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global; $mdc-chips-ink-color-default: rgba(mdc-theme-prop-value(on-surface), 0.87) !global; $mdc-chips-icon-color: mdc-theme-prop-value(on-surface) !global; - @include mdc-chip-set-core-styles($query: $mat-theme-styles-query); - @include mdc-chip-without-ripple($query: $mat-theme-styles-query); + @include mdc-chip-set-core-styles($query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-without-ripple($query: mdc-helpers.$mat-theme-styles-query); .mat-mdc-chip { @include mdc-chip-fill-color-accessible($unselected-background, - $query: $mat-theme-styles-query); + $query: mdc-helpers.$mat-theme-styles-query); // mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the // opacity so selected chips always show a ripple. @@ -69,36 +73,36 @@ $mdc-chips-icon-color: $orig-mdc-chips-icon-color !global; } -@mixin mat-mdc-chips-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mdc-chip-set-core-styles($query: $mat-typography-styles-query); - @include mat-using-mdc-typography($config) { - @include mdc-chip-without-ripple($query: $mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-chip-set-core-styles($query: mdc-helpers.$mat-typography-styles-query); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-chip-without-ripple($query: mdc-helpers.$mat-typography-styles-query); } } -@mixin mat-mdc-chips-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); .mat-mdc-chip { - @include mdc-chip-density($density-scale, $query: $mat-base-styles-query); + @include mdc-chip-density($density-scale, $query: mdc-helpers.$mat-base-styles-query); } } -@mixin mat-mdc-chips-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-chips') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-chips-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-chips-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-chips-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss index 3d5dfd618f9e..6eb278936fd6 100644 --- a/src/material-experimental/mdc-chips/chips.scss +++ b/src/material-experimental/mdc-chips/chips.scss @@ -1,10 +1,10 @@ +@use '../../material/core/style/layout-common'; +@use '../../cdk/a11y/a11y'; +@use '../mdc-helpers/mdc-helpers'; @import '@material/chips/mixins.import'; -@import '../../material/core/style/layout-common'; -@import '../../cdk/a11y/a11y'; -@import '../mdc-helpers/mdc-helpers'; -@include mdc-chip-without-ripple($query: $mat-base-styles-query); -@include mdc-chip-set-core-styles($query: $mat-base-styles-query); +@include mdc-chip-without-ripple($query: mdc-helpers.$mat-base-styles-query); +@include mdc-chip-set-core-styles($query: mdc-helpers.$mat-base-styles-query); .mat-mdc-chip { // MDC uses a pointer cursor @@ -19,7 +19,7 @@ } } - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { outline: solid 1px; &:focus { @@ -31,7 +31,7 @@ // The ripple container should match the bounds of the entire chip. .mat-mdc-chip-ripple { - @include mat-fill; + @include layout-common.fill; // Disable pointer events for the ripple container and state overlay because the container // will overlay the user content and we don't want to disable mouse events on the user content. @@ -50,7 +50,7 @@ @include mdc-ripple-target-common($query: structure); &::after, &::before { - @include mat-fill; + @include layout-common.fill; content: ''; pointer-events: none; opacity: 0; @@ -95,15 +95,15 @@ input.mat-mdc-chip-input { } // The margin value is set in MDC. -$mat-mdc-chip-margin: 4px; +$chip-margin: 4px; // Don't let the chip margin increase the mat-form-field height. .mat-mdc-chip-grid { - margin: -$mat-mdc-chip-margin; + margin: -$chip-margin; // Keep the mat-chip-grid height the same even when there are no chips. input.mat-mdc-chip-input { - margin: $mat-mdc-chip-margin; + margin: $chip-margin; } } @@ -112,7 +112,7 @@ $mat-mdc-chip-margin: 4px; transition: none; } - @include cdk-high-contrast(black-on-white, off) { + @include a11y.high-contrast(black-on-white, off) { // SVG colors won't be changed in high contrast mode and since the checkmark is white // by default, it'll blend in with the background in black-on-white mode. Override the color // to ensure that it's visible. We need !important, because the theme styles are very specific. diff --git a/src/material-experimental/mdc-color/_all-color.import.scss b/src/material-experimental/mdc-color/_all-color.import.scss index 4a5a0e03eabc..8a443edcb3d5 100644 --- a/src/material-experimental/mdc-color/_all-color.import.scss +++ b/src/material-experimental/mdc-color/_all-color.import.scss @@ -1,2 +1,97 @@ -@forward 'all-color'; +@forward '../../material/core/theming/theming.import'; +@forward '../mdc-helpers/mdc-helpers.import'; +@forward '../mdc-helpers/mdc-helpers'; +@forward '../../material/core/core.import'; +@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, +fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, +theme, typography; +@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, +mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; +@forward '../mdc-button/button-theme' as mat-mdc-button-* hide +$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, +mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, +mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, +mat-mdc-button-icon-button-typography; +@forward '../mdc-card/card-theme' hide color, density, theme, typography; +@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, +$mat-mdc-card-mdc-card-outline-color; +@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, +theme, typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, +$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme, +mat-mdc-typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide +$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color, +mat-mdc-checkbox-private-checkbox-styles-with-color; +@forward '../mdc-chips/chips-theme' hide color, density, theme, typography; +@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide +$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color, +$mat-mdc-chips-mdc-chips-ink-color-default; +@forward '../mdc-radio/radio-theme' hide color, density, theme, typography; +@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide +$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color, +$mat-mdc-radio-mdc-radio-unchecked-color; +@forward '../mdc-select/select-theme' hide color, density, theme, typography; +@forward '../mdc-select/select-theme' as mat-mdc-select-* hide +$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, +$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, +$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color; +@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography; +@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide +$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color, +$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color, +$mat-mdc-slide-toggle-mdc-switch-disabled-track-color, +$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color, +$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color; +@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; +@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide +$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, +$mat-mdc-snack-bar-mdc-snackbar-label-ink-color; +@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography; +@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active, +$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default; +@forward '../mdc-table/table-theme' hide color, density, theme, typography; +@forward '../mdc-table/table-theme' as mat-mdc-table-* hide +$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, +$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, +$mat-mdc-table-mdc-data-table-selected-row-fill-color, +$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, +$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; +@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; +@forward '../mdc-form-field/form-field-sizing'; +@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select, +private-form-field-native-select-color; +@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide +$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width, +$mat-mdc-mat-form-field-select-horizontal-end-padding; +@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide +private-text-field-refresh-theme-variables; +@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide +$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover, +$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background, +$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border, +$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color, +$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color, +$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label, +$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border, +$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color; +@forward '../mdc-core/core-theme.import'; +@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*; +@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*; +@forward '../mdc-list/interactive-list-theme' as mat-mdc-*; +@forward '../mdc-list/list-option-theme' as mat-mdc-*; +@forward '../mdc-list/list-theme' as mat-mdc-list-*; +@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*; +@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*; +@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; +@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*; +@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; +@forward '../mdc-input/input-theme' as mat-mdc-input-*; +@forward '../mdc-form-field/form-field-density' as mat-mdc-*; +@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*; +@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; +@forward 'all-color'; + +@import '../mdc-theming/all-theme'; diff --git a/src/material-experimental/mdc-color/_all-color.scss b/src/material-experimental/mdc-color/_all-color.scss index 9a37f7807f79..50df454fff06 100644 --- a/src/material-experimental/mdc-color/_all-color.scss +++ b/src/material-experimental/mdc-color/_all-color.scss @@ -1,16 +1,17 @@ -@import '../mdc-theming/all-theme'; +@use '../mdc-theming/all-theme'; +@use '../../material/core/theming/theming'; @mixin angular-material-mdc-color($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the color system, extract the color config from the theme object. - $config: if(mat-private-is-theme-object($config-or-theme), - mat-get-color-config($config-or-theme), $config-or-theme); + $config: if(theming.is-theme-object($config-or-theme), + theming.get-color-config($config-or-theme), $config-or-theme); @if $config == null { @error 'No color configuration specified.'; } - @include angular-material-mdc-theme(( + @include all-theme.angular-material-mdc-theme(( color: $config, typography: null, density: null, diff --git a/src/material-experimental/mdc-core/_core-theme.import.scss b/src/material-experimental/mdc-core/_core-theme.import.scss index fd69e31f44cc..52423dfdb9c0 100644 --- a/src/material-experimental/mdc-core/_core-theme.import.scss +++ b/src/material-experimental/mdc-core/_core-theme.import.scss @@ -1,4 +1,10 @@ -@forward 'core-theme'; -@forward '../../material/core/theming/theming'; -@forward './option/option-theme'; -@forward './option/optgroup-theme'; +@forward '../../material/core/theming/theming.import'; +@forward '../mdc-helpers/mdc-helpers.import'; +@forward '../mdc-helpers/mdc-helpers'; +@forward 'option/option-theme' as mat-mdc-*; +@forward 'option/optgroup-theme' as mat-mdc-optgroup-*; +@forward 'core-theme' as mat-mdc-core-*; + +@import '../../material/core/theming/theming'; +@import './option/option-theme'; +@import './option/optgroup-theme'; diff --git a/src/material-experimental/mdc-core/_core-theme.scss b/src/material-experimental/mdc-core/_core-theme.scss index dd6881fa1991..2aa513b764e6 100644 --- a/src/material-experimental/mdc-core/_core-theme.scss +++ b/src/material-experimental/mdc-core/_core-theme.scss @@ -1,15 +1,15 @@ -@import '../../material/core/theming/theming'; -@import './option/option-theme'; -@import './option/optgroup-theme'; +@use '../../material/core/theming/theming'; +@use './option/option-theme'; +@use './option/optgroup-theme'; // Mixin that renders all of the core styles that depend on the theme. -@mixin mat-mdc-core-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then // the imported themes (such as `mat-ripple-theme`) should not report again. - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-core') { - @include mat-mdc-option-theme($theme); - @include mat-mdc-optgroup-theme($theme); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-core') { + @include option-theme.option-theme($theme); + @include optgroup-theme.theme($theme); } } diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss index dcaf5ef95328..fa9c6989ccfa 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss @@ -1,3 +1,7 @@ -@forward 'optgroup-theme'; +@forward '../../../material/core/theming/theming.import'; +@forward '../../mdc-helpers/mdc-helpers.import'; @forward '../../mdc-helpers/mdc-helpers'; -@forward '../../../material/core/theming/theming'; +@forward 'optgroup-theme' as mat-mdc-optgroup-*; + +@import '../../mdc-helpers/mdc-helpers'; +@import '../../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index 28eff8f71190..99c4a72248a8 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -1,47 +1,47 @@ +@use '../../mdc-helpers/mdc-helpers'; +@use '../../../material/core/theming/theming'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @import '@material/theme/functions.import'; @import '@material/theme/mixins.import'; -@import '../../mdc-helpers/mdc-helpers'; -@import '../../../material/core/theming/theming'; -@mixin mat-mdc-optgroup-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { + @include mdc-helpers.mat-using-mdc-theme($config) { .mat-mdc-optgroup-label { // Since this will usually be rendered in an overlay, // we have explicitly set the default color. @include mdc-theme-prop(color, text-primary-on-background); @include mdc-list-deprecated-item-disabled-text-color( - $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query); + $mdc-list-deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query); } } } -@mixin mat-mdc-optgroup-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); } -@mixin mat-mdc-optgroup-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); } -@mixin mat-mdc-optgroup-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-optgroup-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-optgroup-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-optgroup-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-core/option/_option-theme.import.scss b/src/material-experimental/mdc-core/option/_option-theme.import.scss index 6553574f9fff..d6e1554d3b37 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.import.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.import.scss @@ -1,3 +1,7 @@ -@forward 'option-theme'; +@forward '../../../material/core/theming/theming.import'; +@forward '../../mdc-helpers/mdc-helpers.import'; @forward '../../mdc-helpers/mdc-helpers'; -@forward '../../../material/core/theming/theming'; +@forward 'option-theme' as mat-mdc-*; + +@import '../../mdc-helpers/mdc-helpers'; +@import '../../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index e53c48a892f6..46bb19235206 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -1,21 +1,21 @@ +@use '../../mdc-helpers/mdc-helpers'; +@use '../../../material/core/theming/theming'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; @import '@material/theme/functions.import'; @import '@material/theme/mixins.import'; @import '@material/typography/mixins.import'; -@import '../../mdc-helpers/mdc-helpers'; -@import '../../../material/core/theming/theming'; -@mixin mat-mdc-option-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); +@mixin option-color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { + @include mdc-helpers.mat-using-mdc-theme($config) { .mat-mdc-option { // Since this will usually be rendered in an overlay, // we have explicitly set the default color. @include mdc-theme-prop(color, text-primary-on-background); @include mdc-list-deprecated-item-disabled-text-color( - $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query); + $mdc-list-deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query); &:hover:not(.mdc-list-item--disabled), &:focus:not(.mdc-list-item--disabled), @@ -23,59 +23,59 @@ // In multiple mode there is a checkbox to show that the option is selected. &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) { - $color: $mdc-theme-on-surface; + $color: mdc-helpers.$mdc-theme-on-surface; background: rgba($color, mdc-states-opacity($color, hover)); } } .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { @include mdc-list-deprecated-item-primary-text-ink-color( - primary, $query: $mat-theme-styles-query); + primary, $query: mdc-helpers.$mat-theme-styles-query); } .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { @include mdc-list-deprecated-item-primary-text-ink-color( - secondary, $query: $mat-theme-styles-query); + secondary, $query: mdc-helpers.$mat-theme-styles-query); } .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { @include mdc-list-deprecated-item-primary-text-ink-color( - error, $query: $mat-theme-styles-query); + error, $query: mdc-helpers.$mat-theme-styles-query); } } } -@mixin mat-mdc-option-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); +@mixin option-typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { + @include mdc-helpers.mat-using-mdc-typography($config) { // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct // level. Class is repeated for increased specificity. .mat-mdc-option { - @include mdc-typography(body1, $query: $mat-typography-styles-query); + @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } } -@mixin mat-mdc-option-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin option-density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); } -@mixin mat-mdc-option-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-option') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin option-theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-option') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-option-color($color); + @include option-color($color); } @if $density != null { - @include mat-mdc-option-density($density); + @include option-density($density); } @if $typography != null { - @include mat-mdc-option-typography($typography); + @include option-typography($typography); } } } diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss index 693df64db37c..d1d12061691e 100644 --- a/src/material-experimental/mdc-core/option/optgroup.scss +++ b/src/material-experimental/mdc-core/option/optgroup.scss @@ -1,13 +1,13 @@ +@use '../../mdc-helpers/mdc-helpers'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; -@import '../../mdc-helpers/mdc-helpers'; .mat-mdc-optgroup-label { @include mdc-list-deprecated-item-base_; @include mdc-list-deprecated-list-item-padding-variant( - $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); @include mdc-list-deprecated-list-item-height-variant( - $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); @include mdc-list-deprecated-item-disabled-text-opacity( - $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query); + $mdc-list-deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query); } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index 0c5d1a4b5ca7..b20b68e17b37 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -1,23 +1,25 @@ +@use 'sass:map'; +@use '../../mdc-helpers/mdc-helpers'; +@use '../../../material/core/style/vendor-prefixes'; +@use '../../../cdk/a11y/a11y'; +@use '../../../material/core/style/layout-common'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; -@import '../../mdc-helpers/mdc-helpers'; -@import '../../../material/core/style/vendor-prefixes'; -@import '../../../cdk/a11y/a11y'; .mat-mdc-option { // Note that we include this private mixin, because the public // one adds a bunch of styles that we aren't using for the menu. @include mdc-list-deprecated-item-base_; @include mdc-list-deprecated-list-item-padding-variant( - $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); @include mdc-list-deprecated-item-disabled-text-opacity( - $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query); - @include user-select(none); + $mdc-list-deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query); + @include vendor-prefixes.user-select(none); // Set the `min-height` here ourselves, instead of going through // the `mdc-list-list-item-height-variant` mixin, because it sets a `height` // which doesn't work well with multi-line options. - min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height); + min-height: map.get($mdc-list-deprecated-textual-variant-config, single-line-height); // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo // element that will stretch the option to the correct height. See: @@ -55,7 +57,7 @@ // Increase specificity because ripple styles are part of the `mat-core` mixin and can // potentially overwrite the absolute position of the container. .mat-mdc-option-ripple { - @include mat-fill; + @include layout-common.fill; // Disable pointer events for the ripple container because the container will overlay the // user content and we don't want to disable mouse events on the user content. @@ -65,7 +67,7 @@ } .mat-mdc-option-active { - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { // A pseudo element is used here, because the active indication gets moved between options // and we don't want the border from below to shift the layout around as it's added and removed. &::before { diff --git a/src/material-experimental/mdc-density/_all-density.import.scss b/src/material-experimental/mdc-density/_all-density.import.scss index b652f5c5bd11..fa9793276a16 100644 --- a/src/material-experimental/mdc-density/_all-density.import.scss +++ b/src/material-experimental/mdc-density/_all-density.import.scss @@ -1,2 +1,97 @@ -@forward 'all-density'; +@forward '../../material/core/theming/theming.import'; +@forward '../mdc-helpers/mdc-helpers.import'; +@forward '../mdc-helpers/mdc-helpers'; +@forward '../../material/core/core.import'; +@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, +fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, +theme, typography; +@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, +mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; +@forward '../mdc-button/button-theme' as mat-mdc-button-* hide +$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, +mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, +mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, +mat-mdc-button-icon-button-typography; +@forward '../mdc-card/card-theme' hide color, density, theme, typography; +@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, +$mat-mdc-card-mdc-card-outline-color; +@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, +theme, typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, +$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme, +mat-mdc-typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide +$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color, +mat-mdc-checkbox-private-checkbox-styles-with-color; +@forward '../mdc-chips/chips-theme' hide color, density, theme, typography; +@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide +$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color, +$mat-mdc-chips-mdc-chips-ink-color-default; +@forward '../mdc-radio/radio-theme' hide color, density, theme, typography; +@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide +$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color, +$mat-mdc-radio-mdc-radio-unchecked-color; +@forward '../mdc-select/select-theme' hide color, density, theme, typography; +@forward '../mdc-select/select-theme' as mat-mdc-select-* hide +$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, +$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, +$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color; +@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography; +@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide +$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color, +$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color, +$mat-mdc-slide-toggle-mdc-switch-disabled-track-color, +$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color, +$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color; +@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; +@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide +$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, +$mat-mdc-snack-bar-mdc-snackbar-label-ink-color; +@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography; +@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active, +$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default; +@forward '../mdc-table/table-theme' hide color, density, theme, typography; +@forward '../mdc-table/table-theme' as mat-mdc-table-* hide +$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, +$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, +$mat-mdc-table-mdc-data-table-selected-row-fill-color, +$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, +$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; +@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; +@forward '../mdc-form-field/form-field-sizing'; +@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select, +private-form-field-native-select-color; +@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide +$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width, +$mat-mdc-mat-form-field-select-horizontal-end-padding; +@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide +private-text-field-refresh-theme-variables; +@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide +$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover, +$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background, +$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border, +$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color, +$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color, +$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label, +$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border, +$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color; +@forward '../mdc-core/core-theme.import'; +@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*; +@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*; +@forward '../mdc-list/interactive-list-theme' as mat-mdc-*; +@forward '../mdc-list/list-option-theme' as mat-mdc-*; +@forward '../mdc-list/list-theme' as mat-mdc-list-*; +@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*; +@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*; +@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; +@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*; +@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; +@forward '../mdc-input/input-theme' as mat-mdc-input-*; +@forward '../mdc-form-field/form-field-density' as mat-mdc-*; +@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*; +@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; +@forward 'all-density'; + +@import '../mdc-theming/all-theme'; diff --git a/src/material-experimental/mdc-density/_all-density.scss b/src/material-experimental/mdc-density/_all-density.scss index dcf9d3ec8ab2..f98c504678c4 100644 --- a/src/material-experimental/mdc-density/_all-density.scss +++ b/src/material-experimental/mdc-density/_all-density.scss @@ -1,16 +1,17 @@ -@import '../mdc-theming/all-theme'; +@use '../mdc-theming/all-theme'; +@use '../../material/core/theming/theming'; @mixin angular-material-mdc-density($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the density system, extract the density config from the theme object. - $config: if(mat-private-is-theme-object($config-or-theme), - mat-get-density-config($config-or-theme), $config-or-theme); + $config: if(theming.is-theme-object($config-or-theme), + theming.get-density-config($config-or-theme), $config-or-theme); @if $config == null { @error 'No density configuration specified.'; } - @include angular-material-mdc-theme(( + @include all-theme.angular-material-mdc-theme(( color: null, typography: null, density: $config, diff --git a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss index 0f872ff00690..10c2a6e6878f 100644 --- a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss +++ b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss @@ -1 +1 @@ -@forward 'dialog-legacy-padding'; +@forward 'dialog-legacy-padding' as mat-mdc-dialog-*; diff --git a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss index d852ebe10a9c..832e70b3f607 100644 --- a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss +++ b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss @@ -1,15 +1,15 @@ @import '@material/dialog/mixins.import'; // Legacy padding for the dialog. Copied from the non-MDC dialog styles. -$mat-mdc-dialog-legacy-padding: 24px !default; +$legacy-padding: 24px !default; /// Mixin that applies creates styles for MDC-based dialog's to have legacy outer /// padding. By default, the dialog does not have any padding. The individual directives /// such as `matDialogContent`, `matDialogActions` or `matDialogTitle` set the padding. -@mixin mat-mdc-dialog-legacy-padding() { +@mixin legacy-padding() { // Sets the outer padding for the projected dialog user-content. .mat-mdc-dialog-surface { - padding: $mat-mdc-dialog-legacy-padding; + padding: $legacy-padding; } // Updates the MDC title, content and action elements to account for the legacy outer @@ -18,16 +18,16 @@ $mat-mdc-dialog-legacy-padding: 24px !default; // padding for backwards compatibility. .mat-mdc-dialog-container { .mat-mdc-dialog-title { - margin-top: -$mat-mdc-dialog-legacy-padding; + margin-top: -$legacy-padding; } .mat-mdc-dialog-actions { - margin-bottom: -$mat-mdc-dialog-legacy-padding; + margin-bottom: -$legacy-padding; } .mat-mdc-dialog-title, .mat-mdc-dialog-content, .mat-mdc-dialog-actions { - margin-left: -$mat-mdc-dialog-legacy-padding; - margin-right: -$mat-mdc-dialog-legacy-padding; + margin-left: -$legacy-padding; + margin-right: -$legacy-padding; } } } diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.import.scss b/src/material-experimental/mdc-dialog/_dialog-theme.import.scss index 85ce8535d57f..e318c768b4ec 100644 --- a/src/material-experimental/mdc-dialog/_dialog-theme.import.scss +++ b/src/material-experimental/mdc-dialog/_dialog-theme.import.scss @@ -1,2 +1,5 @@ -@forward 'dialog-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'dialog-theme' as mat-mdc-dialog-*; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss index 22f85a5a9d47..277076baf2fb 100644 --- a/src/material-experimental/mdc-dialog/_dialog-theme.scss +++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss @@ -1,39 +1,41 @@ -@import '../mdc-helpers/mdc-helpers'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; + @import '@material/dialog/mixins.import'; -@mixin mat-mdc-dialog-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { - @include mdc-dialog-core-styles($query: $mat-theme-styles-query); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { + @include mdc-dialog-core-styles($query: mdc-helpers.$mat-theme-styles-query); } } -@mixin mat-mdc-dialog-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-dialog-core-styles($query: $mat-typography-styles-query); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-dialog-core-styles($query: mdc-helpers.$mat-typography-styles-query); } } -@mixin mat-mdc-dialog-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); } -@mixin mat-mdc-dialog-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-dialog') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-dialog') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-dialog-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-dialog-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-dialog-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss index 07287292dd25..7a4229920941 100644 --- a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss +++ b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss @@ -1 +1 @@ -@forward 'mdc-dialog-structure-overrides'; +@forward 'mdc-dialog-structure-overrides' as mat-mdc-*; diff --git a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss index 3960b52db15e..a2056fadfd9b 100644 --- a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss @@ -1,6 +1,6 @@ // Mixin that can be included to override the default MDC dialog styles to fit // our needs. See individual comments for context on why certain styles need to be modified. -@mixin mat-mdc-private-dialog-structure-overrides($content-max-height) { +@mixin private-dialog-structure-overrides($content-max-height) { // MDC dialog sets max-height and max-width on the `mdc-dialog__surface` element. This // element is the parent of the portal outlet. This means that the actual user-content // is scrollable, but as per Material Design specification, only the dialog content diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss index cadf6ddd80cb..fe7d2711a754 100644 --- a/src/material-experimental/mdc-dialog/dialog.scss +++ b/src/material-experimental/mdc-dialog/dialog.scss @@ -1,8 +1,8 @@ +@use '../mdc-helpers/mdc-helpers'; +@use './mdc-dialog-structure-overrides'; +@use '../../cdk/a11y/a11y'; @import '@material/dialog/mixins.import'; @import '@material/dialog/variables.import'; -@import '../mdc-helpers/mdc-helpers'; -@import './mdc-dialog-structure-overrides'; -@import '../../cdk/a11y/a11y'; // Dialog content max height. This has been copied from the standard dialog // and is needed to make the dialog content scrollable. @@ -11,14 +11,14 @@ $mat-dialog-content-max-height: 65vh !default; // don't expose this value as variable. $mat-dialog-button-horizontal-margin: 8px !default; -@include mdc-dialog-core-styles($query: $mat-base-styles-query); -@include mat-mdc-private-dialog-structure-overrides($mat-dialog-content-max-height); +@include mdc-dialog-core-styles($query: mdc-helpers.$mat-base-styles-query); +@include mdc-dialog-structure-overrides.private-dialog-structure-overrides($mat-dialog-content-max-height); // The dialog container is focusable. We remove the default outline shown in browsers. .mat-mdc-dialog-container { outline: 0; - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { outline: solid 1px; } } diff --git a/src/material-experimental/mdc-form-field/_form-field-density.import.scss b/src/material-experimental/mdc-form-field/_form-field-density.import.scss index 12b681a35ed5..29b168f8054a 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.import.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.import.scss @@ -1,3 +1,8 @@ -@forward 'form-field-density'; -@forward '../../material/core/theming/theming'; +@forward '../../material/core/theming/theming.import'; @forward 'form-field-sizing'; +@forward 'form-field-density' hide private-form-field-density; +@forward 'form-field-density' as mat-mdc-* hide mat-mdc-infix-vertical-spacing-filled, +mat-mdc-infix-vertical-spacing-outlined; + +@import '../../material/core/theming/theming'; +@import 'form-field-sizing'; diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 0beddde308c8..0f3482373eb1 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -1,21 +1,22 @@ @use '@material/density'; +@use 'sass:map'; +@use '../../material/core/theming/theming'; +@use 'form-field-sizing'; @import '@material/textfield/variables.import'; -@import '../../material/core/theming/theming'; -@import 'form-field-sizing'; // Mixin that sets the vertical spacing for the infix container of filled form fields. // We need to apply spacing to the infix container because we removed the input padding // provided by MDC in order to support arbitrary form-field controls. @mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) { .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix { - padding-top: map-get($with-label-padding, top); - padding-bottom: map-get($with-label-padding, bottom); + padding-top: map.get($with-label-padding, top); + padding-bottom: map.get($with-label-padding, bottom); } .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix { - padding-top: map-get($no-label-padding, top); - padding-bottom: map-get($no-label-padding, bottom); + padding-top: map.get($no-label-padding, top); + padding-bottom: map.get($no-label-padding, bottom); } } @@ -24,8 +25,8 @@ // provided by MDC in order to support arbitrary form-field controls. @mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) { .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { - padding-top: map-get($padding, top); - padding-bottom: map-get($padding, bottom); + padding-top: map.get($padding, top); + padding-bottom: map.get($padding, bottom); } } @@ -36,8 +37,8 @@ // provide spacing that makes arbitrary controls align as specified in the Material Design // specification. In order to support density, we need to adjust the vertical spacing to be // based on the density scale. -@mixin mat-mdc-private-form-field-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin private-form-field-density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); // Height of the form field that is based on the current density scale. $height: density.prop-value( $density-config: $mdc-text-field-density-config, @@ -56,13 +57,13 @@ $vertical-deduction: ($mdc-text-field-height - $height) / 2; // Map that describes the padding for form-fields with label. $with-label-padding: ( - top: $mat-form-field-with-label-input-padding-top - $vertical-deduction, - bottom: $mat-form-field-with-label-input-padding-bottom - $vertical-deduction, + top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction, + bottom: form-field-sizing.$mat-form-field-with-label-input-padding-bottom - $vertical-deduction, ); // Map that describes the padding for form-fields without label. $no-label-padding: ( - top: $mat-form-field-no-label-padding-top - $vertical-deduction, - bottom: $mat-form-field-no-label-padding-bottom - $vertical-deduction, + top: form-field-sizing.$mat-form-field-no-label-padding-top - $vertical-deduction, + bottom: form-field-sizing.$mat-form-field-no-label-padding-bottom - $vertical-deduction, ); // We add a minimum height to the infix container in order to ensure that custom controls have diff --git a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss index aa7f2ce4ceb3..e0db9ea54a15 100644 --- a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss +++ b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss @@ -1,2 +1,4 @@ -@forward 'form-field-focus-overlay'; -@forward '../../material/core/style/layout-common'; +@forward '../../material/core/style/layout-common.import'; +@forward 'form-field-focus-overlay' as mat-mdc-*; + +@import '../../material/core/style/layout-common'; diff --git a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss index 15962b3b2a46..9c92c79d18ef 100644 --- a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss +++ b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss @@ -1,6 +1,6 @@ @use '@material/ripple/functions' as ripple-functions; +@use '../../material/core/style/layout-common'; @import '@material/textfield/mixins.import'; -@import '../../material/core/style/layout-common'; // MDC text-field uses `@material/ripple` in order to show a focus and hover effect for // text-fields. This is unnecessary because the ripples bring in a lot of unnecessary @@ -9,14 +9,14 @@ // runtime code for launching interaction ripples at pointer location. This is not needed // for the text-field, so we create our own minimal focus overlay styles. Our focus overlay // uses the exact same logic to compute the colors as in the default MDC text-field ripples. -@mixin mat-mdc-private-form-field-focus-overlay() { +@mixin private-form-field-focus-overlay() { .mat-mdc-form-field-focus-overlay { - @include mat-fill; + @include layout-common.fill; opacity: 0; } } -@mixin mat-mdc-private-form-field-focus-overlay-color() { +@mixin private-form-field-focus-overlay-color() { $focus-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, focus); $hover-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, hover); diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss index 3c8844504fc7..5fd7b32c1a65 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss +++ b/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss @@ -1,3 +1,9 @@ -@forward 'form-field-native-select'; -@forward '../../material/core/theming/theming'; -@forward '../../cdk/a11y/a11y'; +@forward '../../material/core/theming/theming.import'; +@forward '../../cdk/a11y/a11y.import'; +@forward 'form-field-native-select' hide private-form-field-native-select, +private-form-field-native-select-color; +@forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height, +$mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding; + +@import '../../material/core/theming/theming'; +@import '../../cdk/a11y/a11y'; diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss index 183a149fb70b..c3b0773cde31 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss +++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss @@ -1,5 +1,7 @@ -@import '../../material/core/theming/theming'; -@import '../../cdk/a11y/a11y'; +@use 'sass:map'; +@use '../../material/core/theming/theming'; +@use '../../cdk/a11y/a11y'; +@use '../../material/core/theming/palette'; // Width of the Material Design form-field select arrow. $mat-form-field-select-arrow-width: 10px; @@ -10,7 +12,7 @@ $mat-form-field-select-arrow-height: 5px; $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px; // Mixin that creates styles for native select controls in a form-field. -@mixin mat-mdc-private-form-field-native-select() { +@mixin private-form-field-native-select() { // Remove the native select down arrow and ensure that the native appearance // does not conflict with the form-field. e.g. Focus indication of the native // select is undesired since we handle focus as part of the form-field. @@ -45,7 +47,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt // as the background, however this causes it blend in because we've reset the `background` // above. We have to add a more specific selector in order to ensure that it gets the // `color` from our theme instead. - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { .mat-focused & { color: inherit; } @@ -90,20 +92,20 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt } } -@mixin mat-mdc-private-form-field-native-select-color($config) { +@mixin private-form-field-native-select-color($config) { select.mat-mdc-input-element { // On dark themes we set the native `select` color to some shade of white, // however the color propagates to all of the `option` elements, which are // always on a white background inside the dropdown, causing them to blend in. // Since we can't change background of the dropdown, we need to explicitly // reset the color of the options to something dark. - @if (map-get($config, is-dark)) { + @if (map.get($config, is-dark)) { option { - color: $dark-primary-text; + color: palette.$dark-primary-text; } option:disabled { - color: $dark-disabled-text; + color: palette.$dark-disabled-text; } } } diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss index b9c808a14a6e..9bacbb4a2d7b 100644 --- a/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss +++ b/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss @@ -1,3 +1,7 @@ -@forward 'form-field-subscript'; @forward 'form-field-sizing'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'form-field-subscript' as mat-mdc-*; + +@import 'form-field-sizing'; +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.scss index d1f5891b6bcc..aa9f6ac6124c 100644 --- a/src/material-experimental/mdc-form-field/_form-field-subscript.scss +++ b/src/material-experimental/mdc-form-field/_form-field-subscript.scss @@ -1,10 +1,11 @@ +@use 'form-field-sizing'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/theme/mixins.import'; @import '@material/textfield/variables.import'; @import '@material/typography/mixins.import'; -@import 'form-field-sizing'; -@import '../mdc-helpers/mdc-helpers'; -@mixin mat-mdc-private-form-field-subscript() { +@mixin private-form-field-subscript() { // Wrapper for the hints and error messages. .mat-mdc-form-field-subscript-wrapper { box-sizing: border-box; @@ -47,7 +48,7 @@ // Spacer used to make sure start and end hints have enough space between them. .mat-mdc-form-field-hint-spacer { - flex: 1 0 $mat-form-field-hint-min-space; + flex: 1 0 form-field-sizing.$mat-form-field-hint-min-space; } // Single error message displayed beneath the form field underline. @@ -56,7 +57,7 @@ } } -@mixin mat-mdc-private-form-field-subscript-color() { +@mixin private-form-field-subscript-color() { // MDC does not have built-in error treatment. .mat-mdc-form-field-error { @include mdc-theme-prop(color, $mdc-text-field-error); @@ -65,13 +66,13 @@ // We need to define our own typography for the subscript because we don't include MDC's // helper text in our MDC based form field -@mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); +@mixin private-form-field-subscript-typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); // The subscript wrapper has a minimum height to avoid that the form-field // jumps when hints or errors are displayed. .mat-mdc-form-field-subscript-wrapper, .mat-mdc-form-field-bottom-align::before { - @include mdc-typography(caption, $query: $mat-typography-styles-query); + @include mdc-typography(caption, $query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.import.scss b/src/material-experimental/mdc-form-field/_form-field-theme.import.scss index c6e5e36504a2..36ffa62f9e2b 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.import.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.import.scss @@ -1,7 +1,32 @@ -@forward 'form-field-theme'; +@forward '../../material/core/theming/theming.import'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; -@forward 'form-field-density'; -@forward 'form-field-subscript'; -@forward 'form-field-focus-overlay'; -@forward 'form-field-native-select'; -@forward 'mdc-text-field-theme-variable-refresh'; +@forward 'form-field-sizing'; +@forward 'form-field-native-select' hide private-form-field-native-select, +private-form-field-native-select-color; +@forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height, +$mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding; +@forward 'mdc-text-field-theme-variable-refresh' hide private-text-field-refresh-theme-variables; +@forward 'mdc-text-field-theme-variable-refresh' as mat-mdc-* hide +$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover, +$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background, +$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border, +$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color, +$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color, +$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label, +$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border, +$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color; +@forward '../../material/core/style/layout-common.import'; +@forward 'form-field-density' as mat-mdc-*; +@forward 'form-field-subscript' as mat-mdc-*; +@forward 'form-field-focus-overlay' as mat-mdc-*; +@forward '../../cdk/a11y/a11y.import'; +@forward 'form-field-theme' hide color, density, theme, typography; +@forward 'form-field-theme' as mat-mdc-form-field-* hide mat-mdc-form-field-text-field-color-styles; + +@import '../mdc-helpers/mdc-helpers'; +@import 'form-field-density'; +@import 'form-field-subscript'; +@import 'form-field-focus-overlay'; +@import 'form-field-native-select'; +@import 'mdc-text-field-theme-variable-refresh'; diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss index eac01b4db5cf..91da54196c05 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -1,21 +1,22 @@ @use '@material/ripple/mixins' as mdc-ripple; @use '@material/textfield/variables' as mdc-text-field; +@use '../mdc-helpers/mdc-helpers'; +@use 'form-field-density'; +@use 'form-field-subscript'; +@use 'form-field-focus-overlay'; +@use 'form-field-native-select'; +@use 'mdc-text-field-theme-variable-refresh'; +@use '../../material/core/theming/theming'; @import '@material/density/functions.import'; @import '@material/theme/variables.import'; @import '@material/textfield/mixins.import'; @import '@material/textfield/variables.import'; @import '@material/typography/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; -@import 'form-field-density'; -@import 'form-field-subscript'; -@import 'form-field-focus-overlay'; -@import 'form-field-native-select'; -@import 'mdc-text-field-theme-variable-refresh'; // Mixin that overwrites the default MDC text-field color styles to be based on // the given theme palette. The MDC text-field is styled using `primary` by default. -@mixin _mat-mdc-text-field-color-styles($palette-name, $query: $mat-theme-styles-query) { +@mixin _mat-mdc-text-field-color-styles($palette-name, $query: mdc-helpers.$mat-theme-styles-query) { $_mdc-text-field-focused-label-color: mdc-text-field.$focused-label-color; mdc-text-field.$focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87); @@ -37,17 +38,17 @@ mdc-text-field.$focused-label-color: $_mdc-text-field-focused-label-color; } -@mixin mat-mdc-form-field-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) { - @include mat-mdc-private-text-field-refresh-theme-variables() { - @include mdc-text-field-without-ripple($query: $mat-theme-styles-query); - @include mdc-floating-label-core-styles($query: $mat-theme-styles-query); - @include mdc-notched-outline-core-styles($query: $mat-theme-styles-query); - @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query); - @include mat-mdc-private-form-field-subscript-color(); - @include mat-mdc-private-form-field-focus-overlay-color(); - @include mat-mdc-private-form-field-native-select-color($config); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { + @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() { + @include mdc-text-field-without-ripple($query: mdc-helpers.$mat-theme-styles-query); + @include mdc-floating-label-core-styles($query: mdc-helpers.$mat-theme-styles-query); + @include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-theme-styles-query); + @include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-theme-styles-query); + @include form-field-subscript.private-form-field-subscript-color(); + @include form-field-focus-overlay.private-form-field-focus-overlay-color(); + @include form-field-native-select.private-form-field-native-select-color($config); .mat-mdc-form-field.mat-accent { @include _mat-mdc-text-field-color-styles(secondary); @@ -60,14 +61,14 @@ } } -@mixin mat-mdc-form-field-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-text-field-without-ripple($query: $mat-typography-styles-query); - @include mdc-floating-label-core-styles($query: $mat-typography-styles-query); - @include mdc-notched-outline-core-styles($query: $mat-typography-styles-query); - @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query); - @include mat-mdc-private-form-field-subscript-typography($config); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-text-field-without-ripple($query: mdc-helpers.$mat-typography-styles-query); + @include mdc-floating-label-core-styles($query: mdc-helpers.$mat-typography-styles-query); + @include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-typography-styles-query); + @include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-typography-styles-query); + @include form-field-subscript.private-form-field-subscript-typography($config); // MDC uses the `subtitle1` level for the input label and value, but the spec shows `body1` as // the correct level. @@ -75,31 +76,31 @@ .mat-mdc-form-field label, .mat-mdc-form-field-prefix, .mat-mdc-form-field-suffix { - @include mdc-typography(body1, $query: $mat-typography-styles-query); + @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } } -@mixin mat-mdc-form-field-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); - @include mat-mdc-private-form-field-density($density-scale); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + @include form-field-density.private-form-field-density($density-scale); } -@mixin mat-mdc-form-field-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-form-field') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-form-field') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-form-field-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-form-field-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-form-field-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss index ff54139c206b..0a3f7fd5b6ea 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss @@ -1,3 +1,6 @@ -@forward 'mdc-text-field-structure-overrides'; @forward 'form-field-sizing'; -@forward '../../cdk/a11y/a11y'; +@forward '../../cdk/a11y/a11y.import'; +@forward 'mdc-text-field-structure-overrides' as mat-mdc-*; + +@import 'form-field-sizing'; +@import '../../cdk/a11y/a11y'; diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss index b8326d72af07..8428d0b0729b 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss @@ -1,12 +1,12 @@ +@use 'form-field-sizing'; +@use '../../cdk/a11y/a11y'; @import '@material/notched-outline/variables.import'; @import '@material/textfield/variables.import'; -@import 'form-field-sizing'; -@import '../../cdk/a11y/a11y'; // Mixin that can be included to override the default MDC text-field // styles to fit our needs. See individual comments for context on why // certain MDC styles need to be modified. -@mixin mat-mdc-private-text-field-structure-overrides() { +@mixin private-text-field-structure-overrides() { // Unset the border set by MDC. We move the border (which serves as the Material Design // text-field bottom line) into its own element. This is necessary because we want the // bottom-line to span across the whole form-field (including prefixes and suffixes). @@ -93,7 +93,7 @@ // The outline of the `fill` appearance is achieved through a background color // which won't be visible in high contrast mode. Add an outline to replace it. .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper { - @include cdk-high-contrast(active, off) { + @include a11y.high-contrast(active, off) { outline: solid 1px; } } diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss index f85aa8cad7e5..502b82aaaa63 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss @@ -1,2 +1,4 @@ -@forward 'mdc-text-field-textarea-overrides'; @forward 'form-field-sizing'; +@forward 'mdc-text-field-textarea-overrides' as mat-mdc-*; + +@import 'form-field-sizing'; diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss index b2f1c8f4c158..0a0a124fa6e7 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss @@ -1,4 +1,4 @@ -@import 'form-field-sizing'; +@use 'form-field-sizing'; // MDCs default textarea styles cannot be used because they only apply if a special // class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the @@ -9,7 +9,7 @@ // Mixin that can be included to override the default MDC text-field styles // to properly support textareas. -@mixin mat-mdc-private-text-field-textarea-overrides() { +@mixin private-text-field-textarea-overrides() { // Ensures that textarea elements inside of the form-field have proper vertical spacing // to account for the floating label. Also ensures that there is no vertical text overflow. .mat-mdc-textarea-input { diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss index 61d5a3b92495..b812e8dabbb1 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss @@ -1 +1,10 @@ -@forward 'mdc-text-field-theme-variable-refresh'; +@forward 'mdc-text-field-theme-variable-refresh' hide private-text-field-refresh-theme-variables; +@forward 'mdc-text-field-theme-variable-refresh' as mat-mdc-* hide +$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover, +$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background, +$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border, +$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color, +$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color, +$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label, +$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border, +$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color; diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss index 3843fe93b6bc..b31eb3d0564e 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss @@ -7,7 +7,7 @@ // the base MDC theming variables have been explicitly updated, but the component specific // theming-based variables are still based on the old MDC base theming variables. The mixin // restores the previous values for the variables to avoid unexpected global side effects. -@mixin mat-mdc-private-text-field-refresh-theme-variables() { +@mixin private-text-field-refresh-theme-variables() { $_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border; $mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global; $_mdc-text-field-bottom-line-hover: $mdc-text-field-bottom-line-hover; diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss index 4081572d65a3..bed9f1228028 100644 --- a/src/material-experimental/mdc-form-field/form-field.scss +++ b/src/material-experimental/mdc-form-field/form-field.scss @@ -1,26 +1,27 @@ +@use './form-field-sizing'; +@use './form-field-subscript'; +@use './form-field-focus-overlay'; +@use './form-field-native-select'; +@use './mdc-text-field-textarea-overrides'; +@use './mdc-text-field-structure-overrides'; +@use '../mdc-helpers/mdc-helpers'; @import '@material/textfield/mixins.import'; -@import './form-field-sizing'; -@import './form-field-subscript'; -@import './form-field-focus-overlay'; -@import './form-field-native-select'; -@import './mdc-text-field-textarea-overrides'; -@import './mdc-text-field-structure-overrides'; // Base styles for MDC text-field, notched-outline, floating label and line-ripple. -@include mdc-text-field-without-ripple($query: $mat-base-styles-without-animation-query); -@include mdc-floating-label-core-styles($query: $mat-base-styles-without-animation-query); -@include mdc-notched-outline-core-styles($query: $mat-base-styles-without-animation-query); -@include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query); +@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include mdc-floating-label-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); // MDC text-field overwrites. -@include mat-mdc-private-text-field-textarea-overrides(); -@include mat-mdc-private-text-field-structure-overrides(); +@include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides(); +@include mdc-text-field-structure-overrides.private-text-field-structure-overrides(); // Include the subscript, focus-overlay and native select styles. -@include mat-mdc-private-form-field-subscript(); -@include mat-mdc-private-form-field-focus-overlay(); -@include mat-mdc-private-form-field-native-select(); +@include form-field-subscript.private-form-field-subscript(); +@include form-field-focus-overlay.private-form-field-focus-overlay(); +@include form-field-native-select.private-form-field-native-select(); // Host element of the form-field. It contains the mdc-text-field wrapper // and the subscript wrapper. @@ -54,7 +55,7 @@ .mat-mdc-form-field-infix { flex: auto; min-width: 0; - width: $mat-form-field-default-infix-width; + width: form-field-sizing.$mat-form-field-default-infix-width; // Needed so that the floating label does not overlap with prefixes or suffixes. position: relative; box-sizing: border-box; diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss index 4aeaf6d78499..719e24f18181 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss @@ -1,4 +1,8 @@ -@forward 'focus-indicators'; -@forward '../../material/core/theming/theming'; -@forward '../../material/core/style/layout-common'; -@forward '../../material/core/focus-indicators/focus-indicators'; +@forward '../../material/core/focus-indicators/focus-indicators.import'; +@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color, +strong-focus-indicators-theme; +@forward 'focus-indicators' as mat-mdc-* hide mat-mdc-strong-focus-indicators-border-color; + +@import '../../material/core/theming/theming'; +@import '../../material/core/style/layout-common'; +@import '../../material/core/focus-indicators/focus-indicators'; diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.scss b/src/material-experimental/mdc-helpers/_focus-indicators.scss index dcf4040c84df..7013125b919f 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.scss @@ -1,6 +1,8 @@ -@import '../../material/core/theming/theming'; -@import '../../material/core/style/layout-common'; -@import '../../material/core/focus-indicators/focus-indicators'; +@use 'sass:map'; +@use 'sass:meta'; +@use '../../material/core/theming/theming'; +@use '../../material/core/style/layout-common'; +@use '../../material/core/focus-indicators/focus-indicators'; /// Mixin that turns on strong focus indicators. /// @@ -8,7 +10,7 @@ /// .my-app { /// @include mat-mdc-strong-focus-indicators($config); /// } -@mixin mat-mdc-strong-focus-indicators($config: ()) { +@mixin strong-focus-indicators($config: ()) { // Default focus indicator config. $default-config: ( border-style: solid, @@ -17,14 +19,14 @@ ); // Merge default config with user config. - $config: map-merge($default-config, $config); - $border-style: map-get($config, border-style); - $border-width: map-get($config, border-width); - $border-radius: map-get($config, border-radius); + $config: map.merge($default-config, $config); + $border-style: map.get($config, border-style); + $border-width: map.get($config, border-width); + $border-radius: map.get($config, border-radius); // Base styles for focus indicators. .mat-mdc-focus-indicator::before { - @include mat-fill(); + @include layout-common.fill(); box-sizing: border-box; pointer-events: none; border: $border-width $border-style transparent; @@ -94,9 +96,9 @@ } } -@mixin mat-mdc-strong-focus-indicators-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map-get($config, primary))); +@mixin strong-focus-indicators-color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include _mat-mdc-strong-focus-indicators-border-color(theming.color(map.get($config, primary))); } /// Mixin that sets the color of the focus indicators. @@ -115,16 +117,16 @@ /// @include mat-mdc-strong-focus-indicators-theme(#f00); /// } /* stylelint-disable-next-line material/theme-mixin-api */ -@mixin mat-mdc-strong-focus-indicators-theme($theme-or-color) { - @if type-of($theme-or-color) != 'map' { +@mixin strong-focus-indicators-theme($theme-or-color) { + @if meta.type-of($theme-or-color) != 'map' { @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color); } @else { - $theme: mat-private-legacy-get-theme($theme-or-color); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') { - $color: mat-get-color-config($theme); + $theme: theming.legacy-get-theme($theme-or-color); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') { + $color: theming.get-color-config($theme); @if $color != null { - @include mat-mdc-strong-focus-indicators-color($color); + @include strong-focus-indicators-color($color); } } } diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss index 84d228a3f172..6674d0b4bf4c 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss @@ -1,4 +1,8 @@ +@forward '../../material/core/theming/theming.import'; +@forward '../../material/core/style/layout-common.import'; +@forward '../../material/core/typography/typography.import'; @forward 'mdc-helpers'; -@forward '../../material/core/style/layout-common'; -@forward '../../material/core/theming/theming'; -@forward '../../material/core/typography/typography'; + +@import '../../material/core/style/layout-common'; +@import '../../material/core/theming/theming'; +@import '../../material/core/typography/typography'; diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index 6b596b0fc1aa..d2c4a61ef6de 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -2,13 +2,15 @@ // "theming", "typography", "core". Currently splitting it is difficult because of our brittle // gulp-based release build process. We can update this when we switch to bazel. +@use 'sass:map'; +@use '../../material/core/style/layout-common'; +@use '../../material/core/theming/theming'; +@use '../../material/core/typography/typography'; +@use '../../material/core/typography/typography-utils'; @import '@material/feature-targeting/functions.import'; @import '@material/theme/functions.import'; @import '@material/theme/variables.import'; @import '@material/typography/variables.import'; -@import '../../material/core/style/layout-common'; -@import '../../material/core/theming/theming'; -@import '../../material/core/typography/typography'; // A set of standard queries to use with MDC's queryable mixins. $mat-base-styles-query: mdc-feature-without(mdc-feature-any(color, typography)); @@ -92,13 +94,13 @@ $mat-typography-2018-level-mappings: ( // Converts an Angular Material typography level config to an MDC one. @function mat-typography-level-config-to-mdc($mat-config, $mat-level) { - $mappings: if(mat-private-typography-is-2018-config($mat-config), + $mappings: if(typography.typography-is-2018-config($mat-config), $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); - $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level); + $mdc-level: map.get(map.get($mappings, mat-to-mdc), $mat-level); - $result-with-nulls: map-merge( + $result-with-nulls: map.merge( if($mdc-level, - map-get($mdc-typography-styles, $mdc-level), + map.get($mdc-typography-styles, $mdc-level), ( text-decoration: none, -moz-osx-font-smoothing: grayscale, @@ -106,11 +108,11 @@ $mat-typography-2018-level-mappings: ( )), if($mat-level, ( - font-size: mat-font-size($mat-config, $mat-level), - line-height: mat-line-height($mat-config, $mat-level), - font-weight: mat-font-weight($mat-config, $mat-level), - letter-spacing: mat-letter-spacing($mat-config, $mat-level), - font-family: mat-font-family($mat-config, $mat-level), + font-size: typography-utils.font-size($mat-config, $mat-level), + line-height: typography-utils.height($mat-config, $mat-level), + font-weight: typography-utils.font-weight($mat-config, $mat-level), + letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level), + font-family: typography-utils.font-family($mat-config, $mat-level), // Angular Material doesn't use text-transform, so disable it. text-transform: none, ), @@ -121,21 +123,21 @@ $mat-typography-2018-level-mappings: ( $result: (); @each $property, $value in $result-with-nulls { @if $value != null { - $result: map-merge($result, ($property: $value)); + $result: map.merge($result, ($property: $value)); } } @return $result; } // Converts an Angular Material typography config to an MDC one. -@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) { +@function mat-typography-config-to-mdc($mat-config: typography.config()) { $mdc-config: (); - $mappings: if(mat-private-typography-is-2018-config($mat-config), + $mappings: if(typography.typography-is-2018-config($mat-config), $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); - @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) { - $mdc-config: map-merge( + @each $mdc-level, $mat-level in map.get($mappings, mdc-to-mat) { + $mdc-config: map.merge( $mdc-config, ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level))); } @@ -145,24 +147,24 @@ $mat-typography-2018-level-mappings: ( // Converts an MDC typography level config to an Angular Material one. @function mat-typography-config-level-from-mdc($mdc-level) { - $mdc-level-config: map-get($mdc-typography-styles, $mdc-level); + $mdc-level-config: map.get($mdc-typography-styles, $mdc-level); - @return mat-typography-level( - map-get($mdc-level-config, font-size), - map-get($mdc-level-config, line-height), - map-get($mdc-level-config, font-weight), - map-get($mdc-level-config, font-family), - map-get($mdc-level-config, letter-spacing)); + @return typography.level( + map.get($mdc-level-config, font-size), + map.get($mdc-level-config, line-height), + map.get($mdc-level-config, font-weight), + map.get($mdc-level-config, font-family), + map.get($mdc-level-config, letter-spacing)); } // Configures MDC's global variables to reflect the given theme, applies the given styles, // then resets the global variables to prevent unintended side effects. /* stylelint-disable-next-line material/theme-mixin-api */ @mixin mat-using-mdc-theme($config) { - $primary: mat-color(map-get($config, primary)); - $accent: mat-color(map-get($config, accent)); - $warn: mat-color(map-get($config, warn)); - $background-palette: map-get($config, background); + $primary: theming.color(map.get($config, primary)); + $accent: theming.color(map.get($config, accent)); + $warn: theming.color(map.get($config, warn)); + $background-palette: map.get($config, background); // Save the original values. $orig-mdc-theme-primary: $mdc-theme-primary; @@ -183,8 +185,8 @@ $mat-typography-2018-level-mappings: ( $mdc-theme-secondary: $accent !global; $mdc-theme-on-secondary: if(mdc-theme-contrast-tone($mdc-theme-secondary) == 'dark', #000, #fff) !global; - $mdc-theme-background: mat-color($background-palette, background) !global; - $mdc-theme-surface: mat-color($background-palette, card) !global; + $mdc-theme-background: theming.color($background-palette, background) !global; + $mdc-theme-surface: theming.color($background-palette, card) !global; $mdc-theme-on-surface: if(mdc-theme-contrast-tone($mdc-theme-surface) == 'dark', #000, #fff) !global; $mdc-theme-error: $warn !global; diff --git a/src/material-experimental/mdc-input/_input-theme.import.scss b/src/material-experimental/mdc-input/_input-theme.import.scss index ab5130a65bed..afa024674db4 100644 --- a/src/material-experimental/mdc-input/_input-theme.import.scss +++ b/src/material-experimental/mdc-input/_input-theme.import.scss @@ -1,2 +1,5 @@ -@forward 'input-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'input-theme' as mat-mdc-input-*; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-input/_input-theme.scss b/src/material-experimental/mdc-input/_input-theme.scss index 00f6ee264955..00e132da0c9a 100644 --- a/src/material-experimental/mdc-input/_input-theme.scss +++ b/src/material-experimental/mdc-input/_input-theme.scss @@ -1,32 +1,33 @@ -@import '../mdc-helpers/mdc-helpers'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; -@mixin mat-mdc-input-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); - @include mat-using-mdc-theme($config) {} +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) {} } -@mixin mat-mdc-input-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) {} +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) {} } -@mixin mat-mdc-input-density($config-or-theme) {} +@mixin density($config-or-theme) {} -@mixin mat-mdc-input-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-input') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-input') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-input-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-input-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-input-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.import.scss b/src/material-experimental/mdc-list/_interactive-list-theme.import.scss index a7025e9a4406..98378781cba9 100644 --- a/src/material-experimental/mdc-list/_interactive-list-theme.import.scss +++ b/src/material-experimental/mdc-list/_interactive-list-theme.import.scss @@ -1,2 +1,5 @@ -@forward 'interactive-list-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward 'interactive-list-theme' as mat-mdc-*; + +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss index bfb7868aec5b..56c0fff17dff 100644 --- a/src/material-experimental/mdc-list/_interactive-list-theme.scss +++ b/src/material-experimental/mdc-list/_interactive-list-theme.scss @@ -1,10 +1,12 @@ +@use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/ripple/variables.import'; -@import '../mdc-helpers/mdc-helpers'; // Mixin that provides colors for the various states of an interactive list-item. MDC // has integrated styles for these states but relies on their complex ripples for it. -@mixin mat-mdc-private-interactive-list-item-state-colors($config) { - $is-dark-theme: map-get($config, is-dark); +@mixin private-interactive-list-item-state-colors($config) { + $is-dark-theme: map.get($config, is-dark); $state-opacities: if($is-dark-theme, $mdc-ripple-light-ink-opacities, $mdc-ripple-dark-ink-opacities); @@ -14,12 +16,12 @@ } &.mdc-list-item--selected::before { - background: mat-color(map-get($config, primary)); - opacity: map-get($state-opacities, selected); + background: theming.color(map.get($config, primary)); + opacity: map.get($state-opacities, selected); } &:focus::before { - opacity: map-get($state-opacities, focus); + opacity: map.get($state-opacities, focus); } } @@ -27,7 +29,7 @@ // styles should not show up. .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) { &:hover::before { - opacity: map-get($state-opacities, hover); + opacity: map.get($state-opacities, hover); } } } diff --git a/src/material-experimental/mdc-list/_list-option-theme.import.scss b/src/material-experimental/mdc-list/_list-option-theme.import.scss index a9fd2bf02733..285b05be36e5 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.import.scss +++ b/src/material-experimental/mdc-list/_list-option-theme.import.scss @@ -1,2 +1,13 @@ -@forward 'list-option-theme'; -@forward '../mdc-checkbox/checkbox-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; +@forward '../mdc-helpers/mdc-helpers'; +@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, +theme, typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, +$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme, +mat-mdc-typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide +$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color, +mat-mdc-checkbox-private-checkbox-styles-with-color; +@forward 'list-option-theme' as mat-mdc-*; + +@import '../mdc-checkbox/checkbox-theme'; diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss index c254e4c85b59..5755c5b40aa1 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.scss +++ b/src/material-experimental/mdc-list/_list-option-theme.scss @@ -1,15 +1,16 @@ +@use '../mdc-checkbox/checkbox-theme'; +@use '../mdc-helpers/mdc-helpers'; @import '@material/theme/mixins.import'; @import '@material/list/mixins.import'; @import '@material/checkbox/mixins.import'; -@import '../mdc-checkbox/checkbox-theme'; // Mixin that overrides the selected item and checkbox colors for list options. By // default, the MDC list uses the `primary` color for list items. The MDC checkbox // inside list options by default uses the `primary` color too. -@mixin mat-mdc-private-list-option-color-override($color) { +@mixin private-list-option-color-override($color) { & .mdc-list-item__meta, & .mdc-list-item__graphic { - @include mat-mdc-private-checkbox-styles-with-color($color); + @include checkbox-theme.private-checkbox-styles-with-color($color); } &.mdc-list-item--selected { @@ -22,20 +23,20 @@ } } -@mixin mat-mdc-private-list-option-density-styles($density-scale) { +@mixin private-list-option-density-styles($density-scale) { .mat-mdc-list-option { .mdc-list-item__meta, .mdc-list-item__graphic { .mdc-checkbox { - @include mdc-checkbox-density($density-scale, $query: $mat-base-styles-query); + @include mdc-checkbox-density($density-scale, $query: mdc-helpers.$mat-base-styles-query); } } } } -@mixin mat-mdc-private-list-option-typography-styles() { +@mixin private-list-option-typography-styles() { .mat-mdc-list-option { .mdc-list-item__meta, .mdc-list-item__graphic { - @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query); + @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query); } } } diff --git a/src/material-experimental/mdc-list/_list-theme.import.scss b/src/material-experimental/mdc-list/_list-theme.import.scss index 0a3f89e30375..ac7275de24b5 100644 --- a/src/material-experimental/mdc-list/_list-theme.import.scss +++ b/src/material-experimental/mdc-list/_list-theme.import.scss @@ -1,4 +1,17 @@ -@forward 'list-theme'; -@forward './interactive-list-theme'; -@forward './list-option-theme'; +@forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; +@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, +theme, typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, +$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme, +mat-mdc-typography; +@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide +$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color, +mat-mdc-checkbox-private-checkbox-styles-with-color; +@forward 'interactive-list-theme' as mat-mdc-*; +@forward 'list-option-theme' as mat-mdc-*; +@forward 'list-theme' as mat-mdc-list-*; + +@import './interactive-list-theme'; +@import './list-option-theme'; +@import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 972b1e073c6b..5c5ffdeac976 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/src/material-experimental/mdc-list/_list-theme.scss @@ -1,39 +1,40 @@ @use '@material/density'; +@use './interactive-list-theme'; +@use './list-option-theme'; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; @import '@material/list/variables.import'; @import '@material/list/mixins.import'; -@import './interactive-list-theme'; -@import './list-option-theme'; -@import '../mdc-helpers/mdc-helpers'; // TODO: implement mat-list[dense] once density system is in master -@mixin mat-mdc-list-color($config-or-theme) { - $config: mat-get-color-config($config-or-theme); +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); // MDC's state styles are tied in with their ripple. Since we don't use the MDC // ripple, we need to add the hover, focus and selected states manually. - @include mat-mdc-private-interactive-list-item-state-colors($config); + @include interactive-list-theme.private-interactive-list-item-state-colors($config); - @include mat-using-mdc-theme($config) { - @include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query); + @include mdc-helpers.mat-using-mdc-theme($config) { + @include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query); .mat-mdc-list-option { - @include mat-mdc-private-list-option-color-override(primary); + @include list-option-theme.private-list-option-color-override(primary); } .mat-mdc-list-option.mat-accent { - @include mat-mdc-private-list-option-color-override(secondary); + @include list-option-theme.private-list-option-color-override(secondary); } .mat-mdc-list-option.mat-warn { - @include mat-mdc-private-list-option-color-override(error); + @include list-option-theme.private-list-option-color-override(error); } } } -@mixin mat-mdc-list-density($config-or-theme) { - $density-scale: mat-get-density-config($config-or-theme); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); $height: density.prop-value( $density-config: $mdc-list-deprecated-single-line-density-config, $density-scale: $density-scale, @@ -48,32 +49,32 @@ @include mdc-list-deprecated-single-line-height($height); } - @include mat-mdc-private-list-option-density-styles($density-scale); + @include list-option-theme.private-list-option-density-styles($density-scale); } -@mixin mat-mdc-list-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); - @include mat-using-mdc-typography($config) { - @include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query); - @include mat-mdc-private-list-option-typography-styles(); +@mixin typography($config-or-theme) { + $config: theming.get-typography-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-typography-styles-query); + @include list-option-theme.private-list-option-typography-styles(); } } -@mixin mat-mdc-list-theme($theme-or-color-config) { - $theme: mat-private-legacy-get-theme($theme-or-color-config); - @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-list') { - $color: mat-get-color-config($theme); - $density: mat-get-density-config($theme); - $typography: mat-get-typography-config($theme); +@mixin theme($theme-or-color-config) { + $theme: theming.legacy-get-theme($theme-or-color-config); + @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-list') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { - @include mat-mdc-list-color($color); + @include color($color); } @if $density != null { - @include mat-mdc-list-density($density); + @include density($density); } @if $typography != null { - @include mat-mdc-list-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-list/list-option.scss b/src/material-experimental/mdc-list/list-option.scss index 049ab2d1a602..0de513cc8781 100644 --- a/src/material-experimental/mdc-list/list-option.scss +++ b/src/material-experimental/mdc-list/list-option.scss @@ -1,9 +1,9 @@ +@use '../mdc-helpers/mdc-helpers'; @import '@material/checkbox/mixins.import'; -@import '../mdc-helpers/mdc-helpers'; // The MDC-based list-option uses the MDC checkbox for the selection indicators. // We need to ensure that the checkbox styles are included for the list-option. -@include mdc-checkbox-without-ripple($query: $mat-base-styles-query); +@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-base-styles-query); // The internal checkbox is purely decorative, but because it's an `input`, the user can still // focus it by tabbing or clicking. Furthermore, `mat-list-option` has the `option` role which diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss index ae6ba2c88977..74b34d027279 100644 --- a/src/material-experimental/mdc-list/list.scss +++ b/src/material-experimental/mdc-list/list.scss @@ -1,8 +1,9 @@ +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/style/layout-common'; @import '@material/list/mixins.import'; @import '@material/list/variables.import'; -@import '../mdc-helpers/mdc-helpers'; -@include mdc-list-deprecated-without-ripple($query: $mat-base-styles-query); +@include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query); // MDC expects the list element to be a `