From 95fb621e118f7be623be0095c5e424490a9baa11 Mon Sep 17 00:00:00 2001 From: basher Date: Thu, 14 Nov 2024 17:14:09 +0000 Subject: [PATCH] use light-dark() function --- ui/npm-shrinkwrap.json | 4 ++-- ui/src/css/components/banner.css | 8 ++++---- ui/src/css/components/breadcrumb.css | 10 ++++------ ui/src/css/components/button.css | 9 ++++----- ui/src/css/components/nav.css | 10 ++++------ .../web-components/webui-image-gallery.css | 5 ----- ui/src/css/web-components/webui-modal.css | 20 ++++++++----------- ui/src/css/web-components/webui-tabs.css | 18 ++++++++--------- 8 files changed, 34 insertions(+), 50 deletions(-) diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json index 100e13a..0ef71e5 100644 --- a/ui/npm-shrinkwrap.json +++ b/ui/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "web-ui-boilerplate", - "version": "4.0.3", + "version": "4.0.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "web-ui-boilerplate", - "version": "4.0.3", + "version": "4.0.4", "license": "ISC", "dependencies": { "dialog-polyfill": "^0.5.6" diff --git a/ui/src/css/components/banner.css b/ui/src/css/components/banner.css index baf442b..760fee4 100644 --- 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 index 6c68529..16ca89b 100644 --- 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 index 55d7e8d..445e54c 100644 --- 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 index 98e0061..c2eb4e8 100644 --- 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 index 408570a..0d06932 100644 --- 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 index fca708c..d5dd2c8 100644 --- a/ui/src/css/web-components/webui-modal.css +++ b/ui/src/css/web-components/webui-modal.css @@ -12,15 +12,13 @@ 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 */ @@ -28,15 +26,13 @@ webui-modal { } .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 index 3d412f8..a441bad 100644 --- 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'] {