STCOM-1544 - Dark/disappearing button text in the active state.

CHANGELOG.md

@@ -17,6 +17,7 @@
 * Update MCL rendering to conform to axe tests. Refs STCOM-1535.
 * Convert MCL layout elements to a `flex-box` column. Resolves issues where pagination buttons would not show up on the first render. Refs STCOM-1536.
 * Resolve color contrast issues on selected MCL rows, IconButtons, focus styles. Refs STCOM-1541.
+* Add color variable for `color-text-active` for interactive elements in the `:active` state. Refs STCOM-1544.
 
 ## [13.1.0](https://github.com/folio-org/stripes-components/tree/v13.1.0) (2026-04-14)
 

lib/Button/Button.css

@@ -80,6 +80,10 @@
     & :global .stripes__icon {
       fill: var(--primary);
     }
+
+    &[class*="interactionStyles---"]:active {
+      color: var(--color-text-active);
+    }
   }
 
 

lib/sharedStyles/interactionStyles.css

@@ -187,23 +187,23 @@ div[class*="Selected---"] {
 .isActive,
 .interactionStylesControl:active > .interactionStyles,
 .interactionStyles:active {
-  color: #fff;
-  & svg { fill: #fff; }
+  color: var(--color-text-active);
+  & svg { fill: var(--color-text-active); }
 }
 
 .isActive::before,
 .interactionStylesControl:active > .interactionStyles::before,
 .interactionStyles:active::before {
   background: var(--color-fill-active);
   border: 1px solid var(--color-border);
-  color: #fff;
+  color: var(--color-text-active);
   z-index: -1; /* keep the active style behind any text etc */
 }
 
 .interactionStyles.hasDot.isActive:active::after,
 .interactionStylesControl:active > .interactionStyles.hasDot::after,
 .interactionStyles.hasDot:active::after {
-  background-color: #fff;
+  background-color: var(--color-text-active);
   visibility: visible;
   opacity: 1;
 }

lib/variables.css

@@ -1,5 +1,6 @@
 :root {
   --color-text: #000;
+  --color-text-active: #fff;
   --color-text-p2: rgba(0 0 0 / 62%);
   --color-border-form: rgba(0 0 0 / 42%);
   --color-border: color-mix(in oklch, currentcolor 50%, transparent);