chore(theme): remove dark theme (#2169)

BREAKING CHANGE: deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`

Author: Matty Goo

demos/common.scss

@@ -24,18 +24,12 @@
 $mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
 $mdc-theme-secondary: #018786 !default; // baseline teal, 600 tone
 
-// Import button and ripple mixins to apply overrides for dark theme
-// TODO(kfranqueiro): Pending further design discussion around how to manage dark theme
-@import "../packages/mdc-button/mixins";
-@import "../packages/mdc-ripple/mixins";
 // All demo pages have a top toolbar, and most of them use theme variables.
 // Import these *after* setting theme colors to override defaults in mdc-theme.
 @import "../packages/mdc-theme/mdc-theme";
 @import "../packages/mdc-toolbar/mdc-toolbar";
 @import "../packages/mdc-typography/mdc-typography";
 
-$dark-button-color: $material-color-light-green-a200;
-
 // Used by ready.js to test whether the CSS has finished loading.
 .demo-ready-detect {
   position: relative;
@@ -47,32 +41,6 @@ fieldset {
   border: 0;
 }
 
-// TODO mgoo: remove these dark theme when complete with removing other components
-.mdc-button {
-  @include mdc-theme-dark {
-    @include mdc-button-ink-color($dark-button-color);
-    @include mdc-states($dark-button-color);
-  }
-}
-
-.mdc-button--raised {
-  @include mdc-theme-dark(".mdc-button", true) {
-    @include mdc-button-filled-accessible($dark-button-color);
-  }
-}
-
-.mdc-button--unelevated {
-  @include mdc-theme-dark(".mdc-button", true) {
-    @include mdc-button-filled-accessible($dark-button-color);
-  }
-}
-
-.mdc-button--stroked {
-  @include mdc-theme-dark(".mdc-button", true) {
-    @include mdc-button-stroke-color($dark-button-color);
-  }
-}
-
 .catalog-title {
   font-family: "Roboto Mono", monospace;
 }

demos/icon-toggle.scss

@@ -18,10 +18,6 @@
 @import "../packages/mdc-icon-toggle/mdc-icon-toggle";
 @import "../packages/mdc-ripple/mixins";
 
-.mdc-theme--dark {
-  background: #303030;
-}
-
 .demo-wrapper {
   margin-left: 1rem;
 }

docs/code/readme_standards.md

@@ -41,9 +41,6 @@ CSS Class | Description
 `mdc-foo` | Sets the foo
 ```
 
-Remember to document `<COMPONENT_NAME>--theme-dark` CSS class if the component
-changes its appearance in Dark Theme context.
-
 ### Sass Variables and Mixins
 
 Sass variables are documented in a tabular format (See Tabular Format section).

docs/theming.md

@@ -430,37 +430,27 @@ Since our cards only contain text and no components, let's keep it simple for no
 > Note: in the future we plan to provide a Javascript utility method for changing all derived colors and making this
 use-case easier.
 
+## Custom Themes
 
-## Dark Themes
+Most MDC Web components provide a set of Sass mixins to customize their appearance,
+such as changing the fill color, ink color, stroke width, etc.
+These mixins are documented in each component's README file
+(e.g., the [Button readme](../packages/mdc-button/README.md#advanced-sass-mixins)).
 
-Beyond what we've covered in this document so far, there's also the concept of a _dark theme_. All MDC Web components have
-been designed to work with both light themes (that assume a light-colored background) and dark themes (with dark-colored
-backgrounds), but the default is always light.
+For example, to change the fill color of a button and automatically select an accessible ink color,
+simply call the `mdc-button-filled-accessible` mixin inside a custom CSS class:
 
-> Note: When using a dark theme, you probably want to choose a dark color as the background for your page, and adjust
-the MDC Web `background` color to match.
-
-In order to apply a dark theme to a single element, you can use its `--theme-dark` class. For example, for a button:
-
-```html
-<button class="mdc-button mdc-button--raised mdc-button--theme-dark">
-  Raised dark button
-</button>
+```scss
+.accessible-button {
+  @include mdc-button-filled-accessible(blue);
+}
 ```
 
-Alternatively, you can set your entire page (or a portion of it) to a dark theme by using the `mdc-theme--dark` class:
+Then apply the custom class to the button elements:
 
 ```html
-<section class="mdc-theme--dark">
-  <button class="mdc-button mdc-button--raised">
-    Still dark
-  </button>
-
-  <button class="mdc-button">
-    Me too!
-  </button>
-</section>
+<button class="mdc-button accessible-button">
+  <i class="material-icons mdc-button__icon">favorite</i>
+  Button
+</button>
 ```
-
-> Note: there's currently no way to set a light portion inside of a dark one, so if you want to achieve that effect
-you'll need to selectively apply dark classes to everything except the light bits.

packages/mdc-theme/README.md

@@ -34,10 +34,6 @@ and five text styles:
 
 > **A note about Primary and Secondary**, don't confuse primary/secondary _color_ with primary/secondary _text_. The former refers to the primary/secondary _theme_ color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content.
 
-Some components can change their appearance when in a Dark Theme context, aka placed on top of a dark background. There are two ways to specify if a component is in a Dark Theme context. The first is to add `mdc-theme--dark` to a *container* element, which holds the component. The second way is to add `<component_name>--theme-dark` modifier class to the actual component element. For example, `mdc-button--theme-dark` would put the MDC Button in a Dark Theme context.
-
-> **A note about Dark Theme context**, don't confuse Dark Theme context with a component that has a dark color. Dark Theme context means the component sits on top of a dark background.
-
 ## Design & API Documentation
 
 <ul class="icon-list">
@@ -141,11 +137,6 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.
-`mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context
-
-#### `mdc-theme-dark($root-selector, $compound)`
-
-Creates a rule that is applied when the current selector is within an Dark Theme context. If you are using the mixin on anything other than the base selector of the component, e.g. `.mdc-button`, you need to specify `$root-selector` as the base selector as a parameter. You can also specify `$compound` to true if the the current selector is a compound selector with the base selector, e.g. a modifier class to the component root element.
 
 #### `mdc-theme-prop` Properties
 

packages/mdc-theme/_functions.scss

@@ -64,15 +64,6 @@ $_mdc-theme-tonal-offset: 7%;
   @return if(mdc-theme-tone($color) == "dark", "light", "dark");
 }
 
-// DEPRECATED. Use mdc-theme-contrast-tone instead.
-@function mdc-theme-light-or-dark($color) {
-  // stylelint-disable indentation
-  @warn "The 'mdc-theme-light-or-dark' mixin is DEPRECATED and will be REMOVED in a future version. " +
-        "Please use 'mdc-theme-contrast-tone' or 'mdc-theme-tone' (as applicable) instead.";
-  @return mdc-theme-contrast-tone($color);
-  // stylelint-enable indentation
-}
-
 // lighten() and darken() require values to be between 0% and 100%.
 @function mdc-theme-clamp-percentage_($percentage) {
   @return max(0%, min(100%, $percentage));

packages/mdc-theme/_mixins.scss

@@ -76,60 +76,3 @@
     }
   }
 }
