fix(content): removed foreground and background colors

* Moved background color and foreground color to theme based file on html and body elements
* Update docs and demos to use default grey background color
* update subHeader to use background-hue-2

> breaking

Closes #7422

Author: EladBezalel

docs/app/css/layout-demo.css

@@ -1,6 +1,5 @@
 demo-include {
   display: block;
-  background-color:white;
 }
 
 .colorNested .demo-content > div div  {

docs/app/css/style.css

@@ -544,11 +544,6 @@ md-tabs.demo-source-tabs .active md-tab-label {
   flex: 1 1 0%;
 }
 
-md-content.md-default-theme, md-content {
-  background-color: white;
-}
-
-
 .demo-content > div[layout-fill] {
   min-height: 448px;
 }

gulp/config.js

@@ -21,7 +21,8 @@ module.exports = {
   ],
   themeBaseFiles: [
     'src/core/style/variables.scss',
-    'src/core/style/mixins.scss'
+    'src/core/style/mixins.scss',
+    'src/core/style/themes.scss'
   ],
   scssBaseFiles: [
     'src/core/style/color-palette.scss',

src/components/content/content-theme.scss

@@ -1,4 +1,3 @@
 md-content.md-THEME_NAME-theme {
   color: '{{foreground-1}}';
-  background-color: '{{background-color}}';
 }

src/components/list/demoBasicUsage/style.css

@@ -1,5 +1,5 @@
 md-divider {
     margin-top: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 0;
 }
 

src/components/list/demoListControls/style.css

@@ -1,8 +1,11 @@
 md-divider {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
+md-list {
+    padding-top:0;
+}
 md-list-item > p,
 md-list-item > ._md-list-item-inner > p,
 md-list-item ._md-list-item-inner > p,

src/components/menuBar/demoBasicUsage/style.css

@@ -1,5 +1,4 @@
 .page-container {
-  background-color: #f1f1f1;
   padding: 32px;
 }
 

src/components/subheader/subheader-theme.scss

@@ -1,6 +1,6 @@
 .md-subheader.md-THEME_NAME-theme {
   color: '{{ foreground-2-0.23 }}';
-  background-color: '{{background-color}}';
+  background-color: '{{background-hue-2}}';
 
   &.md-primary {
     color: '{{primary-color}}'

src/core/style/structure.scss

@@ -1,7 +1,5 @@
 html, body {
   height: 100%;
-  color: rgba(0,0,0,0.87);
-  background: white;
   position: relative;
 }
 

src/core/style/themes.scss

@@ -0,0 +1,8 @@
+/*  Only used with Theme processes */
+
+html, body {
+  &.md-THEME_NAME-theme {
+    color: '{{primary-color}}';
+    background-color: '{{background-50}}';
+  }
+}