css: Refactor theme colors for widgets.

This change moves the light and dark theme colors for todo
and poll widget to CSS variables.

web/styles/app_variables.css

@@ -689,6 +689,17 @@
     --color-text-url-hover: hsl(200deg 100% 25%);
     --color-text-settings-field-hint: hsl(0deg 0% 57%);
 
+    /* Widgets colors */
+    --color-todo-checkbox-border: hsl(156deg 28% 70%);
+    --color-todo-checkbox-border-hover: hsl(156deg 30% 50%);
+    --color-todo-checkbox-background-checked: hsl(156deg 41% 40%);
+    --color-todo-checkbox-outline-focus: hsl(0deg 0% 100% / 0%);
+    --color-poll-vote-text: hsl(156deg 41% 40%);
+    --color-poll-vote-border: hsl(156deg 28% 70%);
+    --color-poll-vote-border-hover: hsl(156deg 30% 50%);
+    --color-poll-vote-background-focus: hsl(156deg 41% 90%);
+    --color-poll-names-text: hsl(0deg 0% 45%);
+
     /* Markdown colors */
     --color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
     --color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@@ -1140,6 +1151,17 @@
     --color-text-url-hover: hsl(200deg 79% 66%);
     --color-text-settings-field-hint: hsl(0deg 0% 52%);
 
+    /* Widgets colors */
+    --color-todo-checkbox-border: hsl(185deg 40% 45%);
+    --color-todo-checkbox-border-hover: hsl(185deg 40% 35%);
+    --color-todo-checkbox-background-checked: hsl(185deg 40% 45%);
+    --color-todo-checkbox-outline-focus: hsl(0deg 0% 100% / 0%);
+    --color-poll-vote-text: hsl(185deg 35% 65%);
+    --color-poll-vote-border: hsl(185deg 35% 35%);
+    --color-poll-vote-border-hover: hsl(185deg 40% 40%);
+    --color-poll-vote-background-focus: hsl(185deg 40% 35%);
+    --color-poll-names-text: hsl(236deg 15% 70%);
+
     /* Markdown colors */
     --color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
     --color-border-rendered-markdown-table: hsl(0deg 0% 33%);

web/styles/dark_theme.css

@@ -923,25 +923,16 @@
     /* Widgets: Poll */
     .poll-widget {
         .poll-vote {
-            color: hsl(185deg 35% 65%);
-            border-color: hsl(185deg 35% 35%);
-
             &:hover {
                 color: hsl(185deg 50% 70%);
-                border-color: hsl(185deg 40% 40%);
                 background-color: hsl(185deg 20% 20%);
             }
 
             &:focus {
                 color: hsl(185deg 50% 65%);
                 border-color: hsl(185deg 40% 50%);
-                background-color: hsl(185deg 40% 35%);
             }
         }
-
-        .poll-names {
-            color: hsl(236deg 15% 70%);
-        }
     }
 
     /* Widgets: Todo */
@@ -949,21 +940,11 @@
         & label.checkbox {
             & input[type="checkbox"] {
                 ~ .custom-checkbox {
-                    border-color: hsl(185deg 40% 45%);
                     opacity: 0.7;
                 }
 
                 &:hover ~ .custom-checkbox {
                     background-color: hsl(185deg 20% 20%);
-                    border-color: hsl(185deg 40% 35%);
-                }
-
-                &:checked ~ .custom-checkbox {
-                    background-color: hsl(185deg 40% 45%);
-                }
-
-                &:focus ~ .custom-checkbox {
-                    outline-color: hsl(0deg 0% 100% / 0%);
                 }
             }
         }

web/styles/widgets.css

@@ -70,7 +70,7 @@
                 line-height: 0.8;
                 font-size: 1.3rem;
                 text-align: center;
-                border: 2px solid hsl(156deg 28% 70%);
+                border: 2px solid var(--color-todo-checkbox-border);
 
                 border-radius: 4px;
                 filter: brightness(1);
@@ -83,7 +83,7 @@
                 background-size: 75%;
                 background-position: 50% 50%;
                 background-repeat: no-repeat;
-                background-color: hsl(156deg 41% 40%);
+                background-color: var(--color-todo-checkbox-background-checked);
                 border: 2px solid hsl(156deg 41% 40%);
             }
 
@@ -93,11 +93,11 @@
             }
 
             &:hover ~ .custom-checkbox {
-                border-color: hsl(156deg 30% 50%);
+                border-color: var(--color-todo-checkbox-border-hover);
             }
 
             &:focus ~ .custom-checkbox {
-                outline-color: hsl(0deg 0% 100% / 0%);
+                outline-color: var(--color-todo-checkbox-outline-focus);
             }
         }
     }
@@ -164,8 +164,8 @@
     }
 
     .poll-vote {
-        color: hsl(156deg 41% 40%);
+        color: var(--color-poll-vote-text);
-        border-color: hsl(156deg 28% 70%);
+        border-color: var(--color-poll-vote-border);
         border-style: solid;
         font-weight: 600;
         border-radius: 3px;
@@ -175,17 +175,17 @@
         background-color: var(--color-background-widget-button);
 
         &:hover {
-            border-color: hsl(156deg 30% 50%);
+            border-color: var(--color-poll-vote-border-hover);
         }
 
         &:focus {
             outline: 0;
-            background-color: hsl(156deg 41% 90%);
+            background-color: var(--color-poll-vote-background-focus);
         }
     }
 
     .poll-names {
-        color: hsl(0deg 0% 45%);
+        color: var(--color-poll-names-text);
         /* Aim for 50% of the flexbox for voting names,
            but also shrink modestly (.5) adjacent a long
            option. */