From 2b7ddd08d850d51bcb07baf82ec1f7495eea1db1 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 17 Feb 2021 14:04:56 -0800 Subject: [PATCH] refactor(material/theming): normalize config in all typography mixins for mdc components This is split off of #21778 which covers non-MDC conmponents as well --- src/dev-app/theme.scss | 82 ++++++++-------- .../mdc-autocomplete/_autocomplete-theme.scss | 3 +- .../mdc-button/_button-theme.scss | 7 +- .../mdc-card/_card-theme.scss | 3 +- .../mdc-checkbox/_checkbox-theme.scss | 3 +- .../mdc-chips/_chips-theme.scss | 3 +- .../mdc-core/option/_optgroup-theme.scss | 4 +- .../mdc-core/option/_option-theme.scss | 3 +- .../mdc-dialog/_dialog-theme.scss | 3 +- .../mdc-form-field/_form-field-theme.scss | 3 +- .../mdc-helpers/_mdc-helpers.scss | 93 ++++--------------- .../mdc-input/_input-theme.scss | 3 +- .../mdc-list/_list-theme.scss | 3 +- .../mdc-menu/_menu-theme.scss | 3 +- .../mdc-paginator/_paginator-theme.scss | 3 +- .../mdc-radio/_radio-theme.scss | 3 +- .../mdc-select/_select-theme.scss | 3 +- .../mdc-slide-toggle/_slide-toggle-theme.scss | 4 +- .../mdc-slider/_slider-theme.scss | 3 +- .../mdc-snack-bar/_snack-bar-theme.scss | 3 +- .../mdc-table/_table-theme.scss | 3 +- .../mdc-tabs/_tabs-theme.scss | 3 +- .../mdc-theming/prebuilt/indigo-pink.scss | 16 ++-- .../mdc-tooltip/_tooltip-theme.scss | 2 +- src/material/core/typography/_typography.scss | 47 +++++++--- tools/stylelint/theme-mixin-api.ts | 4 +- 26 files changed, 147 insertions(+), 163 deletions(-) diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index 4d72afaf51dd..76f4b95e7893 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -15,52 +15,42 @@ // Plus imports for other components in your app. -// Include the common styles for Angular Material. We include this here so that you only -// have to load a single css file for Angular Material in your app. -// **Be sure that you only ever include this mixin once!** -@include mat-core(); -@include angular-material-mdc-typography(mat-mdc-typography-config()); -@include mat-popover-edit-typography(mat-typography-config()); - -// Include base styles for strong focus indicators. -.demo-strong-focus { - @include mat-strong-focus-indicators(); - @include mat-mdc-strong-focus-indicators(); -} - -// Define the default theme (same as the example above). +// Define the default (light) theme. $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-theme: mat-light-theme(( - color: ( - primary: $candy-app-primary, - accent: $candy-app-accent - ) + // Define the default colors for our app. + color: ( + primary: $candy-app-primary, + accent: $candy-app-accent + ), + // Define the default typography for our app. + // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle + // 2018 configs. + typography: mat-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 mat-core($candy-app-theme); + // Include the default theme styles. @include angular-material-theme($candy-app-theme); @include angular-material-mdc-theme($candy-app-theme); @include mat-column-resize-theme($candy-app-theme); @include mat-popover-edit-theme($candy-app-theme); - // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`. @include mat-mdc-slider-theme($candy-app-theme); -// Define an alternate dark theme. -$dark-primary: mat-palette($mat-blue-grey); -$dark-accent: mat-palette($mat-amber, A200, A100, A400); -$dark-warn: mat-palette($mat-deep-orange); -$dark-theme: mat-dark-theme(( - color: ( - primary: $dark-primary, - accent: $dark-accent, - warn: $dark-warn - ) -)); - -// Include the default theme for focus indicators. .demo-strong-focus { + // Include base styles for strong focus indicators. + @include mat-strong-focus-indicators(); + @include mat-mdc-strong-focus-indicators(); + + // Include the default theme for focus indicators. @include mat-strong-focus-indicators-theme($candy-app-theme); @include mat-mdc-strong-focus-indicators-theme($candy-app-theme); } @@ -70,17 +60,25 @@ $dark-theme: mat-dark-theme(( // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the // default theme. .demo-unicorn-dark-theme { - @include angular-material-color($dark-theme); - @include angular-material-mdc-color($dark-theme); - @include mat-column-resize-color($dark-theme); - @include mat-popover-edit-color($dark-theme); - @include mat-mdc-slider-color($dark-theme); -} + // Create the color palettes used in our dark theme. + $dark-primary: mat-palette($mat-blue-grey); + $dark-accent: mat-palette($mat-amber, A200, A100, A400); + $dark-warn: mat-palette($mat-deep-orange); + $dark-colors: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); -// Include the dark theme for focus indicators. -.demo-unicorn-dark-theme.demo-strong-focus { - @include mat-strong-focus-indicators-color($dark-theme); - @include mat-mdc-strong-focus-indicators-color($dark-theme); + // Include the dark theme color styles. + @include angular-material-color($dark-colors); + @include angular-material-mdc-color($dark-colors); + @include mat-column-resize-color($dark-colors); + @include mat-popover-edit-color($dark-colors); + // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`. + @include mat-mdc-slider-color($dark-colors); + + // Include the dark theme colors for focus indicators. + .demo-strong-focus { + @include mat-strong-focus-indicators-color($dark-colors); + @include mat-mdc-strong-focus-indicators-color($dark-colors); + } } // Create classes for all density scales which are supported by all MDC-based components. diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss index 16c706fbac83..1bb882d9b5ca 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss +++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss @@ -1,6 +1,7 @@ @import '@material/menu-surface/mixins.import'; @import '@material/list/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-autocomplete-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -11,7 +12,7 @@ } @mixin mat-mdc-autocomplete-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-menu-surface-core-styles($mat-typography-styles-query); diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 8a45866656eb..d0c6474d9967 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -5,6 +5,7 @@ @import '@material/icon-button/mixins.import'; @import '@material/theme/mixins.import'; @import '../../material/core/ripple/ripple'; +@import '../../material/core/typography/typography'; @import '../mdc-helpers/mdc-helpers'; // Selector for the element that has a background color and opacity applied to its ::before and @@ -167,7 +168,7 @@ $mat-button-state-target: '.mdc-button__ripple'; } @mixin mat-mdc-button-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-button-without-ripple($query: $mat-typography-styles-query); } @@ -253,7 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple'; } @mixin mat-mdc-fab-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-fab-without-ripple($query: $mat-typography-styles-query); } @@ -326,7 +327,7 @@ $mat-button-state-target: '.mdc-button__ripple'; } @mixin mat-mdc-icon-button-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query); } diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss index ba596c5bc2eb..a12b9a24f904 100644 --- a/src/material-experimental/mdc-card/_card-theme.scss +++ b/src/material-experimental/mdc-card/_card-theme.scss @@ -3,6 +3,7 @@ @import '@material/card/variables.import'; @import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-card-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -32,7 +33,7 @@ } @mixin mat-mdc-card-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-card-without-ripple($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index eb44c922a575..7b0a2b28ce9b 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -8,6 +8,7 @@ @import '@material/ripple/variables.import'; @import '@material/theme/functions.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; // Mixin that includes the checkbox theme styles with a given palette. // By default, the MDC checkbox always uses the `secondary` palette. @@ -110,7 +111,7 @@ } @mixin mat-mdc-checkbox-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query); @include mdc-form-field-core-styles($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss index d3c906916cf0..0b5b728fec4d 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.scss @@ -1,6 +1,7 @@ @import '@material/chips/mixins.import'; @import '../mdc-helpers/mdc-helpers'; @import '@material/theme/functions.import'; +@import '../../material/core/typography/typography'; @mixin _selected-color($color) { @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query); @@ -70,7 +71,7 @@ } @mixin mat-mdc-chips-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mdc-chip-set-core-styles($query: $mat-typography-styles-query); @include mat-using-mdc-typography($config) { @include mdc-chip-without-ripple($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index dee79df87107..f183b51e1d87 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -4,6 +4,8 @@ @import '@material/theme/mixins.import'; @import '../../mdc-helpers/mdc-helpers'; @import '../../../material/core/theming/theming'; +@import '../../../material/core/typography/typography'; + @mixin mat-mdc-optgroup-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -20,7 +22,7 @@ } @mixin mat-mdc-optgroup-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); } @mixin mat-mdc-optgroup-density($config-or-theme) { diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 2994f60606b3..7891e82e51d5 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -5,6 +5,7 @@ @import '@material/typography/mixins.import'; @import '../../mdc-helpers/mdc-helpers'; @import '../../../material/core/theming/theming'; +@import '../../../material/core/typography/typography'; @mixin mat-mdc-option-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -43,7 +44,7 @@ } @mixin mat-mdc-option-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss index 22f85a5a9d47..e0c7ecf84c57 100644 --- a/src/material-experimental/mdc-dialog/_dialog-theme.scss +++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss @@ -1,5 +1,6 @@ @import '../mdc-helpers/mdc-helpers'; @import '@material/dialog/mixins.import'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-dialog-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -9,7 +10,7 @@ } @mixin mat-mdc-dialog-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-dialog-core-styles($query: $mat-typography-styles-query); } diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss index 32589e1b4ddf..461afa6bddaa 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -6,6 +6,7 @@ @import '@material/textfield/variables.import'; @import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @import 'form-field-density'; @import 'form-field-subscript'; @import 'form-field-focus-overlay'; @@ -60,7 +61,7 @@ } @mixin mat-mdc-form-field-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-text-field-without-ripple($query: $mat-typography-styles-query); @include mdc-floating-label-core-styles($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index 7d2cfa75be61..a0bb89f2ea7f 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -17,84 +17,26 @@ $mat-base-styles-without-animation-query: $mat-theme-styles-query: color; $mat-typography-styles-query: typography; -// Mappings between Angular Material and MDC's typography levels. -// TODO: delete once all MDC components have migrated to using the 2018 mappings. -$mat-typography-2014-level-mappings: ( - mdc-to-mat: ( - headline1: display-4, - headline2: display-3, - headline3: display-2, - headline4: display-1, - headline5: headline, - headline6: title, - subtitle1: subheading-2, - subtitle2: subheading-1, - body1: body-2, - body2: body-1, +// Mappings from Angular Material's typography levels to MDC's typography levels. +$mat-typography-mdc-level-mappings: ( + headline-1: headline1, + headline-2: headline2, + headline-3: headline3, + headline-4: headline4, + headline-5: headline5, + headline-6: headline6, + subtitle-1: subtitle1, + subtitle-2: subtitle2, + body-1: body1, + body-2: body2, caption: caption, button: button, - overline: null - ), - mat-to-mdc: ( - display-4: headline1, - display-3: headline2, - display-2: headline3, - display-1: headline4, - headline: headline5, - title: headline6, - subheading-2: subtitle1, - subheading-1: subtitle2, - body-2: body1, - body-1: body2, - caption: caption, - button: button, - input: null - ) -); - -// Mappings between Angular Material and MDC's typography levels. -$mat-typography-2018-level-mappings: ( - // Maps from MDC typography levels (e.g. body1) to Angular Material typography levels - // (e.g. body-1). - mdc-to-mat: ( - headline1: headline-1, - headline2: headline-2, - headline3: headline-3, - headline4: headline-4, - headline5: headline-5, - headline6: headline-6, - subtitle1: subtitle-1, - subtitle2: subtitle-2, - body1: body-1, - body2: body-2, - caption: caption, - button: button, - overline: overline - ), - // Maps from Angular Material typography levels (e.g. body-1) to MDC typography levels - // (e.g. body1). - mat-to-mdc: ( - headline-1: headline1, - headline-2: headline2, - headline-3: headline3, - headline-4: headline4, - headline-5: headline5, - headline-6: headline6, - subtitle-1: subtitle1, - subtitle-2: subtitle2, - body-1: body1, - body-2: body2, - caption: caption, - button: button, - overline: overline - ) + overline: overline ); // Converts an Angular Material typography level config to an MDC one. @function mat-typography-level-config-to-mdc($mat-config, $mat-level) { - $mappings: if(mat-private-typography-is-2018-config($mat-config), - $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); - $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level); + $mdc-level: map-get($mat-typography-mdc-level-mappings, $mat-level); @return map-merge( if($mdc-level, @@ -119,13 +61,10 @@ $mat-typography-2018-level-mappings: ( } // Converts an Angular Material typography config to an MDC one. -@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) { +@function mat-typography-config-to-mdc($mat-config) { $mdc-config: (); - $mappings: if(mat-private-typography-is-2018-config($mat-config), - $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); - - @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) { + @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings { $mdc-config: map-merge( $mdc-config, ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level))); diff --git a/src/material-experimental/mdc-input/_input-theme.scss b/src/material-experimental/mdc-input/_input-theme.scss index 00f6ee264955..360c79568eaf 100644 --- a/src/material-experimental/mdc-input/_input-theme.scss +++ b/src/material-experimental/mdc-input/_input-theme.scss @@ -1,4 +1,5 @@ @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-input-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -6,7 +7,7 @@ } @mixin mat-mdc-input-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) {} } diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 1299c23da730..90e26eeb8e6d 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/src/material-experimental/mdc-list/_list-theme.scss @@ -5,6 +5,7 @@ @import './interactive-list-theme'; @import './list-option-theme'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; // TODO: implement mat-list[dense] once density system is in master @@ -52,7 +53,7 @@ } @mixin mat-mdc-list-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-list-without-ripple($query: $mat-typography-styles-query); @include mat-mdc-private-list-option-typography-styles(); diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index 8e8c40d83b01..86b57de40a61 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -6,6 +6,7 @@ @import '@material/theme/mixins.import'; @import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-menu-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -44,7 +45,7 @@ } @mixin mat-mdc-menu-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-menu-surface-core-styles($mat-typography-styles-query); diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss index baeec5434dc6..3d9ff03f0a90 100644 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss @@ -2,6 +2,7 @@ @import '@material/typography/mixins.import'; @import '../../material/core/theming/theming'; @import '../../material/core/density/private/compatibility'; +@import '../../material/core/typography/typography'; @import '../mdc-helpers/mdc-helpers'; @import './paginator-variables'; @@ -47,7 +48,7 @@ } @mixin mat-mdc-paginator-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { .mat-mdc-paginator { diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index 09f32a3776fa..fd32eb763bbd 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -3,6 +3,7 @@ @import '@material/radio/mixins'; @import '@material/radio/variables'; @import '@material/theme/functions.import'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-radio-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -41,7 +42,7 @@ } @mixin mat-mdc-radio-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-radio-without-ripple($query: $mat-typography-styles-query); @include mdc-form-field-core-styles($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss index 9e0530afd1af..8b12f4fc2854 100644 --- a/src/material-experimental/mdc-select/_select-theme.scss +++ b/src/material-experimental/mdc-select/_select-theme.scss @@ -4,6 +4,7 @@ @import '@material/select/variables.import'; @import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; // Gets the color to use for some text that is highlighted while a select has focus. @function _get-mdc-focused-text-color($palette) { @@ -81,7 +82,7 @@ } @mixin mat-mdc-select-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-menu-surface-core-styles($mat-typography-styles-query); 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 84de2e67a678..9b77210fefc2 100644 --- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss +++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss @@ -4,6 +4,8 @@ @import '@material/ripple/variables.import'; @import '@material/theme/functions.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; + @mixin mat-mdc-slide-toggle-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -79,7 +81,7 @@ } @mixin mat-mdc-slide-toggle-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-switch-without-ripple($query: $mat-typography-styles-query); @include mdc-form-field-core-styles($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-slider/_slider-theme.scss b/src/material-experimental/mdc-slider/_slider-theme.scss index abe967b1dd9b..8f6ca52d9416 100644 --- a/src/material-experimental/mdc-slider/_slider-theme.scss +++ b/src/material-experimental/mdc-slider/_slider-theme.scss @@ -1,6 +1,7 @@ // TODO: disabled until we implement the new MDC slider. // @import '@material/slider/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-slider-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -23,7 +24,7 @@ } @mixin mat-mdc-slider-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { // TODO: disabled until we implement the new MDC slider. // @include mdc-slider-core-styles($query: $mat-typography-styles-query); 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 87788d939ac3..079f704b07ea 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss @@ -2,6 +2,7 @@ @import '@material/theme/functions.import'; @import '@material/snackbar/variables.import'; @import '@material/snackbar/mixins.import'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-snack-bar-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -40,7 +41,7 @@ } @mixin mat-mdc-snack-bar-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-snackbar-core-styles($query: $mat-typography-styles-query); } diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss index 083294d1d6cc..264c13d5a3f4 100644 --- a/src/material-experimental/mdc-table/_table-theme.scss +++ b/src/material-experimental/mdc-table/_table-theme.scss @@ -2,6 +2,7 @@ @import '@material/theme/functions.import'; @import '@material/data-table/variables.import'; @import '@material/data-table/mixins.import'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-table-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -43,7 +44,7 @@ } @mixin mat-mdc-table-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-data-table-core-styles($query: $mat-typography-styles-query); } diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss index 14851e61ea0c..9cf74f01ed5a 100644 --- a/src/material-experimental/mdc-tabs/_tabs-theme.scss +++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss @@ -5,6 +5,7 @@ @import '@material/tab/variables.import'; @import '@material/tab-bar/mixins.import'; @import '../mdc-helpers/mdc-helpers'; +@import '../../material/core/typography/typography'; @mixin mat-mdc-tabs-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); @@ -102,7 +103,7 @@ } @mixin mat-mdc-tabs-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include mdc-tab-without-ripple($query: $mat-typography-styles-query); @include mdc-tab-indicator-core-styles($query: $mat-typography-styles-query); diff --git a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss index 5501e3833592..91e93b12f31a 100644 --- a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss +++ b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss @@ -1,16 +1,20 @@ @import '../all-theme'; @import '../../mdc-typography/all-typography'; -// Include non-theme styles for core. -@include mat-core(); - // Define a theme. $primary: mat-palette($mat-indigo); $accent: mat-palette($mat-pink, A200, A100, A400); -$theme: mat-light-theme($primary, $accent); +$theme: ( + color: mat-light-theme($primary, $accent), + // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle + // 2018 configs. + typography: mat-typography-config() +); + +// Include non-theme styles for core. +@include mat-core($theme); // Include all theme styles for the components. -@include angular-material-mdc-theme($theme); -@include angular-material-mdc-typography(); @include mat-core-theme($theme); +@include angular-material-mdc-theme($theme); diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss index dd7887a692c5..c3f5c1ca3502 100644 --- a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss +++ b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss @@ -9,7 +9,7 @@ } @mixin mat-mdc-tooltip-typography($config-or-theme) { - $config: mat-get-typography-config($config-or-theme); + $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme)); @include mat-using-mdc-typography($config) { @include tooltip.core-styles($query: $mat-typography-styles-query); } diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss index 22b4650b2f00..07efec2f9e6d 100644 --- a/src/material/core/typography/_typography.scss +++ b/src/material/core/typography/_typography.scss @@ -83,22 +83,35 @@ // produces a normalized typography config for the 2014 Material Design typography system. // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles // 2018 - https://material.io/design/typography/the-type-system.html#type-scale +// +// Components using this function should be migrated to normalize to the 2018 style config instead. +// New components should not use this function. @function mat-private-typography-to-2014-config($config) { - @if mat-private-typography-is-2018-config($config) { - @return mat-typography-config( - $display-4: map-get($config, headline-1), - $display-3: map-get($config, headline-2), - $display-2: map-get($config, headline-3), - $display-1: map-get($config, headline-4), - $headline: map-get($config, headline-5), - $title: map-get($config, headline-6), - $subheading-2: map-get($config, subtitle-1), - $subheading-1: map-get($config, subtitle-2), - $body-2: map-get($config, body-1), - $body-1: map-get($config, body-2), - $button: map-get($config, button), - $caption: map-get($config, caption), + @if $config == null { + @return null; + } + @if not mat-private-typography-is-2014-config($config) { + $args: ( + display-4: map-get($config, headline-1), + display-3: map-get($config, headline-2), + display-2: map-get($config, headline-3), + display-1: map-get($config, headline-4), + headline: map-get($config, headline-5), + title: map-get($config, headline-6), + subheading-2: map-get($config, subtitle-1), + subheading-1: map-get($config, subtitle-2), + body-2: map-get($config, body-1), + body-1: map-get($config, body-2), + button: map-get($config, button), + caption: map-get($config, caption), ); + $non-null-args: (); + @each $key, $value in $args { + @if $value != null { + $non-null-args: map-merge($non-null-args, ($key: $value)); + } + } + @return mat-typography-config($non-null-args...); } @return $config; } @@ -108,6 +121,9 @@ // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles // 2018 - https://material.io/design/typography/the-type-system.html#type-scale @function mat-private-typography-to-2018-config($config) { + @if $config == null { + @return null; + } @if mat-private-typography-is-2014-config($config) { @return ( headline-1: map-get($config, display-4), @@ -122,6 +138,9 @@ body-2: map-get($config, body-1), button: map-get($config, button), caption: map-get($config, caption), + overline: if(map-get($config, overline), map-get($config, overline), + mat-typography-level(12px, 32px, 500) + ) ); } @return $config; diff --git a/tools/stylelint/theme-mixin-api.ts b/tools/stylelint/theme-mixin-api.ts index fc5169efbb30..23179091543c 100644 --- a/tools/stylelint/theme-mixin-api.ts +++ b/tools/stylelint/theme-mixin-api.ts @@ -157,8 +157,10 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) => const expectedProperty = type === 'density' ? '$density-scale' : '$config'; const expectedValues = [`mat-get-${type}-config($config-or-theme)`]; if (type === 'typography') { + expectedValues.shift(); expectedValues.unshift( - 'mat-private-typography-normalized-config(mat-get-typography-config($config-or-theme))' + 'mat-get-typography-config($config-or-theme)', + 'mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme))', ); } let configExtractionNode: Declaration|null = null;