diff --git a/src/material/core/tokens/m2/_md-sys-typescale.scss b/src/material/core/tokens/m2/_md-sys-typescale.scss index 94ad447fd387..212c3afdeab4 100644 --- a/src/material/core/tokens/m2/_md-sys-typescale.scss +++ b/src/material/core/tokens/m2/_md-sys-typescale.scss @@ -3,43 +3,44 @@ @use 'sass:meta'; @function md-sys-typescale-values($config) { + // Mapping is according to the old 2014 version of the typography spec. $sys-to-config: ( - body-large: body-1, - body-medium: body-2, + body-large: subheading-1, + body-medium: body-1, body-small: caption, - label-large: subtitle-1, - label-medium: subtitle-2, + display-large: display-4, + display-medium: display-4, + display-small: display-4, + headline-large: display-3, + headline-medium: display-2, + headline-small: display-1, + label-large: subheading-2, + label-medium: body-2, label-small: button, - display-large: headline-1, - display-medium: headline-1, - display-small: headline-1, - headline-large: headline-2, - headline-medium: headline-3, - headline-small: headline-4, - title-large: headline-5, - title-medium: headline-5, - title-small: headline-6, + title-large: headline, + title-medium: headline, + title-small: title, ); - // If the config is based on an old 2014 version of the typography spec, then - // use the old config keys to map to the new system tokens. - @if (map.get($config, headline) != null) { + // If the config is based on the updated 2018 version of the typography spec, then + // use the correct config keys mapping. + @if (map.get($config, headline-1) != null) { $sys-to-config: ( - body-large: subheading-1, - body-medium: body-1, + body-large: body-1, + body-medium: body-2, body-small: caption, - display-large: display-4, - display-medium: display-4, - display-small: display-4, - headline-large: display-3, - headline-medium: display-2, - headline-small: display-1, - label-large: subheading-2, - label-medium: body-2, + label-large: subtitle-1, + label-medium: subtitle-2, label-small: button, - title-large: headline, - title-medium: headline, - title-small: title, + display-large: headline-1, + display-medium: headline-1, + display-small: headline-1, + headline-large: headline-2, + headline-medium: headline-3, + headline-small: headline-4, + title-large: headline-5, + title-medium: headline-5, + title-small: headline-6, ); } diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 2058e14399fc..943284dcdd55 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -44,6 +44,10 @@ $system: m2-utils.get-system($theme); & { + // TODO(andrewjs): Remove this once all tokens are migrated to + // mat internally. + --mdc-slide-toggle-disabled-label-text-color: #{ + m3-utils.color-with-opacity(map.get($system, on-surface), 38%)}; // TODO(wagnermaciel): Use our token system to define this css variable. --mat-slide-toggle-disabled-label-text-color: #{ m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};