Skip to content

refactor(material/theming): normalize config in all typography mixins #21778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
80 changes: 38 additions & 42 deletions src/dev-app/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,52 +15,40 @@

// 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.
typography: mat-mdc-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);
}
Expand All @@ -70,17 +58,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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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);

Expand Down
7 changes: 4 additions & 3 deletions src/material-experimental/mdc-button/_button-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-card/_card-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);

Expand Down
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-chips/_chips-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand Down
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-core/option/_option-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-dialog/_dialog-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down
93 changes: 16 additions & 77 deletions src/material-experimental/mdc-helpers/_mdc-helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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)));
Expand Down
Loading