diff --git a/webextensions/options/options.css b/webextensions/options/options.css
index c978cf0b7..797fdde65 100644
--- 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 color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */;
+  border: 1px solid var(--ThreeDShadow);
   vertical-align: middle;
   margin-top: 0.15em;
   margin-bottom: 0.15em;
diff --git a/webextensions/resources/ui-color.css b/webextensions/resources/ui-color.css
index a7b52a76a..4ab66a053 100644
--- a/webextensions/resources/ui-color.css
+++ b/webextensions/resources/ui-color.css
@@ -121,6 +121,14 @@
 
   --bg-color: var(--grey-10);
   --text-color: var(--grey-90);
+
+
+  /* simulating deprecated CSS system colors */
+  --ThreeDShadow: color-mix(in srgb, ButtonText 30%, ButtonFace);
+  --ThreeDHighlight: color-mix(in srgb, ButtonText 10%, ButtonFace)
+  --AppWorkspace: color-mix(in srgb, CanvasText 20%, Canvas);
+  --MenuText: color-mix(in srgb, ButtonText 85%, ButtonFace);
+  --Menu: ButtonFace;
 }
 
 :link {
diff --git a/webextensions/sidebar/styles/photon/photon.css b/webextensions/sidebar/styles/photon/photon.css
index a97714080..a61d88eef 100644
--- 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, 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-border: var(--browser-border, var(--browser-bg-more-darker, var(--ThreeDShadow)));
+    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--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, color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */);
+    --tabbar-bg: var(--browser-bg-darker, var(--ThreeDShadow));
   }
   :root[color-scheme="system-color"] #background::after {
-    background: var(--browser-bg-darker, color-mix(in srgb, CanvasText 20%, Canvas) /* simulating AppWorkspace */);
+    background: var(--browser-bg-darker,var(--AppWorkspace));
     opacity: 0.15;
 
     bottom: 0;
diff --git a/webextensions/sidebar/styles/proton/proton.css b/webextensions/sidebar/styles/proton/proton.css
index 6d3009909..ce95c3c19 100644
--- 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: color-mix(in srgb, ButtonText 30%, ButtonFace) /* simulating ThreeDShadow */;
+  --in-content-box-border-color-mixed: var(--ThreeDShadow);
 }
 :root[color-scheme="system-color"][data-user-agent*="Linux"] #background {
-  --tabbar-bg: color-mix(in srgb, CanvasText 20%, Canvas) /* simulating AppWorkspace */;
+  --tabbar-bg: var(--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: color-mix(in srgb, ButtonText 85%, ButtonFace) /* simulating MenuText */;
-    --toolbar-non-lwt-textcolor: ButtonFace /* instead of Menu */;
+    --toolbar-non-lwt-bgcolor: var(--MenuText);
+    --toolbar-non-lwt-textcolor: var(--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));