style: Add a new variable: --text-fg-on-accent

This removes a hard-coded "white" from the styling of the
button. Instead, the theme designer can now choose an appropriate
color for text that is displayed against a background of
--accent-color.

diff --git a/style.css b/style.css
index b770986f8164b899764069f1e9f736d32a5338cd..877ef5980b7340d1453a2107cf6f0c76349f1f82 100644 (file)
--- a/style.css
+++ b/style.css
@@ -22,6 +22,7 @@
     /* A little color to avoid a fully monochromatic theme. */
     --accent-color: #287789;
     --accent-color-bright: #44c7ef;
     /* A little color to avoid a fully monochromatic theme. */
     --accent-color: #287789;
     --accent-color-bright: #44c7ef;

+    --text-fg-on-accent: white;

 
     /* Some colors intended to convey semnatics. */
     --warning-color: #ffa92a;
 
     /* Some colors intended to convey semnatics. */
     --warning-color: #ffa92a;


@@ -261,7 +262,7 @@ button {
     border-radius: 4px;
     background-color: var(--accent-color);
     border: none;
     border-radius: 4px;
     background-color: var(--accent-color);
     border: none;

-    color: white;
+    color: var(--text-fg-on-accent);

     text-align: center;
     font-size: 125%;
     margin-top: .25em;
     text-align: center;
     font-size: 125%;
     margin-top: .25em;