use light-dark() function

basher · Nov 14, 2024 · 95fb621 · 95fb621
1 parent c927cc8
commit 95fb621
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 50 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git a/ui/src/css/components/banner.css b/ui/src/css/components/banner.css
@@ -33,11 +33,11 @@
 
         .banner__content {
             /* So text is legible above image. */
-            @media (prefers-color-scheme: dark) {
-                color: var(--color-neutral-darkest);
-            }
-
             background: var(--color-primary-100);
+            color: light-dark(
+                var(--color-neutral-darkest),
+                var(--color-neutral-darkest)
+            );
             inline-size: 40vw;
             margin-inline-start: var(--gutter-m);
             padding: var(--gutter-m);

diff --git a/ui/src/css/components/breadcrumb.css b/ui/src/css/components/breadcrumb.css
@@ -1,12 +1,10 @@
 .breadcrumb {
     [aria-current] {
-        color: var(--color-primary-500);
+        color: light-dark(
+            var(--color-primary-500),
+            var(--color-neutral-lightest)
+        );
         font-weight: bold;
-
-        /* stylelint-disable-next-line order/order */
-        @media (prefers-color-scheme: dark) {
-            color: inherit;
-        }
     }
 }
 

diff --git a/ui/src/css/components/button.css b/ui/src/css/components/button.css
@@ -59,15 +59,14 @@
 
 .button--positive {
     background-color: var(--color-success-500);
+    color: light-dark(
+        var(--color-neutral-darkest),
+        var(--color-neutral-darkest)
+    );
 
     &[class*='text'] {
         border-color: var(--color-success-500);
     }
-
-    /* stylelint-disable-next-line order/order */
-    @media (prefers-color-scheme: dark) {
-        color: var(--color-neutral-darkest);
-    }
 }
 
 .button--negative {

diff --git a/ui/src/css/components/nav.css b/ui/src/css/components/nav.css
@@ -1,12 +1,10 @@
 .nav {
     [aria-current] {
-        color: var(--color-primary-500);
+        color: light-dark(
+            var(--color-primary-500),
+            var(--color-neutral-lightest)
+        );
         font-weight: bold;
-
-        /* stylelint-disable-next-line order/order */
-        @media (prefers-color-scheme: dark) {
-            color: inherit;
-        }
     }
 }
 

diff --git a/ui/src/css/web-components/webui-image-gallery.css b/ui/src/css/web-components/webui-image-gallery.css
@@ -42,11 +42,6 @@ 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-modal.css b/ui/src/css/web-components/webui-modal.css
@@ -12,31 +12,27 @@ webui-modal {
 
     /* Browser already applies "position: fixed" and "width: fit-content". */
     .modal__dialog {
-        background: var(--color-neutral-lightest);
+        background: light-dark(
+            var(--color-neutral-lightest),
+            var(--color-neutral-dark)
+        );
         margin: auto;
         padding: 0 var(--gutter-m) var(--gutter-m);
 
-        /* stylelint-disable-next-line order/order */
-        @media (prefers-color-scheme: dark) {
-            background: var(--color-neutral-dark);
-        }
-
         &::backdrop {
             background: var(--color-backdrop);
             pointer-events: none; /* So click outside works */
         }
     }
 
     .modal__header {
-        background: var(--color-neutral-lightest);
+        background: light-dark(
+            var(--color-neutral-lightest),
+            var(--color-neutral-dark)
+        );
         display: flex;
         justify-content: flex-end;
         padding-block-start: var(--gutter-m);
-
-        /* stylelint-disable-next-line order/order */
-        @media (prefers-color-scheme: dark) {
-            background: var(--color-neutral-dark);
-        }
     }
 
     .modal__content {

diff --git a/ui/src/css/web-components/webui-tabs.css b/ui/src/css/web-components/webui-tabs.css
@@ -44,7 +44,14 @@ webui-tabs {
     }
 
     [role='tab'] {
-        background-color: var(--color-neutral-light);
+        background-color: light-dark(
+            var(--color-neutral-light),
+            var(--color-neutral-darkest)
+        );
+        color: light-dark(
+            var(--color-neutral-darkest),
+            var(--color-neutral-lightest)
+        );
         padding: var(--gutter-s);
         text-decoration: none;
         transition: background-color var(--animation-fast);
@@ -57,15 +64,6 @@ webui-tabs {
             background-color: var(--color-primary-500);
             color: var(--color-neutral-lightest);
         }
-
-        /* stylelint-disable-next-line order/order */
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--color-neutral-medium);
-
-            &[aria-selected='true'] {
-                color: inherit;
-            }
-        }
     }
 
     [role='tabpanel'] {