fix dark mode colours

basher · Nov 12, 2024 · acb3a9f · acb3a9f
1 parent e2b5e79
commit acb3a9f
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 29 deletions.
diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss
@@ -53,5 +53,6 @@ CSS custom properties (e.g. from "design tokens") for dynamic theming.
         --color-neutral-200: 0 0% 95%;
         --color-neutral-700: 0 0% 95%;
         --color-neutral-900: 0 0% 13%;
+        --color-accent-negative: 358 75% 63%;
     }
 }
diff --git a/ui/src/css/components/_banner.scss b/ui/src/css/components/_banner.scss
@@ -42,12 +42,11 @@ Dependencies.
             }
 
             .banner__content {
+                // So text is legible above image.
                 /* stylelint-disable-next-line max-nesting-depth */
                 @media (prefers-color-scheme: dark) {
-                    --color-neutral-700: 0 0% 20%;
+                    background: hsl(var(--color-brand) / 50%);
                 }
-
-                // Example, so text is legible above image.
                 background: hsl(var(--color-brand) / 10%);
                 inline-size: 40vw;
                 margin-inline-start: var(--gutter-m);
@@ -59,24 +58,26 @@ Dependencies.
     &__overlay {
         // TODO: Replace with container query.
         @media (width > 48em) {
-            // Example, so text is legible above image.
+            // So text is legible above image.
+            @media (prefers-color-scheme: dark) {
+                background: linear-gradient(
+                    to right,
+                    hsl(var(--color-brand) / 90%),
+                    transparent
+                );
+            }
             background: linear-gradient(
                 to right,
                 hsl(var(--color-brand) / 20%),
                 transparent
             );
             block-size: 100%;
-            inline-size: 50%;
+            inline-size: 60%;
         }
 
         + .banner__content {
             // TODO: Replace with container query.
             @media (width > 48em) {
-                /* stylelint-disable-next-line max-nesting-depth */
-                @media (prefers-color-scheme: dark) {
-                    --color-neutral-700: 0 0% 20%;
-                }
-
                 background: none;
             }
         }

diff --git a/ui/src/css/components/_button.scss b/ui/src/css/components/_button.scss
@@ -88,6 +88,11 @@ Dependencies.
         &[class*='text'] {
             border-color: var(--color-error);
         }
+
+        /* stylelint-disable-next-line order/order */
+        @media (prefers-color-scheme: dark) {
+            color: var(--color-neutral-dark);
+        }
     }
 
     &--icon {

diff --git a/ui/src/css/components/_nav.scss b/ui/src/css/components/_nav.scss
@@ -24,6 +24,11 @@ Dependencies.
     [aria-current] {
         color: var(--color-primary);
         font-weight: bold;
+
+        /* stylelint-disable-next-line order/order */
+        @media (prefers-color-scheme: dark) {
+            color: inherit;
+        }
     }
 
     // Disclosure navigation (with dropdowns).

diff --git a/ui/src/css/form/_checkbox.scss b/ui/src/css/form/_checkbox.scss
@@ -15,7 +15,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 var(--border-width-m) --color-error;
+            box-shadow: 0 0 0 var(--border-width-m) var(--color-error);
         }
     }
 }
diff --git a/ui/src/css/form/_form.scss b/ui/src/css/form/_form.scss
@@ -82,20 +82,20 @@ Dependencies.
 
     // Native HTML5 validation.
     &:valid:required {
-        background-color: hsl(var(--color-accent-positive) / 10%);
+        background-color: hsl(var(--color-success) / 10%);
         border-color: var(--color-success);
         border-width: var(--border-width-m);
     }
 
     &:user-invalid:required {
-        background-color: hsl(var(--color-accent-negative) / 10%);
+        background-color: hsl(var(--color-error) / 10%);
         border-color: var(--color-error);
         border-width: var(--border-width-m);
     }
 
     // ARIA.
     &[aria-invalid='true'] {
-        background-color: hsl(var(--color-accent-negative) / 10%);
+        background-color: hsl(var(--color-error) / 10%);
         border-color: var(--color-error);
         border-width: var(--border-width-m);
     }

diff --git a/ui/src/css/form/_radio.scss b/ui/src/css/form/_radio.scss
@@ -15,7 +15,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 var(--border-width-m) --color-error;
+            box-shadow: 0 0 0 var(--border-width-m) var(--color-error);
         }
     }
 }
diff --git a/ui/src/css/form/_select.scss b/ui/src/css/form/_select.scss
@@ -3,12 +3,6 @@
 Basic component styles are in "form.css".
 ----------------------------------------------------------------------------
 */
-@use '../base' as *;
-
 .select {
-    @media (prefers-color-scheme: dark) {
-        option {
-            color: var(--color-neutral-dark);
-        }
-    }
+    //
 }
diff --git a/ui/src/css/web-components/_webui-image-gallery.scss b/ui/src/css/web-components/_webui-image-gallery.scss
@@ -49,6 +49,9 @@ webui-image-gallery {
     }
 
     .modal__close {
+        @media (prefers-color-scheme: dark) {
+            background: inherit;
+        }
         background: var(--color-neutral-light);
         margin: var(--gutter-s);
     }

diff --git a/ui/src/css/web-components/_webui-make-clickable.scss b/ui/src/css/web-components/_webui-make-clickable.scss
@@ -25,7 +25,7 @@ webui-make-clickable {
         // Visible focus state only if 'data-url' link receives keyboard focus.
         &:focus-within {
             &:has([data-url]:focus-visible) {
-                box-shadow: 0 0 0 var(--border-width-l) --color-focus;
+                box-shadow: 0 0 0 var(--border-width-l) var(--color-focus);
                 outline: var(--border-width-l) solid transparent; // So high contrast mode works.
             }
         }

diff --git a/ui/src/css/web-components/_webui-notify.scss b/ui/src/css/web-components/_webui-notify.scss
@@ -17,17 +17,17 @@ webui-notify {
     }
 
     &[data-success] {
-        background: hsl(var(--color-accent-positive) / 15%);
+        background: hsl(var(--color-success) / 15%);
         border-color: var(--color-success);
     }
 
     &[data-warning] {
-        background: hsl(var(--color-accent-neutral) / 15%);
+        background: hsl(var(--color-notify) / 15%);
         border-color: var(--color-notify);
     }
 
     &[data-error] {
-        background: hsl(var(--color-accent-negative) / 15%);
+        background: hsl(var(--color-error) / 15%);
         border-color: var(--color-error);
     }
 

diff --git a/ui/stories/7. Utilities/Utilities.js b/ui/stories/7. Utilities/Utilities.js
@@ -29,20 +29,20 @@ ${args.paddingInline && args.paddingInline !== '' ? `u-p-inline--${args.paddingI
 `;
 
 export const ScreenReaderHtml = () => `
-<p>The content below is hidden visually, but still announced by screen readers...</p>
+<p>The content in the <code>&lt;div&gt;</code> below is hidden visually, but still announced by screen readers...</p>
 
 <div class="visually-hidden">
     Visually hide content, but still make it available to screen readers.
 </div>
 `;
 
 export const HideContentHtml = () => `
-<p>The content below is removed from the DOM entirely...</p>
+<p>The content in the <code>&lt;div&gt;</code> below is removed from the DOM entirely...</p>
 <div class="u-hidden">
     Remove content from the DOM.
 </div>
 
-<p>And so is this content...</p>
+<p>And so is this content in the <code>&lt;div&gt;</code> below...</p>
 <div hidden>
     Remove content from the DOM.
 </div>