chore(documentation): improve storybook contrast on mode buttons (#3715)

swisspost · Oct 10, 2024 · e4c188f · e4c188f
1 parent af9df49
commit e4c188f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 
+.addon-label {
+  color: post.$body-color !important;
+}
+
 .addon-dropdown {
   min-width: 12rem;
   display: flex;

diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
@@ -164,7 +164,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Theme: {currentTheme}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Theme: {currentTheme}
+        </IconButton>
       </WithTooltip>
 
       {/* Channel dropdown */}
@@ -186,7 +188,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Chanel: {currentChannel}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Chanel: {currentChannel}
+        </IconButton>
       </WithTooltip>
 
       {/* Mode dropdown */}
@@ -208,7 +212,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Mode: {currentMode}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Mode: {currentMode}
+        </IconButton>
       </WithTooltip>
     </>
   );

diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
@@ -102,7 +102,7 @@ function VersionSwitcher() {
         </>
       )}
     >
-      <IconButton placeholder="Versions">
+      <IconButton placeholder="Versions" className="addon-label">
         v{CURRENT_MINOR_VERSION}
         <post-icon name="2052"></post-icon>
       </IconButton>