Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JohnC-80 wants to merge 4 commits into
base: main
Choose a base branch
from
+10 −4
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
887dfc5
add 'color-text-active' variable, apply to button
JohnC-80 Aug 14, 2026
747ac20
apply color-text-active variable to interactionStyles
JohnC-80 Aug 14, 2026
4324e22
Merge branch 'main' into STCOM-1544
JohnC-80 Aug 21, 2026
e8f377d
Update CHANGELOG for color-text-active variable
JohnC-80 Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. Resolves Button's text disappearing when in the `:active` state. Refs STCOM-1544.

## [13.1.0](https://github.com/folio-org/stripes-components/tree/v13.1.0) (2026-04-14)

Expand Down
4 changes: 4 additions & 0 deletions lib/Button/Button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
& :global .stripes__icon {
fill: var(--primary);
}

&[class*="interactionStyles---"]:active {
color: var(--color-text-active);
}
}


Expand Down
8 changes: 4 additions & 4 deletions lib/sharedStyles/interactionStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions lib/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading