From acb3a9fac5eb9c1211eec896c0ee58e1be2db8a3 Mon Sep 17 00:00:00 2001 From: basher Date: Tue, 12 Nov 2024 10:21:29 +0000 Subject: [PATCH] fix dark mode colours --- ui/src/css/_root-css-vars.scss | 1 + ui/src/css/components/_banner.scss | 21 ++++++++++--------- ui/src/css/components/_button.scss | 5 +++++ ui/src/css/components/_nav.scss | 5 +++++ ui/src/css/form/_checkbox.scss | 2 +- ui/src/css/form/_form.scss | 6 +++--- ui/src/css/form/_radio.scss | 2 +- ui/src/css/form/_select.scss | 8 +------ .../web-components/_webui-image-gallery.scss | 3 +++ .../web-components/_webui-make-clickable.scss | 2 +- ui/src/css/web-components/_webui-notify.scss | 6 +++--- ui/stories/7. Utilities/Utilities.js | 6 +++--- 12 files changed, 38 insertions(+), 29 deletions(-) diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss index e775e21..4fcc431 100644 --- 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 index af1d139..1d80ea1 100644 --- 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 index 0df6479..2fe368c 100644 --- 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 index 27229da..1b69898 100644 --- 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 index 27a3a87..3d4af22 100644 --- 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 index bbe1141..40a126d 100644 --- 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 index 4e2836d..e98fa29 100644 --- 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 index adaa042..268b5f5 100644 --- 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 index d4f26a0..67fbad1 100644 --- 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 index 76ebe01..80f5563 100644 --- 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 index 83632a8..9a57ded 100644 --- 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 index 7a28ca4..9187499 100644 --- a/ui/stories/7. Utilities/Utilities.js +++ b/ui/stories/7. Utilities/Utilities.js @@ -29,7 +29,7 @@ ${args.paddingInline && args.paddingInline !== '' ? `u-p-inline--${args.paddingI `; export const ScreenReaderHtml = () => ` -

The content below is hidden visually, but still announced by screen readers...

+

The content in the <div> below is hidden visually, but still announced by screen readers...

Visually hide content, but still make it available to screen readers. @@ -37,12 +37,12 @@ export const ScreenReaderHtml = () => ` `; export const HideContentHtml = () => ` -

The content below is removed from the DOM entirely...

+

The content in the <div> below is removed from the DOM entirely...

Remove content from the DOM.
-

And so is this content...

+

And so is this content in the <div> below...