feat(theme): Add error and on-error support (#3469)

The text field component has been updated to use the newly added error color from the theme.

packages/mdc-textfield/_variables.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 //
-$mdc-text-field-error: #b00020;
+$mdc-text-field-error: error;
 $mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12);
 $mdc-text-field-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06);
 $mdc-text-field-disabled-icon: rgba(mdc-theme-prop-value(on-surface), .3);

packages/mdc-theme/_variables.scss

@@ -41,6 +41,9 @@ $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;
 
+$mdc-theme-error: #b00020;
+$mdc-theme-on-error: #fff;
+
 //
 // Text colors according to light vs dark and text type.
 //
@@ -87,9 +90,12 @@ $mdc-theme-property-values: (
   background: $mdc-theme-background,
   // Surface
   surface: $mdc-theme-surface,
+  // Error
+  error: $mdc-theme-error,
   on-primary: $mdc-theme-on-primary,
   on-secondary: $mdc-theme-on-secondary,
   on-surface: $mdc-theme-on-surface,
+  on-error: $mdc-theme-on-error,
   // 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),