feat(color): Add on-surface and surface to theme. (#2556)

Adds new variables, properties and classes for "surface" and "on-surface" colors. Refer to the documentation for information and examples.

packages/mdc-card/_variables.scss

@@ -14,5 +14,7 @@
 // limitations under the License.
 //
 
-$mdc-card-stroke-color: #dbdbdb;
+@import "@material/theme/mixins";
+
+$mdc-card-stroke-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
 $mdc-card-stroke-width: 1px;

packages/mdc-card/mdc-card.scss

@@ -24,7 +24,7 @@
 // postcss-bem-linter: define card
 
 .mdc-card {
-  @include mdc-card-fill-color(background);
+  @include mdc-card-fill-color(surface);
   @include mdc-card-corner-radius(2px);
   @include mdc-elevation(2);
   @include mdc-card-container-layout_;

packages/mdc-chips/_variables.scss

@@ -14,16 +14,18 @@
 // limitations under the License.
 //
 
+@import "@material/theme/variables";
+
 $mdc-chip-border-radius-default: 16px;
-$mdc-chip-fill-color-default: rgba(black, .08);
-$mdc-chip-ink-color-default: rgba(black, .6);
+$mdc-chip-fill-color-default: rgba(mdc-theme-prop-value(on-surface), .12);
+$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
 $mdc-chip-horizontal-padding: 12px;
 $mdc-chip-vertical-padding: 7px;
 
-$mdc-chip-icon-color: rgba(black, .54);
+$mdc-chip-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
 $mdc-chip-trailing-icon-size: 18px;
-$mdc-chip-trailing-icon-hover-color: rgba(black, .62);
-$mdc-chip-trailing-icon-focus-color: rgba(black, .87);
+$mdc-chip-trailing-icon-hover-color: rgba(mdc-theme-prop-value(on-surface), .62);
+$mdc-chip-trailing-icon-focus-color: rgba(mdc-theme-prop-value(on-surface), .87);
 
 $mdc-chip-checkmark-animation-delay: 50ms;
 $mdc-chip-checkmark-animation-duration: 150ms;

packages/mdc-chips/chip/mdc-chip.scss

@@ -45,7 +45,7 @@
 }
 
 .mdc-chip--selected {
-  @include mdc-theme-prop(background-color, white);
+  @include mdc-theme-prop(background-color, surface);
 }
 
 .mdc-chip__text {

packages/mdc-theme/_variables.scss

@@ -32,6 +32,9 @@ $mdc-theme-secondary: $mdc-theme-accent !default;
 $mdc-theme-on-secondary: if(mdc-theme-contrast-tone($mdc-theme-secondary) == "dark", #000, #fff) !default;
 $mdc-theme-background: #fff !default; // White
 
+$mdc-theme-surface: #fff !default;
+$mdc-theme-on-surface: if(mdc-theme-contrast-tone($mdc-theme-surface) == "dark", #000, #fff) !default;
+
 //
 // Text colors according to light vs dark and text type.
 //
@@ -70,8 +73,11 @@ $mdc-theme-property-values: (
   secondary: $mdc-theme-secondary,
   /* Background */
   background: $mdc-theme-background,
+  /* Surface */
+  surface: $mdc-theme-surface,
   on-primary: $mdc-theme-on-primary,
   on-secondary: $mdc-theme-on-secondary,
+  on-surface: $mdc-theme-on-surface,
   // 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

@@ -22,16 +22,15 @@
   }
 }
 
-// Special case, so that .mdc-theme--background changes background color, not text color.
-.mdc-theme--background {
-  @include mdc-theme-prop(background-color, background);
-}
-
 @each $style in map-keys($mdc-theme-property-values) {
-  @if $style != "background" {
+  @if $style != "background" and $style != "surface" {
     .mdc-theme--#{$style} {
       @include mdc-theme-prop(color, $style, true);
     }
+  } @else {
+    .mdc-theme--#{$style} {
+      @include mdc-theme-prop(background-color, $style);
+    }
   }
 }