Bootstrap style overrides break theming
In _global-styles.scss, success and warning button colors are manually darkened to meet a11y requirements:
btn-success / btn-outline-success: darkened via darken($success, …)
btn-warning / btn-outline-warning: darkened via darken($warning, …)
- Success button text color is hardcoded to
#fff
File reference:
https://github.com/DSpace/dspace-angular/blob/main/src/styles/_global-styles.scss#L363
Why this is a problem
- Breaks theming: custom
$success / $warning colors are always overridden, even if already a11y compliant
- Inconsistent across components: buttons use altered colors, while other components (badges, alerts, etc.) use base values
- Bypasses Bootstrap color system: semantic colors should be defined once and reused, not modified per variant
- Contrast handling becomes unreliable: hardcoded
color: #fff bypasses Bootstrap’s contrast logic (color-contrast() in BS5)
Root cause
Introduced in:
#2587
Accessibility fixes were applied to specific Bootstrap button variants instead of adjusting semantic theme colors.
Proposed solution
- Define accessible
$success and $warning colors at theme level
- Remove
darken(...) overrides from button styles
- Remove hardcoded
color: #fff
- Let Bootstrap handle contrast (
color-contrast() in BS5, or $yiq-contrast in BS4 for backports)
Expected outcome
- Consistent behavior across components
- Predictable theming
- Alignment with Bootstrap’s color system
Bootstrap style overrides break theming
In
_global-styles.scss, success and warning button colors are manually darkened to meet a11y requirements:btn-success/btn-outline-success: darkened viadarken($success, …)btn-warning/btn-outline-warning: darkened viadarken($warning, …)#fffFile reference:
https://github.com/DSpace/dspace-angular/blob/main/src/styles/_global-styles.scss#L363
Why this is a problem
$success/$warningcolors are always overridden, even if already a11y compliantcolor: #fffbypasses Bootstrap’s contrast logic (color-contrast()in BS5)Root cause
Introduced in:
#2587
Accessibility fixes were applied to specific Bootstrap button variants instead of adjusting semantic theme colors.
Proposed solution
$successand$warningcolors at theme leveldarken(...)overrides from button stylescolor: #fffcolor-contrast()in BS5, or$yiq-contrastin BS4 for backports)Expected outcome