refactor: update background color integration (#1985)

chanzuckerberg · Jun 10, 2024 · f6e280f · f6e280f
1 parent d6ccc8d
commit f6e280f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 30 deletions.
diff --git a/src/components/Button/Button-v2.stories.tsx b/src/components/Button/Button-v2.stories.tsx
@@ -127,13 +127,11 @@ export const InverseRanks: StoryObj<Args> = {
     ...DefaultRanks.args,
     variant: 'inverse',
   },
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
   render: DefaultRanks.render,
-  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
-  decorators: [
-    (Story) => (
-      <div className="bg-[var(--eds-color-blue-850)] p-1">{Story()}</div>
-    ),
-  ],
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
 };
 
 /**
@@ -145,13 +143,11 @@ export const InverseDisabledRanks: StoryObj<Args> = {
     variant: 'inverse',
     isDisabled: true,
   },
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
   render: DefaultRanks.render,
-  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
-  decorators: [
-    (Story) => (
-      <div className="bg-[var(--eds-color-blue-850)] p-1">{Story()}</div>
-    ),
-  ],
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
 };
 
 /**

diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
@@ -245,7 +245,7 @@ exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
 
 exports[`<Button /> (v2) InverseDisabledRanks story renders snapshot 1`] = `
 <div
-  class="bg-[var(--eds-color-blue-850)] p-1"
+  class="p-1"
 >
   <div
     class="flex gap-1"
@@ -289,7 +289,7 @@ exports[`<Button /> (v2) InverseDisabledRanks story renders snapshot 1`] = `
 
 exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
 <div
-  class="bg-[var(--eds-color-blue-850)] p-1"
+  class="p-1"
 >
   <div
     class="flex gap-1"

diff --git a/src/components/Link/Link-v2.stories.tsx b/src/components/Link/Link-v2.stories.tsx
@@ -86,16 +86,16 @@ export const Emphasis: StoryObj<Args> = {
 /**
  * We also include an inverse variant, for use on dark backgrounds.
  */
-export const Inverse: StoryObj<Args> = {
+export const InverseVariant: StoryObj<Args> = {
   args: {
     variant: 'inverse',
   },
-  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
   decorators: [
     (Story) => (
-      <div className="w-96 bg-[var(--eds-color-blue-850)] p-1 text-center text-utility-inverse">
-        {Story()}
-      </div>
+      <div className="w-96 p-1 text-center text-utility-inverse">{Story()}</div>
     ),
   ],
 };

diff --git a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap b/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
@@ -80,12 +80,12 @@ exports[`<Link /> InheritColor story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Link /> Inverse story renders snapshot 1`] = `
+exports[`<Link /> InverseVariant story renders snapshot 1`] = `
 <div
   class="text-utility-default-primary"
 >
   <div
-    class="w-96 bg-[var(--eds-color-blue-850)] p-1 text-center text-utility-inverse"
+    class="w-96 p-1 text-center text-utility-inverse"
   >
     <a
       class="link link--emphasis-default link--size-lg link--variant-inverse"

diff --git a/src/components/TabGroup/TabGroup.stories.tsx b/src/components/TabGroup/TabGroup.stories.tsx
@@ -101,7 +101,7 @@ export const Default: StoryObj<Args> = {
  * TabGroups have an inverted variant, for use on dark backgrounds. Depending on how the background is applied, you can use
  * text color tokens to style the individual tabs in the group.
  */
-export const Inverted: StoryObj<Args> = {
+export const InverseVariant: StoryObj<Args> = {
   args: {
     variant: 'inverse',
     children: (
@@ -164,14 +164,10 @@ export const Inverted: StoryObj<Args> = {
       </>
     ),
   },
-  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
-  decorators: [
-    (Story) => (
-      <div className="bg-[var(--eds-color-blue-850)] p-1">{Story()}</div>
-    ),
-  ],
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
   parameters: {
     ...Default.parameters,
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
   },
 };
 

diff --git a/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap b/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap
@@ -240,9 +240,9 @@ exports[`<TabGroup /> Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<TabGroup /> Inverted story renders snapshot 1`] = `
+exports[`<TabGroup /> InverseVariant story renders snapshot 1`] = `
 <div
-  class="bg-[var(--eds-color-blue-850)] p-1"
+  class="p-1"
 >
   <div
     class="tabs"