From 216458ebd156319d83214125ba26c0f17d82fddc Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Wed, 24 Jul 2024 12:20:06 -0700 Subject: [PATCH] rebase tests from css change --- tests/algorithm001.html | 36 +++++++++++++++---- tests/github/WICG/app-history/spec.html | 36 +++++++++++++++---- tests/github/WICG/background-fetch/index.html | 36 +++++++++++++++---- .../spec/PeriodicBackgroundSync-index.html | 36 +++++++++++++++---- tests/github/WICG/contact-api/spec/index.html | 36 +++++++++++++++---- .../github/WICG/content-index/spec/index.html | 36 +++++++++++++++---- .../conversion-measurement-api/index.html | 36 +++++++++++++++---- tests/github/WICG/cookie-store/index.html | 36 +++++++++++++++---- tests/github/WICG/document-policy/index.html | 36 +++++++++++++++---- tests/github/WICG/element-timing/index.html | 36 +++++++++++++++---- tests/github/WICG/entries-api/index.html | 36 +++++++++++++++---- tests/github/WICG/event-timing/index.html | 36 +++++++++++++++---- .../github/WICG/file-system-access/index.html | 36 +++++++++++++++---- .../spec/index.html | 36 +++++++++++++++---- tests/github/WICG/idle-detection/index.html | 36 +++++++++++++++---- tests/github/WICG/import-maps/spec.html | 36 +++++++++++++++---- tests/github/WICG/keyboard-lock/index.html | 36 +++++++++++++++---- tests/github/WICG/keyboard-map/index.html | 36 +++++++++++++++---- tests/github/WICG/kv-storage/spec.html | 36 +++++++++++++++---- .../WICG/largest-contentful-paint/index.html | 36 +++++++++++++++---- .../github/WICG/layout-instability/index.html | 36 +++++++++++++++---- .../github/WICG/local-font-access/index.html | 36 +++++++++++++++---- tests/github/WICG/page-lifecycle/spec.html | 36 +++++++++++++++---- .../WICG/periodic-background-sync/index.html | 36 +++++++++++++++---- tests/github/WICG/portals/index.html | 36 +++++++++++++++---- tests/github/WICG/sanitizer-api/index.html | 36 +++++++++++++++---- .../WICG/scroll-to-text-fragment/index.html | 36 +++++++++++++++---- tests/github/WICG/ua-client-hints/index.html | 36 +++++++++++++++---- tests/github/WICG/video-rvfc/index.html | 36 +++++++++++++++---- tests/github/WICG/web-locks/index.html | 36 +++++++++++++++---- tests/github/WICG/webpackage/loading.html | 36 +++++++++++++++---- .../github/WebAudio/web-audio-api/index.html | 36 +++++++++++++++---- .../WebBluetoothCG/web-bluetooth/index.html | 36 +++++++++++++++---- .../web-bluetooth/scanning.html | 36 +++++++++++++++---- tests/github/heycam/webidl/index.html | 36 +++++++++++++++---- tests/github/immersive-web/anchors/index.html | 36 +++++++++++++++---- .../immersive-web/depth-sensing/index.html | 36 +++++++++++++++---- .../github/immersive-web/hit-test/index.html | 36 +++++++++++++++---- .../immersive-web/layers/webxrlayers-1.html | 36 +++++++++++++++---- .../lighting-estimation/index.html | 36 +++++++++++++++---- .../real-world-geometry/plane-detection.html | 36 +++++++++++++++---- .../immersive-web/webxr-hand-input/index.html | 36 +++++++++++++++---- .../immersive-web/webxr-test-api/index.html | 36 +++++++++++++++---- tests/github/immersive-web/webxr/index.html | 36 +++++++++++++++---- .../private-click-measurement.html | 36 +++++++++++++++---- tests/github/w3c/FileAPI/index.html | 36 +++++++++++++++---- tests/github/w3c/IndexedDB/index.html | 36 +++++++++++++++---- .../github/w3c/ServiceWorker/docs/index.html | 36 +++++++++++++++---- .../w3c/ServiceWorker/docs/v1/index.html | 36 +++++++++++++++---- .../WD-service-workers-20160830/index.html | 36 +++++++++++++++---- .../WD-service-workers-1-20161011/index.html | 36 +++++++++++++++---- tests/github/w3c/accelerometer/index.html | 36 +++++++++++++++---- tests/github/w3c/ambient-light/index.html | 36 +++++++++++++++---- tests/github/w3c/clipboard-apis/index.html | 36 +++++++++++++++---- .../css-animation-worklet-1/Overview.html | 36 +++++++++++++++---- .../css-layout-api/Overview.html | 36 +++++++++++++++---- .../css-paint-api/Overview.html | 36 +++++++++++++++---- .../css-properties-values-api/Overview.html | 36 +++++++++++++++---- .../css-typed-om/Overview.html | 36 +++++++++++++++---- .../css-conditional-3/Overview.html | 36 +++++++++++++++---- .../css-highlight-api-1/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-images-3/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-images-4/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-lists-3/Overview.html | 36 +++++++++++++++---- .../w3c/csswg-drafts/css-nav-1/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-pseudo-4/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-scoping-1/Overview.html | 36 +++++++++++++++---- .../css-scroll-anchoring-1/Overview.html | 36 +++++++++++++++---- .../css-shadow-parts-1/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-syntax-3/Overview.html | 36 +++++++++++++++---- .../css-transforms-2/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/css-values-4/Overview.html | 36 +++++++++++++++---- .../csswg-drafts/selectors-4/Overview.html | 36 +++++++++++++++---- .../web-animations-1/Overview.html | 36 +++++++++++++++---- .../w3c/fxtf-drafts/fill-stroke/Overview.html | 36 +++++++++++++++---- .../w3c/fxtf-drafts/geometry/Overview.html | 36 +++++++++++++++---- .../github/w3c/geolocation-sensor/index.html | 36 +++++++++++++++---- tests/github/w3c/gyroscope/index.html | 36 +++++++++++++++---- tests/github/w3c/longtasks/index.html | 36 +++++++++++++++---- tests/github/w3c/magnetometer/index.html | 36 +++++++++++++++---- .../mediacapture-record/MediaRecorder.html | 36 +++++++++++++++---- .../github/w3c/orientation-sensor/index.html | 36 +++++++++++++++---- .../w3c/orientation-sensor/releases/FPWD.html | 36 +++++++++++++++---- .../github/w3c/paint-timing/painttiming.html | 36 +++++++++++++++---- tests/github/w3c/permissions/index.html | 36 +++++++++++++++---- tests/github/w3c/proximity/index.html | 36 +++++++++++++++---- .../w3c/reporting/network-reporting.html | 36 +++++++++++++++---- tests/github/w3c/sensors/index.html | 36 +++++++++++++++---- .../index.html | 36 +++++++++++++++---- tests/github/w3c/webappsec-csp/index.html | 36 +++++++++++++++---- .../w3c/webappsec-fetch-metadata/index.html | 36 +++++++++++++++---- .../webappsec-permissions-policy/index.html | 36 +++++++++++++++---- tests/github/w3c/webdriver-bidi/index.html | 36 +++++++++++++++---- tests/github/w3c/webtransport/index.html | 36 +++++++++++++++---- tests/github/w3c/webvtt/index.html | 36 +++++++++++++++---- .../github/whatwg/fullscreen/fullscreen.html | 36 +++++++++++++++---- tests/github/whatwg/quirks/quirks.html | 36 +++++++++++++++---- tests/github/whatwg/storage/storage.html | 36 +++++++++++++++---- tests/github/whatwg/streams/index.html | 36 +++++++++++++++---- tests/var002.html | 36 +++++++++++++++---- 100 files changed, 2900 insertions(+), 700 deletions(-) diff --git a/tests/algorithm001.html b/tests/algorithm001.html index 1a5c0c5a10..937d84fbc4 100644 --- a/tests/algorithm001.html +++ b/tests/algorithm001.html @@ -538,15 +538,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/app-history/spec.html b/tests/github/WICG/app-history/spec.html index 6d2acb31de..24faa33944 100644 --- a/tests/github/WICG/app-history/spec.html +++ b/tests/github/WICG/app-history/spec.html @@ -761,15 +761,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/background-fetch/index.html b/tests/github/WICG/background-fetch/index.html index bf61e80270..7426325a87 100644 --- a/tests/github/WICG/background-fetch/index.html +++ b/tests/github/WICG/background-fetch/index.html @@ -980,15 +980,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html b/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html index 884396ab6d..f6a8b1d0e4 100644 --- a/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html +++ b/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/contact-api/spec/index.html b/tests/github/WICG/contact-api/spec/index.html index a4e809587d..99ce1228fe 100644 --- a/tests/github/WICG/contact-api/spec/index.html +++ b/tests/github/WICG/contact-api/spec/index.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/content-index/spec/index.html b/tests/github/WICG/content-index/spec/index.html index d4851fc5d8..71f1d4e6ad 100644 --- a/tests/github/WICG/content-index/spec/index.html +++ b/tests/github/WICG/content-index/spec/index.html @@ -941,15 +941,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/conversion-measurement-api/index.html b/tests/github/WICG/conversion-measurement-api/index.html index 07bdf6689a..4792916945 100644 --- a/tests/github/WICG/conversion-measurement-api/index.html +++ b/tests/github/WICG/conversion-measurement-api/index.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/cookie-store/index.html b/tests/github/WICG/cookie-store/index.html index b704ef40f3..96121dc2b0 100644 --- a/tests/github/WICG/cookie-store/index.html +++ b/tests/github/WICG/cookie-store/index.html @@ -718,15 +718,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/document-policy/index.html b/tests/github/WICG/document-policy/index.html index 522fed2fd8..ba49f5f1b2 100644 --- a/tests/github/WICG/document-policy/index.html +++ b/tests/github/WICG/document-policy/index.html @@ -573,15 +573,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/element-timing/index.html b/tests/github/WICG/element-timing/index.html index 88f5e3309b..730c851d98 100644 --- a/tests/github/WICG/element-timing/index.html +++ b/tests/github/WICG/element-timing/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/entries-api/index.html b/tests/github/WICG/entries-api/index.html index 97c870bf36..ed141c9aff 100644 --- a/tests/github/WICG/entries-api/index.html +++ b/tests/github/WICG/entries-api/index.html @@ -924,15 +924,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/event-timing/index.html b/tests/github/WICG/event-timing/index.html index 9d0debd734..9465e3e01d 100644 --- a/tests/github/WICG/event-timing/index.html +++ b/tests/github/WICG/event-timing/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/file-system-access/index.html b/tests/github/WICG/file-system-access/index.html index c85eadc0d2..9f02d0a119 100644 --- a/tests/github/WICG/file-system-access/index.html +++ b/tests/github/WICG/file-system-access/index.html @@ -942,15 +942,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/get-installed-related-apps/spec/index.html b/tests/github/WICG/get-installed-related-apps/spec/index.html index 8a9cb2e274..931e821a56 100644 --- a/tests/github/WICG/get-installed-related-apps/spec/index.html +++ b/tests/github/WICG/get-installed-related-apps/spec/index.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/idle-detection/index.html b/tests/github/WICG/idle-detection/index.html index d9270d010b..c94712ec30 100644 --- a/tests/github/WICG/idle-detection/index.html +++ b/tests/github/WICG/idle-detection/index.html @@ -936,15 +936,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/keyboard-lock/index.html b/tests/github/WICG/keyboard-lock/index.html index 8b735a3ecd..01cd4ad987 100644 --- a/tests/github/WICG/keyboard-lock/index.html +++ b/tests/github/WICG/keyboard-lock/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/keyboard-map/index.html b/tests/github/WICG/keyboard-map/index.html index 6ed3479949..b4cc3b33ff 100644 --- a/tests/github/WICG/keyboard-map/index.html +++ b/tests/github/WICG/keyboard-map/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/kv-storage/spec.html b/tests/github/WICG/kv-storage/spec.html index 888d688aa9..a4eb8cf31a 100644 --- a/tests/github/WICG/kv-storage/spec.html +++ b/tests/github/WICG/kv-storage/spec.html @@ -744,15 +744,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/largest-contentful-paint/index.html b/tests/github/WICG/largest-contentful-paint/index.html index e9304f03d5..46060fef0e 100644 --- a/tests/github/WICG/largest-contentful-paint/index.html +++ b/tests/github/WICG/largest-contentful-paint/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/layout-instability/index.html b/tests/github/WICG/layout-instability/index.html index 60fc14956e..5c9b66e364 100644 --- a/tests/github/WICG/layout-instability/index.html +++ b/tests/github/WICG/layout-instability/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/local-font-access/index.html b/tests/github/WICG/local-font-access/index.html index 34f9812939..69ad0dbc4d 100644 --- a/tests/github/WICG/local-font-access/index.html +++ b/tests/github/WICG/local-font-access/index.html @@ -721,15 +721,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/page-lifecycle/spec.html b/tests/github/WICG/page-lifecycle/spec.html index b7af7e66b7..a1e1ee1c49 100644 --- a/tests/github/WICG/page-lifecycle/spec.html +++ b/tests/github/WICG/page-lifecycle/spec.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/periodic-background-sync/index.html b/tests/github/WICG/periodic-background-sync/index.html index a310831df8..f48dbf4ee6 100644 --- a/tests/github/WICG/periodic-background-sync/index.html +++ b/tests/github/WICG/periodic-background-sync/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/portals/index.html b/tests/github/WICG/portals/index.html index 72186bd723..429cd9e8f4 100644 --- a/tests/github/WICG/portals/index.html +++ b/tests/github/WICG/portals/index.html @@ -923,15 +923,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/scroll-to-text-fragment/index.html b/tests/github/WICG/scroll-to-text-fragment/index.html index a966a707b6..04ed372f71 100644 --- a/tests/github/WICG/scroll-to-text-fragment/index.html +++ b/tests/github/WICG/scroll-to-text-fragment/index.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/video-rvfc/index.html b/tests/github/WICG/video-rvfc/index.html index e331ab53f6..b4a48f2c4b 100644 --- a/tests/github/WICG/video-rvfc/index.html +++ b/tests/github/WICG/video-rvfc/index.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/web-locks/index.html b/tests/github/WICG/web-locks/index.html index ecd5154d50..690d83d422 100644 --- a/tests/github/WICG/web-locks/index.html +++ b/tests/github/WICG/web-locks/index.html @@ -942,15 +942,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WICG/webpackage/loading.html b/tests/github/WICG/webpackage/loading.html index 9d27ed6ffe..a6a750dec1 100644 --- a/tests/github/WICG/webpackage/loading.html +++ b/tests/github/WICG/webpackage/loading.html @@ -694,15 +694,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WebAudio/web-audio-api/index.html b/tests/github/WebAudio/web-audio-api/index.html index 56c4402254..765f82ba65 100644 --- a/tests/github/WebAudio/web-audio-api/index.html +++ b/tests/github/WebAudio/web-audio-api/index.html @@ -1099,15 +1099,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WebBluetoothCG/web-bluetooth/index.html b/tests/github/WebBluetoothCG/web-bluetooth/index.html index 6e1c761a84..09c0978d7c 100644 --- a/tests/github/WebBluetoothCG/web-bluetooth/index.html +++ b/tests/github/WebBluetoothCG/web-bluetooth/index.html @@ -973,15 +973,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/WebBluetoothCG/web-bluetooth/scanning.html b/tests/github/WebBluetoothCG/web-bluetooth/scanning.html index 3151384604..a7b1e1493d 100644 --- a/tests/github/WebBluetoothCG/web-bluetooth/scanning.html +++ b/tests/github/WebBluetoothCG/web-bluetooth/scanning.html @@ -706,15 +706,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/heycam/webidl/index.html b/tests/github/heycam/webidl/index.html index e94c7c3a22..8aa9c00663 100644 --- a/tests/github/heycam/webidl/index.html +++ b/tests/github/heycam/webidl/index.html @@ -848,15 +848,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/anchors/index.html b/tests/github/immersive-web/anchors/index.html index 6785805741..50271e5d22 100644 --- a/tests/github/immersive-web/anchors/index.html +++ b/tests/github/immersive-web/anchors/index.html @@ -753,15 +753,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/depth-sensing/index.html b/tests/github/immersive-web/depth-sensing/index.html index e6b7ce59a9..6cba6ee9a5 100644 --- a/tests/github/immersive-web/depth-sensing/index.html +++ b/tests/github/immersive-web/depth-sensing/index.html @@ -753,15 +753,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/hit-test/index.html b/tests/github/immersive-web/hit-test/index.html index 4f7f975283..0bd128b20b 100644 --- a/tests/github/immersive-web/hit-test/index.html +++ b/tests/github/immersive-web/hit-test/index.html @@ -979,15 +979,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/layers/webxrlayers-1.html b/tests/github/immersive-web/layers/webxrlayers-1.html index e0a08e46b7..6876de833b 100644 --- a/tests/github/immersive-web/layers/webxrlayers-1.html +++ b/tests/github/immersive-web/layers/webxrlayers-1.html @@ -757,15 +757,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/lighting-estimation/index.html b/tests/github/immersive-web/lighting-estimation/index.html index 4fffd2646c..ae2fa228b0 100644 --- a/tests/github/immersive-web/lighting-estimation/index.html +++ b/tests/github/immersive-web/lighting-estimation/index.html @@ -756,15 +756,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/real-world-geometry/plane-detection.html b/tests/github/immersive-web/real-world-geometry/plane-detection.html index d50e70c0a8..103e37311c 100644 --- a/tests/github/immersive-web/real-world-geometry/plane-detection.html +++ b/tests/github/immersive-web/real-world-geometry/plane-detection.html @@ -753,15 +753,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/webxr-hand-input/index.html b/tests/github/immersive-web/webxr-hand-input/index.html index b1a588b25b..ea8f70a38b 100644 --- a/tests/github/immersive-web/webxr-hand-input/index.html +++ b/tests/github/immersive-web/webxr-hand-input/index.html @@ -981,15 +981,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/webxr-test-api/index.html b/tests/github/immersive-web/webxr-test-api/index.html index 347e1ad391..dfcb25ad6c 100644 --- a/tests/github/immersive-web/webxr-test-api/index.html +++ b/tests/github/immersive-web/webxr-test-api/index.html @@ -757,15 +757,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/immersive-web/webxr/index.html b/tests/github/immersive-web/webxr/index.html index 9bd5d04d66..eeaad2c9cd 100644 --- a/tests/github/immersive-web/webxr/index.html +++ b/tests/github/immersive-web/webxr/index.html @@ -986,15 +986,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/privacycg/private-click-measurement/private-click-measurement.html b/tests/github/privacycg/private-click-measurement/private-click-measurement.html index f0d400c948..797920e455 100644 --- a/tests/github/privacycg/private-click-measurement/private-click-measurement.html +++ b/tests/github/privacycg/private-click-measurement/private-click-measurement.html @@ -699,15 +699,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/FileAPI/index.html b/tests/github/w3c/FileAPI/index.html index b57e17e9d1..fb0e0a85ef 100644 --- a/tests/github/w3c/FileAPI/index.html +++ b/tests/github/w3c/FileAPI/index.html @@ -922,15 +922,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +} diff --git a/tests/github/w3c/IndexedDB/index.html b/tests/github/w3c/IndexedDB/index.html index ce821d9213..6b7c3b2d09 100644 --- a/tests/github/w3c/IndexedDB/index.html +++ b/tests/github/w3c/IndexedDB/index.html @@ -964,15 +964,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/ServiceWorker/docs/index.html b/tests/github/w3c/ServiceWorker/docs/index.html index bd6f53d227..186816f00f 100644 --- a/tests/github/w3c/ServiceWorker/docs/index.html +++ b/tests/github/w3c/ServiceWorker/docs/index.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/ServiceWorker/docs/v1/index.html b/tests/github/w3c/ServiceWorker/docs/v1/index.html index 70c06cd3ea..025ed3c6e3 100644 --- a/tests/github/w3c/ServiceWorker/docs/v1/index.html +++ b/tests/github/w3c/ServiceWorker/docs/v1/index.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html b/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html index a4fc0b92ef..e453e4bc65 100644 --- a/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html +++ b/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html b/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html index dd03b66160..fe95df292a 100644 --- a/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html +++ b/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/accelerometer/index.html b/tests/github/w3c/accelerometer/index.html index cb9d2c6b40..a0ca42500c 100644 --- a/tests/github/w3c/accelerometer/index.html +++ b/tests/github/w3c/accelerometer/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/ambient-light/index.html b/tests/github/w3c/ambient-light/index.html index ee978cde53..3f67ece016 100644 --- a/tests/github/w3c/ambient-light/index.html +++ b/tests/github/w3c/ambient-light/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/clipboard-apis/index.html b/tests/github/w3c/clipboard-apis/index.html index b89beebfa6..04562b08a2 100644 --- a/tests/github/w3c/clipboard-apis/index.html +++ b/tests/github/w3c/clipboard-apis/index.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html b/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html index 89b5e0b00e..4f6d584174 100644 --- a/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html +++ b/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html index 9deb9c66c3..c1c293fed1 100644 --- a/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html +++ b/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html @@ -715,15 +715,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html index 5498153e09..893c2acaf7 100644 --- a/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html +++ b/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html @@ -939,15 +939,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html index 19401ea61a..d16d10886f 100644 --- a/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html +++ b/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html b/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html index b4854414f5..4fcb78978e 100644 --- a/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html +++ b/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html @@ -942,15 +942,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html b/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html index 9e939ca932..4cc1532f3b 100644 --- a/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html +++ b/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html @@ -926,15 +926,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/fxtf-drafts/geometry/Overview.html b/tests/github/w3c/fxtf-drafts/geometry/Overview.html index c905509089..cc6224bd02 100644 --- a/tests/github/w3c/fxtf-drafts/geometry/Overview.html +++ b/tests/github/w3c/fxtf-drafts/geometry/Overview.html @@ -1125,15 +1125,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/geolocation-sensor/index.html b/tests/github/w3c/geolocation-sensor/index.html index 0bc12f20c3..4819d2113e 100644 --- a/tests/github/w3c/geolocation-sensor/index.html +++ b/tests/github/w3c/geolocation-sensor/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/gyroscope/index.html b/tests/github/w3c/gyroscope/index.html index 1f815b3837..084bb94676 100644 --- a/tests/github/w3c/gyroscope/index.html +++ b/tests/github/w3c/gyroscope/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/longtasks/index.html b/tests/github/w3c/longtasks/index.html index c838636562..59c791a9f6 100644 --- a/tests/github/w3c/longtasks/index.html +++ b/tests/github/w3c/longtasks/index.html @@ -930,15 +930,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/magnetometer/index.html b/tests/github/w3c/magnetometer/index.html index 2e99b856c7..30c17907b0 100644 --- a/tests/github/w3c/magnetometer/index.html +++ b/tests/github/w3c/magnetometer/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/mediacapture-record/MediaRecorder.html b/tests/github/w3c/mediacapture-record/MediaRecorder.html index c4de50794a..2db77ac60c 100644 --- a/tests/github/w3c/mediacapture-record/MediaRecorder.html +++ b/tests/github/w3c/mediacapture-record/MediaRecorder.html @@ -718,15 +718,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/orientation-sensor/index.html b/tests/github/w3c/orientation-sensor/index.html index c5854b6c36..0b92900e8e 100644 --- a/tests/github/w3c/orientation-sensor/index.html +++ b/tests/github/w3c/orientation-sensor/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/orientation-sensor/releases/FPWD.html b/tests/github/w3c/orientation-sensor/releases/FPWD.html index 2a0e61245f..acb8d86056 100644 --- a/tests/github/w3c/orientation-sensor/releases/FPWD.html +++ b/tests/github/w3c/orientation-sensor/releases/FPWD.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/paint-timing/painttiming.html b/tests/github/w3c/paint-timing/painttiming.html index c8a08e42e6..ed9b84157e 100644 --- a/tests/github/w3c/paint-timing/painttiming.html +++ b/tests/github/w3c/paint-timing/painttiming.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/permissions/index.html b/tests/github/w3c/permissions/index.html index a151fd8e4c..1c28e23338 100644 --- a/tests/github/w3c/permissions/index.html +++ b/tests/github/w3c/permissions/index.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/proximity/index.html b/tests/github/w3c/proximity/index.html index b569b71203..c358c93cc2 100644 --- a/tests/github/w3c/proximity/index.html +++ b/tests/github/w3c/proximity/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/reporting/network-reporting.html b/tests/github/w3c/reporting/network-reporting.html index 4efc9551d9..b567cd1226 100644 --- a/tests/github/w3c/reporting/network-reporting.html +++ b/tests/github/w3c/reporting/network-reporting.html @@ -575,15 +575,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/sensors/index.html b/tests/github/w3c/sensors/index.html index 1ce2ba5294..072093ed09 100644 --- a/tests/github/w3c/sensors/index.html +++ b/tests/github/w3c/sensors/index.html @@ -723,15 +723,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webappsec-credential-management/index.html b/tests/github/w3c/webappsec-credential-management/index.html index 5f29e2b04a..d6d6b9dcf9 100644 --- a/tests/github/w3c/webappsec-credential-management/index.html +++ b/tests/github/w3c/webappsec-credential-management/index.html @@ -925,15 +925,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webappsec-csp/index.html b/tests/github/w3c/webappsec-csp/index.html index f84cca95cf..536f61b76e 100644 --- a/tests/github/w3c/webappsec-csp/index.html +++ b/tests/github/w3c/webappsec-csp/index.html @@ -734,15 +734,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webappsec-fetch-metadata/index.html b/tests/github/w3c/webappsec-fetch-metadata/index.html index e0d59ac40c..a6275875db 100644 --- a/tests/github/w3c/webappsec-fetch-metadata/index.html +++ b/tests/github/w3c/webappsec-fetch-metadata/index.html @@ -799,15 +799,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webappsec-permissions-policy/index.html b/tests/github/w3c/webappsec-permissions-policy/index.html index 034cd75855..d0cbb1721d 100644 --- a/tests/github/w3c/webappsec-permissions-policy/index.html +++ b/tests/github/w3c/webappsec-permissions-policy/index.html @@ -941,15 +941,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webdriver-bidi/index.html b/tests/github/w3c/webdriver-bidi/index.html index 9c2ff84102..a10fa7dc15 100644 --- a/tests/github/w3c/webdriver-bidi/index.html +++ b/tests/github/w3c/webdriver-bidi/index.html @@ -575,15 +575,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webtransport/index.html b/tests/github/w3c/webtransport/index.html index ea2c0db0b2..8f2d1cce26 100644 --- a/tests/github/w3c/webtransport/index.html +++ b/tests/github/w3c/webtransport/index.html @@ -701,15 +701,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/w3c/webvtt/index.html b/tests/github/w3c/webvtt/index.html index 2e52fe9cc1..29fea4555a 100644 --- a/tests/github/w3c/webvtt/index.html +++ b/tests/github/w3c/webvtt/index.html @@ -713,15 +713,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/whatwg/fullscreen/fullscreen.html b/tests/github/whatwg/fullscreen/fullscreen.html index b5e178649d..119e27934e 100644 --- a/tests/github/whatwg/fullscreen/fullscreen.html +++ b/tests/github/whatwg/fullscreen/fullscreen.html @@ -70,15 +70,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/whatwg/quirks/quirks.html b/tests/github/whatwg/quirks/quirks.html index e17055ffa5..3a22b2ee5c 100644 --- a/tests/github/whatwg/quirks/quirks.html +++ b/tests/github/whatwg/quirks/quirks.html @@ -72,15 +72,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/whatwg/storage/storage.html b/tests/github/whatwg/storage/storage.html index 34fba95fac..48e8560fb1 100644 --- a/tests/github/whatwg/storage/storage.html +++ b/tests/github/whatwg/storage/storage.html @@ -70,15 +70,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/github/whatwg/streams/index.html b/tests/github/whatwg/streams/index.html index 7affce5d96..9c14d6c4ea 100644 --- a/tests/github/whatwg/streams/index.html +++ b/tests/github/whatwg/streams/index.html @@ -73,15 +73,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}
diff --git a/tests/var002.html b/tests/var002.html index 01e0516958..617dc4f7e7 100644 --- a/tests/var002.html +++ b/tests/var002.html @@ -414,15 +414,37 @@ 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}