From f78146cb71e3b2d014eb6ef7a28cffdc5034f09d Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 3 Aug 2022 13:13:36 -0400
Subject: [PATCH] style(Theme): set background, color by default with theme
 zones (#11895)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/Button/Button.stories.js   | 20 +++++++++++++++++++
 packages/styles/scss/_zone.scss               |  3 +++
 2 files changed, 23 insertions(+)

diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js
index 403404553aa7..929f66e16d60 100644
--- a/packages/react/src/components/Button/Button.stories.js
+++ b/packages/react/src/components/Button/Button.stories.js
@@ -10,6 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { Add } from '@carbon/icons-react';
 import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
+import { Theme } from '../Theme';
 import mdx from './Button.mdx';
 
 export default {
@@ -78,6 +79,25 @@ export const Tertiary = (args) => {
   );
 };
 
+export const ThemeTest = () => {
+  return (
+    <Theme theme="g100">
+      <Button kind="primary" disabled>
+        Hello world
+      </Button>
+      <Button kind="secondary" disabled>
+        Hello world
+      </Button>
+      <Button kind="tertiary" disabled>
+        Hello world
+      </Button>
+      <Button kind="ghost" disabled>
+        Hello world
+      </Button>
+    </Theme>
+  );
+};
+
 export const Danger = (args) => {
   return (
     <>
diff --git a/packages/styles/scss/_zone.scss b/packages/styles/scss/_zone.scss
index bd222aa4c2d4..9187c83947cf 100644
--- a/packages/styles/scss/_zone.scss
+++ b/packages/styles/scss/_zone.scss
@@ -36,6 +36,9 @@ $-components: (
 
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
+    background: var(--cds-background);
+    color: var(--cds-text-primary);
+
     @each $key, $value in $theme {
       @if type-of($value) == color {
         @include custom-property.declaration($key, $value);