From 03e0dd8ee727e7e00f3d6e2186cd3a5078ac59a3 Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Fri, 22 Nov 2024 19:10:14 +0100 Subject: [PATCH] Add support for High Contrast Theme Buttons icon are now visible and uses system colors. Since external SVG images can't get dynamically styled, we're adding a pseudo element on buttons, mask it with the appropriate icon, and control the color of the icon through the element background image. This allows us to remove all the *-white.svg images as we can change the color with CSS. We opt-out of forced colors for the elements where we want to apply non-system colors, i.e. the foreground, background and preview sections. detail/summary elements are adapted to look nice in High Contrast Theme. --- src/views/css/global.css | 32 ++++----- src/views/css/main.css | 113 +++++++++++++++++++----------- src/views/icons/help-white.svg | 13 ---- src/views/icons/picker-white.svg | 13 ---- src/views/icons/sliders-white.svg | 28 -------- src/views/icons/switch-white.svg | 14 ---- 6 files changed, 84 insertions(+), 129 deletions(-) delete mode 100644 src/views/icons/help-white.svg delete mode 100644 src/views/icons/picker-white.svg delete mode 100644 src/views/icons/sliders-white.svg delete mode 100644 src/views/icons/switch-white.svg diff --git a/src/views/css/global.css b/src/views/css/global.css index 32becb9..0e0e240 100644 --- a/src/views/css/global.css +++ b/src/views/css/global.css @@ -15,6 +15,7 @@ html, body{ --bg-accent:#1B75BC; --bg-summary:#151515; --bg-details:#ECECEC; + --bg-pressed-icon: var(--bg-accent); --fg-primary:#000; --fg-paraphrased:#222; --bg-code:var(--bg-paraphrased); @@ -23,14 +24,14 @@ html, body{ --fg-link:#4865FF; --bg-code:#ccc; --fg-control-border-primary: #8f8f8f; + --fg-pressed-icon: white; + --icon-color: light-dark(black, white); --icon-switch:url("../icons/switch-black.svg"); --icon-sliders:url("../icons/sliders-black.svg"); --icon-picker:url("../icons/picker-black.svg"); --icon-help:url("../icons/help-black.svg"); - --icon-sliders-pressed:url("../icons/sliders-white.svg"); - --icon-picker-pressed:url("../icons/picker-white.svg"); - --icon-help-pressed:url("../icons/help-white.svg"); --scheme-type:light; + --border-radius: 3px; } @media ( prefers-color-scheme : dark ) { @@ -48,17 +49,18 @@ html, body{ --fg-border-secondary:#5a5a5a; --fg-control-border-primary: #6f6f6f; --fg-link:#58A5FF; - --icon-switch:url("../icons/switch-white.svg"); - --icon-sliders:url("../icons/sliders-white.svg"); - --icon-picker:url("../icons/picker-white.svg"); - --icon-help:url("../icons/help-white.svg"); - --icon-sliders-pressed:url("../icons/sliders-white.svg"); - --icon-picker-pressed:url("../icons/picker-white.svg"); - --icon-help-pressed:url("../icons/help-white.svg"); --scheme-type:dark; } } +@media (forced-colors: active) { + :root { + --icon-color: ButtonText; + --bg-pressed-icon: SelectedItem; + --fg-pressed-icon: SelectedItemText; + } +} + html.force-light { --bg-primary:#fff; --bg-secondary:#f5f5f5; @@ -78,9 +80,6 @@ html.force-light { --icon-sliders:url("../icons/sliders-black.svg"); --icon-picker:url("../icons/picker-black.svg"); --icon-help:url("../icons/help-black.svg"); - --icon-sliders-pressed:url("../icons/sliders-white.svg"); - --icon-picker-pressed:url("../icons/picker-white.svg"); - --icon-help-pressed:url("../icons/help-white.svg"); --scheme-type:light; } @@ -98,13 +97,6 @@ html.force-dark { --fg-border-secondary:#5a5a5a; --fg-control-border-primary: #6f6f6f; --fg-link:#58A5FF; - --icon-switch:url("../icons/switch-white.svg"); - --icon-sliders:url("../icons/sliders-white.svg"); - --icon-picker:url("../icons/picker-white.svg"); - --icon-help:url("../icons/help-white.svg"); - --icon-sliders-pressed:url("../icons/sliders-white.svg"); - --icon-picker-pressed:url("../icons/picker-white.svg"); - --icon-help-pressed:url("../icons/help-white.svg"); --scheme-type:dark; } diff --git a/src/views/css/main.css b/src/views/css/main.css index f9f73d2..d65068f 100644 --- a/src/views/css/main.css +++ b/src/views/css/main.css @@ -41,16 +41,17 @@ section { } /* Color sections */ -section#foreground-color, +section#foreground-color, section#background-color { display: flex; align-items: center; min-height: 6rem; font-size: 1.4rem; justify-content: center; + forced-color-adjust: none; } -section#foreground-color .buttons, +section#foreground-color .buttons, section#background-color .buttons { position: absolute; bottom: 0.5rem; @@ -94,6 +95,7 @@ section#background-color select.format-selector { display: block; min-width: 4.6rem; padding: 0.1rem; + forced-color-adjust: auto; } section#foreground-color input[aria-invalid="true"].free-value, @@ -121,36 +123,45 @@ section#background-color input.free-value:focus { background: var(--bg-primary); } -section#foreground-color button, +section#foreground-color button, section#background-color button { - background:var(--bg-control-primary); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 90% 90%; + background-color: var(--bg-control-primary); + forced-color-adjust: auto; width: 2rem; height: 1.2rem; border: 1px solid var(--fg-border-primary); border-radius: 0.2rem; padding: 0.5em; + position: relative; + + &::before { + content: ""; + position: absolute; + inset: 5%; + mask-image: var(--icon); + mask-position: 50% 50%; + mask-repeat: no-repeat; + background-color: var(--icon-color); + } } -section#foreground-color button.picker, +section#foreground-color button.picker, section#background-color button.picker { - background-image: var(--icon-picker); + --icon: var(--icon-picker); } -section#foreground-color button.sliders, +section#foreground-color button.sliders, section#background-color button.sliders { - background-image: var(--icon-sliders); + --icon: var(--icon-sliders); } -section#foreground-color button.help, +section#foreground-color button.help, section#background-color button.help { - background-image: var(--icon-help); + --icon: var(--icon-help); } section#foreground-color button.switch { - background-image: var(--icon-switch); + --icon: var(--icon-switch); } section#foreground-color button[aria-pressed=true], @@ -158,28 +169,8 @@ section#foreground-color button[aria-expanded=true], section#background-color button[aria-pressed=true], section#background-color button[aria-expanded=true]{ box-shadow:inset 0 0 0.1em 0.1em rgba(0, 0, 0, 0.4); -} - -section#foreground-color button[aria-pressed=true].picker, -section#background-color button[aria-pressed=true].picker { - background-image: var(--icon-picker-pressed); -} - -section#foreground-color button[aria-expanded=true].sliders, -section#background-color button[aria-expanded=true].sliders { - background-image: var(--icon-sliders-pressed); -} - -section#foreground-color button[aria-expanded=true].help, -section#background-color button[aria-expanded=true].help { - background-image: var(--icon-help-pressed); -} - -section#foreground-color button[aria-expanded=true], -section#background-color button[aria-expanded=true], -section#foreground-color button[aria-pressed=true], -section#background-color button[aria-pressed=true] { - background-color: var(--bg-accent); + background-color: var(--bg-pressed-icon); + --icon-color: var(--fg-pressed-icon); } /* Sliders */ @@ -249,12 +240,26 @@ section#background-help { section#sample-preview { background-color: var(--bg-details); } + +@media (forced-colors: active) { + /* In High Contrast Theme, make the summary more similar to the results summary */ + section#sample-preview summary { + border-radius: var(--border-radius); + background: ButtonFace; + color: ButtonText; + border: 1px solid ButtonText; + padding: 0.5rem 1rem; + } +} + + section#sample-preview .preview-box { display: flex; align-items: center; min-height: 5rem; font-size: 1.4rem; justify-content: center; + forced-color-adjust: none; } section#sample-preview .preview-box .text { @@ -264,7 +269,7 @@ section#sample-preview .preview-box .text { section#sample-preview .icon { margin-left: 1rem; - padding: 0.5rem; + padding: 0.5rem; border: 1px #cccccc dashed; } @@ -285,7 +290,7 @@ section#sample-preview .icon svg { #contrast-ratio h3 { font-size: 0.7rem; -} +} #contrast-ratio-value { font-size: 1.2rem; @@ -306,19 +311,45 @@ section#results header { section#results details { margin: 0.5rem; - border-radius: 3px; + border-radius: var(--border-radius); background: var(--bg-details); } section#results summary { background: var(--bg-summary); color: #FFF; - border-radius: 3px; + border-radius: var(--border-radius); padding: 0.5rem 1rem; } section#results details[open] summary { background: var(--bg-accent); + /* Remove the radius on the bottom of the details so its edges + connect with the one from the details text */ + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +@media (forced-colors: active) { + section#results details summary { + background: ButtonFace; + color: ButtonText; + border: 1px solid ButtonText; + } + + /* In regular mode, the details text has a --bg-details background color + that makes the text looks like it's related to the summary. + Since we can't use a specific background color in High Contrast Theme, + add a border to achieve the same goal. */ + section#results details summary + p { + border: 1px solid CanvasText; + /* Don't display a border at the top to avoid clashing with the summary bottom border */ + border-block-start: none; + } + + section#results details[open] summary { + background: SelectedItem; + color: SelectedItemText; + } } section#results details p { @@ -345,7 +376,7 @@ section#results .contrast-level > div{ flex-grow: 1; width: 50%; } - + section#results .contrast-level img { height: 1.2rem; width: 1.2rem; diff --git a/src/views/icons/help-white.svg b/src/views/icons/help-white.svg deleted file mode 100644 index ff36007..0000000 --- a/src/views/icons/help-white.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/src/views/icons/picker-white.svg b/src/views/icons/picker-white.svg deleted file mode 100644 index db50441..0000000 --- a/src/views/icons/picker-white.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/src/views/icons/sliders-white.svg b/src/views/icons/sliders-white.svg deleted file mode 100644 index af4e5be..0000000 --- a/src/views/icons/sliders-white.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/views/icons/switch-white.svg b/src/views/icons/switch-white.svg deleted file mode 100644 index 653eebf..0000000 --- a/src/views/icons/switch-white.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - -