fix: tabs: remove background from tabs

package.json

@@ -16,6 +16,7 @@
         "analyze": "webpack --config webpack.dev.js --mode production --json > stats.json",
         "prepublish": "yarn build",
         "test": "jest",
+        "test:update": "jest -u",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"",
         "chromatic": "chromatic --exit-zero-on-changes",

src/__snapshots__/storybook.test.js.snap

@@ -966,6 +966,101 @@ Array [
 ]
 `;
 
+exports[`Storyshots Button Two State 1`] = `
+Array [
+  <h1>
+    Two State Button
+  </h1>,
+  <p>
+    Note: Like Toggle, Two State buttons require the
+
+    <code>
+      toggle
+    </code>
+     attribute in addition to
+
+    <code>
+      checked
+    </code>
+    . Two State button's visual state is different than a basic Toggle button.
+  </p>,
+  <button
+    aria-checked={false}
+    aria-disabled={false}
+    aria-label="Two State Button"
+    aria-pressed={false}
+    className="button twoStateButton"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    <span>
+      <span
+        aria-hidden={false}
+        className="icon iconWrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className=""
+      >
+        Two State Button
+      </span>
+      <span
+        className="counter"
+      >
+        8
+      </span>
+      <span
+        aria-hidden={false}
+        className="icon iconWrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </button>,
+]
+`;
+
 exports[`Storyshots ConfigProvider Theming 1`] = `
 <div
   className="theme-blue"
@@ -8699,6 +8794,105 @@ Array [
 ]
 `;
 
+exports[`Storyshots Snackbar Default 1`] = `
+<div>
+  <h1>
+    Snackbar
+  </h1>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack top center
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack top left
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack top right
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack bottom center
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack bottom left
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack bottom right
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    className="button buttonDefault buttonPadding3"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      className="button3"
+    >
+      Serve snack with action
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Tabs Default 1`] = `
 Array [
   <p>

src/components/Tabs/tabs.module.scss

@@ -1,5 +1,4 @@
 .tab-wrap {
-    --bg: var(--background-color);
     --label: var(--text-secondary-color);
     --active-label: var(--primary-color);
     --active-bg: var(--background-color);
@@ -20,7 +19,6 @@
         cursor: pointer;
         padding: $space-s $space-m;
         color: var(--label);
-        background-color: var(---bg);
         align-items: center;
         justify-content: center;
         position: relative;