style(Theme): set background, color by default with theme zones (#11895)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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 (
     <>

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);