feat(styles): set background color on body (#11255)

* feat(styles): set background color on body * feat(styles): add support for css--body in config * chore(test): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Apr 28, 2022 · 3b7b2c0 · 3b7b2c0
1 parent 73d5c3e
commit 3b7b2c0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`@carbon/styles/scss/config Public API 1`] = `
 Object {
+  "css--body": true,
   "css--default-type": true,
   "css--font-face": true,
   "css--reset": true,

diff --git a/packages/styles/scss/_config.scss b/packages/styles/scss/_config.scss
@@ -5,6 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/// Specify whether default styles should be emitted for the <body> element,
+/// specifically background and text color
+/// @access public
+/// @type Bool
+/// @group config
+$css--body: true !default;
+
 /// If true, includes font face mixins from scss/fonts
 /// @access public
 /// @type Bool

diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss
@@ -7,6 +7,7 @@
 
 @use 'config';
 @use 'type' as type;
+@use './utilities/custom-property';
 
 @mixin reset {
   /// http://meyerweb.com/eric/tools/css/reset/
@@ -118,6 +119,11 @@
   }
 
   body {
+    @if config.$css--body == true {
+      background-color: custom-property.get-var('background', #ffffff);
+      color: custom-property.get-var('text-primary', #161616);
+    }
+
     line-height: 1;
   }