Bootstrap 5: Override button text colours, force to white

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5c88da6b7545e304985f71d389f584ec6919fed3..d3b6868a44fe527d8603809c7a43502049311f15 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -191,7 +191,7 @@ nav.secondary {
 
   .login-menu {
     .btn-outline-secondary {
-      @include button-outline-variant($darkgrey);
+      @include button-outline-variant($darkgrey, $white, null, null, $white);
     }
   }
 
@@ -680,6 +680,23 @@ legend {
   float: none;
 }
 
+/* Override the text colour for primary and secondary buttons, to match our
+   bootstrap 4 colours. Note this has accessibility issues, which is why
+   bootstrap 5 calculates black as the appropriate colour, and we should
+   reconsider our colours at some point with that in mind. */
+
+.btn-primary {
+  @include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant($secondary, $white, null, null, $white);
+}
+
 /* Rules for the search and direction forms */
 
 header .search_forms,