From 38b392a8c042840c631aeb8222a150cf35254a47 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 17 Mar 2021 07:45:28 +0100 Subject: [PATCH] feat(material/core): expose new @use-based Sass API Reworks the public Sass API to take advantage of `@use` in order to allow for a single entry point into `@angular/material` or `@angular/cdk`. Some mixins and variables were renamed in order be a better reflection of what they do. Before: ``` @import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-warn: mat-palette($mat-red); $candy-app-theme: mat-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, ) )); @include angular-material-theme($candy-app-theme); ``` After: ``` @use '~@angular/material' as mat; @include mat.core(); $candy-app-primary: mat.define-palette(mat.$indigo-palette); $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $candy-app-warn: mat.define-palette(mat.$red-palette); $candy-app-theme: mat.define-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, ) )); @include mat.all-component-themes($candy-app-theme); ``` --- .../shim-scss-imports.js | 0 src/cdk/BUILD.bazel | 10 +- src/cdk/_index.scss | 4 + src/cdk/a11y/_a11y.scss | 7 +- src/cdk/a11y/a11y-prebuilt.scss | 2 +- src/cdk/text-field/_text-field.import.scss | 7 +- src/cdk/text-field/_text-field.scss | 49 ++++++---- src/cdk/text-field/text-field-prebuilt.scss | 3 +- src/dev-app/BUILD.bazel | 1 + src/dev-app/input/input-demo.scss | 2 +- src/dev-app/mdc-input/mdc-input-demo.scss | 2 +- src/dev-app/theme.scss | 87 ++++++++--------- src/e2e-app/BUILD.bazel | 1 + src/e2e-app/theme.scss | 23 ++--- .../column-resize/_column-resize.scss | 6 +- .../mdc-button/_button-theme.scss | 4 +- .../mdc-card/_card-theme.scss | 2 +- .../mdc-checkbox/_checkbox-theme.scss | 12 +-- .../mdc-chips/_chips-theme.scss | 8 +- .../mdc-color/_all-color.import.scss | 2 +- .../mdc-color/_all-color.scss | 9 +- .../mdc-density/_all-density.import.scss | 2 +- .../mdc-density/_all-density.scss | 9 +- .../mdc-helpers/_focus-indicators-theme.scss | 48 ++++++++++ .../mdc-helpers/_focus-indicators.import.scss | 5 +- .../mdc-helpers/_focus-indicators.scss | 46 --------- .../mdc-helpers/_mdc-helpers.scss | 16 ++-- .../mdc-list/_interactive-list-theme.scss | 2 +- .../mdc-paginator/_paginator-theme.scss | 8 +- .../mdc-slide-toggle/_slide-toggle-theme.scss | 6 +- .../mdc-snack-bar/_snack-bar-theme.scss | 2 +- .../mdc-theming/_all-theme.import.scss | 3 +- .../mdc-theming/_all-theme.scss | 7 +- .../mdc-theming/prebuilt/indigo-pink.scss | 13 +-- .../_all-typography.import.scss | 4 +- .../mdc-typography/_all-typography.scss | 13 ++- .../popover-edit/_popover-edit.scss | 8 +- src/material/BUILD.bazel | 5 +- src/material/_index.scss | 88 +++++++++++++++++ .../autocomplete/_autocomplete-theme.scss | 8 +- src/material/badge/_badge-theme.scss | 18 ++-- .../bottom-sheet/_bottom-sheet-theme.scss | 6 +- .../button-toggle/_button-toggle-theme.scss | 26 ++--- src/material/button/_button-theme.scss | 22 ++--- src/material/card/_card-theme.scss | 6 +- src/material/checkbox/_checkbox-theme.scss | 20 ++-- src/material/chips/_chips-theme.scss | 10 +- src/material/core/_core-theme.scss | 58 +++++++++++ src/material/core/_core.import.scss | 10 +- src/material/core/_core.scss | 63 +----------- .../core/color/_all-color.import.scss | 4 +- src/material/core/color/_all-color.scss | 9 +- .../density/private/_all-density.import.scss | 2 +- .../core/density/private/_all-density.scss | 8 +- .../_focus-indicators-theme.scss | 47 +++++++++ .../_focus-indicators.import.scss | 14 ++- .../focus-indicators/_focus-indicators.scss | 45 --------- .../core/option/_optgroup-theme.import.scss | 14 +-- src/material/core/option/_optgroup-theme.scss | 6 +- .../core/option/_option-theme.import.scss | 14 +-- src/material/core/option/_option-theme.scss | 18 ++-- src/material/core/ripple/_ripple-theme.scss | 33 +++++++ src/material/core/ripple/_ripple.import.scss | 13 ++- src/material/core/ripple/_ripple.scss | 35 ------- .../_pseudo-checkbox-theme.import.scss | 10 +- .../_pseudo-checkbox-theme.scss | 10 +- .../core/style/_form-common.import.scss | 10 +- src/material/core/style/_form-common.scss | 3 +- .../core/theming/_all-theme.import.scss | 4 +- src/material/core/theming/_all-theme.scss | 11 ++- .../core/theming/_palette-deprecated.scss | 76 +++++++++++++++ .../core/theming/_palette.import.scss | 11 ++- src/material/core/theming/_palette.scss | 84 ++++++++-------- .../core/theming/_theming-deprecated.scss | 27 ++++++ .../core/theming/_theming.import.scss | 20 ++-- src/material/core/theming/_theming.scss | 37 +++---- .../theming/prebuilt/deeppurple-amber.scss | 8 +- .../core/theming/prebuilt/indigo-pink.scss | 8 +- .../core/theming/prebuilt/pink-bluegrey.scss | 8 +- .../core/theming/prebuilt/purple-green.scss | 8 +- .../tests/test-css-variables-theme.scss | 6 +- .../core/theming/tests/test-theming-api.scss | 96 +++++++++---------- .../core/typography/_all-typography.scss | 11 ++- .../typography/_typography-deprecated.scss | 39 ++++++++ .../_typography-utils-deprecated.scss | 6 ++ .../typography/_typography-utils.import.scss | 15 ++- .../core/typography/_typography-utils.scss | 6 +- .../core/typography/_typography.import.scss | 12 ++- src/material/core/typography/_typography.scss | 62 ++++++------ .../datepicker/_datepicker-theme.scss | 44 ++++----- src/material/dialog/_dialog-theme.scss | 6 +- src/material/divider/_divider-theme.scss | 4 +- src/material/expansion/_expansion-theme.scss | 18 ++-- .../form-field/_form-field-fill-theme.scss | 13 ++- .../form-field/_form-field-legacy-theme.scss | 7 +- .../form-field/_form-field-outline-theme.scss | 19 ++-- .../_form-field-standard-theme.scss | 4 +- .../form-field/_form-field-theme.scss | 20 ++-- src/material/icon/_icon-theme.scss | 6 +- src/material/input/_input-theme.scss | 14 +-- src/material/list/_list-theme.scss | 12 +-- src/material/menu/_menu-theme.scss | 10 +- src/material/paginator/_paginator-theme.scss | 12 +-- .../progress-bar/_progress-bar-theme.scss | 10 +- .../_progress-spinner-theme.scss | 6 +- src/material/radio/_radio-theme.scss | 12 +-- src/material/select/_select-theme.scss | 22 ++--- src/material/sidenav/_sidenav-theme.scss | 14 +-- .../slide-toggle/_slide-toggle-theme.scss | 12 +-- src/material/slider/_slider-theme.scss | 23 +++-- src/material/snack-bar/_snack-bar-theme.scss | 4 +- src/material/sort/_sort-theme.scss | 4 +- src/material/stepper/_stepper-theme.scss | 36 +++---- src/material/table/_table-theme.scss | 8 +- src/material/tabs/_tabs-theme.scss | 26 ++--- src/material/toolbar/_toolbar-theme.scss | 10 +- src/material/tooltip/_tooltip-theme.scss | 2 +- src/material/tree/_tree-theme.scss | 4 +- src/universal-app/BUILD.bazel | 1 + src/universal-app/theme.scss | 23 ++--- .../release-output/output-validations.ts | 16 +++- 121 files changed, 1200 insertions(+), 845 deletions(-) rename shim-scss-imports.js => scripts/shim-scss-imports.js (100%) mode change 100755 => 100644 create mode 100644 src/cdk/_index.scss create mode 100644 src/material-experimental/mdc-helpers/_focus-indicators-theme.scss create mode 100644 src/material/_index.scss create mode 100644 src/material/core/_core-theme.scss create mode 100644 src/material/core/focus-indicators/_focus-indicators-theme.scss create mode 100644 src/material/core/ripple/_ripple-theme.scss create mode 100644 src/material/core/theming/_palette-deprecated.scss create mode 100644 src/material/core/theming/_theming-deprecated.scss create mode 100644 src/material/core/typography/_typography-deprecated.scss create mode 100644 src/material/core/typography/_typography-utils-deprecated.scss diff --git a/shim-scss-imports.js b/scripts/shim-scss-imports.js old mode 100755 new mode 100644 similarity index 100% rename from shim-scss-imports.js rename to scripts/shim-scss-imports.js diff --git a/src/cdk/BUILD.bazel b/src/cdk/BUILD.bazel index a2548d57d13d..f4681205e511 100644 --- a/src/cdk/BUILD.bazel +++ b/src/cdk/BUILD.bazel @@ -1,5 +1,5 @@ load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS", "CDK_ENTRYPOINTS_WITH_STYLES", "CDK_SCSS_LIBS", "CDK_TARGETS") -load("//tools:defaults.bzl", "ng_package", "ts_library") +load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library") package(default_visibility = ["//visibility:public"]) @@ -49,11 +49,17 @@ rerootedStyleTargets = ["%s_rerooted" % file for [ _, ] in rerootedStyles] +# Makes the public Sass API bundle available in the release output as `angular/cdk`. +sass_library( + name = "sass_index", + srcs = ["_index.scss"], +) + # Creates the @angular/cdk package published to npm. ng_package( name = "npm_package", srcs = ["package.json"], - data = rerootedStyleTargets + CDK_SCSS_LIBS, + data = [":sass_index"] + rerootedStyleTargets + CDK_SCSS_LIBS, entry_point = ":public-api.ts", nested_packages = [ "//src/cdk/schematics:npm_package", diff --git a/src/cdk/_index.scss b/src/cdk/_index.scss new file mode 100644 index 000000000000..f1abd3499aa8 --- /dev/null +++ b/src/cdk/_index.scss @@ -0,0 +1,4 @@ +@forward './overlay/overlay' show overlay; +@forward './a11y/a11y' show a11y-visually-hidden, high-contrast; +@forward './text-field/text-field' show text-field-autosize, text-field-autofill, + text-field-autofill-color; diff --git a/src/cdk/a11y/_a11y.scss b/src/cdk/a11y/_a11y.scss index 4f5499ecaf01..292804e3ec49 100644 --- a/src/cdk/a11y/_a11y.scss +++ b/src/cdk/a11y/_a11y.scss @@ -1,4 +1,4 @@ -@mixin a11y { +@mixin a11y-visually-hidden { .cdk-visually-hidden { border: 0; clip: rect(0 0 0 0); @@ -18,6 +18,11 @@ } } +// @deprecated Use `a11y-visually-hidden`. +@mixin a11y { + @include a11y-visually-hidden; +} + /// Emits the mixin's content nested under `$selector-context` if `$selector-context` /// is non-empty. /// @param selector-context The selector under which to nest the mixin's content. diff --git a/src/cdk/a11y/a11y-prebuilt.scss b/src/cdk/a11y/a11y-prebuilt.scss index c6264873e472..f39d12d161fa 100644 --- a/src/cdk/a11y/a11y-prebuilt.scss +++ b/src/cdk/a11y/a11y-prebuilt.scss @@ -1,3 +1,3 @@ @use './a11y'; -@include a11y.a11y(); +@include a11y.a11y-visually-hidden(); diff --git a/src/cdk/text-field/_text-field.import.scss b/src/cdk/text-field/_text-field.import.scss index 7a30de8e34ad..2104eb91048b 100644 --- a/src/cdk/text-field/_text-field.import.scss +++ b/src/cdk/text-field/_text-field.import.scss @@ -1,5 +1,2 @@ -@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-* show cdk-text-field-autofill, cdk-text-field-autofill-color, +cdk-text-field-autosize, cdk-text-field; diff --git a/src/cdk/text-field/_text-field.scss b/src/cdk/text-field/_text-field.scss index 5a313b9951b9..f3f78bb423af 100644 --- a/src/cdk/text-field/_text-field.scss +++ b/src/cdk/text-field/_text-field.scss @@ -1,22 +1,5 @@ -// Core styles that enable monitoring autofill state of text fields. -@mixin text-field { - // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled - // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is - // needed to prevent LibSass from stripping the keyframes out. - // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7 - @keyframes cdk-text-field-autofill-start {/*!*/} - @keyframes cdk-text-field-autofill-end {/*!*/} - - .cdk-text-field-autofill-monitored:-webkit-autofill { - // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire. - animation: cdk-text-field-autofill-start 0s 1ms; - } - - .cdk-text-field-autofill-monitored:not(:-webkit-autofill) { - // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire. - animation: cdk-text-field-autofill-end 0s 1ms; - } - +// Structural styles for the autosize text fields. +@mixin text-field-autosize() { // Remove the resize handle on autosizing textareas, because whatever height // the user resized to will be overwritten once they start typing again. textarea.cdk-textarea-autosize { @@ -44,6 +27,26 @@ } } +// Core styles that enable monitoring autofill state of text fields. +@mixin text-field-autofill() { + // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled + // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is + // needed to prevent LibSass from stripping the keyframes out. + // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7 + @keyframes cdk-text-field-autofill-start {/*!*/} + @keyframes cdk-text-field-autofill-end {/*!*/} + + .cdk-text-field-autofill-monitored:-webkit-autofill { + // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire. + animation: cdk-text-field-autofill-start 0s 1ms; + } + + .cdk-text-field-autofill-monitored:not(:-webkit-autofill) { + // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire. + animation: cdk-text-field-autofill-end 0s 1ms; + } +} + @mixin _cdk-textarea-autosize-measuring-base { // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect // measurement. We just have to account for it later and subtract it off the final result. @@ -57,7 +60,7 @@ $autofill-color-frame-count: 0; // Mixin used to apply custom background and foreground colors to an autofilled text field. // Based on: https://stackoverflow.com/questions/2781549/ // removing-input-background-colour-for-chrome-autocomplete#answer-37432260 -@mixin autofill-color($background, $foreground:'') { +@mixin text-field-autofill-color($background, $foreground:'') { @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} { to { background: $background; @@ -79,3 +82,9 @@ $autofill-color-frame-count: 0; $autofill-color-frame-count: $autofill-color-frame-count + 1 !global; } + +// @deprecated Use `autosize` and `autofill` instead. +@mixin text-field { + @include text-field-autosize(); + @include text-field-autofill(); +} diff --git a/src/cdk/text-field/text-field-prebuilt.scss b/src/cdk/text-field/text-field-prebuilt.scss index 756402a7ddfb..08c0400ca273 100644 --- a/src/cdk/text-field/text-field-prebuilt.scss +++ b/src/cdk/text-field/text-field-prebuilt.scss @@ -1,3 +1,4 @@ @use 'text-field'; -@include text-field.text-field(); +@include text-field.text-field-autosize(); +@include text-field.text-field-autofill(); diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index e30dda64bd57..ac0a2e2f805b 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -107,6 +107,7 @@ sass_binary( "external/npm/node_modules", ], deps = [ + "//src/material:theming_bundle", "//src/material-experimental/column-resize:column_resize_scss_lib", "//src/material-experimental/mdc-color:all_color", "//src/material-experimental/mdc-density:all_density", diff --git a/src/dev-app/input/input-demo.scss b/src/dev-app/input/input-demo.scss index 8046a7aa74df..3856a6f73c0f 100644 --- a/src/dev-app/input/input-demo.scss +++ b/src/dev-app/input/input-demo.scss @@ -33,7 +33,7 @@ } .demo-custom-autofill-style { - @include text-field.autofill-color(transparent, red); + @include text-field.text-field-autofill-color(transparent, red); } .demo-rows { diff --git a/src/dev-app/mdc-input/mdc-input-demo.scss b/src/dev-app/mdc-input/mdc-input-demo.scss index 93639f9e3dd0..97781425e92a 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.scss +++ b/src/dev-app/mdc-input/mdc-input-demo.scss @@ -41,7 +41,7 @@ } .demo-custom-autofill-style { - @include text-field.autofill-color(transparent, red); + @include text-field.text-field-autofill-color(transparent, red); } .demo-rows { diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index cbee8797ac72..a9c6c059ac37 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -1,59 +1,52 @@ -@use '../material/core/color/all-color' as color-all-color; +@use '../material' as mat; @use '../material/core/density/private/all-density' as private-all-density; -@use '../material/core/focus-indicators/focus-indicators' as focus-indicators-focus-indicators; -@use '../material/core/theming/all-theme' as theming-all-theme; @use '../material-experimental/column-resize/column-resize'; -@use '../material-experimental/mdc-helpers/mdc-helpers'; -@use '../material-experimental/mdc-helpers/focus-indicators'; -@use '../material-experimental/mdc-color/all-color'; -@use '../material-experimental/mdc-theming/all-theme'; -@use '../material-experimental/mdc-typography/all-typography'; -@use '../material-experimental/mdc-density/all-density'; -@use '../material-experimental/mdc-slider/slider-theme'; +@use '../material-experimental/mdc-helpers/focus-indicators-theme' as mdc-focus-indicators-theme; +@use '../material-experimental/mdc-helpers/focus-indicators' as mdc-focus-indicators; +@use '../material-experimental/mdc-color/all-color' as mdc-all-color; +@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme; +@use '../material-experimental/mdc-density/all-density' as mdc-all-density; +@use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme; @use '../material-experimental/popover-edit/popover-edit'; -@use '../material-experimental/mdc-table/table-theme'; -@use '../material/core/core'; -@use '../material/core/theming/palette'; -@use '../material/core/theming/theming'; // Plus imports for other components in your app. // Define the default (light) theme. -$candy-app-primary: theming.palette(palette.$indigo); -$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400); -$candy-app-theme: theming.light-theme(( - // Define the default colors for our app. - color: ( - primary: $candy-app-primary, - accent: $candy-app-accent - ), - // Define the default typography for our app. - typography: all-typography.config(), - // Define the default density level for our app. - density: 0, +$candy-app-primary: mat.define-palette(mat.$indigo-palette); +$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$candy-app-theme: mat.define-light-theme(( + // Define the default colors for our app. + color: ( + primary: $candy-app-primary, + accent: $candy-app-accent + ), + // Define the default typography for our app. + typography: mat.define-typography-config(), + // Define the default density level for our app. + density: 0, )); // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** -@include core.core($candy-app-theme); +@include mat.core($candy-app-theme); // Include the default theme styles. -@include theming-all-theme.angular-material-theme($candy-app-theme); -@include all-theme.angular-material-mdc-theme($candy-app-theme); +@include mat.all-component-themes($candy-app-theme); +@include mdc-all-theme.all-mdc-component-themes($candy-app-theme); @include column-resize.theme($candy-app-theme); @include popover-edit.theme($candy-app-theme); -// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`. -@include slider-theme.theme($candy-app-theme); +// We add this in manually for now, because it isn't included in `all-mdc-component-themes`. +@include mdc-slider-theme.theme($candy-app-theme); .demo-strong-focus { // Include base styles for strong focus indicators. - @include focus-indicators-focus-indicators.strong-focus-indicators(); - @include focus-indicators.strong-focus-indicators(); + @include mat.strong-focus-indicators(); + @include mdc-focus-indicators.strong-focus-indicators(); // Include the default theme for focus indicators. - @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme); - @include focus-indicators.strong-focus-indicators-theme($candy-app-theme); + @include mat.strong-focus-indicators-theme($candy-app-theme); + @include mdc-focus-indicators-theme.theme($candy-app-theme); } // Include the alternative theme styles inside of a block with a CSS class. You can make this @@ -62,23 +55,23 @@ $candy-app-theme: theming.light-theme(( // default theme. .demo-unicorn-dark-theme { // Create the color palettes used in our dark theme. - $dark-primary: theming.palette(palette.$blue-grey); - $dark-accent: theming.palette(palette.$amber, A200, A100, A400); - $dark-warn: theming.palette(palette.$deep-orange); - $dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn); + $dark-primary: mat.define-palette(mat.$blue-grey-palette); + $dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); + $dark-warn: mat.define-palette(mat.$deep-orange-palette); + $dark-colors: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn); // Include the dark theme color styles. - @include color-all-color.angular-material-color($dark-colors); - @include all-color.angular-material-mdc-color($dark-colors); + @include mat.all-component-colors($dark-colors); + @include mdc-all-color.all-mdc-component-colors($dark-colors); @include column-resize.color($dark-colors); @include popover-edit.color($dark-colors); - // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`. - @include slider-theme.color($dark-colors); + // We add this in manually for now, because it isn't included in `all-mdc-component-themes`. + @include mdc-slider-theme.color($dark-colors); // Include the dark theme colors for focus indicators. .demo-strong-focus { - @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors); - @include focus-indicators.strong-focus-indicators-color($dark-colors); + @include mat.strong-focus-indicators-color($dark-colors); + @include mdc-focus-indicators-theme.color($dark-colors); } } @@ -88,7 +81,7 @@ $candy-app-theme: theming.light-theme(( $density-scales: (-1, -2, minimum, maximum); @each $density in $density-scales { .demo-density-#{$density} { - @include private-all-density.angular-material-density($density); - @include all-density.angular-material-mdc-density($density); + @include private-all-density.all-component-densities($density); + @include mdc-all-density.all-mdc-component-densities($density); } } diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index 1b6b292e75b0..40dc4983d618 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -79,6 +79,7 @@ sass_binary( "external/npm/node_modules", ], deps = [ + "//src/material:theming_bundle", "//src/material-experimental/mdc-theming:all_themes", "//src/material-experimental/mdc-typography:all_typography", "//src/material/core:theming_scss_lib", diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index f2ded56bfbe1..0ba511b6afd0 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -1,23 +1,20 @@ -@use '../material/core/theming/all-theme' as theming-all-theme; -@use '../material-experimental/mdc-theming/all-theme'; -@use '../material-experimental/mdc-typography/all-typography'; -@use '../material/core/core'; -@use '../material/core/theming/palette'; -@use '../material/core/theming/theming'; +@use '../material' as mat; +@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme; +@use '../material-experimental/mdc-typography/all-typography' as mdc-all-typography; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** -@include core.core(); -@include all-typography.angular-material-mdc-typography(); +@include mat.core(); +@include mdc-all-typography.all-mdc-component-typographies(); // Define the default theme (same as the example above). -$candy-app-primary: theming.palette(palette.$indigo); -$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400); -$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent); +$candy-app-primary: mat.define-palette(mat.$indigo-palette); +$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent); // Include the default theme styles. -@include theming-all-theme.angular-material-theme($candy-app-theme); -@include all-theme.angular-material-mdc-theme($candy-app-theme); +@include mat.all-component-themes($candy-app-theme); +@include mdc-all-theme.all-mdc-component-themes($candy-app-theme); diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss index 411c239f2c59..1039d52b0f95 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize.scss @@ -9,9 +9,9 @@ $primary: map.get($config, primary); $foreground: map.get($config, foreground); - $non-resizable-hover-divider: theming.color($foreground, divider); - $resizable-hover-divider: theming.color($primary, 200); - $resizable-active-divider: theming.color($primary, 500); + $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider); + $resizable-hover-divider: theming.get-color-from-palette($primary, 200); + $resizable-active-divider: theming.get-color-from-palette($primary, 500); // Required for resizing to work properly. .mat-column-resize-table.cdk-column-resize-with-resized-column { diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 9f1cded5e6a9..c707d5a2249c 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -7,7 +7,7 @@ @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; @use '@material/elevation/elevation-theme' as mdc-elevation-theme; -@use '../../material/core/ripple/ripple'; +@use '../../material/core/ripple/ripple-theme'; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/theming/theming'; @@ -39,7 +39,7 @@ $mat-fab-state-target: '.mdc-fab__ripple'; // which is what the ripple mixin uses. This creates a new theme that sets the color to the // foreground base to appropriately color the ink. @mixin _mat-button-ripple-ink-color($mdcColor) { - @include ripple.theme(( + @include ripple-theme.theme(( foreground: ( base: mdc-theme-color.prop-value($mdcColor) ), diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss index 31181a3b27f1..07bd088f6a8b 100644 --- a/src/material-experimental/mdc-card/_card-theme.scss +++ b/src/material-experimental/mdc-card/_card-theme.scss @@ -25,7 +25,7 @@ // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their // color to secondary text here. .mat-mdc-card-subtitle { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } } diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index fd47247e6f53..e380cd798f55 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -7,7 +7,7 @@ @use 'sass:map'; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/theming/theming'; -@use '../../material/core/ripple/ripple'; +@use '../../material/core/ripple/ripple-theme'; // Mixin that includes the checkbox theme styles with a given palette. @@ -35,7 +35,7 @@ @mixin _selected-ripple-colors($theme, $mdcColor) { .mdc-checkbox--selected ~ { .mat-mdc-checkbox-ripple { - @include ripple.theme(( + @include ripple-theme.theme(( foreground: ( base: mdc-theme-color.prop-value($mdcColor) ), @@ -50,9 +50,9 @@ @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $primary: theming.color(map.get($config, primary)); - $accent: theming.color(map.get($config, accent)); - $warn: theming.color(map.get($config, warn)); + $primary: theming.get-color-from-palette(map.get($config, primary)); + $accent: theming.get-color-from-palette(map.get($config, accent)); + $warn: theming.get-color-from-palette(map.get($config, warn)); // Save original values of MDC global variables. We need to save these so we can restore the // variables to their original values and prevent unintended side effects from using this mixin. @@ -72,7 +72,7 @@ .mat-mdc-checkbox { @include private-checkbox-styles-with-color(primary); @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query); - @include ripple.theme(( + @include ripple-theme.theme(( foreground: ( base: mdc-theme-color.prop-value(on-surface) ), diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss index 7c9973906317..571cfb05e04a 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.scss @@ -20,11 +20,11 @@ @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $primary: theming.color(map.get($config, primary)); - $accent: theming.color(map.get($config, accent)); - $warn: theming.color(map.get($config, warn)); + $primary: theming.get-color-from-palette(map.get($config, primary)); + $accent: theming.get-color-from-palette(map.get($config, accent)); + $warn: theming.get-color-from-palette(map.get($config, warn)); $background: map.get($config, background); - $unselected-background: theming.color($background, unselected-chip); + $unselected-background: theming.get-color-from-palette($background, unselected-chip); // Save original values of MDC global variables. We need to save these so we can restore the // variables to their original values and prevent unintended side effects from using this mixin. diff --git a/src/material-experimental/mdc-color/_all-color.import.scss b/src/material-experimental/mdc-color/_all-color.import.scss index 8a443edcb3d5..6d0fbe7c48ce 100644 --- a/src/material-experimental/mdc-color/_all-color.import.scss +++ b/src/material-experimental/mdc-color/_all-color.import.scss @@ -92,6 +92,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; -@forward 'all-color'; +@forward 'all-color' hide all-mdc-component-colors; @import '../mdc-theming/all-theme'; diff --git a/src/material-experimental/mdc-color/_all-color.scss b/src/material-experimental/mdc-color/_all-color.scss index 9d4276e7d107..dcb31f86e8d1 100644 --- a/src/material-experimental/mdc-color/_all-color.scss +++ b/src/material-experimental/mdc-color/_all-color.scss @@ -1,7 +1,7 @@ @use '../mdc-theming/all-theme'; @use '../../material/core/theming/theming'; -@mixin angular-material-mdc-color($config-or-theme) { +@mixin all-mdc-component-colors($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the color system, extract the color config from the theme object. $config: if(theming.private-is-theme-object($config-or-theme), @@ -11,9 +11,14 @@ @error 'No color configuration specified.'; } - @include all-theme.angular-material-mdc-theme(( + @include all-theme.all-mdc-component-themes(( color: $config, typography: null, density: null, )); } + +// @deprecated Use `all-mdc-component-colors`. +@mixin angular-material-mdc-color($config-or-theme) { + @include all-mdc-component-colors($config-or-theme); +} diff --git a/src/material-experimental/mdc-density/_all-density.import.scss b/src/material-experimental/mdc-density/_all-density.import.scss index fa9793276a16..835430309e05 100644 --- a/src/material-experimental/mdc-density/_all-density.import.scss +++ b/src/material-experimental/mdc-density/_all-density.import.scss @@ -92,6 +92,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; -@forward 'all-density'; +@forward 'all-density' show all-mdc-component-densities; @import '../mdc-theming/all-theme'; diff --git a/src/material-experimental/mdc-density/_all-density.scss b/src/material-experimental/mdc-density/_all-density.scss index 3c4cac9001e9..ecf1ed62fd8c 100644 --- a/src/material-experimental/mdc-density/_all-density.scss +++ b/src/material-experimental/mdc-density/_all-density.scss @@ -1,7 +1,7 @@ @use '../mdc-theming/all-theme'; @use '../../material/core/theming/theming'; -@mixin angular-material-mdc-density($config-or-theme) { +@mixin all-mdc-component-densities($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the density system, extract the density config from the theme object. $config: if(theming.private-is-theme-object($config-or-theme), @@ -11,9 +11,14 @@ @error 'No density configuration specified.'; } - @include all-theme.angular-material-mdc-theme(( + @include all-theme.all-mdc-component-themes(( color: null, typography: null, density: $config, )); } + +// @deprecated Use `all-mdc-component-densities`. +@mixin angular-material-mdc-density($config-or-theme) { + @include all-mdc-component-densities($config-or-theme); +} diff --git a/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss b/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss new file mode 100644 index 000000000000..8d93fffa8658 --- /dev/null +++ b/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss @@ -0,0 +1,48 @@ +@use 'sass:meta'; +@use 'sass:map'; +@use '../../material/core/theming/theming'; + +// Mixin that applies the border color for the focus indicators. +@mixin _mat-mdc-strong-focus-indicators-border-color($color) { + .mat-mdc-focus-indicator::before { + border-color: $color; + } +} + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $border-color: theming.get-color-from-palette(map.get($config, primary)); + @include _mat-mdc-strong-focus-indicators-border-color($border-color); +} + +/// Mixin that sets the color of the focus indicators. +/// +/// @param {color|map} $theme-or-color +/// If theme, focus indicators are set to the primary color of the theme. If +/// color, focus indicators are set to that color. +/// +/// @example +/// .demo-dark-theme { +/// @include mat-mdc-strong-focus-indicators-theme($dark-theme-map); +/// } +/// +/// @example +/// .demo-red-theme { +/// @include mat-mdc-strong-focus-indicators-theme(#f00); +/// } +/* stylelint-disable-next-line material/theme-mixin-api */ +@mixin theme($theme-or-color) { + @if meta.type-of($theme-or-color) != 'map' { + @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color); + } + @else { + $theme: theming.private-legacy-get-theme($theme-or-color); + @include theming.private-check-duplicate-theme-styles($theme, + 'mat-mdc-strong-focus-indicators') { + $color: theming.get-color-config($theme); + @if $color != null { + @include color($color); + } + } + } +} diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss index 719e24f18181..d6294985d966 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss @@ -1,7 +1,8 @@ @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; +@forward 'focus-indicators-theme' hide color, theme; @forward 'focus-indicators' as mat-mdc-* hide mat-mdc-strong-focus-indicators-border-color; +@forward 'focus-indicators-theme' as mat-mdc-strong-focus-indicators-*; @import '../../material/core/theming/theming'; @import '../../material/core/style/layout-common'; diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.scss b/src/material-experimental/mdc-helpers/_focus-indicators.scss index d0db70b52458..679c39f3f911 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.scss @@ -1,6 +1,4 @@ @use 'sass:map'; -@use 'sass:meta'; -@use '../../material/core/theming/theming'; @use '../../material/core/style/layout-common'; @use '../../material/core/focus-indicators/focus-indicators'; @@ -88,47 +86,3 @@ content: ''; } } - -// Mixin that applies the border color for the focus indicators. -@mixin _mat-mdc-strong-focus-indicators-border-color($color) { - .mat-mdc-focus-indicator::before { - border-color: $color; - } -} - -@mixin strong-focus-indicators-color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - @include _mat-mdc-strong-focus-indicators-border-color(theming.color(map.get($config, primary))); -} - -/// Mixin that sets the color of the focus indicators. -/// -/// @param {color|map} $theme-or-color -/// If theme, focus indicators are set to the primary color of the theme. If -/// color, focus indicators are set to that color. -/// -/// @example -/// .demo-dark-theme { -/// @include mat-mdc-strong-focus-indicators-theme($dark-theme-map); -/// } -/// -/// @example -/// .demo-red-theme { -/// @include mat-mdc-strong-focus-indicators-theme(#f00); -/// } -/* stylelint-disable-next-line material/theme-mixin-api */ -@mixin strong-focus-indicators-theme($theme-or-color) { - @if meta.type-of($theme-or-color) != 'map' { - @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color); - } - @else { - $theme: theming.private-legacy-get-theme($theme-or-color); - @include theming.private-check-duplicate-theme-styles($theme, - 'mat-mdc-strong-focus-indicators') { - $color: theming.get-color-config($theme); - @if $color != null { - @include strong-focus-indicators-color($color); - } - } - } -} diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index c16ffc89ef75..ed8716a4185d 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -109,7 +109,7 @@ $mat-typography-2018-level-mappings: ( if($mat-level, ( font-size: typography-utils.font-size($mat-config, $mat-level), - line-height: typography-utils.height($mat-config, $mat-level), + line-height: typography-utils.line-height($mat-config, $mat-level), font-weight: typography-utils.font-weight($mat-config, $mat-level), letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level), font-family: typography-utils.font-family($mat-config, $mat-level), @@ -130,7 +130,7 @@ $mat-typography-2018-level-mappings: ( } // Converts an Angular Material typography config to an MDC one. -@function mat-typography-config-to-mdc($mat-config: typography.config()) { +@function mat-typography-config-to-mdc($mat-config: typography.define-typography-config()) { $mdc-config: (); $mappings: if(typography.private-typography-is-2018-config($mat-config), @@ -149,7 +149,7 @@ $mat-typography-2018-level-mappings: ( @function mat-typography-config-level-from-mdc($mdc-level) { $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level); - @return typography.level( + @return typography.define-typography-level( map.get($mdc-level-config, font-size), map.get($mdc-level-config, line-height), map.get($mdc-level-config, font-weight), @@ -161,9 +161,9 @@ $mat-typography-2018-level-mappings: ( // then resets the global variables to prevent unintended side effects. /* stylelint-disable-next-line material/theme-mixin-api */ @mixin mat-using-mdc-theme($config) { - $primary: theming.color(map.get($config, primary)); - $accent: theming.color(map.get($config, accent)); - $warn: theming.color(map.get($config, warn)); + $primary: theming.get-color-from-palette(map.get($config, primary)); + $accent: theming.get-color-from-palette(map.get($config, accent)); + $warn: theming.get-color-from-palette(map.get($config, warn)); $background-palette: map.get($config, background); // Save the original values. @@ -185,8 +185,8 @@ $mat-typography-2018-level-mappings: ( mdc-theme-color.$secondary: $accent; mdc-theme-color.$on-secondary: if(mdc-theme-color.contrast-tone(mdc-theme-color.$secondary) == 'dark', #000, #fff); - mdc-theme-color.$background: theming.color($background-palette, background); - mdc-theme-color.$surface: theming.color($background-palette, card); + mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background); + mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card); mdc-theme-color.$on-surface: if(mdc-theme-color.contrast-tone(mdc-theme-color.$surface) == 'dark', #000, #fff); mdc-theme-color.$error: $warn; diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss index 3baa590c86c9..07c3b676eeb7 100644 --- a/src/material-experimental/mdc-list/_interactive-list-theme.scss +++ b/src/material-experimental/mdc-list/_interactive-list-theme.scss @@ -16,7 +16,7 @@ } &.mdc-deprecated-list-item--selected::before { - background: theming.color(map.get($config, primary)); + background: theming.get-color-from-palette(map.get($config, primary)); opacity: map.get($state-opacities, selected); } diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss index 108938c27f56..04fb01b5aaa1 100644 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss @@ -10,12 +10,12 @@ $config: theming.get-color-config($config-or-theme); $background: map.get($config, background); $foreground: map.get($config, foreground); - $icon-color: rgba(theming.color($foreground, base), 0.54); - $disabled-color: rgba(theming.color($foreground, base), 0.12); + $icon-color: rgba(theming.get-color-from-palette($foreground, base), 0.54); + $disabled-color: rgba(theming.get-color-from-palette($foreground, base), 0.12); .mat-mdc-paginator { - background: theming.color($background, card); - color: rgba(theming.color($foreground, base), 0.87); + background: theming.get-color-from-palette($background, card); + color: rgba(theming.get-color-from-palette($foreground, base), 0.87); } .mat-mdc-paginator-icon { diff --git a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss index f69dea9f1896..b00501edefe7 100644 --- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss +++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss @@ -7,9 +7,9 @@ @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $primary: theming.color(map.get($config, primary)); - $accent: theming.color(map.get($config, accent)); - $warn: theming.color(map.get($config, warn)); + $primary: theming.get-color-from-palette(map.get($config, primary)); + $accent: theming.get-color-from-palette(map.get($config, accent)); + $warn: theming.get-color-from-palette(map.get($config, warn)); // Save original values of MDC global variables. We need to save these so we can restore the // variables to their original values and prevent unintended side effects from using this mixin. diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss index c4bfdc6db621..78abe8b669b7 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss @@ -39,7 +39,7 @@ .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action { $is-dark-theme: map.get($config, is-dark); $accent: map.get($config, accent); - color: if($is-dark-theme, inherit, theming.color($accent, text)); + color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text)); .mat-ripple-element { background-color: currentColor; diff --git a/src/material-experimental/mdc-theming/_all-theme.import.scss b/src/material-experimental/mdc-theming/_all-theme.import.scss index b7faa3a61c7e..d16ad3c30022 100644 --- a/src/material-experimental/mdc-theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-theming/_all-theme.import.scss @@ -91,7 +91,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @forward '../mdc-form-field/form-field-subscript' as mat-mdc-*; @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; -@forward 'all-theme'; +@forward 'all-theme' hide all-mdc-component-themes;; @import '../mdc-core/core-theme'; @import '../mdc-autocomplete/autocomplete-theme'; @@ -115,4 +115,5 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @import '../mdc-input/input-theme'; @import '../mdc-form-field/form-field-theme'; @import '../../material/core/core'; +@import '../../material/core/core-theme'; @import '../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss index 843410f23827..bdc92055b0f3 100644 --- a/src/material-experimental/mdc-theming/_all-theme.scss +++ b/src/material-experimental/mdc-theming/_all-theme.scss @@ -22,7 +22,7 @@ @use '../../material/core/core'; @use '../../material/core/theming/theming'; -@mixin angular-material-mdc-theme($theme-or-color-config) { +@mixin all-mdc-component-themes($theme-or-color-config) { $dedupe-key: 'angular-material-mdc-theme'; @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { @include core-theme.theme($theme-or-color-config); @@ -50,3 +50,8 @@ @include tooltip-theme.theme($theme-or-color-config); } } + +// @deprecated Use `all-mdc-component-themes`. +@mixin angular-material-mdc-theme($theme-or-color-config) { + @include all-mdc-component-themes($theme-or-color-config); +} diff --git a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss index 73061d4d1fc6..6081071b12b2 100644 --- a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss +++ b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss @@ -1,6 +1,7 @@ @use '../all-theme'; @use '../../mdc-typography/all-typography'; @use '../../../material/core/core'; +@use '../../../material/core/core-theme'; @use '../../../material/core/theming/palette'; @use '../../../material/core/theming/theming'; @@ -8,12 +9,12 @@ @include core.core(); // Define a theme. -$primary: theming.palette(palette.$indigo); -$accent: theming.palette(palette.$pink, A200, A100, A400); +$primary: theming.define-palette(palette.$indigo-palette); +$accent: theming.define-palette(palette.$pink-palette, A200, A100, A400); -$theme: theming.light-theme($primary, $accent); +$theme: theming.define-light-theme($primary, $accent); // Include all theme styles for the components. -@include all-theme.angular-material-mdc-theme($theme); -@include all-typography.angular-material-mdc-typography(); -@include core.theme($theme); +@include all-theme.all-mdc-component-themes($theme); +@include all-typography.all-mdc-component-typographies(); +@include core-theme.theme($theme); diff --git a/src/material-experimental/mdc-typography/_all-typography.import.scss b/src/material-experimental/mdc-typography/_all-typography.import.scss index 81d569fbaf1c..5e5a6326a69c 100644 --- a/src/material-experimental/mdc-typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-typography/_all-typography.import.scss @@ -92,8 +92,8 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; -@forward 'all-typography' hide config; +@forward 'all-typography' hide define-typography-config, all-mdc-component-typographies; @forward 'all-typography' as mat-mdc-typography-* hide -mat-mdc-typography-angular-material-mdc-typography; +mat-mdc-typography-all-mdc-component-typographies; @import '../mdc-theming/all-theme'; diff --git a/src/material-experimental/mdc-typography/_all-typography.scss b/src/material-experimental/mdc-typography/_all-typography.scss index be8d7a889cf7..9dc0a9e77b03 100644 --- a/src/material-experimental/mdc-typography/_all-typography.scss +++ b/src/material-experimental/mdc-typography/_all-typography.scss @@ -26,7 +26,7 @@ /// @param {Map} $button The font settings for the button font level. /// @param {Map} $overline The font settings for the overline font level. /// @return {Map} A map containing font settings for each of the levels in the Material Design spec. -@function config( +@function define-typography-config( $font-family: mdc-typography.$font-family, $headline-1: mdc-helpers.mat-typography-config-level-from-mdc(headline1), $headline-2: mdc-helpers.mat-typography-config-level-from-mdc(headline2), @@ -72,18 +72,23 @@ @return map.merge($config, (font-family: $font-family)); } -@mixin angular-material-mdc-typography($config-or-theme: null) { +@mixin all-mdc-component-typographies($config-or-theme: null) { $config: if(theming.private-is-theme-object($config-or-theme), theming.get-typography-config($config-or-theme), $config-or-theme); // If no actual color configuration has been specified, create a default one. @if $config == null { - $config: typography.config(); + $config: typography.define-typography-config(); } - @include all-theme.angular-material-mdc-theme(( + @include all-theme.all-mdc-component-themes(( color: null, density: null, typography: $config, )); } + +// @deprecated Use `all-mdc-component-typographies`. +@mixin angular-material-mdc-typography($config-or-theme: null) { + @include all-mdc-component-typographies($config-or-theme); +} diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss index 74a8c336fe07..7f772113bb43 100644 --- a/src/material-experimental/popover-edit/_popover-edit.scss +++ b/src/material-experimental/popover-edit/_popover-edit.scss @@ -16,7 +16,7 @@ $background: map.get($config, background); $foreground: map.get($config, foreground); $primary: map.get($config, primary); - $background-color: theming.color($background, 'card'); + $background-color: theming.get-color-from-palette($background, 'card'); .mat-row-hover-content-host-cell { position: relative; @@ -49,7 +49,7 @@ position: relative; &::after { - background-color: theming.color($primary); + background-color: theming.get-color-from-palette($primary); bottom: 0; content: ''; height: 2px; @@ -81,7 +81,7 @@ .mat-edit-pane { @include private.private-theme-elevation(2, $config); background: $background-color; - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); display: block; padding: 16px 24px; @@ -149,7 +149,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); [mat-edit-title] { - @include typography-utils.level-to-styles($config, title); + @include typography-utils.typography-level($config, title); } } diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel index 9c3fb856561f..2d272899709b 100644 --- a/src/material/BUILD.bazel +++ b/src/material/BUILD.bazel @@ -23,7 +23,10 @@ filegroup( # Makes the theming bundle available in the release output as `angular/material/theming`. sass_library( name = "theming_bundle", - srcs = ["_theming.scss"], + srcs = [ + "_index.scss", + "_theming.scss", + ], deps = ["//src/material/core:theming_scss_lib"], ) diff --git a/src/material/_index.scss b/src/material/_index.scss new file mode 100644 index 000000000000..9488a0fa8c18 --- /dev/null +++ b/src/material/_index.scss @@ -0,0 +1,88 @@ +// Theming APIs +@forward './core/theming/theming' show define-light-theme, define-dark-theme, + define-palette, get-contrast-color-from-palette, get-color-from-palette; +@forward './core/theming/palette' show $red-palette, $pink-palette, $indigo-palette, + $purple-palette, $deep-purple-palette, $blue-palette, $light-blue-palette, $cyan-palette, + $teal-palette, $green-palette, $light-green-palette, $lime-palette, $yellow-palette, + $amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette, + $gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette, + $dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette; +@forward './core/typography/typography' show define-typography-level, define-typography-config; +@forward './core/typography/typography-utils' show typography-level, + font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand; + +// Structural +@forward './core/core' show core; +@forward './core/ripple/ripple' show ripple; +@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators; +@forward './core/style/elevation' show elevation, overridable-elevation; + +// Theme bundles +@forward './core/theming/all-theme' show all-component-themes; +@forward './core/color/all-color' show all-component-colors; +@forward './core/typography/all-typography' show all-component-typographies; + +// Component themes +@forward './core/core-theme' as core-* show core-color, core-theme; +@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme; +@forward './core/option/option-theme' as option-* show option-color, option-typography, + option-theme; +@forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography, + optgroup-theme; +@forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show + pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme; +@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show + strong-focus-indicators-color, strong-focus-indicators-theme; +@forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme, + autocomplete-color, autocomplete-typography; +@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography; +@forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, + bottom-sheet-color, bottom-sheet-typography; +@forward './button/button-theme' as button-* show button-theme, button-color, button-typography; +@forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, + button-toggle-color, button-toggle-typography; +@forward './card/card-theme' as card-* show card-theme, card-color, card-typography; +@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color, + checkbox-typography; +@forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography; +@forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color, + datepicker-typography; +@forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography; +@forward './divider/divider-theme' as divider-* show divider-theme, divider-color, + divider-typography; +@forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color, + expansion-typography; +@forward './form-field/form-field-theme' as form-field-* show form-field-theme, form-field-color, + form-field-typography; +@forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color, + grid-list-typography; +@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography; +@forward './input/input-theme' as input-* show input-theme, input-color, input-typography; +@forward './list/list-theme' as list-* show list-theme, list-color, list-typography; +@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography; +@forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color, + paginator-typography; +@forward './progress-bar/progress-bar-theme' as progress-bar-* show progress-bar-theme, + progress-bar-color, progress-bar-typography; +@forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show + progress-spinner-theme, progress-spinner-color, progress-spinner-typography; +@forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography; +@forward './select/select-theme' as select-* show select-theme, select-color, select-typography; +@forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color, + sidenav-typography; +@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, + slide-toggle-color, slide-toggle-typography; +@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography; +@forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color, + snack-bar-typography; +@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography; +@forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color, + stepper-typography; +@forward './table/table-theme' as table-* show table-theme, table-color, table-typography; +@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography; +@forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color, + toolbar-typography; +@forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color, + tooltip-typography; +@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography; + diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index 3ad133584f68..0825e4516db5 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -9,8 +9,8 @@ .mat-autocomplete-panel { @include private.private-theme-overridable-elevation(4, $config); - background: theming.color($background, card); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, card); + color: theming.get-color-from-palette($foreground, text); // Selected options in autocompletes should not be gray, but we // only want to override the background for selected options if @@ -18,10 +18,10 @@ // made here because base option styles are shared between the // autocomplete and the select. .mat-option.mat-selected:not(.mat-active):not(:hover) { - background: theming.color($background, card); + background: theming.get-color-from-palette($background, card); &:not(.mat-option-disabled) { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } } } diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index add68653e34a..6373ab94aa3f 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -100,8 +100,8 @@ $large-size: $default-size + 6; $foreground: map.get($config, foreground); .mat-badge-content { - color: theming.color($primary, default-contrast); - background: theming.color($primary); + color: theming.get-color-from-palette($primary, default-contrast); + background: theming.get-color-from-palette($primary); @include a11y.high-contrast(active, off) { outline: solid 1px; @@ -111,15 +111,15 @@ $large-size: $default-size + 6; .mat-badge-accent { .mat-badge-content { - background: theming.color($accent); - color: theming.color($accent, default-contrast); + background: theming.get-color-from-palette($accent); + color: theming.get-color-from-palette($accent, default-contrast); } } .mat-badge-warn { .mat-badge-content { - color: theming.color($warn, default-contrast); - background: theming.color($warn); + color: theming.get-color-from-palette($warn, default-contrast); + background: theming.get-color-from-palette($warn); } } @@ -135,8 +135,8 @@ $large-size: $default-size + 6; .mat-badge-disabled { .mat-badge-content { - $app-background: theming.color($background, 'background'); - $badge-color: theming.color($foreground, disabled-button); + $app-background: theming.get-color-from-palette($background, 'background'); + $badge-color: theming.get-color-from-palette($foreground, disabled-button); // The disabled color usually has some kind of opacity, but because the badge is overlayed // on top of something else, it won't look good if it's opaque. If it is a color *type*, @@ -151,7 +151,7 @@ $large-size: $default-size + 6; background: $badge-color; } - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } } diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index c775174c21ab..cf591407e09a 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -12,8 +12,8 @@ .mat-bottom-sheet-container { @include private.private-theme-elevation(16, $config); - background: theming.color($background, dialog); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, dialog); + color: theming.get-color-from-palette($foreground, text); } } @@ -21,7 +21,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); .mat-bottom-sheet-container { - @include typography-utils.level-to-styles($config, body-1); + @include typography-utils.typography-level($config, body-1); } } diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index 526ad2209abf..c71e0ed3b681 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -12,7 +12,7 @@ $config: theming.get-color-config($config-or-theme); $foreground: map.get($config, foreground); $background: map.get($config, background); - $divider-color: theming.color($foreground, divider); + $divider-color: theming.get-color-from-palette($foreground, divider); .mat-button-toggle-standalone, .mat-button-toggle-group { @@ -25,19 +25,19 @@ } .mat-button-toggle { - color: theming.color($foreground, hint-text); + color: theming.get-color-from-palette($foreground, hint-text); .mat-button-toggle-focus-overlay { - background-color: theming.color($background, focused-button); + background-color: theming.get-color-from-palette($background, focused-button); } } .mat-button-toggle-appearance-standard { - color: theming.color($foreground, text); - background: theming.color($background, card); + color: theming.get-color-from-palette($foreground, text); + background: theming.get-color-from-palette($background, card); .mat-button-toggle-focus-overlay { - background-color: theming.color($background, focused-button, 1); + background-color: theming.get-color-from-palette($background, focused-button, 1); } } @@ -59,24 +59,24 @@ } .mat-button-toggle-checked { - background-color: theming.color($background, selected-button); - color: theming.color($foreground, secondary-text); + background-color: theming.get-color-from-palette($background, selected-button); + color: theming.get-color-from-palette($foreground, secondary-text); &.mat-button-toggle-appearance-standard { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } } .mat-button-toggle-disabled { - color: theming.color($foreground, disabled-button); - background-color: theming.color($background, disabled-button-toggle); + color: theming.get-color-from-palette($foreground, disabled-button); + background-color: theming.get-color-from-palette($background, disabled-button-toggle); &.mat-button-toggle-appearance-standard { - background: theming.color($background, card); + background: theming.get-color-from-palette($background, card); } &.mat-button-toggle-checked { - background-color: theming.color($background, selected-disabled-button); + background-color: theming.get-color-from-palette($background, selected-disabled-button); } } diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index b2b41950bed1..dd3355f7cab8 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -15,15 +15,15 @@ $_mat-button-ripple-opacity: 0.1; $warn: map.get($config, warn); &.mat-primary .mat-button-focus-overlay { - background-color: theming.color($primary); + background-color: theming.get-color-from-palette($primary); } &.mat-accent .mat-button-focus-overlay { - background-color: theming.color($accent); + background-color: theming.get-color-from-palette($accent); } &.mat-warn .mat-button-focus-overlay { - background-color: theming.color($warn); + background-color: theming.get-color-from-palette($warn); } &.mat-button-disabled .mat-button-focus-overlay { @@ -35,7 +35,7 @@ $_mat-button-ripple-opacity: 0.1; // we assume that we've been given a CSS variable. Since we can't perform alpha-blending // on a CSS variable, we instead add the opacity directly to the ripple element. @mixin _mat-button-ripple-background($palette, $hue, $opacity) { - $background-color: theming.color($palette, $hue, $opacity); + $background-color: theming.get-color-from-palette($palette, $hue, $opacity); background-color: $background-color; @if (meta.type-of($background-color) != color) { opacity: $opacity; @@ -69,19 +69,19 @@ $_mat-button-ripple-opacity: 0.1; $foreground: map.get($theme, foreground); &.mat-primary { - #{$property}: theming.color($primary, $hue); + #{$property}: theming.get-color-from-palette($primary, $hue); } &.mat-accent { - #{$property}: theming.color($accent, $hue); + #{$property}: theming.get-color-from-palette($accent, $hue); } &.mat-warn { - #{$property}: theming.color($warn, $hue); + #{$property}: theming.get-color-from-palette($warn, $hue); } &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled { &.mat-button-disabled { $palette: if($property == 'color', $foreground, $background); - #{$property}: theming.color($palette, disabled-button); + #{$property}: theming.get-color-from-palette($palette, disabled-button); } } } @@ -121,13 +121,13 @@ $_mat-button-ripple-opacity: 0.1; // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion // order of the theme styles and the button reset may end up resetting this as well. .mat-stroked-button:not(.mat-button-disabled) { - border-color: theming.color($foreground, divider); + border-color: theming.get-color-from-palette($foreground, divider); } .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab { // Default font and background color when not using any color palette. - color: theming.color($foreground, text); - background-color: theming.color($background, raised-button); + color: theming.get-color-from-palette($foreground, text); + background-color: theming.get-color-from-palette($background, raised-button); @include _mat-button-theme-property($config, 'color', default-contrast); @include _mat-button-theme-property($config, 'background-color', default); diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 6e816a9834e3..8fc6f7d6b8fa 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -13,8 +13,8 @@ .mat-card { @include private.private-theme-overridable-elevation(1, $config); - background: theming.color($background, card); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, card); + color: theming.get-color-from-palette($foreground, text); // Needs extra specificity to be able to override the elevation selectors. &.mat-card-flat { @@ -23,7 +23,7 @@ } .mat-card-subtitle { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } } diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index 7d26e026d534..6272fc37c7b3 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -15,7 +15,7 @@ // The color of the checkbox's checkmark / mixedmark. - $checkbox-mark-color: theming.color($background, background); + $checkbox-mark-color: theming.get-color-from-palette($background, background); // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, // this does not work well with elements layered on top of one another. To get around this we @@ -25,7 +25,7 @@ $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light); .mat-checkbox-frame { - border-color: theming.color($foreground, secondary-text); + border-color: theming.get-color-from-palette($foreground, secondary-text); } .mat-checkbox-checkmark { @@ -44,15 +44,15 @@ .mat-checkbox-indeterminate, .mat-checkbox-checked { &.mat-primary .mat-checkbox-background { - background-color: theming.color($primary); + background-color: theming.get-color-from-palette($primary); } &.mat-accent .mat-checkbox-background { - background-color: theming.color($accent); + background-color: theming.get-color-from-palette($accent); } &.mat-warn .mat-checkbox-background { - background-color: theming.color($warn); + background-color: theming.get-color-from-palette($warn); } } @@ -71,7 +71,7 @@ } .mat-checkbox-label { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } } @@ -84,15 +84,15 @@ .mat-checkbox-checked:not(.mat-checkbox-disabled), .mat-checkbox:active:not(.mat-checkbox-disabled) { &.mat-primary .mat-ripple-element { - background: theming.color($primary); + background: theming.get-color-from-palette($primary); } &.mat-accent .mat-ripple-element { - background: theming.color($accent); + background: theming.get-color-from-palette($accent); } &.mat-warn .mat-ripple-element { - background: theming.color($warn); + background: theming.get-color-from-palette($warn); } } } @@ -106,7 +106,7 @@ // TODO(kara): Remove this style when fixing vertical baseline .mat-checkbox-layout .mat-checkbox-label { - line-height: typography-utils.height($config, body-2); + line-height: typography-utils.line-height($config, body-2); } } diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 282a0a7f380b..a2a14fd42558 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -25,7 +25,7 @@ $chip-remove-font-size: 18px; // Since we can't perform alpha-blending on a CSS variable, // we instead add the opacity directly to the ripple element. @mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) { - $background-color: theming.color($palette, $default-contrast, $opacity); + $background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity); background-color: $background-color; @if (meta.type-of($background-color) != color) { opacity: $opacity; @@ -33,8 +33,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.get-color-from-palette($palette, default-contrast), + theming.get-color-from-palette($palette)); .mat-ripple-element { @include _mat-chips-ripple-background($palette, default-contrast, 0.1); @@ -50,8 +50,8 @@ $chip-remove-font-size: 18px; $background: map.get($config, background); $foreground: map.get($config, foreground); - $unselected-background: theming.color($background, unselected-chip); - $unselected-foreground: theming.color($foreground, text); + $unselected-background: theming.get-color-from-palette($background, unselected-chip); + $unselected-foreground: theming.get-color-from-palette($foreground, text); .mat-chip.mat-standard-chip { @include _mat-chip-element-color($unselected-foreground, $unselected-background); diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss new file mode 100644 index 000000000000..22e263916ffe --- /dev/null +++ b/src/material/core/_core-theme.scss @@ -0,0 +1,58 @@ +@use 'sass:map'; +@use 'theming/theming'; +@use './style/private'; +@use './ripple/ripple-theme'; +@use './option/option-theme'; +@use './option/optgroup-theme'; +@use './selection/pseudo-checkbox/pseudo-checkbox-theme'; +@use './style/elevation'; + + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + // Wrapper element that provides the theme background when the user's content isn't + // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand + // selector in case the mixin is included at the top level. + .mat-app-background#{if(&, ', &.mat-app-background', '')} { + $background: map.get($config, background); + $foreground: map.get($config, foreground); + + background-color: theming.get-color-from-palette($background, background); + color: theming.get-color-from-palette($foreground, text); + } + + // Provides external CSS classes for each elevation value. Each CSS class is formatted as + // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is + // elevated. + @for $zValue from 0 through 24 { + .#{elevation.$prefix}#{$zValue} { + @include private.private-theme-elevation($zValue, $config); + } + } + + // Marker that is used to determine whether the user has added a theme to their page. + @at-root { + .mat-theme-loaded-marker { + display: none; + } + } +} + +// Mixin that renders all of the core styles that depend on the theme. +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that + // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then + // the imported themes (such as `mat-ripple-theme`) should not report again. + @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { + @include ripple-theme.theme($theme); + @include option-theme.theme($theme); + @include optgroup-theme.theme($theme); + @include pseudo-checkbox-theme.theme($theme); + + $color: theming.get-color-config($theme); + @if $color != null { + @include color($color); + } + } +} diff --git a/src/material/core/_core.import.scss b/src/material/core/_core.import.scss index c30aceacec42..179bf01d0908 100644 --- a/src/material/core/_core.import.scss +++ b/src/material/core/_core.import.scss @@ -41,11 +41,13 @@ @forward '../sort/sort-theme.import'; @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, +@forward 'core' hide core; +@forward 'core-theme' hide color, theme; +@forward 'core' as mat-* hide mat-mdc-core, mat-mdc-strong-focus-indicators-positioning; +@forward 'core-theme' as mat-* hide mat-color, mat-theme; +@forward 'core' as mat-core-* hide mat-core-mdc-core, mat-core-mdc-strong-focus-indicators-positioning; +@forward 'core-theme' as mat-core-*; @import '../../cdk/overlay/overlay'; @import '../../cdk/a11y/a11y'; diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 49863e3bc53a..b62097d99ff2 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -1,80 +1,25 @@ -@use 'sass:map'; @use '../../cdk/overlay/overlay'; @use '../../cdk/a11y/a11y'; @use '../../cdk/text-field/text-field'; // Core styles that can be used to apply material design treatments to any element. -@use './style/private'; @use './ripple/ripple'; @use './focus-indicators/focus-indicators'; -@use './option/option-theme'; -@use './option/optgroup-theme'; -@use './selection/pseudo-checkbox/pseudo-checkbox-theme'; @use './typography/all-typography'; -@use 'style/elevation'; -@use 'theming/theming'; // Mixin that renders all of the core styles that are not theme-dependent. @mixin core($typography-config: null) { - @include all-typography.angular-material-typography($typography-config); + @include all-typography.all-component-typographies($typography-config); @include ripple.ripple(); - @include a11y.a11y(); + @include a11y.a11y-visually-hidden(); @include overlay.overlay(); - @include text-field.text-field(); + @include text-field.text-field-autosize(); + @include text-field.text-field-autofill(); @include focus-indicators.private-strong-focus-indicators-positioning(); @include _mat-mdc-core(); } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - // Wrapper element that provides the theme background when the user's content isn't - // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand - // selector in case the mixin is included at the top level. - .mat-app-background#{if(&, ', &.mat-app-background', '')} { - $background: map.get($config, background); - $foreground: map.get($config, foreground); - - background-color: theming.color($background, background); - color: theming.color($foreground, text); - } - - // Provides external CSS classes for each elevation value. Each CSS class is formatted as - // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is - // elevated. - @for $zValue from 0 through 24 { - .#{elevation.$prefix}#{$zValue} { - @include private.private-theme-elevation($zValue, $config); - } - } - - // Marker that is used to determine whether the user has added a theme to their page. - @at-root { - .mat-theme-loaded-marker { - display: none; - } - } -} - -// Mixin that renders all of the core styles that depend on the theme. -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); - // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that - // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then - // the imported themes (such as `mat-ripple-theme`) should not report again. - @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { - @include ripple.theme($theme); - @include option-theme.theme($theme); - @include optgroup-theme.theme($theme); - @include pseudo-checkbox-theme.theme($theme); - - $color: theming.get-color-config($theme); - @if $color != null { - @include color($color); - } - } -} - // Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`. @mixin _mat-mdc-core() { @include _mat-mdc-strong-focus-indicators-positioning(); diff --git a/src/material/core/color/_all-color.import.scss b/src/material/core/color/_all-color.import.scss index bf54f6c935c4..6141db33e9e0 100644 --- a/src/material/core/color/_all-color.import.scss +++ b/src/material/core/color/_all-color.import.scss @@ -42,8 +42,10 @@ @forward '../../sort/sort-theme.import'; @forward '../../tabs/tabs-theme.import'; @forward '../typography/all-typography'; -@forward '../core' as mat-* hide mat-color, mat-theme; +@forward '../core' as mat-*; +@forward '../core-theme' as mat-* hide mat-color, mat-theme; @forward '../core' as mat-core-* hide mat-core-core; +@forward '../core-theme' as mat-core-*; @forward '../theming/all-theme'; @forward 'all-color'; diff --git a/src/material/core/color/_all-color.scss b/src/material/core/color/_all-color.scss index ea17021a50fb..4672471e5eb9 100644 --- a/src/material/core/color/_all-color.scss +++ b/src/material/core/color/_all-color.scss @@ -2,7 +2,7 @@ @use '../theming/theming'; // Includes all of the color styles. -@mixin angular-material-color($config-or-theme) { +@mixin all-component-colors($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the color system, extract the color config from the theme object. $config: if(theming.private-is-theme-object($config-or-theme), @@ -12,9 +12,14 @@ @error 'No color configuration specified.'; } - @include all-theme.angular-material-theme(( + @include all-theme.all-component-themes(( color: $config, typography: null, density: null, )); } + +// @deprecated Use `all-component-colors`. +@mixin angular-material-color($config-or-theme) { + @include all-component-colors($config-or-theme); +} diff --git a/src/material/core/density/private/_all-density.import.scss b/src/material/core/density/private/_all-density.import.scss index 8aa0c52dc1e0..fe9ebd5a3925 100644 --- a/src/material/core/density/private/_all-density.import.scss +++ b/src/material/core/density/private/_all-density.import.scss @@ -5,7 +5,7 @@ @forward '../../../tree/tree-theme.import'; @forward '../../../paginator/paginator-theme.import'; @forward '../../../form-field/form-field-theme.import'; -@forward 'all-density'; +@forward 'all-density' hide all-component-densities; @import '../../theming/theming'; @import '../../../expansion/expansion-theme'; diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index e0638db84036..37c347269ae1 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -8,7 +8,7 @@ @use '../../../button-toggle/button-toggle-theme'; // Includes all of the density styles. -@mixin angular-material-density($config-or-theme) { +@mixin all-component-densities($config-or-theme) { // In case a theme object has been passed instead of a configuration for // the density system, extract the density config from the theme object. $config: if(theming.private-is-theme-object($config-or-theme), @@ -32,3 +32,9 @@ @include form-field-theme.density($config); @include button-toggle-theme.density($config); } + + +// @deprecated Use `all-component-densities`. +@mixin angular-material-density($config-or-theme) { + @include all-component-densities($config-or-theme); +} diff --git a/src/material/core/focus-indicators/_focus-indicators-theme.scss b/src/material/core/focus-indicators/_focus-indicators-theme.scss new file mode 100644 index 000000000000..34e98756df27 --- /dev/null +++ b/src/material/core/focus-indicators/_focus-indicators-theme.scss @@ -0,0 +1,47 @@ +@use 'sass:meta'; +@use 'sass:map'; +@use '../theming/theming'; + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $border-color: theming.get-color-from-palette(map.get($config, primary)); + @include _mat-strong-focus-indicators-border-color($border-color); +} + +/// Mixin that sets the color of the focus indicators. +/// +/// @param {color|map} $theme-or-color +/// If theme, focus indicators are set to the primary color of the theme. If +/// color, focus indicators are set to that color. +/// +/// @example +/// .demo-dark-theme { +/// @include mat-strong-focus-indicators-theme($dark-theme-map); +/// } +/// +/// @example +/// .demo-red-theme { +/// @include mat-strong-focus-indicators-theme(#f00); +/// } +/* stylelint-disable-next-line material/theme-mixin-api */ +@mixin theme($theme-or-color) { + @if meta.type-of($theme-or-color) != 'map' { + @include _mat-strong-focus-indicators-border-color($theme-or-color); + } + @else { + $theme: theming.private-legacy-get-theme($theme-or-color); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') { + $color: theming.get-color-config($theme); + @if $color != null { + @include color($color); + } + } + } +} + +// Mixin that applies the border color for the focus indicators. +@mixin _mat-strong-focus-indicators-border-color($color) { + .mat-focus-indicator::before { + border-color: $color; + } +} diff --git a/src/material/core/focus-indicators/_focus-indicators.import.scss b/src/material/core/focus-indicators/_focus-indicators.import.scss index de94e05f2a67..925efba952c9 100644 --- a/src/material/core/focus-indicators/_focus-indicators.import.scss +++ b/src/material/core/focus-indicators/_focus-indicators.import.scss @@ -1,7 +1,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, @@ -11,8 +13,10 @@ $mat-white-6-opacity, $mat-white-87-opacity; @forward '../theming/theming' as mat-*; @forward '../style/layout-common' as mat-*; @forward 'focus-indicators' hide private-strong-focus-indicators-positioning, -strong-focus-indicators, strong-focus-indicators-color, strong-focus-indicators-theme; +strong-focus-indicators; +@forward 'focus-indicators-theme' hide color, theme; @forward 'focus-indicators' as mat-* hide mat-strong-focus-indicators-border-color; +@forward 'focus-indicators-theme' as mat-strong-focus-indicators-*; @import '../theming/theming'; @import '../style/layout-common'; diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss index 85488c3c8446..1404a6604f36 100644 --- a/src/material/core/focus-indicators/_focus-indicators.scss +++ b/src/material/core/focus-indicators/_focus-indicators.scss @@ -1,6 +1,4 @@ @use 'sass:map'; -@use 'sass:meta'; -@use '../theming/theming'; @use '../style/layout-common'; /// Mixin that turns on strong focus indicators. @@ -79,49 +77,6 @@ } } -// Mixin that applies the border color for the focus indicators. -@mixin _mat-strong-focus-indicators-border-color($color) { - .mat-focus-indicator::before { - border-color: $color; - } -} - -@mixin strong-focus-indicators-color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - @include _mat-strong-focus-indicators-border-color(theming.color(map.get($config, primary))); -} - -/// Mixin that sets the color of the focus indicators. -/// -/// @param {color|map} $theme-or-color -/// If theme, focus indicators are set to the primary color of the theme. If -/// color, focus indicators are set to that color. -/// -/// @example -/// .demo-dark-theme { -/// @include mat-strong-focus-indicators-theme($dark-theme-map); -/// } -/// -/// @example -/// .demo-red-theme { -/// @include mat-strong-focus-indicators-theme(#f00); -/// } -/* stylelint-disable-next-line material/theme-mixin-api */ -@mixin strong-focus-indicators-theme($theme-or-color) { - @if meta.type-of($theme-or-color) != 'map' { - @include _mat-strong-focus-indicators-border-color($theme-or-color); - } - @else { - $theme: theming.private-legacy-get-theme($theme-or-color); - @include theming.private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') { - $color: theming.get-color-config($theme); - @if $color != null { - @include strong-focus-indicators-color($color); - } - } - } -} - // Mixin that ensures focus indicator host elements are positioned so that the focus indicator // pseudo element within is positioned relative to the host. Private mixin included within // `mat-core`. diff --git a/src/material/core/option/_optgroup-theme.import.scss b/src/material/core/option/_optgroup-theme.import.scss index adc33c8718c5..e82cba3a656b 100644 --- a/src/material/core/option/_optgroup-theme.import.scss +++ b/src/material/core/option/_optgroup-theme.import.scss @@ -1,7 +1,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, @@ -10,10 +12,10 @@ $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-*; @forward '../theming/theming' as mat-*; @forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, -mat-level-to-styles; +mat-typography-level; @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; +mat-line-typography-level; @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; diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 8346ba92e3de..e2d6327063be 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -9,11 +9,11 @@ $foreground: map.get($config, foreground); .mat-optgroup-label { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-optgroup-disabled .mat-optgroup-label { - color: theming.color($foreground, hint-text); + color: theming.get-color-from-palette($foreground, hint-text); } } @@ -21,7 +21,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); .mat-optgroup-label { - @include typography-utils.level-to-styles($config, body-2); + @include typography-utils.typography-level($config, body-2); } } diff --git a/src/material/core/option/_option-theme.import.scss b/src/material/core/option/_option-theme.import.scss index 0f71426b0252..0f37a50d9e88 100644 --- a/src/material/core/option/_option-theme.import.scss +++ b/src/material/core/option/_option-theme.import.scss @@ -1,7 +1,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, @@ -10,10 +12,10 @@ $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-*; @forward '../theming/theming' as mat-*; @forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height, -mat-level-to-styles; +mat-typography-level; @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; +mat-line-typography-level; @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; diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index b5844def9bb5..e6c6f741cb85 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -13,38 +13,38 @@ $warn: map.get($config, warn); .mat-option { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) { - background: theming.color($background, hover); + background: theming.get-color-from-palette($background, hover); } // In multiple mode there is a checkbox to show that the option is selected. &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) { - background: theming.color($background, hover); + background: theming.get-color-from-palette($background, hover); } &.mat-active { - background: theming.color($background, hover); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, hover); + color: theming.get-color-from-palette($foreground, text); } &.mat-option-disabled { - color: theming.color($foreground, hint-text); + color: theming.get-color-from-palette($foreground, hint-text); } } .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { - color: theming.color($primary, text); + color: theming.get-color-from-palette($primary, text); } .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) { - color: theming.color($accent, text); + color: theming.get-color-from-palette($accent, text); } .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } } diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss new file mode 100644 index 000000000000..58821df6fbb0 --- /dev/null +++ b/src/material/core/ripple/_ripple-theme.scss @@ -0,0 +1,33 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use '../theming/theming'; + +/* Colors for the ripple elements.*/ +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $foreground: map.get($config, foreground); + $foreground-base: map.get($foreground, base); + $color-opacity: 0.1; + + .mat-ripple-element { + // If the ripple color is resolves to a color *type*, we can use it directly, otherwise + // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity. + @if (meta.type-of($foreground-base) == color) { + background-color: rgba($foreground-base, $color-opacity); + } + @else { + background-color: $foreground-base; + opacity: $color-opacity; + } + } +} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') { + $color: theming.get-color-config($theme); + @if $color != null { + @include color($color); + } + } +} diff --git a/src/material/core/ripple/_ripple.import.scss b/src/material/core/ripple/_ripple.import.scss index af13cce67e5a..97bb232ce025 100644 --- a/src/material/core/ripple/_ripple.import.scss +++ b/src/material/core/ripple/_ripple.import.scss @@ -1,7 +1,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, @@ -10,8 +12,9 @@ $mat-white-6-opacity, $mat-white-87-opacity; @forward '../density/private/compatibility' as mat-*; @forward '../theming/theming' as mat-*; @forward '../../../cdk/a11y/a11y.import'; -@forward 'ripple' as mat-* hide $mat-color-opacity, mat-color, mat-theme; +@forward 'ripple' as mat-* hide $mat-color-opacity; @forward 'ripple' as mat-ripple-* hide mat-ripple-ripple; +@forward 'ripple-theme' as mat-ripple-*; @import '../theming/theming'; @import '../../../cdk/a11y/a11y'; diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss index 4c3cbefb6f0d..4e938a89a883 100644 --- a/src/material/core/ripple/_ripple.scss +++ b/src/material/core/ripple/_ripple.scss @@ -1,12 +1,6 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../theming/theming'; @use '../../../cdk/a11y/a11y'; -$color-opacity: 0.1; - @mixin ripple() { - // The host element of an mat-ripple directive should always have a position of "absolute" or // "relative" so that the ripples inside are correctly positioned relatively to the container. .mat-ripple { @@ -44,32 +38,3 @@ $color-opacity: 0.1; } } } - -/* Colors for the ripple elements.*/ -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - $foreground: map.get($config, foreground); - $foreground-base: map.get($foreground, base); - - .mat-ripple-element { - // If the ripple color is resolves to a color *type*, we can use it directly, otherwise - // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity. - @if (meta.type-of($foreground-base) == color) { - background-color: rgba($foreground-base, $color-opacity); - } - @else { - background-color: $foreground-base; - opacity: $color-opacity; - } - } -} - -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); - @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') { - $color: theming.get-color-config($theme); - @if $color != null { - @include color($color); - } - } -} 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 bbccc7375bea..827a272949e8 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,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index dd1b373029c8..a166f73ea141 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -18,10 +18,10 @@ $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate'; .mat-pseudo-checkbox { - color: theming.color(map.get($config, foreground), secondary-text); + color: theming.get-color-from-palette(map.get($config, foreground), secondary-text); &::after { - color: theming.color($background, background); + color: theming.get-color-from-palette($background, background); } } @@ -31,7 +31,7 @@ .mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate { - background: theming.color(map.get($config, primary)); + background: theming.get-color-from-palette(map.get($config, primary)); } // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the @@ -43,12 +43,12 @@ .mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { - background: theming.color(map.get($config, accent)); + background: theming.get-color-from-palette(map.get($config, accent)); } .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { - background: theming.color(map.get($config, warn)); + background: theming.get-color-from-palette(map.get($config, warn)); } .mat-pseudo-checkbox-checked, diff --git a/src/material/core/style/_form-common.import.scss b/src/material/core/style/_form-common.import.scss index 327882578125..7611d8844647 100644 --- a/src/material/core/style/_form-common.import.scss +++ b/src/material/core/style/_form-common.import.scss @@ -1,7 +1,9 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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, diff --git a/src/material/core/style/_form-common.scss b/src/material/core/style/_form-common.scss index a9a0ac3412dd..dc9e06d4cc07 100644 --- a/src/material/core/style/_form-common.scss +++ b/src/material/core/style/_form-common.scss @@ -16,5 +16,6 @@ @function private-control-placeholder-color($config) { $foreground: map.get($config, foreground); $is-dark-theme: map.get($config, is-dark); - @return theming.color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42)); + @return theming.get-color-from-palette($foreground, secondary-text, + if($is-dark-theme, 0.5, 0.42)); } diff --git a/src/material/core/theming/_all-theme.import.scss b/src/material/core/theming/_all-theme.import.scss index 6a79d503c9df..1f1c07c08575 100644 --- a/src/material/core/theming/_all-theme.import.scss +++ b/src/material/core/theming/_all-theme.import.scss @@ -42,8 +42,10 @@ @forward '../../sort/sort-theme.import'; @forward '../../tabs/tabs-theme.import'; @forward '../typography/all-typography'; -@forward '../core' as mat-* hide mat-color, mat-theme; +@forward '../core' as mat-*; +@forward '../core-theme' as mat-* hide mat-color, mat-theme; @forward '../core' as mat-core-* hide mat-core-core; +@forward '../core-theme' as mat-core-*; @forward 'all-theme'; @import '../core'; diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 8f4d443bfc7b..4119252cd5ea 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -1,5 +1,5 @@ // Import all the theming functionality. -@use '../core'; +@use '../core-theme'; @use '../../autocomplete/autocomplete-theme'; @use '../../badge/badge-theme'; @use '../../bottom-sheet/bottom-sheet-theme'; @@ -37,10 +37,10 @@ @use './theming'; // Create a theme. -@mixin angular-material-theme($theme-or-color-config) { +@mixin all-component-themes($theme-or-color-config) { $dedupe-key: 'angular-material-theme'; @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { - @include core.theme($theme-or-color-config); + @include core-theme.theme($theme-or-color-config); @include autocomplete-theme.theme($theme-or-color-config); @include badge-theme.theme($theme-or-color-config); @include bottom-sheet-theme.theme($theme-or-color-config); @@ -77,3 +77,8 @@ @include snack-bar-theme.theme($theme-or-color-config); } } + +// @deprecated Use `all-component-themes`. +@mixin angular-material-theme($theme-or-color-config) { + @include all-component-themes($theme-or-color-config); +} diff --git a/src/material/core/theming/_palette-deprecated.scss b/src/material/core/theming/_palette-deprecated.scss new file mode 100644 index 000000000000..b9f3409b5453 --- /dev/null +++ b/src/material/core/theming/_palette-deprecated.scss @@ -0,0 +1,76 @@ +@use './palette'; + +// @deprecated Use `$red-palette` instead +$red: palette.$red-palette; + +// @deprecated Use `$pink-palette` instead +$pink: palette.$pink-palette; + +// @deprecated Use `$indigo-palette` instead +$indigo: palette.$indigo-palette; + +// @deprecated Use `$purple-palette` instead. +$purple: palette.$purple-palette; + +// @deprecated Use `$deep-purple-palette` instead. +$deep-purple: palette.$deep-purple-palette; + +// @deprecated Use `$blue-palette` instead. +$blue: palette.$blue-palette; + +// @deprecated Use `$light-blue-palette` instead. +$light-blue: palette.$light-blue-palette; + +// @deprecated Use `$cyan-palette` instead. +$cyan: palette.$cyan-palette; + +// @deprecated Use `$teal-palette` instead. +$teal: palette.$teal-palette; + +// @deprecated Use `$green-palette` instead. +$green: palette.$green-palette; + +// @deprecated Use `$light-green-palette` instead. +$light-green: palette.$light-green-palette; + +// @deprecated Use `$lime-palette` instead. +$lime: palette.$lime-palette; + +// @deprecated Use `$yellow-palette` instead. +$yellow: palette.$yellow-palette; + +// @deprecated Use `$amber-palette` instead. +$amber: palette.$amber-palette; + +// @deprecated Use `$orange-palette` instead. +$orange: palette.$orange-palette; + +// @deprecated Use `$deep-orange-palette` instead. +$deep-orange: palette.$deep-orange-palette; + +// @deprecated Use `$brown-palette` instead. +$brown: palette.$brown-palette; + +// @deprecated Use `$grey-palette` instead. +$grey: palette.$grey-palette; + +// @deprecated Use `$gray-palette` instead. +$gray: palette.$gray-palette; + +// @deprecated Use `$blue-grey-palette` instead. +$blue-grey: palette.$blue-grey-palette; + +// @deprecated Use `$blue-gray-palette` instead. +$blue-gray: palette.$blue-gray-palette; + +// @deprecated Use `$light-theme-background-palette` instead. +$light-theme-background: palette.$light-theme-background-palette; + +// @deprecated Use `$dark-theme-background-palette` instead. +$dark-theme-background: palette.$dark-theme-background-palette; + +// @deprecated Use `$light-theme-foreground-palette` instead. +$light-theme-foreground: palette.$light-theme-foreground-palette; + +// @deprecated Use `$dark-theme-foreground-palette` instead. +$dark-theme-foreground: palette.$dark-theme-foreground-palette; diff --git a/src/material/core/theming/_palette.import.scss b/src/material/core/theming/_palette.import.scss index 2aeaac2f5734..7dbb18f25fb1 100644 --- a/src/material/core/theming/_palette.import.scss +++ b/src/material/core/theming/_palette.import.scss @@ -1,9 +1,12 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, $blue-grey-palette, +$brown-palette, $cyan-palette, $dark-theme-background-palette, $dark-theme-foreground-palette, +$deep-orange-palette, $deep-purple-palette, $gray-palette, $green-palette, $grey-palette, +$indigo-palette, $light-blue-palette, $light-green-palette, $light-theme-background-palette, +$light-theme-foreground-palette, $lime-palette, $orange-palette, $pink-palette, $purple-palette, +$red-palette, $teal-palette, $yellow-palette; @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-deprecated' as mat-*; diff --git a/src/material/core/theming/_palette.scss b/src/material/core/theming/_palette.scss index d6d0908feabf..10fa42bf4553 100644 --- a/src/material/core/theming/_palette.scss +++ b/src/material/core/theming/_palette.scss @@ -37,7 +37,7 @@ $light-disabled-text: rgba(white, 0.5); $light-dividers: rgba(white, 0.12); $light-focused: rgba(white, 0.12); -$red: ( +$red-palette: ( 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, @@ -70,7 +70,7 @@ $red: ( ) ); -$pink: ( +$pink-palette: ( 50: #fce4ec, 100: #f8bbd0, 200: #f48fb1, @@ -103,7 +103,7 @@ $pink: ( ) ); -$purple: ( +$purple-palette: ( 50: #f3e5f5, 100: #e1bee7, 200: #ce93d8, @@ -136,7 +136,7 @@ $purple: ( ) ); -$deep-purple: ( +$deep-purple-palette: ( 50: #ede7f6, 100: #d1c4e9, 200: #b39ddb, @@ -169,7 +169,7 @@ $deep-purple: ( ) ); -$indigo: ( +$indigo-palette: ( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, @@ -202,7 +202,7 @@ $indigo: ( ) ); -$blue: ( +$blue-palette: ( 50: #e3f2fd, 100: #bbdefb, 200: #90caf9, @@ -235,7 +235,7 @@ $blue: ( ) ); -$light-blue: ( +$light-blue-palette: ( 50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, @@ -268,7 +268,7 @@ $light-blue: ( ) ); -$cyan: ( +$cyan-palette: ( 50: #e0f7fa, 100: #b2ebf2, 200: #80deea, @@ -301,7 +301,7 @@ $cyan: ( ) ); -$teal: ( +$teal-palette: ( 50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, @@ -334,7 +334,7 @@ $teal: ( ) ); -$green: ( +$green-palette: ( 50: #e8f5e9, 100: #c8e6c9, 200: #a5d6a7, @@ -367,7 +367,7 @@ $green: ( ) ); -$light-green: ( +$light-green-palette: ( 50: #f1f8e9, 100: #dcedc8, 200: #c5e1a5, @@ -400,7 +400,7 @@ $light-green: ( ) ); -$lime: ( +$lime-palette: ( 50: #f9fbe7, 100: #f0f4c3, 200: #e6ee9c, @@ -433,7 +433,7 @@ $lime: ( ) ); -$yellow: ( +$yellow-palette: ( 50: #fffde7, 100: #fff9c4, 200: #fff59d, @@ -466,7 +466,7 @@ $yellow: ( ) ); -$amber: ( +$amber-palette: ( 50: #fff8e1, 100: #ffecb3, 200: #ffe082, @@ -499,7 +499,7 @@ $amber: ( ) ); -$orange: ( +$orange-palette: ( 50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, @@ -532,7 +532,7 @@ $orange: ( ) ); -$deep-orange: ( +$deep-orange-palette: ( 50: #fbe9e7, 100: #ffccbc, 200: #ffab91, @@ -565,7 +565,7 @@ $deep-orange: ( ) ); -$brown: ( +$brown-palette: ( 50: #efebe9, 100: #d7ccc8, 200: #bcaaa4, @@ -598,7 +598,7 @@ $brown: ( ) ); -$grey: ( +$grey-palette: ( 50: #fafafa, 100: #f5f5f5, 200: #eeeeee, @@ -632,9 +632,9 @@ $grey: ( ); // Alias for alternate spelling. -$gray: $grey; +$gray-palette: $grey-palette; -$blue-grey: ( +$blue-grey-palette: ( 50: #eceff1, 100: #cfd8dc, 200: #b0bec5, @@ -668,49 +668,49 @@ $blue-grey: ( ); // Alias for alternate spelling. -$blue-gray: $blue-grey; +$blue-gray-palette: $blue-grey-palette; // Background palette for light themes. -$light-theme-background: ( - status-bar: map.get($grey, 300), - app-bar: map.get($grey, 100), - background: map.get($grey, 50), +$light-theme-background-palette: ( + status-bar: map.get($grey-palette, 300), + app-bar: map.get($grey-palette, 100), + background: map.get($grey-palette, 50), hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, disabled-button: rgba(black, 0.12), raised-button: white, focused-button: $dark-focused, - selected-button: map.get($grey, 300), - selected-disabled-button: map.get($grey, 400), - disabled-button-toggle: map.get($grey, 200), - unselected-chip: map.get($grey, 300), - disabled-list-option: map.get($grey, 200), - tooltip: map.get($grey, 700), + selected-button: map.get($grey-palette, 300), + selected-disabled-button: map.get($grey-palette, 400), + disabled-button-toggle: map.get($grey-palette, 200), + unselected-chip: map.get($grey-palette, 300), + disabled-list-option: map.get($grey-palette, 200), + tooltip: map.get($grey-palette, 700), ); // Background palette for dark themes. -$dark-theme-background: ( +$dark-theme-background-palette: ( status-bar: black, - app-bar: map.get($grey, 900), + app-bar: map.get($grey-palette, 900), background: #303030, hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX - card: map.get($grey, 800), - dialog: map.get($grey, 800), + card: map.get($grey-palette, 800), + dialog: map.get($grey-palette, 800), disabled-button: rgba(white, 0.12), - raised-button: map.get($grey, 800), + raised-button: map.get($grey-palette, 800), focused-button: $light-focused, - selected-button: map.get($grey, 900), - selected-disabled-button: map.get($grey, 800), + selected-button: map.get($grey-palette, 900), + selected-disabled-button: map.get($grey-palette, 800), disabled-button-toggle: black, - unselected-chip: map.get($grey, 700), + unselected-chip: map.get($grey-palette, 700), disabled-list-option: black, - tooltip: map.get($grey, 700), + tooltip: map.get($grey-palette, 700), ); // Foreground palette for light themes. -$light-theme-foreground: ( +$light-theme-foreground-palette: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, @@ -729,7 +729,7 @@ $light-theme-foreground: ( ); // Foreground palette for dark themes. -$dark-theme-foreground: ( +$dark-theme-foreground-palette: ( base: white, divider: $light-dividers, dividers: $light-dividers, diff --git a/src/material/core/theming/_theming-deprecated.scss b/src/material/core/theming/_theming-deprecated.scss new file mode 100644 index 000000000000..1f82e70619ac --- /dev/null +++ b/src/material/core/theming/_theming-deprecated.scss @@ -0,0 +1,27 @@ +@use './theming'; +@use './palette'; + +// @deprecated Use `get-color-from-palette`. +@function color($palette, $hue: default, $opacity: null) { + @return theming.get-color-from-palette($palette, $hue, $opacity); +} + +// @deprecated Use `get-contrast-color-from-palette`. +@function contrast($palette, $hue) { + @return theming.get-contrast-color-from-palette($palette, $hue); +} + +// @deprecated Use `define-palette`. +@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) { + @return theming.define-palette($base-palette, $default, $lighter, $darker, $text); +} + +// @deprecated Use `define-light-theme`. +@function dark-theme($primary, $accent: null, $warn: palette(palette.$red-palette)) { + @return theming.define-dark-theme($primary, $accent, $warn); +} + +// @deprecated Use `define-light-theme`. +@function light-theme($primary, $accent: null, $warn: palette(palette.$red-palette)) { + @return theming.define-light-theme($primary, $accent, $warn); +} diff --git a/src/material/core/theming/_theming.import.scss b/src/material/core/theming/_theming.import.scss index e2dc1caed9f7..80ab9c8a419a 100644 --- a/src/material/core/theming/_theming.import.scss +++ b/src/material/core/theming/_theming.import.scss @@ -1,20 +1,24 @@ -@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' hide $amber-palette, $blue-palette, $blue-gray-palette, +$blue-grey-palette, $brown-palette, $cyan-palette, $dark-theme-background-palette, +$dark-theme-foreground-palette, $deep-orange-palette, $deep-purple-palette, $gray-palette, +$green-palette, $grey-palette, $indigo-palette, $light-blue-palette, $light-green-palette, +$light-theme-background-palette, $light-theme-foreground-palette, $lime-palette, $orange-palette, +$pink-palette, $purple-palette, $red-palette, $teal-palette, $yellow-palette; @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-*; -@forward 'theming' hide $theme-ignore-duplication-warnings, color, contrast, dark-theme, -get-color-config, get-density-config, get-typography-config, light-theme, palette, -private-check-duplicate-theme-styles, private-create-backwards-compatibility-theme, -private-is-legacy-constructed-theme, private-is-theme-object, private-legacy-get-theme; +@forward 'theming' hide $theme-ignore-duplication-warnings, get-color-from-palette, +get-color-config, get-density-config, get-typography-config, define-palette, define-light-theme, +define-dark-theme, private-check-duplicate-theme-styles, +private-create-backwards-compatibility-theme, private-is-legacy-constructed-theme, +private-is-theme-object, private-legacy-get-theme; @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-create-dark-color-config, mat-create-light-color-config, mat-validate-theme; +@forward 'theming-deprecated' as mat-*; @import 'palette'; @import '../density/private/compatibility'; diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss index 8756b0976d20..bfe6ff18018d 100644 --- a/src/material/core/theming/_theming.scss +++ b/src/material/core/theming/_theming.scss @@ -23,7 +23,7 @@ $_mat-theme-emitted-density: () !default; // For a given hue in a palette, return the contrast color from the map of contrast palettes. // @param $palette // @param $hue -@function contrast($palette, $hue) { +@function get-contrast-color-from-palette($palette, $hue) { @return map.get(map.get($palette, contrast), $hue); } @@ -35,22 +35,23 @@ $_mat-theme-emitted-density: () !default; // @param $lighter // @param $darker // @param $text -@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) { +@function define-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, + $text: $default) { $result: map.merge($base-palette, ( default: map.get($base-palette, $default), lighter: map.get($base-palette, $lighter), darker: map.get($base-palette, $darker), text: map.get($base-palette, $text), - default-contrast: contrast($base-palette, $default), - lighter-contrast: contrast($base-palette, $lighter), - darker-contrast: contrast($base-palette, $darker) + default-contrast: get-contrast-color-from-palette($base-palette, $default), + lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter), + darker-contrast: get-contrast-color-from-palette($base-palette, $darker) )); // For each hue in the palette, add a "-contrast" color to the map. @each $hue, $color in $base-palette { $result: map.merge($result, ( - '#{$hue}-contrast': contrast($base-palette, $hue) + '#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue) )); } @@ -66,11 +67,11 @@ $_mat-theme-emitted-density: () !default; // @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will // be treated as opacity. // @param $opacity The alpha channel value for the color. -@function color($palette, $hue: default, $opacity: null) { +@function get-color-from-palette($palette, $hue: default, $opacity: null) { // If hueKey is a number between zero and one, then it actually contains an // opacity value, so recall this function with the default hue and that given opacity. @if meta.type-of($hue) == number and $hue >= 0 and $hue <= 1 { - @return color($palette, default, $hue); + @return get-color-from-palette($palette, default, $hue); } $color: map.get($palette, $hue); @@ -109,10 +110,10 @@ $_mat-theme-emitted-density: () !default; @return ( primary: $primary, accent: $accent, - warn: if($warn != null, $warn, palette(palette.$red)), + warn: if($warn != null, $warn, define-palette(palette.$red-palette)), is-dark: false, - foreground: palette.$light-theme-foreground, - background: palette.$light-theme-background, + foreground: palette.$light-theme-foreground-palette, + background: palette.$light-theme-background-palette, ); } @@ -122,17 +123,17 @@ $_mat-theme-emitted-density: () !default; @return ( primary: $primary, accent: $accent, - warn: if($warn != null, $warn, palette(palette.$red)), + warn: if($warn != null, $warn, define-palette(palette.$red-palette)), is-dark: true, - foreground: palette.$dark-theme-foreground, - background: palette.$dark-theme-background, + foreground: palette.$dark-theme-foreground-palette, + background: palette.$dark-theme-background-palette, ); } // Creates a container object for a light theme to be given to individual component theme mixins. // TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed // as it would break existing apps that set the parameter by name. -@function light-theme($primary, $accent: null, $warn: palette(palette.$red)) { +@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) { // This function creates a container object for the individual component theme mixins. Consumers // can construct such an object by calling this function, or by building the object manually. // There are two possible ways to invoke this function in order to create such an object: @@ -169,7 +170,7 @@ $_mat-theme-emitted-density: () !default; // Creates a container object for a dark theme to be given to individual component theme mixins. // TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed // as it would break existing apps that set the parameter by name. -@function dark-theme($primary, $accent: null, $warn: palette(palette.$red)) { +@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) { // This function creates a container object for the individual component theme mixins. Consumers // can construct such an object by calling this function, or by building the object manually. // There are two possible ways to invoke this function in order to create such an object: @@ -267,7 +268,7 @@ $_mat-theme-emitted-density: () !default; // // The mixin keeps track of all configurations in a list that is scoped to the specified // id. This is necessary because a given theme can be passed to multiple disjoint theme mixins -// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any +// (e.g. `all-component-themes` and `all-mdc-component-themes`) without causing any // style duplication. @mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) { $theme: private-legacy-get-theme($theme-or-color-config); @@ -327,7 +328,7 @@ $_mat-theme-emitted-density: () !default; // Optionally, consumers of this mixin can wrap contents inside so that nested // duplicate style checks do not report another warning. e.g. if developers include - // the `angular-material-theme` mixin twice, only the top-level duplicate styles check + // the `all-component-themes` mixin twice, only the top-level duplicate styles check // should report a warning. Not all individual components should report a warning too. $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings; $theme-ignore-duplication-warnings: true !global; diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss index a1200145dcaa..9f58de7529be 100644 --- a/src/material/core/theming/prebuilt/deeppurple-amber.scss +++ b/src/material/core/theming/prebuilt/deeppurple-amber.scss @@ -8,10 +8,10 @@ @include core.core(); // Define a theme. -$primary: theming.palette(palette.$deep-purple); -$accent: theming.palette(palette.$amber, A200, A100, A400); +$primary: theming.define-palette(palette.$deep-purple-palette); +$accent: theming.define-palette(palette.$amber-palette, A200, A100, A400); -$theme: theming.light-theme(( +$theme: theming.define-light-theme(( color: ( primary: $primary, accent: $accent, @@ -19,4 +19,4 @@ $theme: theming.light-theme(( )); // Include all theme styles for the components. -@include all-theme.angular-material-theme($theme); +@include all-theme.all-component-themes($theme); diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss index 697ee4c646cf..943176302bf5 100644 --- a/src/material/core/theming/prebuilt/indigo-pink.scss +++ b/src/material/core/theming/prebuilt/indigo-pink.scss @@ -8,10 +8,10 @@ @include core.core(); // Define a theme. -$primary: theming.palette(palette.$indigo); -$accent: theming.palette(palette.$pink, A200, A100, A400); +$primary: theming.define-palette(palette.$indigo-palette); +$accent: theming.define-palette(palette.$pink-palette, A200, A100, A400); -$theme: theming.light-theme(( +$theme: theming.define-light-theme(( color: ( primary: $primary, accent: $accent @@ -19,4 +19,4 @@ $theme: theming.light-theme(( )); // Include all theme styles for the components. -@include all-theme.angular-material-theme($theme); +@include all-theme.all-component-themes($theme); diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss index ade946718d30..3665febf8a74 100644 --- a/src/material/core/theming/prebuilt/pink-bluegrey.scss +++ b/src/material/core/theming/prebuilt/pink-bluegrey.scss @@ -8,10 +8,10 @@ @include core.core(); // Define a theme. -$primary: theming.palette(palette.$pink, 700, 500, 900); -$accent: theming.palette(palette.$blue-grey, A200, A100, A400); +$primary: theming.define-palette(palette.$pink-palette, 700, 500, 900); +$accent: theming.define-palette(palette.$blue-grey-palette, A200, A100, A400); -$theme: theming.dark-theme(( +$theme: theming.define-dark-theme(( color: ( primary: $primary, accent: $accent @@ -19,4 +19,4 @@ $theme: theming.dark-theme(( )); // Include all theme styles for the components. -@include all-theme.angular-material-theme($theme); +@include all-theme.all-component-themes($theme); diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss index 8cae9eedab73..6a45a554f935 100644 --- a/src/material/core/theming/prebuilt/purple-green.scss +++ b/src/material/core/theming/prebuilt/purple-green.scss @@ -8,10 +8,10 @@ @include core.core(); // Define a theme. -$primary: theming.palette(palette.$purple, 700, 500, 800); -$accent: theming.palette(palette.$green, A200, A100, A400); +$primary: theming.define-palette(palette.$purple-palette, 700, 500, 800); +$accent: theming.define-palette(palette.$green-palette, A200, A100, A400); -$theme: theming.dark-theme(( +$theme: theming.define-dark-theme(( color: ( primary: $primary, accent: $accent @@ -19,4 +19,4 @@ $theme: theming.dark-theme(( )); // Include all theme styles for the components. -@include all-theme.angular-material-theme($theme); +@include all-theme.all-component-themes($theme); diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 68c8e686b680..e5ac3cb35df3 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -22,13 +22,13 @@ // Theme used to test that our themes would compile if the colors were specified as CSS variables. ._demo-css-variables-theme { - $palette: theming.palette(palette.$blue-grey); - $theme: theming.dark-theme(( + $palette: theming.define-palette(palette.$blue-grey-palette); + $theme: theming.define-dark-theme(( color: ( primary: $palette, accent: $palette, warn: $palette ) )); - @include all-theme.angular-material-theme(replace-all-values($theme, var(--test-var))); + @include all-theme.all-component-themes(replace-all-values($theme, var(--test-var))); } diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss index 290b578fb409..726204939203 100644 --- a/src/material/core/theming/tests/test-theming-api.scss +++ b/src/material/core/theming/tests/test-theming-api.scss @@ -15,10 +15,10 @@ theming.$theme-ignore-duplication-warnings: true; // API is backwards compatible, so that the old pattern for configuring themes can be still // used. The Sass compilation of this file will fail if one of the tests/assertions fails. -$primary: theming.palette(palette.$blue); -$accent: theming.palette(palette.$grey); -$warn: theming.palette(palette.$indigo); -$default-warn: theming.palette(palette.$red); +$primary: theming.define-palette(palette.$blue-palette); +$accent: theming.define-palette(palette.$grey-palette); +$warn: theming.define-palette(palette.$indigo-palette); +$default-warn: theming.define-palette(palette.$red-palette); // Asserts that a given value matches the expected value. If not, an error is // thrown with the given error message. @@ -41,30 +41,30 @@ $default-warn: theming.palette(palette.$red); 'Expected color config `is-dark` to be: #{$is-dark}'); } -$legacy-light-theme: theming.light-theme($primary, $accent, $warn); -$legacy-dark-theme: theming.dark-theme($primary, $accent, $warn); -$legacy-light-theme-default-warn: theming.light-theme($primary, $accent); -$legacy-dark-theme-default-warn: theming.dark-theme($primary, $accent); +$legacy-light-theme: theming.define-light-theme($primary, $accent, $warn); +$legacy-dark-theme: theming.define-dark-theme($primary, $accent, $warn); +$legacy-light-theme-default-warn: theming.define-light-theme($primary, $accent); +$legacy-dark-theme-default-warn: theming.define-dark-theme($primary, $accent); -$new-api-light-theme: theming.light-theme(( +$new-api-light-theme: theming.define-light-theme(( color: (primary: $primary, accent: $accent, warn: $warn) )); -$new-api-dark-theme: theming.dark-theme(( +$new-api-dark-theme: theming.define-dark-theme(( color: (primary: $primary, accent: $accent, warn: $warn) )); -$new-api-light-theme-default-warn: theming.light-theme(( +$new-api-light-theme-default-warn: theming.define-light-theme(( color: (primary: $primary, accent: $accent) )); -$new-api-dark-theme-default-warn: theming.dark-theme(( +$new-api-dark-theme-default-warn: theming.define-dark-theme(( color: (primary: $primary, accent: $accent) )); -$light-theme-only-density: theming.light-theme((density: -3)); -$dark-theme-only-density: theming.dark-theme((density: -3)); +$light-theme-only-density: theming.define-light-theme((density: -3)); +$dark-theme-only-density: theming.define-dark-theme((density: -3)); -$typography-config: typography.config(); -$light-theme-only-typography: theming.light-theme((typography: $typography-config)); -$dark-theme-only-typography: theming.dark-theme((typography: $typography-config)); +$typography-config: typography.define-typography-config(); +$light-theme-only-typography: theming.define-light-theme((typography: $typography-config)); +$dark-theme-only-typography: theming.define-dark-theme((typography: $typography-config)); // Test which ensures that constructed themes by default do not set configurations // for the individual parts of the theming system (color, density, typography). @@ -118,8 +118,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) // theme objects passed to individual component theme mixins. @mixin test-get-color-config() { $color-config: map.get($legacy-light-theme, color); - $no-color-light-theme: theming.light-theme((color: null)); - $no-color-dark-theme: theming.dark-theme((color: null)); + $no-color-light-theme: theming.define-light-theme((color: null)); + $no-color-dark-theme: theming.define-dark-theme((color: null)); @include assert(theming.get-color-config($color-config), $color-config, 'Expected that passing a color config to a theme will work for backwards compatibility.'); // For legacy constructed themes, the color configuration is the actual `$theme` object. @@ -142,8 +142,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) // theme objects passed to individual component theme mixins. @mixin test-get-density-config() { $density-config: map.get($light-theme-only-density, density); - $no-density-light-theme: theming.light-theme((density: null)); - $no-density-dark-theme: theming.dark-theme((density: null)); + $no-density-light-theme: theming.define-light-theme((density: null)); + $no-density-dark-theme: theming.define-dark-theme((density: null)); @include assert(theming.get-density-config($light-theme-only-density), -3, 'Expected that a density config can be read from a theme object.'); @include assert(theming.get-density-config($light-theme-only-typography), 0, @@ -157,8 +157,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) // Test which ensures that typography configurations can be properly read from // theme objects passed to individual component theme mixins. @mixin test-get-typography-config() { - $no-typography-light-theme: theming.light-theme((density: null)); - $no-typography-dark-theme: theming.dark-theme((density: null)); + $no-typography-light-theme: theming.define-light-theme((density: null)); + $no-typography-dark-theme: theming.define-dark-theme((density: null)); @include assert(theming.get-typography-config($light-theme-only-typography), $typography-config, 'Expected that a typography config can be read from a theme object.'); @include assert(theming.get-typography-config($legacy-light-theme), null, @@ -172,25 +172,25 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) // Test which ensures that all Angular Material theme mixins accept a theme // object without throwing any exception. @mixin test-theme-mixins-successful-compilation() { - @include all-theme.angular-material-theme($legacy-light-theme); - @include all-theme.angular-material-theme($legacy-light-theme-default-warn); - @include all-theme.angular-material-theme($legacy-dark-theme); - @include all-theme.angular-material-theme($legacy-dark-theme-default-warn); - @include all-theme.angular-material-theme($new-api-light-theme); - @include all-theme.angular-material-theme($new-api-light-theme-default-warn); - @include all-theme.angular-material-theme($new-api-dark-theme); - @include all-theme.angular-material-theme($new-api-dark-theme-default-warn); - @include all-theme.angular-material-theme($light-theme-only-density); - @include all-theme.angular-material-theme($dark-theme-only-density); - @include all-theme.angular-material-theme($light-theme-only-typography); - @include all-theme.angular-material-theme($dark-theme-only-typography); + @include all-theme.all-component-themes($legacy-light-theme); + @include all-theme.all-component-themes($legacy-light-theme-default-warn); + @include all-theme.all-component-themes($legacy-dark-theme); + @include all-theme.all-component-themes($legacy-dark-theme-default-warn); + @include all-theme.all-component-themes($new-api-light-theme); + @include all-theme.all-component-themes($new-api-light-theme-default-warn); + @include all-theme.all-component-themes($new-api-dark-theme); + @include all-theme.all-component-themes($new-api-dark-theme-default-warn); + @include all-theme.all-component-themes($light-theme-only-density); + @include all-theme.all-component-themes($dark-theme-only-density); + @include all-theme.all-component-themes($light-theme-only-typography); + @include all-theme.all-component-themes($dark-theme-only-typography); } // Custom theme mixin used by the custom theme backwards compatibility test. // This replicates a custom theme that expects legacy theme objects. @mixin _my-custom-theme-legacy($theme) { .demo-custom-comp { - border-color: theming.color(map.get($theme, primary)); + border-color: theming.get-color-from-palette(map.get($theme, primary)); } } @@ -198,7 +198,7 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) $config: theming.get-color-config($config-or-theme); .demo-custom-comp { - border-color: theming.color(map.get($config, primary)); + border-color: theming.get-color-from-palette(map.get($config, primary)); } } @@ -248,20 +248,20 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) ); @each $theme in $test-themes { - @include all-typography.angular-material-typography($theme); - @include all-color.angular-material-color($theme); - @include all-density.angular-material-density($theme); + @include all-typography.all-component-typographies($theme); + @include all-color.all-component-colors($theme); + @include all-density.all-component-densities($theme); } - @include all-typography.angular-material-typography( + @include all-typography.all-component-typographies( map.get($light-theme-only-typography, typography)); - @include all-typography.angular-material-typography($light-theme-only-typography); + @include all-typography.all-component-typographies($light-theme-only-typography); - @include all-density.angular-material-density(map.get($light-theme-only-density, density)); - @include all-density.angular-material-density($light-theme-only-density); + @include all-density.all-component-densities(map.get($light-theme-only-density, density)); + @include all-density.all-component-densities($light-theme-only-density); - @include all-color.angular-material-color(map.get($new-api-dark-theme, color)); - @include all-color.angular-material-color($new-api-dark-theme); + @include all-color.all-component-colors(map.get($new-api-dark-theme, color)); + @include all-color.all-component-colors($new-api-dark-theme); } @mixin test-individual-system-mixins-unwrap() { @@ -270,8 +270,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config) @include _my-custom-theme-new-api($new-api-dark-theme); @include _my-custom-theme-new-api(map.get($new-api-dark-theme, color)); - @include all-theme.angular-material-theme($new-api-dark-theme); - @include all-theme.angular-material-theme(map.get($new-api-dark-theme, color)); + @include all-theme.all-component-themes($new-api-dark-theme); + @include all-theme.all-component-themes(map.get($new-api-dark-theme, color)); } // Include all tests. Sass will throw if one of the tests fails. diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index 1111641ca6f7..b4082906baee 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -39,13 +39,13 @@ // Includes all of the typographic styles. -@mixin angular-material-typography($config-or-theme: null) { +@mixin all-component-typographies($config-or-theme: null) { $config: if(theming.private-is-theme-object($config-or-theme), theming.get-typography-config($config-or-theme), $config-or-theme); // If no actual color configuration has been specified, create a default one. @if not $config { - $config: typography.config(); + $config: typography.define-typography-config(); } // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only @@ -55,7 +55,7 @@ // would then load `all-theme` again. This ultimately results a circular dependency. @include badge-theme.typography($config); - @include typography.base-typography($config); + @include typography.typography-hierarchy($config); @include autocomplete-theme.typography($config); @include bottom-sheet-theme.typography($config); @include button-theme.typography($config); @@ -92,3 +92,8 @@ @include snack-bar-theme.typography($config); @include tree-theme.typography($config); } + +// @deprecated Use `all-component-typographies`. +@mixin angular-material-typography($config-or-theme: null) { + @include all-component-typographies($config-or-theme); +} diff --git a/src/material/core/typography/_typography-deprecated.scss b/src/material/core/typography/_typography-deprecated.scss new file mode 100644 index 000000000000..1a7589b389c2 --- /dev/null +++ b/src/material/core/typography/_typography-deprecated.scss @@ -0,0 +1,39 @@ +@use 'typography'; + +// @deprecated Use `define-typography-level`. +@function level( + $font-size, + $line-height: $font-size, + $font-weight: 400, + $font-family: null, + $letter-spacing: normal) { + @return typography.define-typography-level($font-size, $line-height, $font-weight, $font-family, + $letter-spacing); +} + +// @deprecated Use `typography-hierarchy`. +@mixin base-typography($config-or-theme, $selector: '.mat-typography') { + @include typography.typography-hierarchy($config-or-theme, $selector); +} + +// @deprecated Use `define-typography-config`. +@function config( + $font-family: 'Roboto, "Helvetica Neue", sans-serif', + $display-4: typography.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), + $display-3: typography.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), + $display-2: typography.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), + $display-1: typography.define-typography-level(34px, 40px, 400), + $headline: typography.define-typography-level(24px, 32px, 400), + $title: typography.define-typography-level(20px, 32px, 500), + $subheading-2: typography.define-typography-level(16px, 28px, 400), + $subheading-1: typography.define-typography-level(15px, 24px, 400), + $body-2: typography.define-typography-level(14px, 24px, 500), + $body-1: typography.define-typography-level(14px, 20px, 400), + $caption: typography.define-typography-level(12px, 20px, 400), + $button: typography.define-typography-level(14px, 14px, 500), + $input: typography.define-typography-level(inherit, 1.125, 400) +) { + @return typography.define-typography-config($font-family, $display-4, $display-3, $display-2, + $display-1, $headline, $title, $subheading-2, $subheading-1, $body-2, + $body-1, $caption, $button); +} diff --git a/src/material/core/typography/_typography-utils-deprecated.scss b/src/material/core/typography/_typography-utils-deprecated.scss new file mode 100644 index 000000000000..5f45ad8faa33 --- /dev/null +++ b/src/material/core/typography/_typography-utils-deprecated.scss @@ -0,0 +1,6 @@ +@use 'typography-utils'; + +// @deprecated Use `typography-level`. +@mixin level-to-styles($config, $level) { + @include typography-utils.typography-level($config, $level); +} diff --git a/src/material/core/typography/_typography-utils.import.scss b/src/material/core/typography/_typography-utils.import.scss index 86edcbcd8e6c..90f10e1d8822 100644 --- a/src/material/core/typography/_typography-utils.import.scss +++ b/src/material/core/typography/_typography-utils.import.scss @@ -1,10 +1,9 @@ -@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' hide font-family, font-shorthand, font-size, font-weight, line-height, +letter-spacing, typography-level; +@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-get-type-value, +mat-typography-level; @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; +mat-typography-line-height, mat-typography-letter-spacing; +@forward 'typography-deprecated' as mat-typography-*; +@forward 'typography-utils-deprecated' as mat-typography-*; diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss index e555fe5136db..2d1c14985784 100644 --- a/src/material/core/typography/_typography-utils.scss +++ b/src/material/core/typography/_typography-utils.scss @@ -12,7 +12,7 @@ } // Gets the line height for a level inside a typography config. -@function height($config, $level) { +@function line-height($config, $level) { @return _mat-get-type-value($config, $level, line-height); } @@ -66,10 +66,10 @@ } // Converts a typography level into CSS styles. -@mixin level-to-styles($config, $level) { +@mixin typography-level($config, $level) { $font-size: font-size($config, $level); $font-weight: font-weight($config, $level); - $line-height: height($config, $level); + $line-height: line-height($config, $level); $font-family: font-family($config, $level); @include font-shorthand($font-size, $font-weight, $line-height, $font-family); diff --git a/src/material/core/typography/_typography.import.scss b/src/material/core/typography/_typography.import.scss index 4654c0ff983d..bb4481ab03e8 100644 --- a/src/material/core/typography/_typography.import.scss +++ b/src/material/core/typography/_typography.import.scss @@ -1,12 +1,14 @@ -@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-height, mat-level-to-styles; +@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-line-height, mat-typography-level; @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; +mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-typography-level; @forward 'typography-utils' as mat-typography-* hide mat-typography-font-family, -mat-typography-font-size, mat-typography-font-weight, mat-typography-height, +mat-typography-font-size, mat-typography-font-weight, mat-typography-line-height, mat-typography-letter-spacing; -@forward 'typography' as mat-* hide mat-config, mat-level; -@forward 'typography' as mat-typography-* hide mat-typography-base-typography, +@forward 'typography' as mat-* hide mat-define-typography-config, mat-define-typography-level; +@forward 'typography' as mat-typography-* hide mat-typography-typography-hierarchy, mat-typography-private-typography-is-2014-config, mat-typography-private-typography-is-2018-config, mat-typography-private-typography-to-2014-config, mat-typography-private-typography-to-2018-config; +@forward 'typography-deprecated' as mat-typography-* hide mat-typography-base-typography; +@forward 'typography-deprecated' as mat-* show mat-base-typography; @import 'typography-utils'; diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss index 54ca3044dc3a..a157121fb49d 100644 --- a/src/material/core/typography/_typography.scss +++ b/src/material/core/typography/_typography.scss @@ -3,7 +3,7 @@ @use '../theming/theming'; // Represents a typography level from the Material design spec. -@function level( +@function define-typography-level( $font-size, $line-height: $font-size, $font-weight: 400, @@ -23,22 +23,22 @@ // Defaults come from https://material.io/guidelines/style/typography.html // Note: The spec doesn't mention letter spacing. The values here come from // eyeballing it until it looked exactly like the spec examples. -@function config( +@function define-typography-config( $font-family: 'Roboto, "Helvetica Neue", sans-serif', - $display-4: level(112px, 112px, 300, $letter-spacing: -0.05em), - $display-3: level(56px, 56px, 400, $letter-spacing: -0.02em), - $display-2: level(45px, 48px, 400, $letter-spacing: -0.005em), - $display-1: level(34px, 40px, 400), - $headline: level(24px, 32px, 400), - $title: level(20px, 32px, 500), - $subheading-2: level(16px, 28px, 400), - $subheading-1: level(15px, 24px, 400), - $body-2: level(14px, 24px, 500), - $body-1: level(14px, 20px, 400), - $caption: level(12px, 20px, 400), - $button: level(14px, 14px, 500), + $display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), + $display-3: define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), + $display-2: define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), + $display-1: define-typography-level(34px, 40px, 400), + $headline: define-typography-level(24px, 32px, 400), + $title: define-typography-level(20px, 32px, 500), + $subheading-2: define-typography-level(16px, 28px, 400), + $subheading-1: define-typography-level(15px, 24px, 400), + $body-2: define-typography-level(14px, 24px, 500), + $body-1: define-typography-level(14px, 20px, 400), + $caption: define-typography-level(12px, 20px, 400), + $button: define-typography-level(14px, 14px, 500), // Line-height must be unit-less fraction of the font-size. - $input: level(inherit, 1.125, 400) + $input: define-typography-level(inherit, 1.125, 400) ) { // Declare an initial map with all of the levels. @@ -113,7 +113,7 @@ $non-null-args: map.merge($non-null-args, ($key: $value)); } } - @return config($non-null-args...); + @return define-typography-config($non-null-args...); } @return $config; } @@ -141,7 +141,7 @@ button: map.get($config, button), caption: map.get($config, caption), overline: if(map.get($config, overline), map.get($config, overline), - level(12px, 32px, 500) + define-typography-level(12px, 32px, 500) ) ); } @@ -150,26 +150,26 @@ // Adds the base typography styles, based on a config. /* stylelint-disable-next-line material/theme-mixin-api */ -@mixin base-typography($config-or-theme, $selector: '.mat-typography') { +@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') { $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme)); .mat-h1, .mat-headline, #{$selector} h1 { - @include typography-utils.level-to-styles($config, headline); + @include typography-utils.typography-level($config, headline); margin: 0 0 16px; } .mat-h2, .mat-title, #{$selector} h2 { - @include typography-utils.level-to-styles($config, title); + @include typography-utils.typography-level($config, title); margin: 0 0 16px; } .mat-h3, .mat-subheading-2, #{$selector} h3 { - @include typography-utils.level-to-styles($config, subheading-2); + @include typography-utils.typography-level($config, subheading-2); margin: 0 0 16px; } .mat-h4, .mat-subheading-1, #{$selector} h4 { - @include typography-utils.level-to-styles($config, subheading-1); + @include typography-utils.typography-level($config, subheading-1); margin: 0 0 16px; } @@ -181,7 +181,7 @@ // calc is used here to support css variables calc(#{typography-utils.font-size($config, body-1)} * 0.83), typography-utils.font-weight($config, body-1), - typography-utils.height($config, body-1), + typography-utils.line-height($config, body-1), typography-utils.font-family($config, body-1) ); @@ -193,7 +193,7 @@ // calc is used here to support css variables calc(#{typography-utils.font-size($config, body-1)} * 0.67), typography-utils.font-weight($config, body-1), - typography-utils.height($config, body-1), + typography-utils.line-height($config, body-1), typography-utils.font-family($config, body-1) ); @@ -201,11 +201,11 @@ } .mat-body-strong, .mat-body-2 { - @include typography-utils.level-to-styles($config, body-2); + @include typography-utils.typography-level($config, body-2); } .mat-body, .mat-body-1, #{$selector} { - @include typography-utils.level-to-styles($config, body-1); + @include typography-utils.typography-level($config, body-1); p { margin: 0 0 12px; @@ -213,26 +213,26 @@ } .mat-small, .mat-caption { - @include typography-utils.level-to-styles($config, caption); + @include typography-utils.typography-level($config, caption); } .mat-display-4, #{$selector} .mat-display-4 { - @include typography-utils.level-to-styles($config, display-4); + @include typography-utils.typography-level($config, display-4); margin: 0 0 56px; } .mat-display-3, #{$selector} .mat-display-3 { - @include typography-utils.level-to-styles($config, display-3); + @include typography-utils.typography-level($config, display-3); margin: 0 0 64px; } .mat-display-2, #{$selector} .mat-display-2 { - @include typography-utils.level-to-styles($config, display-2); + @include typography-utils.typography-level($config, display-2); margin: 0 0 64px; } .mat-display-1, #{$selector} .mat-display-1 { - @include typography-utils.level-to-styles($config, display-1); + @include typography-utils.typography-level($config, display-1); margin: 0 0 64px; } } diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 260d55999dcf..1e358df7c2c4 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -18,15 +18,15 @@ $calendar-weekday-table-font-size: 11px !default; @mixin _mat-datepicker-color($palette) { @include date-range-colors( - theming.color($palette, default, $range-fade-amount)); + theming.get-color-from-palette($palette, default, $range-fade-amount)); .mat-calendar-body-selected { - background-color: theming.color($palette); - color: theming.color($palette, default-contrast); + background-color: theming.get-color-from-palette($palette); + color: theming.get-color-from-palette($palette, default-contrast); } .mat-calendar-body-disabled > .mat-calendar-body-selected { - $background: theming.color($palette); + $background: theming.get-color-from-palette($palette); @if (meta.type-of($background) == color) { background-color: color.adjust($background, $alpha: -$selected-fade-amount); @@ -40,7 +40,7 @@ $calendar-weekday-table-font-size: 11px !default; .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 $selected-today-box-shadow-width - theming.color($palette, default-contrast); + theming.get-color-from-palette($palette, default-contrast); } .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover, @@ -48,7 +48,7 @@ $calendar-weekday-table-font-size: 11px !default; .cdk-program-focused .mat-calendar-body-active { & > .mat-calendar-body-cell-content { @include _mat-datepicker-unselected-cell { - background-color: theming.color($palette, 0.3); + background-color: theming.get-color-from-palette($palette, 0.3); } } } @@ -65,10 +65,10 @@ $calendar-weekday-table-font-size: 11px !default; $config: theming.get-color-config($config-or-theme); $foreground: map.get($config, foreground); $background: map.get($config, background); - $disabled-color: theming.color($foreground, disabled-text); + $disabled-color: theming.get-color-from-palette($foreground, disabled-text); .mat-calendar-arrow { - border-top-color: theming.color($foreground, icon); + border-top-color: theming.get-color-from-palette($foreground, icon); } // The prev/next buttons need a bit more specificity to @@ -76,24 +76,24 @@ $calendar-weekday-table-font-size: 11px !default; .mat-datepicker-toggle, .mat-datepicker-content .mat-calendar-next-button, .mat-datepicker-content .mat-calendar-previous-button { - color: theming.color($foreground, icon); + color: theming.get-color-from-palette($foreground, icon); } .mat-calendar-table-header { - color: theming.color($foreground, hint-text); + color: theming.get-color-from-palette($foreground, hint-text); } .mat-calendar-table-header-divider::after { - background: theming.color($foreground, divider); + background: theming.get-color-from-palette($foreground, divider); } .mat-calendar-body-label { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-calendar-body-cell-content, .mat-date-range-input-separator { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); border-color: transparent; } @@ -108,7 +108,7 @@ $calendar-weekday-table-font-size: 11px !default; } .mat-calendar-body-in-preview { - $divider-color: theming.color($foreground, divider); + $divider-color: theming.get-color-from-palette($foreground, divider); @if meta.type-of($divider-color) == color { // The divider color is set under the assumption that it'll be used @@ -125,13 +125,13 @@ $calendar-weekday-table-font-size: 11px !default; @include _mat-datepicker-unselected-cell { // Note: though it's not text, the border is a hint about the fact that this is today's date, // so we use the hint color. - border-color: theming.color($foreground, hint-text); + border-color: theming.get-color-from-palette($foreground, hint-text); } } .mat-calendar-body-disabled > .mat-calendar-body-today { @include _mat-datepicker-unselected-cell { - $color: theming.color($foreground, hint-text); + $color: theming.get-color-from-palette($foreground, hint-text); @if (meta.type-of($color) == color) { border-color: color.adjust($color, $alpha: -$today-fade-amount); @@ -150,8 +150,8 @@ $calendar-weekday-table-font-size: 11px !default; .mat-datepicker-content { @include private.private-theme-elevation(4, $config); - background-color: theming.color($background, card); - color: theming.color($foreground, text); + background-color: theming.get-color-from-palette($background, card); + color: theming.get-color-from-palette($foreground, text); &.mat-accent { @include _mat-datepicker-color(map.get($config, accent)); @@ -167,19 +167,19 @@ $calendar-weekday-table-font-size: 11px !default; } .mat-datepicker-toggle-active { - color: theming.color(map.get($config, primary), text); + color: theming.get-color-from-palette(map.get($config, primary), text); &.mat-accent { - color: theming.color(map.get($config, accent), text); + color: theming.get-color-from-palette(map.get($config, accent), text); } &.mat-warn { - color: theming.color(map.get($config, warn), text); + color: theming.get-color-from-palette(map.get($config, warn), text); } } .mat-date-range-input-inner[disabled] { - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } } diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index f5a9bb0bb218..4a43531298eb 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -13,8 +13,8 @@ .mat-dialog-container { @include private.private-theme-elevation(24, $config); - background: theming.color($background, dialog); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, dialog); + color: theming.get-color-from-palette($foreground, text); } } @@ -22,7 +22,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); .mat-dialog-title { - @include typography-utils.level-to-styles($config, title); + @include typography-utils.typography-level($config, title); } } diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 44676a9b67f0..7db7b043a4fd 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -7,11 +7,11 @@ $foreground: map.get($config, foreground); .mat-divider { - border-top-color: theming.color($foreground, divider); + border-top-color: theming.get-color-from-palette($foreground, divider); } .mat-divider-vertical { - border-right-color: theming.color($foreground, divider); + border-right-color: theming.get-color-from-palette($foreground, divider); } } diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 638caff288bd..d92fdcd948bb 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -15,16 +15,16 @@ .mat-expansion-panel { @include private.private-theme-overridable-elevation(2, $config); - background: theming.color($background, card); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, card); + color: theming.get-color-from-palette($foreground, text); } .mat-action-row { - border-top-color: theming.color($foreground, divider); + border-top-color: theming.get-color-from-palette($foreground, divider); } @include expansion-mixins.private-expansion-focus { - background: theming.color($background, hover); + background: theming.get-color-from-palette($background, hover); } // Disable the hover on touch devices since it can appear like it is stuck. We can't use @@ -32,21 +32,21 @@ @media (hover: none) { .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true']) .mat-expansion-panel-header:hover { - background: theming.color($background, card); + background: theming.get-color-from-palette($background, card); } } .mat-expansion-panel-header-title { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-expansion-panel-header-description, .mat-expansion-indicator::after { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-expansion-panel-header[aria-disabled='true'] { - color: theming.color($foreground, disabled-button); + color: theming.get-color-from-palette($foreground, disabled-button); .mat-expansion-panel-header-title, .mat-expansion-panel-header-description { @@ -67,7 +67,7 @@ } .mat-expansion-panel-content { - @include typography-utils.level-to-styles($config, body-1); + @include typography-utils.typography-level($config, body-1); } } diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss index 097f4d1d6bf0..3e9d1fc477d8 100644 --- a/src/material/form-field/_form-field-fill-theme.scss +++ b/src/material/form-field/_form-field-fill-theme.scss @@ -13,10 +13,13 @@ $foreground: map.get($config, foreground); $is-dark-theme: map.get($config, is-dark); - $fill-background: theming.color($foreground, base, if($is-dark-theme, 0.1, 0.04)); - $fill-disabled-background: theming.color($foreground, base, if($is-dark-theme, 0.05, 0.02)); - $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.5, 0.42)); - $label-disabled-color: theming.color($foreground, disabled-text); + $fill-background: + theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04)); + $fill-disabled-background: + theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02)); + $underline-color: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42)); + $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text); .mat-form-field-appearance-fill { .mat-form-field-flex { @@ -62,7 +65,7 @@ $fill-dedupe: 0; $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); // The amount to scale the font for the floating label and subscript. $subscript-font-scale: 0.75; // The padding on top of the infix. diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 0b9364d9cccf..211dc0ec9de5 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/src/material/form-field/_form-field-legacy-theme.scss @@ -13,8 +13,9 @@ $foreground: map.get($config, foreground); $is-dark-theme: map.get($config, is-dark); - $label-color: theming.color($foreground, secondary-text); - $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); + $label-color: theming.get-color-from-palette($foreground, secondary-text); + $underline-color: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42)); .mat-form-field-appearance-legacy { .mat-form-field-label { @@ -74,7 +75,7 @@ $legacy-dedupe: 0; $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); // The amount to scale the font for the floating label and subscript. $subscript-font-scale: 0.75; // The amount of space between the top of the line and the top of the actual text diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss index e25a12380c6a..a77dc9577940 100644 --- a/src/material/form-field/_form-field-outline-theme.scss +++ b/src/material/form-field/_form-field-outline-theme.scss @@ -16,13 +16,16 @@ $foreground: map.get($config, foreground); $is-dark-theme: map.get($config, is-dark); - $label-disabled-color: theming.color($foreground, disabled-text); - $outline-color: theming.color($foreground, divider, if($is-dark-theme, 0.3, 0.12)); - $outline-color-hover: theming.color($foreground, divider, if($is-dark-theme, 1, 0.87)); - $outline-color-primary: theming.color($primary); - $outline-color-accent: theming.color($accent); - $outline-color-warn: theming.color($warn); - $outline-color-disabled: theming.color($foreground, divider, if($is-dark-theme, 0.15, 0.06)); + $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text); + $outline-color: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12)); + $outline-color-hover: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87)); + $outline-color-primary: theming.get-color-from-palette($primary); + $outline-color-accent: theming.get-color-from-palette($accent); + $outline-color-warn: theming.get-color-from-palette($warn); + $outline-color-disabled: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06)); .mat-form-field-appearance-outline { .mat-form-field-outline { @@ -85,7 +88,7 @@ $outline-dedupe: 0; $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); // The amount to scale the font for the floating label and subscript. $subscript-font-scale: 0.75; // The padding above and below the infix. diff --git a/src/material/form-field/_form-field-standard-theme.scss b/src/material/form-field/_form-field-standard-theme.scss index a96685bd8df1..cb55824709d7 100644 --- a/src/material/form-field/_form-field-standard-theme.scss +++ b/src/material/form-field/_form-field-standard-theme.scss @@ -11,8 +11,8 @@ $config: theming.get-color-config($config-or-theme); $foreground: map.get($config, foreground); $is-dark-theme: map.get($config, is-dark); - - $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); + $underline-color: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42)); .mat-form-field-appearance-standard { .mat-form-field-underline { diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 8f4eaa84cb1a..4617b6156f6b 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -21,15 +21,17 @@ $is-dark-theme: map.get($config, is-dark); // Label colors. Required is used for the `*` star shown in the label. - $label-color: theming.color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6)); - $focused-label-color: theming.color($primary, text); - $required-label-color: theming.color($accent, text); + $label-color: + theming.get-color-from-palette($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6)); + $focused-label-color: theming.get-color-from-palette($primary, text); + $required-label-color: theming.get-color-from-palette($accent, text); // Underline colors. - $underline-color-base: theming.color($foreground, divider, if($is-dark-theme, 1, 0.87)); - $underline-color-accent: theming.color($accent, text); - $underline-color-warn: theming.color($warn, text); - $underline-focused-color: theming.color($primary, text); + $underline-color-base: + theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87)); + $underline-color-accent: theming.get-color-from-palette($accent, text); + $underline-color-warn: theming.get-color-from-palette($warn, text); + $underline-focused-color: theming.get-color-from-palette($primary, text); .mat-form-field-label { color: $label-color; @@ -135,7 +137,7 @@ $dedupe: 0; $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); // The amount to scale the font for the floating label and subscript. $subscript-font-scale: 0.75; @@ -161,7 +163,7 @@ $dedupe: 0; $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale; .mat-form-field { - @include typography-utils.level-to-styles($config, input); + @include typography-utils.typography-level($config, input); } .mat-form-field-wrapper { diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index 83eb97750390..b70c78374fb4 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -11,15 +11,15 @@ .mat-icon { &.mat-primary { - color: theming.color($primary, text); + color: theming.get-color-from-palette($primary, text); } &.mat-accent { - color: theming.color($accent, text); + color: theming.get-color-from-palette($accent, text); } &.mat-warn { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } } } diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index dd8c1866f47f..1e90686e2fb9 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -15,16 +15,16 @@ $foreground: map.get($config, foreground); .mat-form-field-type-mat-native-select .mat-form-field-infix::after { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-input-element:disabled, .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after { - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } .mat-input-element { - caret-color: theming.color($primary, text); + caret-color: theming.get-color-from-palette($primary, text); @include vendor-prefixes.input-placeholder { color: form-common.private-control-placeholder-color($config); @@ -47,16 +47,16 @@ } .mat-form-field.mat-accent .mat-input-element { - caret-color: theming.color($accent, text); + caret-color: theming.get-color-from-palette($accent, text); } .mat-form-field.mat-warn .mat-input-element, .mat-form-field-invalid .mat-input-element { - caret-color: theming.color($warn, text); + caret-color: theming.get-color-from-palette($warn, text); } .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } } @@ -64,7 +64,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); // The amount of space between the top of the line and the top of the actual text // (as a fraction of the font-size). diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 6360e624e330..aed76e8c0280 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -13,33 +13,33 @@ .mat-list-base { .mat-list-item { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-list-option { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-subheader { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } } .mat-list-item-disabled { - background-color: theming.color($background, disabled-list-option); + background-color: theming.get-color-from-palette($background, disabled-list-option); } .mat-list-option, .mat-nav-list .mat-list-item, .mat-action-list .mat-list-item { &:hover, &:focus { - background: theming.color($background, 'hover'); + background: theming.get-color-from-palette($background, 'hover'); } } .mat-list-single-selected-option { &, &:hover, &:focus { - background: theming.color($background, hover, 0.12); + background: theming.get-color-from-palette($background, hover, 0.12); } } } diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index f815dd533da5..2b7479bdfb59 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -13,25 +13,25 @@ .mat-menu-panel { @include private.private-theme-overridable-elevation(4, $config); - background: theming.color($background, 'card'); + background: theming.get-color-from-palette($background, 'card'); } .mat-menu-item { background: transparent; - color: theming.color($foreground, 'text'); + color: theming.get-color-from-palette($foreground, 'text'); &[disabled] { &, &::after, .mat-icon-no-color { - color: theming.color($foreground, 'disabled'); + color: theming.get-color-from-palette($foreground, 'disabled'); } } } .mat-menu-item .mat-icon-no-color, .mat-menu-item-submenu-trigger::after { - color: theming.color($foreground, 'icon'); + color: theming.get-color-from-palette($foreground, 'icon'); } .mat-menu-item:hover, @@ -39,7 +39,7 @@ .mat-menu-item.cdk-keyboard-focused, .mat-menu-item-highlighted { &:not([disabled]) { - background: theming.color($background, 'hover'); + background: theming.get-color-from-palette($background, 'hover'); } } } diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 9bed1e020b80..9005a4d0e96d 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -12,23 +12,23 @@ $background: map.get($config, background); .mat-paginator { - background: theming.color($background, 'card'); + background: theming.get-color-from-palette($background, 'card'); } .mat-paginator, .mat-paginator-page-size .mat-select-trigger { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-paginator-decrement, .mat-paginator-increment { - border-top: 2px solid theming.color($foreground, 'icon'); - border-right: 2px solid theming.color($foreground, 'icon'); + border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); + border-right: 2px solid theming.get-color-from-palette($foreground, 'icon'); } .mat-paginator-first, .mat-paginator-last { - border-top: 2px solid theming.color($foreground, 'icon'); + border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); } .mat-icon-button[disabled] { @@ -36,7 +36,7 @@ .mat-paginator-increment, .mat-paginator-first, .mat-paginator-last { - border-color: theming.color($foreground, 'disabled'); + border-color: theming.get-color-from-palette($foreground, 'disabled'); } } } diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 6d5a6e655674..6404b8aa59ba 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -7,10 +7,10 @@ // Approximates the correct buffer color by using a mix between the theme color // and the theme's background color. @function _get-buffer-color($theme, $background) { - $theme-color: theming.color($theme); + $theme-color: theming.get-color-from-palette($theme); // Return fallback color if the theme uses variables to define colors. @if (meta.type-of($theme-color) != 'color' or meta.type-of($background) != 'color') { - @return theming.color($theme, lighter); + @return theming.get-color-from-palette($theme, lighter); } @return color.mix($theme-color, $background, $weight: 25%); } @@ -31,7 +31,7 @@ } .mat-progress-bar-fill::after { - background-color: theming.color($primary); + background-color: theming.get-color-from-palette($primary); } .mat-progress-bar.mat-accent { @@ -44,7 +44,7 @@ } .mat-progress-bar-fill::after { - background-color: theming.color($accent); + background-color: theming.get-color-from-palette($accent); } } @@ -58,7 +58,7 @@ } .mat-progress-bar-fill::after { - background-color: theming.color($warn); + background-color: theming.get-color-from-palette($warn); } } } diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index 752668cd6cf3..b3f7f917c3f3 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -10,15 +10,15 @@ .mat-progress-spinner, .mat-spinner { circle { - stroke: theming.color($primary); + stroke: theming.get-color-from-palette($primary); } &.mat-accent circle { - stroke: theming.color($accent); + stroke: theming.get-color-from-palette($accent); } &.mat-warn circle { - stroke: theming.color($warn); + stroke: theming.get-color-from-palette($warn); } } } diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index a990883c328d..8198916ccfb0 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -6,14 +6,14 @@ @mixin _mat-radio-color($palette) { &.mat-radio-checked .mat-radio-outer-circle { - border-color: theming.color($palette); + border-color: theming.get-color-from-palette($palette); } .mat-radio-inner-circle, .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), &.mat-radio-checked .mat-radio-persistent-ripple, &:active .mat-radio-persistent-ripple { - background-color: theming.color($palette); + background-color: theming.get-color-from-palette($palette); } } @@ -26,7 +26,7 @@ $foreground: map.get($config, foreground); .mat-radio-outer-circle { - border-color: theming.color($foreground, secondary-text); + border-color: theming.get-color-from-palette($foreground, secondary-text); } .mat-radio-button { @@ -48,16 +48,16 @@ &.mat-radio-disabled { &.mat-radio-checked .mat-radio-outer-circle, .mat-radio-outer-circle { - border-color: theming.color($foreground, disabled); + border-color: theming.get-color-from-palette($foreground, disabled); } .mat-radio-ripple .mat-ripple-element, .mat-radio-inner-circle { - background-color: theming.color($foreground, disabled); + background-color: theming.get-color-from-palette($foreground, disabled); } .mat-radio-label-content { - color: theming.color($foreground, disabled); + color: theming.get-color-from-palette($foreground, disabled); } } diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index c4cd17c0a28e..08c755c9fbac 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -16,7 +16,7 @@ $warn: map.get($config, warn); .mat-select-value { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-select-placeholder { @@ -24,43 +24,43 @@ } .mat-select-disabled .mat-select-value { - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } .mat-select-arrow { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-select-panel { - background: theming.color($background, card); + background: theming.get-color-from-palette($background, card); @include private.private-theme-overridable-elevation(4, $config); .mat-option.mat-selected:not(.mat-option-multiple) { - background: theming.color($background, hover, 0.12); + background: theming.get-color-from-palette($background, hover, 0.12); } } .mat-form-field { &.mat-focused { &.mat-primary .mat-select-arrow { - color: theming.color($primary, text); + color: theming.get-color-from-palette($primary, text); } &.mat-accent .mat-select-arrow { - color: theming.color($accent, text); + color: theming.get-color-from-palette($accent, text); } &.mat-warn .mat-select-arrow { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } } .mat-select.mat-select-invalid .mat-select-arrow { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } .mat-select.mat-select-disabled .mat-select-arrow { - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } } } @@ -69,7 +69,7 @@ $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); // The unit-less line-height from the font config. - $line-height: typography-utils.height($config, input); + $line-height: typography-utils.line-height($config, input); .mat-select { font-family: typography-utils.font-family($config); diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index bd67b7da7b07..d11653d68950 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -13,19 +13,19 @@ $background: map.get($config, background); $foreground: map.get($config, foreground); - $drawer-background-color: theming.color($background, dialog); - $drawer-container-background-color: theming.color($background, background); - $drawer-push-background-color: theming.color($background, dialog); - $drawer-side-border: solid 1px theming.color($foreground, divider); + $drawer-background-color: theming.get-color-from-palette($background, dialog); + $drawer-container-background-color: theming.get-color-from-palette($background, background); + $drawer-push-background-color: theming.get-color-from-palette($background, dialog); + $drawer-side-border: solid 1px theming.get-color-from-palette($foreground, divider); .mat-drawer-container { background-color: $drawer-container-background-color; - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-drawer { background-color: $drawer-background-color; - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); &.mat-drawer-push { background-color: $drawer-push-background-color; @@ -59,7 +59,7 @@ .mat-drawer-backdrop.mat-drawer-shown { $opacity: 0.6; - $backdrop-color: theming.color($background, card, $opacity); + $backdrop-color: theming.get-color-from-palette($background, card, $opacity); @if (meta.type-of($backdrop-color) == color) { // We use invert() here to have the darken the background color expected to be used. If the diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index de114381f808..e37a81ef93e8 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -8,19 +8,19 @@ @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) { &.mat-checked { .mat-slide-toggle-thumb { - background-color: theming.color($palette, $thumb-checked-hue); + background-color: theming.get-color-from-palette($palette, $thumb-checked-hue); } .mat-slide-toggle-bar { // Opacity is determined from the specs for the selection controls. // See: https://material.io/design/components/selection-controls.html#specs - background-color: theming.color($palette, $thumb-checked-hue, 0.54); + background-color: theming.get-color-from-palette($palette, $thumb-checked-hue, 0.54); } .mat-ripple-element { // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically // based on the type of interaction with the slide-toggle (e.g. for hover, focus) - background-color: theming.color($palette, $thumb-checked-hue); + background-color: theming.get-color-from-palette($palette, $thumb-checked-hue); } } } @@ -43,8 +43,8 @@ $thumb-unchecked-hue: if($is-dark, 400, 50); $thumb-checked-hue: default; - $bar-unchecked-color: theming.color($foreground, disabled); - $ripple-unchecked-color: theming.color($foreground, base); + $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled); + $ripple-unchecked-color: theming.get-color-from-palette($foreground, base); .mat-slide-toggle { @include _mat-slide-toggle-checked($accent, $thumb-checked-hue); @@ -66,7 +66,7 @@ .mat-slide-toggle-thumb { @include private.private-theme-elevation(1, $config); - background-color: theming.color(palette.$grey, $thumb-unchecked-hue); + background-color: theming.get-color-from-palette(palette.$grey-palette, $thumb-unchecked-hue); } .mat-slide-toggle-bar { diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index fa31421e50f1..4ddcde651473 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -9,16 +9,16 @@ .mat-slider-track-fill, .mat-slider-thumb, .mat-slider-thumb-label { - background-color: theming.color($palette); + background-color: theming.get-color-from-palette($palette); } .mat-slider-thumb-label-text { - color: theming.color($palette, default-contrast); + color: theming.get-color-from-palette($palette, default-contrast); } .mat-slider-focus-ring { $opacity: 0.2; - $color: theming.color($palette, default, $opacity); + $color: theming.get-color-from-palette($palette, default, $opacity); background-color: $color; // `mat-color` uses `rgba` for the opacity which won't work with @@ -37,13 +37,16 @@ $background: map.get($config, background); $foreground: map.get($config, foreground); - $mat-slider-off-color: theming.color($foreground, slider-off); - $mat-slider-off-focused-color: theming.color($foreground, slider-off-active); - $mat-slider-disabled-color: theming.color($foreground, slider-off); - $mat-slider-labeled-min-value-thumb-color: theming.color($foreground, slider-min); - $mat-slider-labeled-min-value-thumb-label-color: theming.color($foreground, slider-off); + $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off); + $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active); + $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off); + $mat-slider-labeled-min-value-thumb-color: + theming.get-color-from-palette($foreground, slider-min); + $mat-slider-labeled-min-value-thumb-label-color: + theming.get-color-from-palette($foreground, slider-off); $mat-slider-tick-opacity: 0.7; - $mat-slider-tick-color: theming.color($foreground, base, $mat-slider-tick-opacity); + $mat-slider-tick-color: + theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity); $mat-slider-tick-size: 2px; .mat-slider-track-background { @@ -86,7 +89,7 @@ .mat-slider-min-value { .mat-slider-focus-ring { $opacity: 0.12; - $color: theming.color($foreground, base, $opacity); + $color: theming.get-color-from-palette($foreground, base, $opacity); background-color: $color; // `mat-color` uses `rgba` for the opacity which won't work with diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index 0ac50a8531a1..3b541cfd66bc 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -14,13 +14,13 @@ // Use the primary text on the dark theme, even though the lighter one uses // a secondary, because the contrast on the light primary text is poor. color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text); - background: if($is-dark-theme, map.get(palette.$grey, 50), #323232); + background: if($is-dark-theme, map.get(palette.$grey-palette, 50), #323232); @include private.private-theme-elevation(6, $config); } .mat-simple-snackbar-action { - color: if($is-dark-theme, inherit, theming.color($accent, text)); + color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text)); } } diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index 1cb5d157b7d5..48a077b2a723 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -9,8 +9,8 @@ $foreground: map.get($config, foreground); .mat-sort-header-arrow { - $table-background: theming.color($background, 'card'); - $text-color: theming.color($foreground, secondary-text); + $table-background: theming.get-color-from-palette($background, 'card'); + $text-color: theming.get-color-from-palette($foreground, secondary-text); // Because the arrow is made up of multiple elements that are stacked on top of each other, // we can't use the semi-transparent color from the theme directly. If the value is a color diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 2cafa340579e..17e998a04cc9 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -18,7 +18,7 @@ &.cdk-keyboard-focused, &.cdk-program-focused, &:hover { - background-color: theming.color($background, hover); + background-color: theming.get-color-from-palette($background, hover); } // On touch devices the :hover state will linger on the element after a tap. @@ -34,75 +34,75 @@ .mat-step-optional { // TODO(josephperrott): Update to using a corrected disabled-text contrast // instead of secondary-text. - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-step-icon { // TODO(josephperrott): Update to using a corrected disabled-text contrast // instead of secondary-text. - background-color: theming.color($foreground, secondary-text); - color: theming.color($primary, default-contrast); + background-color: theming.get-color-from-palette($foreground, secondary-text); + color: theming.get-color-from-palette($primary, default-contrast); } .mat-step-icon-selected, .mat-step-icon-state-done, .mat-step-icon-state-edit { - background-color: theming.color($primary); - color: theming.color($primary, default-contrast); + background-color: theming.get-color-from-palette($primary); + color: theming.get-color-from-palette($primary, default-contrast); } &.mat-accent { .mat-step-icon { - color: theming.color($accent, default-contrast); + color: theming.get-color-from-palette($accent, default-contrast); } .mat-step-icon-selected, .mat-step-icon-state-done, .mat-step-icon-state-edit { - background-color: theming.color($accent); - color: theming.color($accent, default-contrast); + background-color: theming.get-color-from-palette($accent); + color: theming.get-color-from-palette($accent, default-contrast); } } &.mat-warn { .mat-step-icon { - color: theming.color($warn, default-contrast); + color: theming.get-color-from-palette($warn, default-contrast); } .mat-step-icon-selected, .mat-step-icon-state-done, .mat-step-icon-state-edit { - background-color: theming.color($warn); - color: theming.color($warn, default-contrast); + background-color: theming.get-color-from-palette($warn); + color: theming.get-color-from-palette($warn, default-contrast); } } .mat-step-icon-state-error { background-color: transparent; - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } .mat-step-label.mat-step-label-active { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } .mat-step-label.mat-step-label-error { - color: theming.color($warn, text); + color: theming.get-color-from-palette($warn, text); } } .mat-stepper-horizontal, .mat-stepper-vertical { - background-color: theming.color($background, card); + background-color: theming.get-color-from-palette($background, card); } .mat-stepper-vertical-line::before { - border-left-color: theming.color($foreground, divider); + border-left-color: theming.get-color-from-palette($foreground, divider); } .mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after, .mat-stepper-horizontal-line { - border-top-color: theming.color($foreground, divider); + border-top-color: theming.get-color-from-palette($foreground, divider); } } diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index cece92041602..d38ba5f71f74 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -10,7 +10,7 @@ $foreground: map.get($config, foreground); .mat-table { - background: theming.color($background, 'card'); + background: theming.get-color-from-palette($background, 'card'); } .mat-table thead, .mat-table tbody, .mat-table tfoot, @@ -22,15 +22,15 @@ mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell { - border-bottom-color: theming.color($foreground, divider); + border-bottom-color: theming.get-color-from-palette($foreground, divider); } .mat-header-cell { - color: theming.color($foreground, secondary-text); + color: theming.get-color-from-palette($foreground, secondary-text); } .mat-cell, .mat-footer-cell { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } } diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index ceaeda629cda..87ec81077d39 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -11,7 +11,7 @@ $warn: map.get($config, warn); $background: map.get($config, background); $foreground: map.get($config, foreground); - $header-border: 1px solid theming.color($foreground, divider); + $header-border: 1px solid theming.get-color-from-palette($foreground, divider); .mat-tab-nav-bar, .mat-tab-header { @@ -27,19 +27,19 @@ } .mat-tab-label, .mat-tab-link { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); &.mat-tab-disabled { - color: theming.color($foreground, disabled-text); + color: theming.get-color-from-palette($foreground, disabled-text); } } .mat-tab-header-pagination-chevron { - border-color: theming.color($foreground, text); + border-color: theming.get-color-from-palette($foreground, text); } .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { - border-color: theming.color($foreground, disabled-text); + border-color: theming.get-color-from-palette($foreground, disabled-text); } // Remove header border when there is a background color @@ -83,7 +83,7 @@ @mixin _mat-ink-bar($color, $hue: default) { .mat-ink-bar { - background-color: theming.color($color, $hue); + background-color: theming.get-color-from-palette($color, $hue); } } @@ -93,7 +93,7 @@ &.cdk-keyboard-focused, &.cdk-program-focused { &:not(.mat-tab-disabled) { - background-color: theming.color($tab-focus-color, lighter, 0.3); + background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3); } } } @@ -105,15 +105,15 @@ // Set background color for the tab group > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination { - background-color: theming.color($background-color); + background-color: theming.get-color-from-palette($background-color); } // Set labels to contrast against background > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link { - color: theming.color($background-color, default-contrast); + color: theming.get-color-from-palette($background-color, default-contrast); &.mat-tab-disabled { - color: theming.color($background-color, default-contrast, 0.4); + color: theming.get-color-from-palette($background-color, default-contrast, 0.4); } } @@ -121,18 +121,18 @@ > .mat-tab-header-pagination .mat-tab-header-pagination-chevron, > .mat-tab-links .mat-focus-indicator::before, > .mat-tab-header .mat-focus-indicator::before { - border-color: theming.color($background-color, default-contrast); + border-color: theming.get-color-from-palette($background-color, default-contrast); } > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { - border-color: theming.color($background-color, default-contrast, 0.4); + border-color: theming.get-color-from-palette($background-color, default-contrast, 0.4); } // Set ripples color to be the contrast color of the new background. Otherwise the ripple // color will be based on the app background color. > .mat-tab-header .mat-ripple-element, > .mat-tab-link-container .mat-ripple-element { - background-color: theming.color($background-color, default-contrast, 0.12); + background-color: theming.get-color-from-palette($background-color, default-contrast, 0.12); } } diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index dc5e1b7a3e17..e2a039f4a115 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -17,8 +17,8 @@ } @mixin _mat-toolbar-color($palette) { - background: theming.color($palette); - color: theming.color($palette, default-contrast); + background: theming.get-color-from-palette($palette); + color: theming.get-color-from-palette($palette, default-contrast); } @mixin _mat-toolbar-form-field-overrides { @@ -50,8 +50,8 @@ $foreground: map.get($config, foreground); .mat-toolbar { - background: theming.color($background, app-bar); - color: theming.color($foreground, text); + background: theming.get-color-from-palette($background, app-bar); + color: theming.get-color-from-palette($foreground, text); &.mat-primary { @include _mat-toolbar-color($primary); @@ -79,7 +79,7 @@ .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 { - @include typography-utils.level-to-styles($config, title); + @include typography-utils.typography-level($config, title); margin: 0; } } diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index be6bffc2c83c..92036addd3fe 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -18,7 +18,7 @@ $handset-vertical-padding: $background: map.get($config, background); .mat-tooltip { - background: theming.color($background, tooltip, 0.9); + background: theming.get-color-from-palette($background, tooltip, 0.9); } } diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 82186915fa27..2c6cb6c6e1ca 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -12,12 +12,12 @@ $foreground: map.get($config, foreground); .mat-tree { - background: theming.color($background, 'card'); + background: theming.get-color-from-palette($background, 'card'); } .mat-tree-node, .mat-nested-tree-node { - color: theming.color($foreground, text); + color: theming.get-color-from-palette($foreground, text); } } diff --git a/src/universal-app/BUILD.bazel b/src/universal-app/BUILD.bazel index e6f4e4b7266f..3cd7fb6710a9 100644 --- a/src/universal-app/BUILD.bazel +++ b/src/universal-app/BUILD.bazel @@ -46,6 +46,7 @@ sass_binary( "external/npm/node_modules", ], deps = [ + "//src/material:theming_bundle", "//src/material-experimental/mdc-theming:all_themes", "//src/material-experimental/mdc-typography:all_typography", "//src/material/core:theming_scss_lib", diff --git a/src/universal-app/theme.scss b/src/universal-app/theme.scss index f2ded56bfbe1..0ba511b6afd0 100644 --- a/src/universal-app/theme.scss +++ b/src/universal-app/theme.scss @@ -1,23 +1,20 @@ -@use '../material/core/theming/all-theme' as theming-all-theme; -@use '../material-experimental/mdc-theming/all-theme'; -@use '../material-experimental/mdc-typography/all-typography'; -@use '../material/core/core'; -@use '../material/core/theming/palette'; -@use '../material/core/theming/theming'; +@use '../material' as mat; +@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme; +@use '../material-experimental/mdc-typography/all-typography' as mdc-all-typography; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** -@include core.core(); -@include all-typography.angular-material-mdc-typography(); +@include mat.core(); +@include mdc-all-typography.all-mdc-component-typographies(); // Define the default theme (same as the example above). -$candy-app-primary: theming.palette(palette.$indigo); -$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400); -$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent); +$candy-app-primary: mat.define-palette(mat.$indigo-palette); +$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent); // Include the default theme styles. -@include theming-all-theme.angular-material-theme($candy-app-theme); -@include all-theme.angular-material-mdc-theme($candy-app-theme); +@include mat.all-component-themes($candy-app-theme); +@include mdc-all-theme.all-mdc-component-themes($candy-app-theme); diff --git a/tools/release/release-output/output-validations.ts b/tools/release/release-output/output-validations.ts index 752a296c00cb..5a73f1bcc62a 100644 --- a/tools/release/release-output/output-validations.ts +++ b/tools/release/release-output/output-validations.ts @@ -160,6 +160,7 @@ export function checkPackageJsonMigrations( export function checkMaterialPackage(packagePath: string): string[] { const prebuiltThemesPath = join(packagePath, 'prebuilt-themes'); const themingFilePath = join(packagePath, '_theming.scss'); + const newThemingFilePath = join(packagePath, '_index.scss'); const failures: string[] = []; if (glob('*.css', {cwd: prebuiltThemesPath}).length === 0) { @@ -167,7 +168,11 @@ export function checkMaterialPackage(packagePath: string): string[] { } if (!existsSync(themingFilePath)) { - failures.push('The theming bundle could not be found.'); + failures.push('Legacy theming bundle could not be found.'); + } + + if (!existsSync(newThemingFilePath)) { + failures.push('New theming bundle could not be found.'); } return failures; @@ -178,9 +183,16 @@ export function checkMaterialPackage(packagePath: string): string[] { */ export function checkCdkPackage(packagePath: string): string[] { const prebuiltFiles = glob('*-prebuilt.css', {cwd: packagePath}).map(path => basename(path)); - return ['overlay', 'a11y', 'text-field'] + const newApiFilePath = join(packagePath, '_index.scss'); + const failures = ['overlay', 'a11y', 'text-field'] .filter(name => !prebuiltFiles.includes(`${name}-prebuilt.css`)) .map(name => `Could not find the prebuilt ${name} styles.`); + + if (!existsSync(newApiFilePath)) { + failures.push('New Sass API bundle could not be found.'); + } + + return failures; } /**