diff --git a/scripts/migrate-sass-modules.js b/scripts/migrate-sass-modules.js index 85d5f4c4bfb8..4a31444d55f2 100644 --- a/scripts/migrate-sass-modules.js +++ b/scripts/migrate-sass-modules.js @@ -3,6 +3,16 @@ const path = require('path'); const fs = require('fs'); const {sync: glob} = require('glob'); +// Script that migrates the library source to the Sass module system while maintaining +// backwards-compatibility. The script assumes that `sass-migrator` is installed +// globally and that the results will be committed. Works by migrating the .scss files +// based on their position in the dependency tree, starting with the files that are depended +// upon the most and working downwards. Furthermore, because the `sass-migrator` isn't able to +// pick up imports from the `node_modules`, there is a workaround that comments out all of the +// imports from `@material/*`, runs the migration and re-adds the imports back. The script also +// sorts all remaining `@import` statements lower than `@use` statements to avoid compilation +// errors and auto-fixes some linting failures that are generated by the migrator. + const directory = path.join(__dirname, '../src'); const migratedFiles = new Set(); const ignorePatterns = [ diff --git a/src/cdk/overlay/_overlay.import.scss b/src/cdk/overlay/_overlay.import.scss index cbd65227ea2b..834e590c9e62 100644 --- a/src/cdk/overlay/_overlay.import.scss +++ b/src/cdk/overlay/_overlay.import.scss @@ -1,3 +1,8 @@ -@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; +@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; diff --git a/src/cdk/text-field/_text-field.import.scss b/src/cdk/text-field/_text-field.import.scss index 1577a937de76..9d250dbd3e6c 100644 --- a/src/cdk/text-field/_text-field.import.scss +++ b/src/cdk/text-field/_text-field.import.scss @@ -1,3 +1,5 @@ @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; +@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/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss index 493b79d4455c..45674c7fea2b 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize.scss @@ -40,7 +40,9 @@ bottom: 0; position: absolute; top: 0; - transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; + transition: background + variables.$swift-ease-in-duration + variables.$swift-ease-in-timing-function; width: 1px; } @@ -84,7 +86,9 @@ background: transparent; cursor: col-resize; height: 100%; - transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; + transition: background + variables.$swift-ease-in-duration + variables.$swift-ease-in-timing-function; @include vendor-prefixes.user-select(none); width: 100%; diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss index b69822617b5c..7ce3c5ebece5 100644 --- a/src/material-experimental/mdc-button/_button-theme.import.scss +++ b/src/material-experimental/mdc-button/_button-theme.import.scss @@ -1,6 +1,17 @@ @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; +@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; diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 71329e343977..a00b04813df4 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -63,27 +63,28 @@ $mat-button-state-target: '.mdc-button__ripple'; .mat-mdc-button, .mat-mdc-outlined-button { &.mat-unthemed { - @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-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); } &.mat-primary { @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-states-base-color( - primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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: mdc-helpers.$mat-theme-styles-query); - @include mdc-states-base-color( - secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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: mdc-helpers.$mat-theme-styles-query); - @include mdc-states-base-color( - error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(error); } } @@ -91,35 +92,39 @@ $mat-button-state-target: '.mdc-button__ripple'; .mat-mdc-raised-button, .mat-mdc-unelevated-button { &.mat-unthemed { - @include mdc-button-container-fill-color( - 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-button-container-fill-color(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-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: mdc-helpers.$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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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: mdc-helpers.$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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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: mdc-helpers.$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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: $mat-button-state-target); @include _mat-button-ripple-ink-color(on-error); } @@ -130,7 +135,8 @@ $mat-button-state-target: '.mdc-button__ripple'; .mat-mdc-outlined-button { &.mat-unthemed { - @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, + $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { @@ -214,21 +220,24 @@ $mat-button-state-target: '.mdc-button__ripple'; @include mdc-states-base-color( 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-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); + @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: mdc-helpers.$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 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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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); @@ -236,7 +245,8 @@ $mat-button-state-target: '.mdc-button__ripple'; &.mat-warn { @include mdc-states-base-color( - on-error, $query: mdc-helpers.$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 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); @@ -290,29 +300,30 @@ $mat-button-state-target: '.mdc-button__ripple'; $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); &.mat-unthemed { - @include mdc-states-base-color( - 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-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-states-base-color(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-helpers.$mdc-theme-on-surface, + $query: mdc-helpers.$mat-theme-styles-query); } &.mat-primary { @include mdc-states-base-color( - primary, $query: mdc-helpers.$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 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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + @include mdc-states-base-color(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); } diff --git a/src/material-experimental/mdc-card/_card-theme.import.scss b/src/material-experimental/mdc-card/_card-theme.import.scss index 5a905c5c3484..eeac2cdc0335 100644 --- a/src/material-experimental/mdc-card/_card-theme.import.scss +++ b/src/material-experimental/mdc-card/_card-theme.import.scss @@ -1,4 +1,5 @@ @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; +@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, + $mat-mdc-card-mdc-card-outline-color; diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss index 115f08740d6e..982b3f2d56c5 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss @@ -1,5 +1,10 @@ @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-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-private-checkbox-styles-with-color; +@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-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-private-checkbox-styles-with-color; diff --git a/src/material-experimental/mdc-chips/_chips-theme.import.scss b/src/material-experimental/mdc-chips/_chips-theme.import.scss index 0deccb6c3e6a..fa251e4e8583 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.import.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.import.scss @@ -1,4 +1,5 @@ @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; +@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; diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss index 4c69b769f537..c6d0dad727a1 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.scss @@ -35,19 +35,22 @@ &.mat-primary { &.mdc-chip--selected, &.mat-mdc-chip-highlighted { - @include mdc-chip-fill-color-accessible($primary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-fill-color-accessible($primary, + $query: mdc-helpers.$mat-theme-styles-query); } } &.mat-accent { &.mdc-chip--selected, &.mat-mdc-chip-highlighted { - @include mdc-chip-fill-color-accessible($accent, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-fill-color-accessible($accent, + $query: mdc-helpers.$mat-theme-styles-query); } } &.mat-warn { &.mdc-chip--selected, &.mat-mdc-chip-highlighted { - @include mdc-chip-fill-color-accessible($warn, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-chip-fill-color-accessible($warn, + $query: mdc-helpers.$mat-theme-styles-query); } } } diff --git a/src/material-experimental/mdc-color/_all-color.import.scss b/src/material-experimental/mdc-color/_all-color.import.scss index 840e93281187..081830abf8ef 100644 --- a/src/material-experimental/mdc-color/_all-color.import.scss +++ b/src/material-experimental/mdc-color/_all-color.import.scss @@ -2,33 +2,73 @@ @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-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-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-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-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-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-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-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-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-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-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/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/form-field-theme' hide color, density, theme, typography; -@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* hide $mat-mdc-form-field-mdc-text-field-focused-label-color; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* + hide $mat-mdc-form-field-mdc-text-field-focused-label-color; @forward '../mdc-core/option/option-theme.import'; @forward '../mdc-core/option/optgroup-theme.import'; @forward '../mdc-core/core' as mat-mdc-core-*; diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index fe0877ab00e8..c80993bae706 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -28,15 +28,18 @@ } .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { - @include mdc-list-item-primary-text-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-list-item-primary-text-ink-color(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-item-primary-text-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-list-item-primary-text-ink-color(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-item-primary-text-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-list-item-primary-text-ink-color(error, + $query: mdc-helpers.$mat-theme-styles-query); } } } diff --git a/src/material-experimental/mdc-density/_all-density.import.scss b/src/material-experimental/mdc-density/_all-density.import.scss index 1f77aa70c85c..ef065b4232c4 100644 --- a/src/material-experimental/mdc-density/_all-density.import.scss +++ b/src/material-experimental/mdc-density/_all-density.import.scss @@ -2,33 +2,74 @@ @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-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-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-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-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-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-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-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-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-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-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/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/form-field-theme' hide color, density, theme, typography; -@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* hide $mat-mdc-form-field-mdc-text-field-focused-label-color; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* + hide $mat-mdc-form-field-mdc-text-field-focused-label-color; @forward '../mdc-core/option/option-theme.import'; @forward '../mdc-core/option/optgroup-theme.import'; @forward '../mdc-core/core' as mat-mdc-core-*; diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss index fe7d2711a754..ac03f2ebfbc5 100644 --- a/src/material-experimental/mdc-dialog/dialog.scss +++ b/src/material-experimental/mdc-dialog/dialog.scss @@ -12,7 +12,8 @@ $mat-dialog-content-max-height: 65vh !default; $mat-dialog-button-horizontal-margin: 8px !default; @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); +@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 { 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 15c2b2aecbe9..cd8b338bd722 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,4 +1,5 @@ @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; +@forward 'form-field-density' as mat-mdc-* hide mat-mdc-infix-vertical-spacing-filled, + mat-mdc-infix-vertical-spacing-outlined; 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 68c3cde96ebd..3be9517552d2 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,4 +1,6 @@ @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; +@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; 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 a336c1fe9cb4..fc5444a7c90a 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 @@ -2,8 +2,10 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @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 '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 '../../material/core/style/layout-common.import'; @forward 'form-field-density' as mat-mdc-*; @forward 'form-field-subscript' as mat-mdc-*; @@ -11,4 +13,6 @@ @forward '../../cdk/a11y/a11y.import'; @forward 'mdc-text-field-theme-variable-refresh' as mat-mdc-*; @forward 'form-field-theme' hide color, density, theme, typography; -@forward 'form-field-theme' as mat-mdc-form-field-* hide $mat-mdc-form-field-mdc-text-field-focused-label-color, mat-mdc-form-field-text-field-color-styles; +@forward 'form-field-theme' as mat-mdc-form-field-* + hide $mat-mdc-form-field-mdc-text-field-focused-label-color, + mat-mdc-form-field-text-field-color-styles; 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 b6eb2ac8885b..79403eaa632e 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -15,9 +15,10 @@ // 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: mdc-helpers.$mat-theme-styles-query) { +@mixin _mat-mdc-text-field-color-styles($palette-name) { $_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) !global; + $query: mdc-helpers.$mat-theme-styles-query; @include mdc-text-field-caret-color($palette-name, $query); @include mdc-text-field-line-ripple-color($palette-name, $query); diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss index 6fcca250d38b..b92079a568e7 100644 --- a/src/material-experimental/mdc-form-field/form-field.scss +++ b/src/material-experimental/mdc-form-field/form-field.scss @@ -9,9 +9,12 @@ // Base styles for MDC text-field, notched-outline, floating label and line-ripple. -@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-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. diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss index 5068f52d52ff..8630c397ce63 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss @@ -1,3 +1,4 @@ @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' 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; 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 bd2b3a57605d..f45e30518514 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.import.scss +++ b/src/material-experimental/mdc-list/_list-option-theme.import.scss @@ -1,6 +1,11 @@ @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 '../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-*; diff --git a/src/material-experimental/mdc-list/_list-theme.import.scss b/src/material-experimental/mdc-list/_list-theme.import.scss index 2dc1790e48e3..851afe606022 100644 --- a/src/material-experimental/mdc-list/_list-theme.import.scss +++ b/src/material-experimental/mdc-list/_list-theme.import.scss @@ -1,8 +1,13 @@ @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 '../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-*; diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss index 0c39eed0d265..0473b6281e7d 100644 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss @@ -58,7 +58,8 @@ @mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); - $height: compatibility.density-prop-value(paginator-variables.$mat-paginator-density-config, $density-scale, height); + $height: compatibility.density-prop-value( + paginator-variables.$mat-paginator-density-config, $density-scale, height); @include compatibility.density-legacy-compatibility() { .mat-mdc-paginator-container { diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss index a7fb2e5e1fb2..4a476d1dfa8c 100644 --- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss +++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss @@ -11,7 +11,8 @@ // lightening the color of the primary bar. $buffer-color: color.adjust(mdc-theme-prop-value($color), $lightness: 30%); @include mdc-linear-progress-bar-color($color, $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-linear-progress-buffer-color($buffer-color, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-linear-progress-buffer-color($buffer-color, + $query: mdc-helpers.$mat-theme-styles-query); } @mixin color($config-or-theme) { diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss index c225f89a616c..ba32334f9042 100644 --- a/src/material-experimental/mdc-progress-bar/progress-bar.scss +++ b/src/material-experimental/mdc-progress-bar/progress-bar.scss @@ -1,7 +1,8 @@ @use '../mdc-helpers/mdc-helpers'; @import '@material/linear-progress/mixins.import'; -@include mdc-linear-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include mdc-linear-progress-core-styles($query: + mdc-helpers.$mat-base-styles-without-animation-query); .mat-mdc-progress-bar { // Explicitly set to `block` since the browser defaults custom elements to `inline`. diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss index c6076b32c520..0702e9576e07 100644 --- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss +++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss @@ -1,7 +1,8 @@ @use '../mdc-helpers/mdc-helpers'; @import '@material/circular-progress/mixins.import'; -@include mdc-circular-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include mdc-circular-progress-core-styles( + $query: mdc-helpers.$mat-base-styles-without-animation-query); .mat-mdc-progress-spinner { // Prevents the spinning of the inner element from affecting layout outside of the spinner. diff --git a/src/material-experimental/mdc-radio/_radio-theme.import.scss b/src/material-experimental/mdc-radio/_radio-theme.import.scss index 24e4988c19fe..b0543fe36766 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.import.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.import.scss @@ -1,4 +1,5 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'radio-theme' hide color, density, theme, typography; -@forward '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 '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; diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index eecb5be24f25..e94a754a9d5a 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -46,7 +46,7 @@ $config: theming.get-typography-config($config-or-theme); @include mdc-helpers.mat-using-mdc-typography($config) { @include mdc-radio-without-ripple($query: mdc-helpers.$mat-typography-styles-query); - @include mdc-form-field-core-styles($query: $mat-typography-styles-query); + @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-select/_select-theme.import.scss b/src/material-experimental/mdc-select/_select-theme.import.scss index cb049ae0f677..5e34b9f16c89 100644 --- a/src/material-experimental/mdc-select/_select-theme.import.scss +++ b/src/material-experimental/mdc-select/_select-theme.import.scss @@ -1,4 +1,8 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'select-theme' hide color, density, theme, typography; -@forward '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, mat-mdc-select-get-mdc-focused-text-color; +@forward '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, + mat-mdc-select-get-mdc-focused-text-color; diff --git a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss index bced5e0f25b6..e9ddf7621b18 100644 --- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss +++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss @@ -1,4 +1,9 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'slide-toggle-theme' hide color, density, theme, typography; -@forward '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 '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; diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss index 49902d2c9d24..247e28839aef 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss @@ -1,4 +1,6 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'snack-bar-theme' hide color, density, theme, typography; -@forward '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 '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; diff --git a/src/material-experimental/mdc-table/_table-theme.import.scss b/src/material-experimental/mdc-table/_table-theme.import.scss index 428f20b38758..d4988ab13b4d 100644 --- a/src/material-experimental/mdc-table/_table-theme.import.scss +++ b/src/material-experimental/mdc-table/_table-theme.import.scss @@ -1,4 +1,10 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'table-theme' hide color, density, theme, typography; -@forward '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 '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; diff --git a/src/material-experimental/mdc-tabs/_tabs-common.import.scss b/src/material-experimental/mdc-tabs/_tabs-common.import.scss index 971877d53490..d122c3ed6170 100644 --- a/src/material-experimental/mdc-tabs/_tabs-common.import.scss +++ b/src/material-experimental/mdc-tabs/_tabs-common.import.scss @@ -3,5 +3,6 @@ @forward '../mdc-helpers/mdc-helpers'; @forward '../../material/core/style/vendor-prefixes.import'; @forward '../../cdk/a11y/a11y.import'; -@forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container, paginated-tab-header-item-wrapper, tab, tab-ripple; +@forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container, + paginated-tab-header-item-wrapper, tab, tab-ripple; @forward 'tabs-common' as mat-mdc-* hide $mat-mdc-mat-tab-animation-duration; diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.import.scss b/src/material-experimental/mdc-tabs/_tabs-theme.import.scss index d094cd138f65..983474fbbaac 100644 --- a/src/material-experimental/mdc-tabs/_tabs-theme.import.scss +++ b/src/material-experimental/mdc-tabs/_tabs-theme.import.scss @@ -1,4 +1,6 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward 'tabs-theme' hide color, density, theme, typography; -@forward '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, mat-mdc-tabs-background, mat-mdc-tabs-palette-styles; +@forward '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, + mat-mdc-tabs-background, mat-mdc-tabs-palette-styles; diff --git a/src/material-experimental/mdc-theming/_all-theme.import.scss b/src/material-experimental/mdc-theming/_all-theme.import.scss index 92fe367303d8..ae6e9f482007 100644 --- a/src/material-experimental/mdc-theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-theming/_all-theme.import.scss @@ -2,33 +2,74 @@ @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-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-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-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-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-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-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-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-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-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-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/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/form-field-theme' hide color, density, theme, typography; -@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* hide $mat-mdc-form-field-mdc-text-field-focused-label-color; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* + hide $mat-mdc-form-field-mdc-text-field-focused-label-color; @forward '../mdc-core/option/option-theme.import'; @forward '../mdc-core/option/optgroup-theme.import'; @forward '../mdc-core/core' as mat-mdc-core-*; diff --git a/src/material-experimental/mdc-typography/_all-typography.import.scss b/src/material-experimental/mdc-typography/_all-typography.import.scss index bd4e73f7bc66..d7d37f869649 100644 --- a/src/material-experimental/mdc-typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-typography/_all-typography.import.scss @@ -2,33 +2,77 @@ @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-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-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-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-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-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-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-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-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-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-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/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/form-field-theme' hide color, density, theme, typography; -@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* hide $mat-mdc-form-field-mdc-text-field-focused-label-color; +@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-* + hide $mat-mdc-form-field-mdc-text-field-focused-label-color; @forward '../mdc-core/option/option-theme.import'; @forward '../mdc-core/option/optgroup-theme.import'; @forward '../mdc-core/core' as mat-mdc-core-*; diff --git a/src/material-experimental/popover-edit/_popover-edit.import.scss b/src/material-experimental/popover-edit/_popover-edit.import.scss index b72975aa604d..11590e07c8d3 100644 --- a/src/material-experimental/popover-edit/_popover-edit.import.scss +++ b/src/material-experimental/popover-edit/_popover-edit.import.scss @@ -3,4 +3,5 @@ @forward '../../cdk/a11y/a11y.import'; @forward '../../material/core/typography/typography-utils.import'; @forward 'popover-edit' hide color, density, theme, typography; -@forward 'popover-edit' as mat-popover-edit-* hide mat-popover-edit-mat-edit-hover-content-background; +@forward 'popover-edit' as mat-popover-edit-* + hide mat-popover-edit-mat-edit-hover-content-background; diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss index 9cd95fdfe026..7e6bffb7e773 100644 --- a/src/material-experimental/popover-edit/_popover-edit.scss +++ b/src/material-experimental/popover-edit/_popover-edit.scss @@ -58,7 +58,9 @@ right: 0; transform-origin: 50%; transform: scaleX(0.5); - transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; + transition: background-color + variables.$swift-ease-in-duration + variables.$swift-ease-in-timing-function; visibility: hidden; } diff --git a/src/material/badge/_badge-theme.import.scss b/src/material/badge/_badge-theme.import.scss index 1da8442d943d..631e340edae9 100644 --- a/src/material/badge/_badge-theme.import.scss +++ b/src/material/badge/_badge-theme.import.scss @@ -1,5 +1,6 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; @forward '../../cdk/a11y/a11y.import'; -@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size, color, theme, typography; +@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size, + color, theme, typography; @forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size; diff --git a/src/material/button/_button-base.import.scss b/src/material/button/_button-base.import.scss index 102d2fd822ba..69fbc9e1b836 100644 --- a/src/material/button/_button-base.import.scss +++ b/src/material/button/_button-base.import.scss @@ -1,5 +1,16 @@ @forward '../core/style/private.import'; @forward '../core/style/button-common.import'; -@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius, $mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin, $mat-min-width, $mat-padding, mat-base; -@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius, $mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius, $mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding, $mat-button-mini-fab-size, $mat-button-stroked-button-border-width, $mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, mat-button-fab, mat-button-raised-button; -@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius, $mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height, $mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size, $mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height, $mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button; +@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius, + $mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin, + $mat-min-width, $mat-padding, mat-base; +@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius, + $mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius, + $mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding, + $mat-button-mini-fab-size, $mat-button-stroked-button-border-width, + $mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, + mat-button-fab, mat-button-raised-button; +@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius, + $mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height, + $mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size, + $mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height, + $mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button; diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index 9d70413c4550..1057bf09c8f9 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -11,7 +11,7 @@ $margin: 0 !default; $line-height: 36px !default; $border-radius: 4px !default; $focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function, - background-color 200ms variables.$swift-ease-in-out-timing-function !default; + background-color 200ms variables.$swift-ease-in-out-timing-function !default; // Stroked button padding is 1px less horizontally than default/flat/raised // button's padding. @@ -82,7 +82,8 @@ $mini-fab-padding: 8px !default; transform: translate3d(0, 0, 0); // Animation. - transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, + transition: background variables.$swift-ease-out-duration + variables.$swift-ease-out-timing-function, elevation.transition-property-value(); } diff --git a/src/material/button/_button-theme.import.scss b/src/material/button/_button-theme.import.scss index 7958dbff4bff..8d23e1140ba6 100644 --- a/src/material/button/_button-theme.import.scss +++ b/src/material/button/_button-theme.import.scss @@ -2,4 +2,6 @@ @forward '../core/style/private.import'; @forward '../core/typography/typography-utils.import'; @forward 'button-theme' hide color, theme, typography; -@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density, mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color, mat-button-theme-property; +@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density, + mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color, + mat-button-theme-property; diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index ced7eaeb8825..7121b910bd9c 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -184,7 +184,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; display: inline-block; // Animation - transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, + transition: background variables.$swift-ease-out-duration + variables.$swift-ease-out-timing-function, elevation.transition-property-value(); cursor: pointer; @@ -276,7 +277,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; justify-content: center; transition: background-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function, - opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function; + opacity checkbox-common.$transition-duration + variables.$linear-out-slow-in-timing-function; ._mat-animation-noopable & { transition: none; @@ -426,7 +428,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; &-unchecked-checked { .mat-checkbox-background { - animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background; + animation: checkbox-common.$transition-duration * 2 linear 0ms + mat-checkbox-fade-in-background; } .mat-checkbox-checkmark-path { @@ -440,7 +443,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; &-unchecked-indeterminate { .mat-checkbox-background { - animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background; + animation: checkbox-common.$transition-duration * 2 linear 0ms + mat-checkbox-fade-in-background; } .mat-checkbox-mixedmark { @@ -451,7 +455,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; &-checked-unchecked { .mat-checkbox-background { - animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background; + animation: checkbox-common.$transition-duration * 2 linear 0ms + mat-checkbox-fade-out-background; } .mat-checkbox-checkmark-path { @@ -486,7 +491,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; &-indeterminate-unchecked { .mat-checkbox-background { - animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background; + animation: checkbox-common.$transition-duration * 2 linear 0ms + mat-checkbox-fade-out-background; } .mat-checkbox-mixedmark { diff --git a/src/material/chips/_chips-theme.import.scss b/src/material/chips/_chips-theme.import.scss index f5b792d2dd07..8b05a4a8db8b 100644 --- a/src/material/chips/_chips-theme.import.scss +++ b/src/material/chips/_chips-theme.import.scss @@ -2,5 +2,8 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; @forward 'chips-theme' hide $chip-remove-font-size, color, theme, typography; -@forward 'chips-theme' as mat-* hide mat-chip-element-color, mat-chip-theme-color, mat-color, mat-density, mat-ripple-background, mat-theme, mat-typography; -@forward 'chips-theme' as mat-chips-* hide $mat-chips-chip-remove-font-size, mat-chips-chip-element-color, mat-chips-chip-theme-color, mat-chips-density, mat-chips-ripple-background; +@forward 'chips-theme' as mat-* hide mat-chip-element-color, mat-chip-theme-color, mat-color, + mat-density, mat-ripple-background, mat-theme, mat-typography; +@forward 'chips-theme' as mat-chips-* hide $mat-chips-chip-remove-font-size, + mat-chips-chip-element-color, mat-chips-chip-theme-color, mat-chips-density, + mat-chips-ripple-background; diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index db7eb5af6c98..55a4e4f7d81b 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -32,7 +32,8 @@ $chip-remove-font-size: 18px; } @mixin _mat-chip-theme-color($palette) { - @include _mat-chip-element-color(theming.color($palette, default-contrast), theming.color($palette)); + @include _mat-chip-element-color(theming.color($palette, default-contrast), + theming.color($palette)); .mat-ripple-element { @include _mat-chips-ripple-background($palette, default-contrast, 0.1); diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel index 0dfd13cb62f6..ee737dc7e3e9 100644 --- a/src/material/core/BUILD.bazel +++ b/src/material/core/BUILD.bazel @@ -47,9 +47,13 @@ ALL_THEMING_FILES = [ # on the `_all-typography` file. "_core.scss", "color/_all-color.scss", + "color/_all-color.import.scss", "density/private/_all-density.scss", + "density/private/_all-density.import.scss", "theming/_all-theme.scss", + "theming/_all-theme.import.scss", "typography/_all-typography.scss", + "typography/_all-typography.import.scss", ] sass_library( diff --git a/src/material/core/_core.import.scss b/src/material/core/_core.import.scss index ecf2ce706cbb..5cbe9bef31cf 100644 --- a/src/material/core/_core.import.scss +++ b/src/material/core/_core.import.scss @@ -42,5 +42,7 @@ @forward '../tabs/tabs-theme.import'; @forward 'typography/all-typography'; @forward 'core' hide color, core, theme; -@forward 'core' as mat-* hide mat-color, mat-mdc-core, mat-mdc-strong-focus-indicators-positioning, mat-theme; -@forward 'core' as mat-core-* hide mat-core-core, mat-core-mdc-core, mat-core-mdc-strong-focus-indicators-positioning; +@forward 'core' as mat-* hide mat-color, mat-mdc-core, + mat-mdc-strong-focus-indicators-positioning, mat-theme; +@forward 'core' as mat-core-* hide mat-core-core, mat-core-mdc-core, + mat-core-mdc-strong-focus-indicators-positioning; diff --git a/src/material/core/density/private/_compatibility.import.scss b/src/material/core/density/private/_compatibility.import.scss index a6da93d6faf1..84f73b3dc458 100644 --- a/src/material/core/density/private/_compatibility.import.scss +++ b/src/material/core/density/private/_compatibility.import.scss @@ -1,2 +1,4 @@ -@forward 'compatibility' hide $density-generate-at-root, $density-generate-styles, density-legacy-compatibility, density-prop-value; -@forward 'compatibility' as mat-private-* hide $mat-private-default-scale, $mat-private-interval, $mat-private-maximum-scale, $mat-private-minimum-scale, $mat-private-supported-scales; +@forward 'compatibility' hide $density-generate-at-root, $density-generate-styles, + density-legacy-compatibility, density-prop-value; +@forward 'compatibility' as mat-private-* hide $mat-private-default-scale, $mat-private-interval, + $mat-private-maximum-scale, $mat-private-minimum-scale, $mat-private-supported-scales; diff --git a/src/material/core/focus-indicators/_focus-indicators.import.scss b/src/material/core/focus-indicators/_focus-indicators.import.scss index 1abab43c0ab0..1d5e2a2b9ead 100644 --- a/src/material/core/focus-indicators/_focus-indicators.import.scss +++ b/src/material/core/focus-indicators/_focus-indicators.import.scss @@ -1,9 +1,25 @@ -@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, + $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, + $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, + $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, + $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; +@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, + mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, + mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, + mat-private-palette; @forward '../style/layout-common' as mat-*; -@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color, strong-focus-indicators-positioning, strong-focus-indicators-theme; -@forward 'focus-indicators' as mat-* hide mat-strong-focus-indicators-border-color, mat-strong-focus-indicators-positioning; -@forward 'focus-indicators' as mat-private-* hide mat-private-strong-focus-indicators, mat-private-strong-focus-indicators-border-color, mat-private-strong-focus-indicators-color, mat-private-strong-focus-indicators-theme; +@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color, + strong-focus-indicators-positioning, strong-focus-indicators-theme; +@forward 'focus-indicators' as mat-* hide mat-strong-focus-indicators-border-color, + mat-strong-focus-indicators-positioning; +@forward 'focus-indicators' as mat-private-* hide mat-private-strong-focus-indicators, + mat-private-strong-focus-indicators-border-color, mat-private-strong-focus-indicators-color, + mat-private-strong-focus-indicators-theme; diff --git a/src/material/core/option/_optgroup-theme.import.scss b/src/material/core/option/_optgroup-theme.import.scss index 988ee516d89f..52cc3f57e850 100644 --- a/src/material/core/option/_optgroup-theme.import.scss +++ b/src/material/core/option/_optgroup-theme.import.scss @@ -1,10 +1,27 @@ -@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, +$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, +$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, +$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, +$mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; -@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, mat-level-to-styles; -@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-level-to-styles; -@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family, mat-typography-font-size, mat-typography-font-weight, mat-typography-height, mat-typography-letter-spacing; +@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, + mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, + mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, + mat-private-palette; +@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, + mat-level-to-styles; +@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family, + mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, + mat-line-level-to-styles; +@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family, + mat-typography-font-size, mat-typography-font-weight, mat-typography-height, + mat-typography-letter-spacing; @forward 'optgroup-theme' hide color, theme, typography; @forward 'optgroup-theme' as mat-optgroup-* hide mat-optgroup-density; diff --git a/src/material/core/option/_option-theme.import.scss b/src/material/core/option/_option-theme.import.scss index af0b53b56c87..18b33cd55bf6 100644 --- a/src/material/core/option/_option-theme.import.scss +++ b/src/material/core/option/_option-theme.import.scss @@ -1,10 +1,27 @@ -@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, + $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, + $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, + $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, + $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; -@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, mat-level-to-styles; -@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-level-to-styles; -@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family, mat-typography-font-size, mat-typography-font-weight, mat-typography-height, mat-typography-letter-spacing; +@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, + mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, + mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, + mat-private-palette; +@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, + mat-level-to-styles; +@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family, + mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, + mat-line-level-to-styles; +@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family, + mat-typography-font-size, mat-typography-font-weight, mat-typography-height, + mat-typography-letter-spacing; @forward 'option-theme' hide color, theme, typography; @forward 'option-theme' as mat-option-* hide mat-option-density; diff --git a/src/material/core/ripple/_ripple.import.scss b/src/material/core/ripple/_ripple.import.scss index 82a699dc3b9b..f30879c69035 100644 --- a/src/material/core/ripple/_ripple.import.scss +++ b/src/material/core/ripple/_ripple.import.scss @@ -1,8 +1,20 @@ -@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, + $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, + $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, + $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, + $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; +@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, + mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, + mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, + mat-private-palette; @forward '../../../cdk/a11y/a11y.import'; @forward 'ripple' as mat-* hide $mat-color-opacity, mat-color, mat-theme; @forward 'ripple' as mat-ripple-* hide mat-ripple-ripple; diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss index 5701d0438fbc..8c25dbe4531d 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss @@ -1,7 +1,19 @@ -@forward '../../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, + $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, + $lime, $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, + $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, + $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, + $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, + $mat-white-6-opacity, $mat-white-87-opacity; @forward '../../density/private/compatibility' as mat-private-*; -@forward '../../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; +@forward '../../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../../theming/theming' as mat-private-* + hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, + mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, + mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; @forward 'pseudo-checkbox-theme' hide color, theme, typography; @forward 'pseudo-checkbox-theme' as mat-pseudo-checkbox-* hide mat-pseudo-checkbox-density; diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss index 7ee70a7b7d28..b1cfc3a0cf68 100644 --- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss @@ -10,6 +10,7 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox- .mat-pseudo-checkbox { + $trasnsition-timing-function: variables.$linear-out-slow-in-timing-function; width: checkbox-common.$size; height: checkbox-common.$size; border: checkbox-common.$border-width solid; @@ -21,8 +22,8 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox- position: relative; flex-shrink: 0; transition: - border-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function, - background-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function; + border-color checkbox-common.$transition-duration $trasnsition-timing-function, + background-color checkbox-common.$transition-duration $trasnsition-timing-function; // Used to render the checkmark/mixedmark inside of the box. &::after { @@ -30,7 +31,7 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox- opacity: 0; content: ''; border-bottom: checkbox-common.$border-width solid currentColor; - transition: opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function; + transition: opacity checkbox-common.$transition-duration $trasnsition-timing-function; } &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate { diff --git a/src/material/core/style/_checkbox-common.import.scss b/src/material/core/style/_checkbox-common.import.scss index 5e15c9ce76bd..c7fb141832d2 100644 --- a/src/material/core/style/_checkbox-common.import.scss +++ b/src/material/core/style/_checkbox-common.import.scss @@ -1,3 +1,9 @@ -@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; -@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; +@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, + $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; +@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, + $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, + $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, + $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, + $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, + $mat-z-index-fab; @forward 'checkbox-common' as mat-checkbox-*; diff --git a/src/material/core/style/_elevation.import.scss b/src/material/core/style/_elevation.import.scss index d6510911971e..4513a9090edf 100644 --- a/src/material/core/style/_elevation.import.scss +++ b/src/material/core/style/_elevation.import.scss @@ -1,5 +1,16 @@ -@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; -@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; -@forward 'elevation' hide $color, $opacity, $prefix, $transition-duration, $transition-timing-function, elevation, overridable-elevation, transition, transition-property-value; -@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration, $mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map, mat-transition, mat-transition-property-value; -@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map, mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation; +@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, + $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; +@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, + $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, + $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, + $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, + $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, + $mat-z-index-fab; +@forward 'elevation' hide $color, $opacity, $prefix, $transition-duration, + $transition-timing-function, elevation, overridable-elevation, transition, + transition-property-value; +@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration, + $mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map, + mat-transition, mat-transition-property-value; +@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map, + mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation; diff --git a/src/material/core/style/_form-common.import.scss b/src/material/core/style/_form-common.import.scss index 7d1d6d63f8c1..9dbb1359940e 100644 --- a/src/material/core/style/_form-common.import.scss +++ b/src/material/core/style/_form-common.import.scss @@ -1,6 +1,18 @@ -@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, +$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, +$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, +$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, +$mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme; -@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette; +@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles, + mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object, + mat-legacy-get-theme; +@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings, + mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config, + mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, + mat-private-palette; @forward 'form-common' as mat-private-*; diff --git a/src/material/core/style/_menu-common.import.scss b/src/material/core/style/_menu-common.import.scss index f50e7f42363b..49450981f971 100644 --- a/src/material/core/style/_menu-common.import.scss +++ b/src/material/core/style/_menu-common.import.scss @@ -1,5 +1,11 @@ -@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; -@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; +@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, + $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; +@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, + $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, + $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, + $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, + $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, + $mat-z-index-fab; @forward 'list-common' as mat-* hide mat-base, mat-wrapper-base; @forward 'list-common' as mat-line-* hide mat-line-normalize-text, mat-line-truncate-line; @forward 'layout-common' as mat-*; diff --git a/src/material/core/style/_private.import.scss b/src/material/core/style/_private.import.scss index 1ad6903b112b..afa8ff991795 100644 --- a/src/material/core/style/_private.import.scss +++ b/src/material/core/style/_private.import.scss @@ -1,5 +1,13 @@ -@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; -@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; -@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration, $mat-transition-timing-function, mat-transition, mat-transition-property-value; -@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-overridable-elevation; +@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, + $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; +@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, + $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, + $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, + $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, + $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, + $mat-z-index-fab; +@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration, + $mat-transition-timing-function, mat-transition, mat-transition-property-value; +@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, + mat-elevation-overridable-elevation; @forward 'private' as mat-private-*; diff --git a/src/material/core/style/_variables.import.scss b/src/material/core/style/_variables.import.scss index e5ae7ef32274..ac34cc72a8a8 100644 --- a/src/material/core/style/_variables.import.scss +++ b/src/material/core/style/_variables.import.scss @@ -1,2 +1,8 @@ -@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; -@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; +@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function, + $linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall; +@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in, + $mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration, + $mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out, + $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear, + $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, + $mat-z-index-fab; diff --git a/src/material/core/theming/_palette.import.scss b/src/material/core/theming/_palette.import.scss index b49c484d1057..5389350c4f84 100644 --- a/src/material/core/theming/_palette.import.scss +++ b/src/material/core/theming/_palette.import.scss @@ -1,2 +1,9 @@ -@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, + $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, + $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, + $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, + $mat-white-87-opacity; diff --git a/src/material/core/theming/_theming.import.scss b/src/material/core/theming/_theming.import.scss index 2baab8b826a8..2a26ee3e1a92 100644 --- a/src/material/core/theming/_theming.import.scss +++ b/src/material/core/theming/_theming.import.scss @@ -1,6 +1,27 @@ -@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, $orange, $pink, $purple, $red, $teal, $yellow; -@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, $mat-white-87-opacity; +@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan, + $dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey, + $indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime, + $orange, $pink, $purple, $red, $teal, $yellow; +@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity, + $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text, + $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused, + $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity, + $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-private-*; -@forward 'theming' hide $theme-ignore-duplication-warnings, check-duplicate-theme-styles, color, contrast, create-backwards-compatibility-theme, dark-theme, get-color-config, get-density-config, get-typography-config, is-legacy-constructed-theme, is-theme-object, legacy-get-theme, light-theme, palette; -@forward 'theming' as mat-* hide $mat-theme-duplicate-warning, $mat-theme-emitted-color, $mat-theme-emitted-density, $mat-theme-emitted-typography, $mat-theme-generate-default-density, mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, mat-create-dark-color-config, mat-create-light-color-config, mat-is-legacy-constructed-theme, mat-is-theme-object, mat-legacy-get-theme, mat-validate-theme; -@forward 'theming' as mat-private-* hide $mat-private-theme-duplicate-warning, $mat-private-theme-emitted-color, $mat-private-theme-emitted-density, $mat-private-theme-emitted-typography, $mat-private-theme-generate-default-density, $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, mat-private-create-dark-color-config, mat-private-create-light-color-config, mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme, mat-private-palette, mat-private-validate-theme; +@forward 'theming' hide $theme-ignore-duplication-warnings, check-duplicate-theme-styles, color, + contrast, create-backwards-compatibility-theme, dark-theme, get-color-config, get-density-config, + get-typography-config, is-legacy-constructed-theme, is-theme-object, legacy-get-theme, + light-theme, palette; +@forward 'theming' as mat-* hide $mat-theme-duplicate-warning, $mat-theme-emitted-color, + $mat-theme-emitted-density, $mat-theme-emitted-typography, $mat-theme-generate-default-density, + mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme, + mat-create-dark-color-config, mat-create-light-color-config, mat-is-legacy-constructed-theme, + mat-is-theme-object, mat-legacy-get-theme, mat-validate-theme; +@forward 'theming' as mat-private-* hide $mat-private-theme-duplicate-warning, + $mat-private-theme-emitted-color, $mat-private-theme-emitted-density, + $mat-private-theme-emitted-typography, $mat-private-theme-generate-default-density, + $mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast, + mat-private-create-dark-color-config, mat-private-create-light-color-config, + mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config, + mat-private-get-typography-config, mat-private-light-theme, mat-private-palette, + mat-private-validate-theme; diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss index b16893cd0f9d..606f1c62ee5c 100644 --- a/src/material/core/theming/_theming.scss +++ b/src/material/core/theming/_theming.scss @@ -337,15 +337,14 @@ $_mat-theme-emitted-density: () !default; // styles **once** and at root. This matches the old behavior where density styles were // part of the base component styles (that did not use view encapsulation). // TODO: Remove this compatibility logic when the legacy theming API is removed. - $mat-private-density-generate-at-root: is-legacy-constructed-theme($theme); - $mat-private-density-generate-styles: not $duplicate-legacy-density; + compatibility.$density-generate-at-root: is-legacy-constructed-theme($theme); + compatibility.$density-generate-styles: not $duplicate-legacy-density; @content; $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global; - // TODO: after the migration is finished, these need to refer to the `compatibility` import. - $mat-private-density-generate-at-root: false; - $mat-private-density-generate-styles: true; + compatibility.$density-generate-at-root: false; + compatibility.$density-generate-styles: true; } // Checks whether the given value resolves to a theme object. Theme objects are always diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss index 22e9acaac156..20cb7ab98345 100644 --- a/src/material/core/theming/tests/test-theming-api.scss +++ b/src/material/core/theming/tests/test-theming-api.scss @@ -127,8 +127,11 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) // by updating immediate properties on the `$theme` object. @include assert(theming.get-color-config($legacy-light-theme), $legacy-light-theme, 'Expected that the theme object is used for the color configuration.'); - @include assert(theming.get-color-config($new-api-dark-theme), map.get($new-api-dark-theme, color), - 'Expected that a color config can be read from a theme object.'); + @include assert( + theming.get-color-config($new-api-dark-theme), + map.get($new-api-dark-theme, color), + 'Expected that a color config can be read from a theme object.' + ); @include assert(theming.get-color-config($light-theme-only-density), null, 'Expected that by default, no color configuration is used.'); @include assert(theming.get-color-config($no-color-light-theme), null, @@ -252,7 +255,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) @include all-density.angular-material-density($theme); } - @include all-typography.angular-material-typography(map.get($light-theme-only-typography, typography)); + @include all-typography.angular-material-typography( + map.get($light-theme-only-typography, typography)); @include all-typography.angular-material-typography($light-theme-only-typography); @include all-density.angular-material-density(map.get($light-theme-only-density, density)); diff --git a/src/material/core/typography/_typography-utils.import.scss b/src/material/core/typography/_typography-utils.import.scss index 356d88f620ce..77ff5b5840fd 100644 --- a/src/material/core/typography/_typography-utils.import.scss +++ b/src/material/core/typography/_typography-utils.import.scss @@ -1,4 +1,10 @@ -@forward 'typography-utils' hide font-family, font-shorthand, font-size, font-weight, height, letter-spacing, level-to-styles; -@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-get-type-value, mat-height, mat-level-to-styles; -@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-get-type-value, mat-line-letter-spacing, mat-line-level-to-styles; -@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family, mat-typography-font-size, mat-typography-font-weight, mat-typography-get-type-value, mat-typography-height, mat-typography-letter-spacing; +@forward 'typography-utils' hide font-family, font-shorthand, font-size, font-weight, height, + letter-spacing, level-to-styles; +@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-get-type-value, mat-height, + mat-level-to-styles; +@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, + mat-line-font-size, mat-line-font-weight, mat-line-get-type-value, mat-line-letter-spacing, + mat-line-level-to-styles; +@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family, + mat-typography-font-size, mat-typography-font-weight, mat-typography-get-type-value, + mat-typography-height, mat-typography-letter-spacing; diff --git a/src/material/core/typography/_typography.import.scss b/src/material/core/typography/_typography.import.scss index c9344d1acac9..22e90aa6fdae 100644 --- a/src/material/core/typography/_typography.import.scss +++ b/src/material/core/typography/_typography.import.scss @@ -1,5 +1,8 @@ @forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-height, mat-level-to-styles; -@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-level-to-styles; -@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family, mat-typography-font-size, mat-typography-font-weight, mat-typography-height, mat-typography-letter-spacing; +@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand, + mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-level-to-styles; +@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family, + mat-typography-font-size, mat-typography-font-weight, mat-typography-height, + mat-typography-letter-spacing; @forward 'typography' as mat-* hide mat-config, mat-level; @forward 'typography' as mat-typography-* hide mat-typography-base-typography; diff --git a/src/material/datepicker/_datepicker-theme.import.scss b/src/material/datepicker/_datepicker-theme.import.scss index 605b41cb0c0f..9302b98d307c 100644 --- a/src/material/datepicker/_datepicker-theme.import.scss +++ b/src/material/datepicker/_datepicker-theme.import.scss @@ -1,6 +1,12 @@ @forward '../core/style/private.import'; @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; -@forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size, $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount, color, date-range-colors, theme, typography; -@forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount, $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme, mat-typography, mat-unselected-cell; -@forward 'datepicker-theme' as mat-datepicker-* hide $mat-datepicker-calendar-body-font-size, $mat-datepicker-calendar-weekday-table-font-size, mat-datepicker-color, mat-datepicker-date-range-colors, mat-datepicker-density, mat-datepicker-unselected-cell; +@forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size, + $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount, + color, date-range-colors, theme, typography; +@forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount, + $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme, + mat-typography, mat-unselected-cell; +@forward 'datepicker-theme' as mat-datepicker-* hide $mat-datepicker-calendar-body-font-size, + $mat-datepicker-calendar-weekday-table-font-size, mat-datepicker-color, + mat-datepicker-date-range-colors, mat-datepicker-density, mat-datepicker-unselected-cell; diff --git a/src/material/form-field/_form-field-fill-theme.import.scss b/src/material/form-field/_form-field-fill-theme.import.scss index 31eff3001f83..4feeed1e38c2 100644 --- a/src/material/form-field/_form-field-fill-theme.import.scss +++ b/src/material/form-field/_form-field-fill-theme.import.scss @@ -1,5 +1,9 @@ @forward '../core/style/form-common.import'; @forward '../core/typography/typography-utils.import'; -@forward 'form-field-fill-theme' hide $fill-dedupe, fill-color, fill-theme, fill-typography, form-field-fill-density; -@forward 'form-field-fill-theme' as mat-form-field-* hide mat-form-field-fill-label-floating, mat-form-field-form-field-fill-density; -@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe, mat-private-fill-color, mat-private-fill-label-floating, mat-private-fill-theme, mat-private-fill-typography; +@forward 'form-field-fill-theme' hide $fill-dedupe, fill-color, fill-theme, fill-typography, + form-field-fill-density; +@forward 'form-field-fill-theme' as mat-form-field-* hide mat-form-field-fill-label-floating, + mat-form-field-form-field-fill-density; +@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe, + mat-private-fill-color, mat-private-fill-label-floating, mat-private-fill-theme, + mat-private-fill-typography; diff --git a/src/material/form-field/_form-field-legacy-theme.import.scss b/src/material/form-field/_form-field-legacy-theme.import.scss index f99e79f8158e..8c6d410c3100 100644 --- a/src/material/form-field/_form-field-legacy-theme.import.scss +++ b/src/material/form-field/_form-field-legacy-theme.import.scss @@ -1,5 +1,10 @@ @forward '../core/style/form-common.import'; @forward '../core/typography/typography-utils.import'; -@forward 'form-field-legacy-theme' hide $legacy-dedupe, form-field-legacy-density, legacy-color, legacy-theme, legacy-typography; -@forward 'form-field-legacy-theme' as mat-form-field-* hide mat-form-field-form-field-legacy-density, mat-form-field-legacy-label-floating, mat-form-field-legacy-label-floating-print; -@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe, mat-private-legacy-color, mat-private-legacy-label-floating, mat-private-legacy-label-floating-print, mat-private-legacy-theme, mat-private-legacy-typography; +@forward 'form-field-legacy-theme' hide $legacy-dedupe, form-field-legacy-density, legacy-color, + legacy-theme, legacy-typography; +@forward 'form-field-legacy-theme' as mat-form-field-* + hide mat-form-field-form-field-legacy-density, mat-form-field-legacy-label-floating, + mat-form-field-legacy-label-floating-print; +@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe, + mat-private-legacy-color, mat-private-legacy-label-floating, + mat-private-legacy-label-floating-print, mat-private-legacy-theme, mat-private-legacy-typography; diff --git a/src/material/form-field/_form-field-outline-theme.import.scss b/src/material/form-field/_form-field-outline-theme.import.scss index a5326ed8e561..665323ce5704 100644 --- a/src/material/form-field/_form-field-outline-theme.import.scss +++ b/src/material/form-field/_form-field-outline-theme.import.scss @@ -1,5 +1,9 @@ @forward '../core/style/form-common.import'; @forward '../core/typography/typography-utils.import'; -@forward 'form-field-outline-theme' hide $outline-dedupe, form-field-outline-density, outline-color, outline-theme, outline-typography; -@forward 'form-field-outline-theme' as mat-form-field-* hide mat-form-field-form-field-outline-density, mat-form-field-outline-label-floating; -@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe, mat-private-outline-color, mat-private-outline-label-floating, mat-private-outline-theme, mat-private-outline-typography; +@forward 'form-field-outline-theme' hide $outline-dedupe, form-field-outline-density, outline-color, + outline-theme, outline-typography; +@forward 'form-field-outline-theme' as mat-form-field-* + hide mat-form-field-form-field-outline-density, mat-form-field-outline-label-floating; +@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe, + mat-private-outline-color, mat-private-outline-label-floating, mat-private-outline-theme, + mat-private-outline-typography; diff --git a/src/material/form-field/_form-field-standard-theme.import.scss b/src/material/form-field/_form-field-standard-theme.import.scss index b94254e1a9e8..96537dfbab5c 100644 --- a/src/material/form-field/_form-field-standard-theme.import.scss +++ b/src/material/form-field/_form-field-standard-theme.import.scss @@ -1,4 +1,6 @@ @forward '../core/style/form-common.import'; @forward '../core/typography/typography-utils.import'; -@forward 'form-field-standard-theme' as mat-form-field-* hide mat-form-field-form-field-standard-density; -@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color, mat-private-standard-theme, mat-private-standard-typography; +@forward 'form-field-standard-theme' as mat-form-field-* + hide mat-form-field-form-field-standard-density; +@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color, + mat-private-standard-theme, mat-private-standard-typography; diff --git a/src/material/form-field/_form-field-theme.import.scss b/src/material/form-field/_form-field-theme.import.scss index a2685c264c9e..822af08c7204 100644 --- a/src/material/form-field/_form-field-theme.import.scss +++ b/src/material/form-field/_form-field-theme.import.scss @@ -1,12 +1,19 @@ @forward '../core/style/form-common.import'; @forward 'form-field-fill-theme' as mat-form-field-* hide mat-form-field-form-field-fill-density; -@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe, mat-private-fill-color, mat-private-fill-theme, mat-private-fill-typography; -@forward 'form-field-legacy-theme' as mat-form-field-* hide mat-form-field-form-field-legacy-density; -@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe, mat-private-legacy-color, mat-private-legacy-theme, mat-private-legacy-typography; -@forward 'form-field-outline-theme' as mat-form-field-* hide mat-form-field-form-field-outline-density; -@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe, mat-private-outline-color, mat-private-outline-theme, mat-private-outline-typography; +@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe, + mat-private-fill-color, mat-private-fill-theme, mat-private-fill-typography; +@forward 'form-field-legacy-theme' as mat-form-field-* + hide mat-form-field-form-field-legacy-density; +@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe, + mat-private-legacy-color, mat-private-legacy-theme, mat-private-legacy-typography; +@forward 'form-field-outline-theme' as mat-form-field-* + hide mat-form-field-form-field-outline-density; +@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe, + mat-private-outline-color, mat-private-outline-theme, mat-private-outline-typography; @forward '../core/typography/typography-utils.import'; -@forward 'form-field-standard-theme' as mat-form-field-* hide mat-form-field-form-field-standard-density; -@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color, mat-private-standard-theme, mat-private-standard-typography; +@forward 'form-field-standard-theme' as mat-form-field-* + hide mat-form-field-form-field-standard-density; +@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color, + mat-private-standard-theme, mat-private-standard-typography; @forward 'form-field-theme' hide $dedupe, color, density, theme, typography; @forward 'form-field-theme' as mat-form-field-* hide mat-form-field-label-floating; diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index fab835789b87..78e7f8cbfcdc 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -86,6 +86,8 @@ $default-infix-width: 180px !default; // basically `empty || (float && (!empty || focused))`. Float is dependent on the // `floatingPlaceholder` property. .mat-form-field-label { + $transition-timing-function: variables.$swift-ease-out-timing-function; + // The label is after the form field control, but needs to be aligned top-left of the infix
. position: absolute; left: 0; @@ -100,9 +102,9 @@ $default-infix-width: 180px !default; overflow: hidden; transform-origin: 0 0; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - width variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $transition-timing-function, + color variables.$swift-ease-out-duration $transition-timing-function, + width variables.$swift-ease-out-duration $transition-timing-function; // Hide the label initially, and only show it when it's floating or the control is empty. display: none; @@ -177,7 +179,9 @@ $default-infix-width: 180px !default; transform-origin: 50%; transform: scaleX(0.5); opacity: 0; - transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function; + transition: background-color + variables.$swift-ease-in-duration + variables.$swift-ease-in-timing-function; } .mat-form-field.mat-focused, diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 64c422511df9..bc6e04c11157 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -53,7 +53,8 @@ @mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); - $height: compatibility.density-prop-value(paginator-variables.$density-config, $density-scale, height); + $height: + compatibility.density-prop-value(paginator-variables.$density-config, $density-scale, height); @include compatibility.density-legacy-compatibility() { .mat-paginator-container { diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss index 7485a8a7faa4..9d5ae22e51d1 100644 --- a/src/material/progress-spinner/progress-spinner.scss +++ b/src/material/progress-spinner/progress-spinner.scss @@ -8,7 +8,8 @@ $stroke-rotate-fallback-duration: 10 * 1000ms !default; $stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default; $_mat-progress-spinner-default-radius: 45px; -$_mat-progress-spinner-default-circumference: variables.$pi * $_mat-progress-spinner-default-radius * 2; +$_mat-progress-spinner-default-circumference: + variables.$pi * $_mat-progress-spinner-default-radius * 2; .mat-progress-spinner { display: block; diff --git a/src/material/select/select.scss b/src/material/select/select.scss index 74b9a7ee150b..ec24bed9a84f 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -66,7 +66,9 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin); // Animate the arrow position, but only when the transitioning to empty (animate the arrow down) // This is in line with the mat-form-field label animation .mat-form-field-appearance-standard .mat-select.mat-select-empty & { - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform + variables.$swift-ease-out-duration + variables.$swift-ease-out-timing-function; } ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & { diff --git a/src/material/slide-toggle/_slide-toggle-theme.import.scss b/src/material/slide-toggle/_slide-toggle-theme.import.scss index 2b5de3bc4915..1d0bbf82f255 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.import.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.import.scss @@ -2,4 +2,5 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; @forward 'slide-toggle-theme' hide color, theme, typography; -@forward 'slide-toggle-theme' as mat-slide-toggle-* hide mat-slide-toggle-checked, mat-slide-toggle-density; +@forward 'slide-toggle-theme' as mat-slide-toggle-* hide mat-slide-toggle-checked, + mat-slide-toggle-density; diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 89baaec02766..d876097d0065 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -54,17 +54,19 @@ $focus-ring-size: 30px !default; } .mat-slider-track-fill { + $timing-function: variables.$swift-ease-out-timing-function; position: absolute; transform-origin: 0 0; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function, + background-color variables.$swift-ease-out-duration $timing-function; } .mat-slider-track-background { + $timing-function: variables.$swift-ease-out-timing-function; position: absolute; transform-origin: 100% 100%; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function, + background-color variables.$swift-ease-out-duration $timing-function; } .mat-slider-ticks-container { @@ -83,21 +85,23 @@ $focus-ring-size: 30px !default; } .mat-slider-thumb-container { + $timing-function: variables.$swift-ease-out-timing-function; position: absolute; z-index: 1; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function; } .mat-slider-focus-ring { + $timing-function: variables.$swift-ease-out-timing-function; position: absolute; width: $focus-ring-size; height: $focus-ring-size; border-radius: 50%; transform: scale(0); opacity: 0; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function, + background-color variables.$swift-ease-out-duration $timing-function, + opacity variables.$swift-ease-out-duration $timing-function; .mat-slider.cdk-keyboard-focused &, .mat-slider.cdk-program-focused & { @@ -113,6 +117,7 @@ $focus-ring-size: 30px !default; } .mat-slider-thumb { + $timing-function: variables.$swift-ease-out-timing-function; @extend %_mat-slider-cursor; position: absolute; @@ -124,12 +129,13 @@ $focus-ring-size: 30px !default; border: $thumb-border-width solid transparent; border-radius: 50%; transform: scale($thumb-default-scale); - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function, + background-color variables.$swift-ease-out-duration $timing-function, + border-color variables.$swift-ease-out-duration $timing-function; } .mat-slider-thumb-label { + $timing-function: variables.$swift-ease-out-timing-function; @extend %_mat-slider-cursor; display: none; @@ -139,9 +145,9 @@ $focus-ring-size: 30px !default; width: $thumb-label-size; height: $thumb-label-size; border-radius: 50%; - transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - border-radius variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function, - background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: transform variables.$swift-ease-out-duration $timing-function, + border-radius variables.$swift-ease-out-duration $timing-function, + background-color variables.$swift-ease-out-duration $timing-function; @include a11y.high-contrast(active, off) { outline: solid 1px; @@ -176,7 +182,9 @@ $focus-ring-size: 30px !default; border-width: 0; border-style: solid; opacity: 0; - transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function; + transition: opacity + variables.$swift-ease-out-duration + variables.$swift-ease-out-timing-function; } &.cdk-focused, diff --git a/src/material/stepper/_stepper-theme.import.scss b/src/material/stepper/_stepper-theme.import.scss index 2e4ecebad3f9..d3cc55af5b91 100644 --- a/src/material/stepper/_stepper-theme.import.scss +++ b/src/material/stepper/_stepper-theme.import.scss @@ -1,6 +1,10 @@ @forward '../core/theming/theming.import'; @forward '../core/density/private/compatibility.import'; -@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height, $mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height, $mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width, $mat-side-gap; -@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size, $mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin; +@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height, + $mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height, + $mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width, + $mat-side-gap; +@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size, + $mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin; @forward '../core/typography/typography-utils.import'; @forward 'stepper-theme' as mat-stepper-*; diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 0feef4f3b9a1..a864d26423e2 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -136,7 +136,8 @@ @mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); - $height: compatibility.density-prop-value(stepper-variables.$density-config, $density-scale, height); + $height: + compatibility.density-prop-value(stepper-variables.$density-config, $density-scale, height); $vertical-padding: ($height - stepper-variables.$label-header-height) / 2; @include compatibility.density-legacy-compatibility() { diff --git a/src/material/stepper/_stepper-variables.import.scss b/src/material/stepper/_stepper-variables.import.scss index 56f0ffc4184e..b7eb7ab4b778 100644 --- a/src/material/stepper/_stepper-variables.import.scss +++ b/src/material/stepper/_stepper-variables.import.scss @@ -1,2 +1,6 @@ -@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height, $mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height, $mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width, $mat-side-gap; -@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size, $mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin; +@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height, + $mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height, + $mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width, + $mat-side-gap; +@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size, + $mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin; diff --git a/src/material/tabs/_tabs-common.import.scss b/src/material/tabs/_tabs-common.import.scss index 54bb63b4d4a6..328f1c18cdf1 100644 --- a/src/material/tabs/_tabs-common.import.scss +++ b/src/material/tabs/_tabs-common.import.scss @@ -2,4 +2,5 @@ @forward '../core/style/vendor-prefixes.import'; @forward '../../cdk/a11y/a11y.import'; @forward 'tabs-common' hide $tab-animation-duration, $tab-bar-height; -@forward 'tabs-common' as mat-* hide mat-ink-bar, mat-paginated-tab-header, mat-paginated-tab-header-container, mat-paginated-tab-header-item-wrapper, mat-tab-label; +@forward 'tabs-common' as mat-* hide mat-ink-bar, mat-paginated-tab-header, + mat-paginated-tab-header-container, mat-paginated-tab-header-item-wrapper, mat-tab-label; diff --git a/src/material/tabs/_tabs-theme.import.scss b/src/material/tabs/_tabs-theme.import.scss index cbaac1406607..bcdd21b50876 100644 --- a/src/material/tabs/_tabs-theme.import.scss +++ b/src/material/tabs/_tabs-theme.import.scss @@ -1,4 +1,5 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; @forward 'tabs-theme' hide color, theme, typography; -@forward 'tabs-theme' as mat-tabs-* hide mat-tabs-background, mat-tabs-density, mat-tabs-ink-bar, mat-tabs-tab-label-focus; +@forward 'tabs-theme' as mat-tabs-* hide mat-tabs-background, mat-tabs-density, + mat-tabs-ink-bar, mat-tabs-tab-label-focus; diff --git a/src/material/toolbar/_toolbar-theme.import.scss b/src/material/toolbar/_toolbar-theme.import.scss index 39cd797d8d7d..83afcb18de46 100644 --- a/src/material/toolbar/_toolbar-theme.import.scss +++ b/src/material/toolbar/_toolbar-theme.import.scss @@ -3,4 +3,5 @@ @forward 'toolbar-variables' as mat-toolbar-*; @forward '../core/typography/typography-utils.import'; @forward 'toolbar-theme' hide color, density, theme, typography; -@forward 'toolbar-theme' as mat-toolbar-* hide mat-toolbar-color, mat-toolbar-form-field-overrides, mat-toolbar-height; +@forward 'toolbar-theme' as mat-toolbar-* hide mat-toolbar-color, + mat-toolbar-form-field-overrides, mat-toolbar-height; diff --git a/src/material/tooltip/_tooltip-theme.import.scss b/src/material/tooltip/_tooltip-theme.import.scss index 1ccaefc92023..f06d6b09922a 100644 --- a/src/material/tooltip/_tooltip-theme.import.scss +++ b/src/material/tooltip/_tooltip-theme.import.scss @@ -1,4 +1,5 @@ @forward '../core/theming/theming.import'; @forward '../core/typography/typography-utils.import'; -@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height, $handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography; +@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height, + $handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography; @forward 'tooltip-theme' as mat-tooltip-* hide mat-tooltip-density; diff --git a/tools/stylelint/no-top-level-ampersand-in-mixin.ts b/tools/stylelint/no-top-level-ampersand-in-mixin.ts index 0902ef2dc657..59a839539ce0 100644 --- a/tools/stylelint/no-top-level-ampersand-in-mixin.ts +++ b/tools/stylelint/no-top-level-ampersand-in-mixin.ts @@ -33,7 +33,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => { root.walkAtRules(node => { // Skip non-mixin atrules and internal mixins. if (!node.nodes || node.name !== 'mixin' || node.params.startsWith('_') || - node.params.startsWith('mat-private-') || node.params.startsWith('mat-mdc-private-')) { + node.params.startsWith('private-')) { return; }