chore(theme): Remove tonal variants, since they dont match MD guidelines (#2473)

BREAKING CHANGE: Removes styles for `mdc-theme--primary/secondary-light/dark` CSS classes and the `mdc-theme-light/dark-variant` Sass functions

Author: lynnmercier

demos/elevation.scss

@@ -19,5 +19,5 @@
 @import "../packages/mdc-elevation/mdc-elevation";
 
 .demo-elevation--custom-color {
-  @include mdc-elevation(16, secondary-dark, $opacity-boost: .1);
+  @include mdc-elevation(16, secondary, $opacity-boost: .1);
 }

demos/theme/_theme-shared.scss

@@ -198,26 +198,10 @@ figure {
   background-color: $demo-color-low-luminance;
 }
 
-.demo-theme-bg--low-luminance-light {
-  background-color: mdc-theme-light-variant($demo-color-low-luminance);
-}
-
-.demo-theme-bg--low-luminance-dark {
-  background-color: mdc-theme-dark-variant($demo-color-low-luminance);
-}
-
 .demo-theme-bg--high-luminance {
   background-color: $demo-color-high-luminance;
 }
 
-.demo-theme-bg--high-luminance-light {
-  background-color: mdc-theme-light-variant($demo-color-high-luminance);
-}
-
-.demo-theme-bg--high-luminance-dark {
-  background-color: mdc-theme-dark-variant($demo-color-high-luminance);
-}
-
 .demo-theme-bg--custom-light {
   background-color: #dddddd;
 }

demos/theme/index.html

@@ -170,13 +170,9 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
               <div class="demo-theme-color-group">
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary mdc-typography--body2">Primary</div>
-                  <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary-light mdc-typography--body2">Primary Light</div>
-                  <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary-dark mdc-typography--body2">Primary Dark</div>
                 </div>
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary mdc-typography--body2">Secondary</div>
-                  <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary-light mdc-typography--body2">Secondary Light</div>
-                  <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary-dark mdc-typography--body2">Secondary Dark</div>
                 </div>
               </div>
             </fieldset>
@@ -187,39 +183,16 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
               <div class="demo-theme-color-group">
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
-                  <div class="demo-theme-color-swatch mdc-theme--primary-light-bg mdc-theme--text-primary-on-primary-light">Primary Light</div>
-                  <div class="demo-theme-color-swatch mdc-theme--primary-dark-bg mdc-theme--text-primary-on-primary-dark">Primary Dark</div>
                 </div>
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
-                  <div class="demo-theme-color-swatch mdc-theme--secondary-light-bg mdc-theme--text-primary-on-secondary-light">Secondary Light</div>
-                  <div class="demo-theme-color-swatch mdc-theme--secondary-dark-bg mdc-theme--text-primary-on-secondary-dark">Secondary Dark</div>
                 </div>
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
                 </div>
               </div>
             </fieldset>
           </div>
-
-          <div class="demo-theme-color-section__row">
-            <fieldset class="demo-fieldset--color">
-              <legend class="mdc-typography--subheading2">Light and dark tonal variants for extreme input luminance</legend>
-
-              <div class="demo-theme-color-group">
-                <div class="demo-theme-color-swatches">
-                  <div class="demo-theme-color-swatch demo-theme-bg--low-luminance mdc-theme--text-primary-on-dark">Low Luminance</div>
-                  <div class="demo-theme-color-swatch demo-theme-bg--low-luminance-light mdc-theme--text-primary-on-dark">Light Variant</div>
-                  <div class="demo-theme-color-swatch demo-theme-bg--low-luminance-dark mdc-theme--text-primary-on-dark">Dark Variant</div>
-                </div>
-                <div class="demo-theme-color-swatches">
-                  <div class="demo-theme-color-swatch demo-theme-bg--high-luminance mdc-theme--text-primary-on-light">High Luminance</div>
-                  <div class="demo-theme-color-swatch demo-theme-bg--high-luminance-light mdc-theme--text-primary-on-light">Light Variant</div>
-                  <div class="demo-theme-color-swatch demo-theme-bg--high-luminance-dark mdc-theme--text-primary-on-light">Dark Variant</div>
-                </div>
-              </div>
-            </fieldset>
-          </div>
         </div>
 
         <div class="demo-theme-color-section">

demos/theme/theme-baseline.scss

@@ -17,6 +17,6 @@
 @import "../../packages/mdc-theme/color-palette";
 
 // TODO: Use theme mixin(s) instead
-$demo-toolbar-progress-bar-color: secondary-light;
+$demo-toolbar-progress-bar-color: secondary;
 
 @import "./theme-shared";

packages/mdc-card/mdc-card.scss

@@ -30,11 +30,8 @@
 }
 
 .mdc-card--stroked {
-  $fill-color: mdc-theme-prop-value(background);
-  $stroke-color: mdc-theme-dark-variant($fill-color, 1);
-
   @include mdc-elevation(0);
-  @include mdc-card-stroke($stroke-color);
+  @include mdc-card-stroke(#dbdbdb);
 }
 
 //

packages/mdc-theme/README.md

@@ -72,18 +72,6 @@ $mdc-theme-background: #fff; // White
 > Apps that previously customized `$mdc-theme-accent` will continue to work, but new apps should use
 > `$mdc-theme-secondary` instead.
 
-MDC Theme also exposes _light_ and _dark_ variants of the primary and secondary colors. By default, these values are
-computed by lightening and darkening the main primary/secondary colors in Sass, but you can override them if desired:
-
-```scss
-$mdc-theme-primary-light: #ce93d8; // Purple 200
-$mdc-theme-primary-dark: #6a1b9a; // Purple 800
-$mdc-theme-secondary-light: #ffd180; // Orange A100
-$mdc-theme-secondary-dark: #ff6d00; // Orange A700
-
-@import "@material/theme/mdc-theme";
-```
-
 The text color, for text placed on top of these selected theme colors, is programmatically computed based on color contrast. We follow the Web Content Accessibility Guidelines 2.0.
 
 https://www.w3.org/TR/WCAG20
@@ -95,11 +83,7 @@ https://www.w3.org/TR/WCAG20
 CSS Custom property | Description
 --- | ---
 `--mdc-theme-primary` | The theme primary color
-`--mdc-theme-primary-light` | The theme primary color (light variant)
-`--mdc-theme-primary-dark` | The theme primary color (dark variant)
 `--mdc-theme-secondary` | The theme secondary color
-`--mdc-theme-secondary-light` | The theme secondary color (light variant)
-`--mdc-theme-secondary-dark` | The theme secondary color (dark variant)
 `--mdc-theme-background` | The theme background color
 `--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR>` | Text color for TEXT_STYLE on top of THEME_COLOR background
 `--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background
@@ -116,18 +100,10 @@ If you want to modify an element, which is not a Material Design component, you
 CSS Class | Description
 --- | ---
 `mdc-theme--primary` | Sets the text color to the theme primary color
-`mdc-theme--primary-light` | Sets the text color to the theme primary color (light variant)
-`mdc-theme--primary-dark` | Sets the text color to the theme primary color (dark variant)
 `mdc-theme--secondary` | Sets the text color to the theme secondary color
-`mdc-theme--secondary-light` | Sets the text color to the theme secondary color (light variant)
-`mdc-theme--secondary-dark` | Sets the text color to the theme secondary color (dark variant)
 `mdc-theme--background` | Sets the background color to the theme background color
 `mdc-theme--primary-bg` | Sets the background color to the theme primary color
-`mdc-theme--primary-light-bg` | Sets the background color to the theme primary color (light variant)
-`mdc-theme--primary-dark-bg` | Sets the background color to the theme primary color (dark variant)
 `mdc-theme--secondary-bg` | Sets the background color to the theme secondary color
-`mdc-theme--secondary-light-bg` | Sets the background color to the theme secondary color (light variant)
-`mdc-theme--secondary-dark-bg` | Sets the background color to the theme secondary color (dark variant)
 `mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR>` | Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background
 `mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background
 `mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background
@@ -147,11 +123,7 @@ The properties below can be used as the `$style` argument for the `mdc-theme-pro
 Property Name | Description
 --- | ---
 `primary` | The theme primary color
-`primary-light` | The theme primary color (light variant)
-`primary-dark` | The theme primary color (dark variant)
 `secondary` | The theme secondary color
-`secondary-light` | The theme secondary color (light variant)
-`secondary-dark` | The theme secondary color (dark variant)
 `background` | The theme background color
 `text-<TEXT_STYLE>-on-<THEME_COLOR>` | TEXT_STYLE on top of THEME_COLOR background
 `text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background
@@ -192,27 +164,6 @@ Determines whether to use light or dark text on top of a given color.
 @debug mdc-theme-contrast-tone(#9c27b0); // light
 ```
 
-#### `mdc-theme-light-variant($color)` and `mdc-theme-dark-variant($color)`
-
-Function | Description
---- | ---
-`mdc-theme-dark-variant($color, $num-indexes)` | Darken a color by a certain number of indexes within its tonal palette
-`mdc-theme-light-variant($color, $num-indexes)` | Lighten a color by a certain number of indexes within its tonal palette
-
-Both functions are luminance-aware, and will always return a color that is visually distinct from both the input color
-_and_ the other function.
-
-That is, if the color passed to `mdc-theme-dark-variant()` is already so dark that darkening it by the requested amount
-would return `#000000`, the function will _lighten_ the color instead.
-
-Similarly, if the color passed to `mdc-theme-light-variant()` is already so light that lightening it by the requested
-amount would return `#ffffff`, the function will _darken_ the color instead.
-
-To avoid having both functions return the same color in cases of extremely high or low input luminance,
-`mdc-theme-dark-variant()` will return a color that is _twice_ (×2) as dark as requested when the input is already very
-light. Likewise, `mdc-theme-light-variant()` will return a color that is _twice_ (×2) as light as requested when the
-input is already very dark. This ensures that the _light_ variant will always be lighter than the _dark_ variant.
-
 #### `mdc-theme-prop-value($property)`
 
 If `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the

packages/mdc-theme/_functions.scss

@@ -16,11 +16,6 @@
 
 @import "./constants";
 
-// Used by the functions below to shift a color's luminance by approximately
-// one index within its tonal palette.
-// E.g., shift from Red 500 to Red 400 or Red 600.
-$_mdc-theme-tonal-offset: 7%;
-
 // Calculate the luminance for a color.
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function mdc-theme-luminance($color) {
@@ -63,61 +58,3 @@ $_mdc-theme-tonal-offset: 7%;
 @function mdc-theme-contrast-tone($color) {
   @return if(mdc-theme-tone($color) == "dark", "light", "dark");
 }
-
-// lighten() and darken() require values to be between 0% and 100%.
-@function mdc-theme-clamp-percentage_($percentage) {
-  @return max(0%, min(100%, $percentage));
-}
-
-// Generate light and dark variants of the given color, offset by approximately
-// the specified number of indexes within the color's tonal palette.
-@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {
-  $luminance: mdc-theme-luminance($color) * 100%;
-  $amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);
-  $amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);
-  $lower-bound: $amount-1x;
-  $upper-bound: 100% - $lower-bound;
-
-  @if $luminance <= $lower-bound {
-    @return (
-      dark: lighten($color, $amount-1x),
-      light: lighten($color, $amount-2x)
-    );
-  } @else if $luminance >= $upper-bound {
-    @return (
-      dark: darken($color, $amount-2x),
-      light: darken($color, $amount-1x)
-    );
-  } @else {
-    @return (
-      dark: darken($color, $amount-1x),
-      light: lighten($color, $amount-1x)
-    );
-  }
-}
-
-// Darken the given color by approximately the specified number of indexes
-// within its tonal palette.
-//
-// If the color is already very dark, it will be lightened instead of darkened
-// to ensure that the returned value is visually distinct from the input color.
-//
-// If the color is very light, it will be darkened twice as much as usual to
-// ensure that the returned value is visually distinct from the light variant
-// (which will actually end up being a dark shade).
-@function mdc-theme-dark-variant($color, $num-indexes: 2) {
-  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), dark);
-}
-
-// Lighten the given color by approximately the specified number of indexes
-// within its tonal palette.
-//
-// If the color is already very light, it will be darkened instead of lightened
-// to ensure that the returned value is visually distinct from the input color.
-//
-// If the color is very dark, it will be lightened twice as much as usual to
-// ensure that the returned value is visually distinct from the dark variant
-// (which will actually end up being a light tint).
-@function mdc-theme-light-variant($color, $num-indexes: 2) {
-  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), light);
-}

packages/mdc-theme/_variables.scss

@@ -23,15 +23,11 @@
 //
 
 $mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
-$mdc-theme-primary-light: mdc-theme-light-variant($mdc-theme-primary) !default;
-$mdc-theme-primary-dark: mdc-theme-dark-variant($mdc-theme-primary) !default;
 
 // The $mdc-theme-accent variable is DEPRECATED - it exists purely for backward compatibility.
 // The $mdc-theme-secondary* variables should be used for all new projects.
 $mdc-theme-accent: #018786 !default; // baseline teal, 600 tone
 $mdc-theme-secondary: $mdc-theme-accent !default;
-$mdc-theme-secondary-light: mdc-theme-light-variant($mdc-theme-secondary) !default;
-$mdc-theme-secondary-dark: mdc-theme-dark-variant($mdc-theme-secondary) !default;
 
 $mdc-theme-background: #fff !default; // White
 
@@ -69,12 +65,8 @@ $mdc-theme-text-colors: (
 $mdc-theme-property-values: (
   /* Primary */
   primary: $mdc-theme-primary,
-  primary-light: $mdc-theme-primary-light,
-  primary-dark: $mdc-theme-primary-dark,
   /* Secondary */
   secondary: $mdc-theme-secondary,
-  secondary-light: $mdc-theme-secondary-light,
-  secondary-dark: $mdc-theme-secondary-dark,
   /* Background */
   background: $mdc-theme-background,
   // Text-primary on "primary" background
@@ -83,36 +75,12 @@ $mdc-theme-property-values: (
   text-hint-on-primary: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary),
   text-disabled-on-primary: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary),
   text-icon-on-primary: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary),
-  // Text-primary on "primary-light" background
-  text-primary-on-primary-light: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-primary-light),
-  text-secondary-on-primary-light: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-primary-light),
-  text-hint-on-primary-light: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary-light),
-  text-disabled-on-primary-light: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary-light),
-  text-icon-on-primary-light: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary-light),
-  // Text-primary on "primary-dark" background
-  text-primary-on-primary-dark: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-primary-dark),
-  text-secondary-on-primary-dark: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-primary-dark),
-  text-hint-on-primary-dark: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary-dark),
-  text-disabled-on-primary-dark: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary-dark),
-  text-icon-on-primary-dark: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary-dark),
   // Text-primary on "secondary" background
   text-primary-on-secondary: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary),
   text-secondary-on-secondary: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary),
   text-hint-on-secondary: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary),
   text-disabled-on-secondary: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary),
   text-icon-on-secondary: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary),
-  // Text-primary on "secondary-light" background
-  text-primary-on-secondary-light: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary-light),
-  text-secondary-on-secondary-light: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary-light),
-  text-hint-on-secondary-light: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary-light),
-  text-disabled-on-secondary-light: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary-light),
-  text-icon-on-secondary-light: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary-light),
-  // Text-primary on "secondary-dark" background
-  text-primary-on-secondary-dark: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary-dark),
-  text-secondary-on-secondary-dark: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary-dark),
-  text-hint-on-secondary-dark: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary-dark),
-  text-disabled-on-secondary-dark: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary-dark),
-  text-icon-on-secondary-dark: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary-dark),
   // Text-primary on "background" background
   text-primary-on-background: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-background),
   text-secondary-on-background: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-background),

packages/mdc-theme/mdc-theme.scss

@@ -36,7 +36,7 @@
 }
 
 // CSS rules for using primary and secondary (plus light/dark variants) as background colors.
-@each $style in ("primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark") {
+@each $style in ("primary", "secondary") {
   .mdc-theme--#{$style}-bg {
     @include mdc-theme-prop(background-color, $style, true);
   }