fix: AppBar text color now defaults to rmd-theme-var(text-primary-on-background)

This should have probably been the default to start with instead of
`initial`. It became more of a problem once I started implementing the
"Dark theme elevation" feature.

Author: mlaursen

packages/app-bar/src/_variables.scss

@@ -167,7 +167,7 @@ $rmd-app-bar-default-color: if(
 /// @type Map
 $rmd-app-bar-theme-values: (
   background-color: transparent,
-  color: initial,
+  color: rmd-theme-var(text-primary-on-background),
   primary: $rmd-app-bar-primary-background-color,
   on-primary: $rmd-app-bar-primary-color,
   secondary: $rmd-app-bar-secondary-background-color,

packages/app-bar/src/scssVariables.ts

@@ -24,7 +24,7 @@ export default {
   "rmd-app-bar-default-color": "#000",
   "rmd-app-bar-theme-values": {
     "background-color": "transparent",
-    color: "initial",
+    color: "var(--rmd-theme-text-primary-on-background, #212121)",
     primary: "var(--rmd-theme-primary, #9c27b0)",
     "on-primary": "var(--rmd-theme-on-primary, #000)",
     secondary: "var(--rmd-theme-secondary, #f50057)",

packages/documentation/src/constants/sassdoc/app-bar.ts

@@ -260,7 +260,7 @@ const sassdoc: PackageSassDoc = {
           code:
             "$rmd-theme-primary: $rmd-blue-500;\n$rmd-theme-secondary: $rmd-pink-a-200;\n\n.app-bar {\n  @include rmd-app-bar-themes;\n}\n",
           compiled:
-            ".app-bar {\n  background-color: var(--rmd-app-bar-background-color, transparent);\n  color: var(--rmd-app-bar-color, initial);\n}\n.app-bar--primary {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-primary,\n    var(--rmd-theme-primary, #9c27b0)\n  );\n  --rmd-app-bar-color: var(\n    --rmd-app-bar-on-primary,\n    var(--rmd-theme-on-primary, #000)\n  );\n}\n.app-bar--secondary {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-secondary,\n    var(--rmd-theme-secondary, #f50057)\n  );\n  --rmd-app-bar-color: var(\n    --rmd-app-bar-on-secondary,\n    var(--rmd-theme-on-secondary, #000)\n  );\n}\n.app-bar--default {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-default-background-color,\n    #f5f5f5\n  );\n  --rmd-app-bar-color: var(--rmd-app-bar-default-color, #000);\n}\n",
+            ".app-bar {\n  background-color: var(--rmd-app-bar-background-color, transparent);\n  color: var(\n    --rmd-app-bar-color,\n    var(--rmd-theme-text-primary-on-background, #212121)\n  );\n}\n.app-bar--primary {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-primary,\n    var(--rmd-theme-primary, #9c27b0)\n  );\n  --rmd-app-bar-color: var(\n    --rmd-app-bar-on-primary,\n    var(--rmd-theme-on-primary, #000)\n  );\n}\n.app-bar--secondary {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-secondary,\n    var(--rmd-theme-secondary, #f50057)\n  );\n  --rmd-app-bar-color: var(\n    --rmd-app-bar-on-secondary,\n    var(--rmd-theme-on-secondary, #000)\n  );\n}\n.app-bar--default {\n  --rmd-app-bar-background-color: var(\n    --rmd-app-bar-default-background-color,\n    #f5f5f5\n  );\n  --rmd-app-bar-color: var(--rmd-app-bar-default-color, #000);\n}\n",
           type: "scss",
           description: "Simple Example",
         },
@@ -872,9 +872,9 @@ const sassdoc: PackageSassDoc = {
       packageName: "app-bar",
       type: "Map",
       value:
-        "(\n  background-color: transparent,\n  color: initial,\n  primary: $rmd-app-bar-primary-background-color,\n  on-primary: $rmd-app-bar-primary-color,\n  secondary: $rmd-app-bar-secondary-background-color,\n  on-secondary: $rmd-app-bar-secondary-color,\n  default-background-color: $rmd-app-bar-default-background-color,\n  default-light-background-color: $rmd-app-bar-default-light-theme-background-color,\n  default-dark-background-color: $rmd-app-bar-default-dark-theme-background-color,\n  default-color: $rmd-app-bar-default-color,\n  default-light-color: $rmd-app-bar-default-light-theme-color,\n  default-dark-color: $rmd-app-bar-default-dark-theme-color,\n  height: $rmd-app-bar-height,\n  dense-height: $rmd-app-bar-dense-height,\n  prominent-height: $rmd-app-bar-prominent-height,\n  prominent-dense-height: $rmd-app-bar-prominent-dense-height,\n)",
+        "(\n  background-color: transparent,\n  color: rmd-theme-var(text-primary-on-background),\n  primary: $rmd-app-bar-primary-background-color,\n  on-primary: $rmd-app-bar-primary-color,\n  secondary: $rmd-app-bar-secondary-background-color,\n  on-secondary: $rmd-app-bar-secondary-color,\n  default-background-color: $rmd-app-bar-default-background-color,\n  default-light-background-color: $rmd-app-bar-default-light-theme-background-color,\n  default-dark-background-color: $rmd-app-bar-default-dark-theme-background-color,\n  default-color: $rmd-app-bar-default-color,\n  default-light-color: $rmd-app-bar-default-light-theme-color,\n  default-dark-color: $rmd-app-bar-default-dark-theme-color,\n  height: $rmd-app-bar-height,\n  dense-height: $rmd-app-bar-dense-height,\n  prominent-height: $rmd-app-bar-prominent-height,\n  prominent-dense-height: $rmd-app-bar-prominent-dense-height,\n)",
       compiled:
-        "(\n  background-color: transparent,\n  color: initial,\n  primary: var(--rmd-theme-primary, #9c27b0),\n  on-primary: var(--rmd-theme-on-primary, #000),\n  secondary: var(--rmd-theme-secondary, #f50057),\n  on-secondary: var(--rmd-theme-on-secondary, #000),\n  default-background-color: #f5f5f5,\n  default-light-background-color: #f5f5f5,\n  default-dark-background-color: #212121,\n  default-color: #000,\n  default-light-color: #000,\n  default-dark-color: #fff,\n  height: 3.5rem,\n  dense-height: 3rem,\n  prominent-height: 7rem,\n  prominent-dense-height: 6rem,\n)",
+        "(\n  background-color: transparent,\n  color: var(--rmd-theme-text-primary-on-background, #212121),\n  primary: var(--rmd-theme-primary, #9c27b0),\n  on-primary: var(--rmd-theme-on-primary, #000),\n  secondary: var(--rmd-theme-secondary, #f50057),\n  on-secondary: var(--rmd-theme-on-secondary, #000),\n  default-background-color: #f5f5f5,\n  default-light-background-color: #f5f5f5,\n  default-dark-background-color: #212121,\n  default-color: #000,\n  default-light-color: #000,\n  default-dark-color: #fff,\n  height: 3.5rem,\n  dense-height: 3rem,\n  prominent-height: 7rem,\n  prominent-dense-height: 6rem,\n)",
       overridable: true,
     },
   },