Skip to content

Commit

Permalink
Define deprecated CSS system colors with custom properties
Browse files Browse the repository at this point in the history
  • Loading branch information
piroor committed Sep 5, 2024
1 parent ce5c93f commit 1130680
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 9 deletions.
2 changes: 1 addition & 1 deletion webextensions/options/options.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions webextensions/resources/ui-color.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions webextensions/sidebar/styles/photon/photon.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions webextensions/sidebar/styles/proton/proton.css
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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));
Expand Down

0 comments on commit 1130680

Please sign in to comment.