Merge pull request #700 from strapi/fix/document-button-color-tokens

[Fix] Document button color tokens to sroy
strapi · Sep 20, 2022 · e61bc09 · e61bc09
2 parents 852cdd8 + 7fa8e6a
commit e61bc09
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/packages/strapi-design-system/src/themes/Theme.stories.mdx b/packages/strapi-design-system/src/themes/Theme.stories.mdx
@@ -31,7 +31,7 @@ This is the light colors used for the light mode
     {() => {
       const { color } = lightColorTokenObject;
       /* Excluding warning since they don't have enough contrast on for neutral900 and neutral0 */
-      const colorsKey = Object.keys(color).filter((color) => !color.includes('warning') && !color.includes('button'));
+      const colorsKey = Object.keys(color).filter((color) => !color.includes('warning'));
       const colors = [];
       const conditions = ['600', '700', '800', '900', '1000'];
       let ruptureKey;

diff --git a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap
@@ -46360,6 +46360,46 @@ exports[`Storyshots Design System/Components/Theme light colors 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="c4"
+          >
+            <div
+              class="c5"
+            >
+              <div
+                class="c6 c7"
+                spacing="2"
+              >
+                <div
+                  style="padding: 12px; background: rgb(255, 255, 255);"
+                >
+                  <p
+                    style="color: black;"
+                  >
+                    buttonNeutral0
+                  </p>
+                </div>
+                <div
+                  style="padding: 12px; background: rgb(123, 121, 255);"
+                >
+                  <p
+                    style="color: black;"
+                  >
+                    buttonPrimary500
+                  </p>
+                </div>
+                <div
+                  style="padding: 12px; background: rgb(73, 69, 255);"
+                >
+                  <p
+                    style="color: white;"
+                  >
+                    buttonPrimary600
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="c4"
           >