-
-// Creates a rule to be used in MDC Web components for dark theming, and applies the provided contents.
-// Should provide the $root-selector option if applied to anything other than the root selector.
-// When used with a modifier class, provide a second argument of `true` for the $compound parameter
-// to specify that this should be attached as a compound class.
-//
-// Usage example:
-//
-// ```scss
-// .mdc-foo {
-//   color: black;
-//
-//   @include mdc-theme-dark {
-//     color: white;
-//   }
-//
-//   &__bar {
-//     background: black;
-//
-//     @include mdc-theme-dark(".mdc-foo") {
-//       background: white;
-//     }
-//   }
-// }
-//
-// .mdc-foo--disabled {
-//   opacity: .38;
-//
-//   @include mdc-theme-dark(".mdc-foo", true) {
-//     opacity: .5;
-//   }
-// }
-// ```
-
-// TODO: matt goo - remove this once all dark theme is removed
-@mixin mdc-theme-dark($root-selector: null, $compound: false) {
-  @if ($root-selector) {
-    @at-root {
-      @if ($compound) {
-        #{$root-selector}--theme-dark#{&},
-        .mdc-theme--dark & {
-          @content;
-        }
-      } @else {
-        #{$root-selector}--theme-dark &,
-        .mdc-theme--dark & {
-          @content;
-        }
-      }
-    }
-  } @else {
-    &--theme-dark,
-    .mdc-theme--dark & {
-      @content;
-    }
-  }
-}