Simulate deprecated CSS system colros with color-mix #3619

piroor · Sep 5, 2024 · 092baf5 · 092baf5
1 parent e707bd1
commit 092baf5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/webextensions/options/options.css b/webextensions/options/options.css
@@ -131,7 +131,7 @@ label.has-radio:not(.inline) {
 
 label input[type="radio"] ~ img,
 label input[type="checkbox"] ~ img {
-  border: 1px solid var(--in-content-box-border-color);
+  border: 1px solid color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */;
   vertical-align: middle;
   margin-top: 0.15em;
   margin-bottom: 0.15em;

diff --git a/webextensions/sidebar/styles/photon/photon.css b/webextensions/sidebar/styles/photon/photon.css
@@ -52,15 +52,15 @@ body,
     --tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
     --tab-text-active: var(--tab-text-regular);
     --tab-text-active-inverted: Highlight;
-    --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color)));
-    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-button-background-hover-mixed)));
+    --tab-border: var(--browser-border, var(--browser-bg-more-darker, color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */));
+    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, color-mix(in srgb, ButtonText 10%, ButtonFace) /* simulating ThreeDHighlight */));
     --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, Highlight));
     --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, Highlight));
     --tab-dropmarker: var(--browser-fg, -moz-dialogtext);
-    --tabbar-bg: var(--browser-bg-darker, var(--in-content-box-border-color));
+    --tabbar-bg: var(--browser-bg-darker, color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */);
   }
   :root[color-scheme="system-color"] #background::after {
-    background: var(--browser-bg-darker, Canvas);
+    background: var(--browser-bg-darker, color-mix(in srgb, CanvasText 20%, Canvas) /* simulating AppWorkspace */);
     opacity: 0.15;
 
     bottom: 0;

diff --git a/webextensions/sidebar/styles/proton/proton.css b/webextensions/sidebar/styles/proton/proton.css
@@ -88,10 +88,10 @@
 :root[color-scheme="system-color"][data-user-agent*="Linux"] {
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgcolor: -moz-dialog;
-  --in-content-box-border-color-mixed: ButtonBorder;
+  --in-content-box-border-color-mixed: color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */;
 }
 :root[color-scheme="system-color"][data-user-agent*="Linux"] #background {
-  --tabbar-bg: Canvas;
+  --tabbar-bg: color-mix(in srgb, CanvasText 20%, Canvas) /* simulating AppWorkspace */;
 }
 
 @media not (prefers-color-scheme: dark) {
@@ -110,8 +110,8 @@
     #subpanel-selector-anchor,
   :root[color-scheme="system-color"][data-user-agent*="Linux"]
     #background {
-    --toolbar-non-lwt-bgcolor: MenuText;
-    --toolbar-non-lwt-textcolor: Menu;
+    --toolbar-non-lwt-bgcolor: color-mix(in srgb, ButtonText 85%, ButtonFace) /* simulating MenuText */;
+    --toolbar-non-lwt-textcolor: ButtonFace /* instead of Menu */;
     --tabbar-bg: var(--toolbar-non-lwt-bgcolor);
     /* these colors need to redefined here to apply new --toolbar-non-lwt-textcolor */
     --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));