[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-128.1.0esr-14.0-1] 8 commits: Bug 41817: tor-browser semantic colors.
morgan (@morgan)
git at gitlab.torproject.org
Wed Aug 21 02:08:18 UTC 2024
morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser
Commits:
a0742a1b by Henry Wilkes at 2024-08-21T02:05:06+00:00
Bug 41817: tor-browser semantic colors.
- - - - -
8639aaa5 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 7494: Create local home page for TBB.
Bug 41817: Use semantic tor color names in about:tor.
- - - - -
3cf73e78 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
Bug 41817: Use semantic color names for tor preferences.
- - - - -
2595f644 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
Bug 41817: Use semantic tor color names for tor buttons.
Also, for about:torconnect:
+ Use dark-mode variant for the buttons colors.
+ Add purple focus outline to the select element to match the buttons.
+ Stop applying the "primary" class to the cancel button.
+ Remove the checkbox styling since the checkbox was replaced with a
moz-toggle-button.
+ Removed the "danger-button" class since it does not sufficiently
telegraph a distinguished action, and has no dark-mode variant.
+ Use warning color from common-shared.css.
+ Drop --grey-40 for breadcrumb arrows, which did not adjust to theme.
- - - - -
6d76bafb by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 21952: Implement Onion-Location
- - - - -
4eaccbd8 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 30237: Add v3 onion services client authentication prompt
Bug 41817: Drop browser-colors.css.
- - - - -
6be73a77 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 40925: Implemented the Security Level component
Bug 41817: Drop browser-colors.css.
- - - - -
d45ef470 by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 41659: Add canonical color definitions to base-browser
Bug 41817: Drop browser-colors.css.
- - - - -
16 changed files:
- browser/base/content/navigator-toolbox.inc.xhtml
- browser/components/abouttor/content/aboutTor.css
- browser/components/onionservices/content/authPreferences.css
- browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml
- browser/components/securitylevel/content/securityLevelPanel.css
- browser/components/torpreferences/content/torPreferences.css
- browser/themes/shared/browser-shared.css
- browser/themes/shared/tor-urlbar-button.css
- toolkit/components/torconnect/content/aboutTorConnect.css
- toolkit/components/torconnect/content/aboutTorConnect.html
- toolkit/components/torconnect/content/aboutTorConnect.js
- toolkit/components/torconnect/content/torConnectTitlebarStatus.css
- − toolkit/themes/shared/browser-colors.css
- toolkit/themes/shared/desktop-jar.inc.mn
- toolkit/themes/shared/minimal-toolkit.jar.inc.mn
- + toolkit/themes/shared/tor-colors.css
Changes:
=====================================
browser/base/content/navigator-toolbox.inc.xhtml
=====================================
@@ -431,7 +431,7 @@
<hbox id="tor-connect-urlbar-button"
role="button"
- class="tor-urlbar-button"
+ class="tor-button tor-urlbar-button"
hidden="true">
<label id="tor-connect-urlbar-button-label"/>
</hbox>
=====================================
browser/components/abouttor/content/aboutTor.css
=====================================
@@ -1,4 +1,4 @@
- at import url("chrome://global/skin/browser-colors.css");
+ at import url("chrome://global/skin/tor-colors.css");
body {
margin: 0;
@@ -179,7 +179,7 @@ body:not(.show-tor-check) #tor-check {
/* On dark background */
:root {
background-color: #2C0449;
- --focus-outline-color: var(--purple-30);
+ --focus-outline-color: var(--tor-focus-outline-color-dark);
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
--in-content-focus-outline-color: var(--focus-outline-color);
--in-content-focus-outline: var(--focus-outline);
@@ -194,14 +194,9 @@ body:not(.show-tor-check) #tor-check {
--in-content-page-color: #fbfbfe;
--in-content-text-color: #fbfbfe;
color: var(--in-content-text-color);
- --link-color: var(--purple-30);
- /* FIXME: Since we have a dark background, the color should get lighter on
- * hover, but --purple-40 and --pruple-50 are darker than --purple-30.
- * However, we do not have a standard lighter purple in our current set of
- * Photon colors.
- * See tor-browser#42025 */
- --link-color-hover: var(--purple-40);
- --link-color-active: var(--purple-50);
+ --link-color: var(--tor-link-color-dark);
+ --link-color-hover: var(--tor-link-color-hover-dark);
+ --link-color-active: var(--tor-link-color-active-dark);
}
#search-form {
@@ -209,7 +204,9 @@ body:not(.show-tor-check) #tor-check {
}
#search-form.search-input-focus-visible {
- border-color: var(--purple-60);
+ /* Use a light-themed inner-border to contrast with the dark-themed
+ * focus outline. */
+ border-color: var(--tor-focus-outline-color-light);
}
#search-form.onionized-search:not(.search-input-focus-visible) {
@@ -218,17 +215,17 @@ body:not(.show-tor-check) #tor-check {
/* Light background. */
#search-form > * {
- --focus-outline-color: var(--purple-60);
+ --focus-outline-color: var(--tor-focus-outline-color-light);
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
--in-content-focus-outline-color: var(--focus-outline-color);
--in-content-focus-outline: var(--focus-outline);
/* Variables used for --toggle- variables. */
- --color-accent-primary: var(--purple-60);
- --color-accent-primary-hover: var(--purple-70);
- --color-accent-primary-active: var(--purple-80);
+ --color-accent-primary: var(--tor-button-background-color-light);
+ --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
+ --color-accent-primary-active: var(--tor-button-background-color-active-light);
}
#search-form.onionized-search #onionize-toggle {
- color: var(--purple-60);
+ color: var(--tor-link-color-light);
}
}
=====================================
browser/components/onionservices/content/authPreferences.css
=====================================
@@ -1,7 +1,5 @@
/* Copyright (c) 2020, The Tor Project, Inc. */
- at import url("chrome://global/skin/browser-colors.css");
-
#onionservices-savedkeys-dialog {
min-width: 45em;
}
@@ -23,5 +21,5 @@
margin-inline-end: 4px;
list-style-image: url("chrome://global/skin/icons/warning.svg");
-moz-context-properties: fill;
- fill: var(--warning-color);
+ fill: var(--in-content-warning-icon-color);
}
=====================================
browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml
=====================================
@@ -1,7 +1,7 @@
# Copyright (c) 2020, The Tor Project, Inc.
<hbox id="onion-location-box"
- class="tor-urlbar-button"
+ class="tor-button tor-urlbar-button"
role="button"
hidden="true"
onclick="OnionLocationParent.buttonClick(event);">
=====================================
browser/components/securitylevel/content/securityLevelPanel.css
=====================================
@@ -51,7 +51,7 @@
#securityLevel-custom {
border-radius: 4px;
- background-color: var(--warning-color);
+ background-color: var(--warning-icon-bgcolor);
color: black;
padding: 0.4em 0.5em;
margin-inline-start: 1em;
=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -1,4 +1,4 @@
- at import url("chrome://global/skin/browser-colors.css");
+ at import url("chrome://global/skin/tor-colors.css");
#category-connection > .category-icon {
@@ -137,13 +137,7 @@ button.spoof-button-disabled {
}
.bridge-status-badge.bridge-status-connected {
- color: var(--purple-60);
-}
-
- at media (prefers-color-scheme: dark) {
- .bridge-status-badge.bridge-status-connected {
- color: var(--purple-30);
- }
+ color: var(--tor-accent-color);
}
.bridge-status-badge.bridge-status-current-built-in {
@@ -990,7 +984,7 @@ hbox#torPreferences-requestBridge-incorrectCaptchaHbox {
image#torPreferences-requestBridge-errorIcon {
list-style-image: url("chrome://global/skin/icons/warning.svg");
-moz-context-properties: fill;
- fill: var(--warning-color);
+ fill: var(--in-content-warning-icon-color);
}
groupbox#torPreferences-bridges-group textarea {
=====================================
browser/themes/shared/browser-shared.css
=====================================
@@ -26,8 +26,8 @@
@import url("chrome://browser/skin/customizableui/customizeMode.css");
@import url("chrome://browser/skin/UITour.css");
@import url("chrome://browser/skin/formautofill-notification.css");
- at import url("chrome://global/skin/browser-colors.css");
@import url("chrome://browser/skin/tor-branding.css");
+ at import url("chrome://global/skin/tor-colors.css");
@import url("chrome://browser/skin/tor-urlbar-button.css");
@import url("chrome://browser/skin/onionlocation.css");
=====================================
browser/themes/shared/tor-urlbar-button.css
=====================================
@@ -1,9 +1,4 @@
.tor-urlbar-button:not([hidden]) {
- --tor-urlbar-button-background-color: var(--purple-60);
- background-color: var(--tor-urlbar-button-background-color);
- /* FIXME: Use different colors for light and dark theme, rather than "white".
- * See tor-browser#41787 */
- color: white;
display: flex;
align-items: center;
gap: 0.5em;
@@ -31,8 +26,7 @@
* urlbar background, but we keep the rounded corners. */
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
- /* Use the background color for the outline, same as in-content buttons. */
- outline-color: var(--tor-urlbar-button-background-color);
+ outline-color: var(--tor-focus-outline-color);
/* Calculate the difference between the button's border area and the outline
* area. */
--tor-urlbar-focus-outline-difference: calc(
@@ -64,31 +58,9 @@
display: none;
}
-.tor-urlbar-button:hover {
- --tor-urlbar-button-background-color: var(--purple-70);
-}
-
-.tor-urlbar-button:hover:active {
- --tor-urlbar-button-background-color: var(--purple-80);
-}
-
- at media (prefers-color-scheme: dark) {
- .tor-urlbar-button {
- --tor-urlbar-button-background-color: var(--purple-50);
- }
-
- .tor-urlbar-button:hover {
- --tor-urlbar-button-background-color: var(--purple-60);
- }
-
- .tor-urlbar-button:hover:active {
- --tor-urlbar-button-background-color: var(--purple-70);
- }
-}
-
/* Make the button look plain like the identity #urlbar-label-box. */
.tor-urlbar-button.tor-urlbar-button-plain {
- --tor-urlbar-button-background-color: var(--urlbar-box-bgcolor);
+ background-color: var(--urlbar-box-bgcolor);
color: var(--urlbar-box-text-color);
}
@@ -97,11 +69,11 @@
}
.tor-urlbar-button.tor-urlbar-button-plain:hover {
- --tor-urlbar-button-background-color: var(--urlbar-box-hover-bgcolor);
+ background-color: var(--urlbar-box-hover-bgcolor);
color: var(--urlbar-box-hover-text-color);
}
.tor-urlbar-button.tor-urlbar-button-plain:hover:active {
- --tor-urlbar-button-background-color: var(--urlbar-box-active-bgcolor);
+ background-color: var(--urlbar-box-active-bgcolor);
color: var(--urlbar-box-hover-text-color);
}
=====================================
toolkit/components/torconnect/content/aboutTorConnect.css
=====================================
@@ -2,7 +2,7 @@
/* Copyright (c) 2021, The Tor Project, Inc. */
@import url("chrome://global/skin/error-pages.css");
- at import url("chrome://global/skin/browser-colors.css");
+ at import url("chrome://global/skin/tor-colors.css");
:root {
--onion-opacity: 1;
@@ -14,23 +14,10 @@ html {
height: 100%;
}
-input[type="checkbox"]:focus, select:focus {
- outline: none!important;
- box-shadow: 0 0 0 3px var(--purple-30) !important;
- border: 1px var(--purple-80) solid !important;
-}
-
- at media (prefers-color-scheme: dark) {
- input[type="checkbox"]:focus, select:focus {
- box-shadow: 0 0 0 3px var(--purple-50)!important;
- }
-}
-
#breadcrumbs {
display: flex;
align-items: center;
margin: 0 0 24px 0;
- color: var(--grey-40);
}
#breadcrumbs.hidden {
@@ -129,23 +116,8 @@ input[type="checkbox"]:focus, select:focus {
list-style-image: url("chrome://global/content/torconnect/bridge.svg");
}
-button {
- --purple-button-text-color: rgb(251,251,254);
- --in-content-primary-button-text-color: var(--purple-button-text-color);
- --in-content-primary-button-background: var(--purple-60);
- --in-content-primary-button-text-color-hover: var(--purple-button-text-color);
- --in-content-primary-button-background-hover: var(--purple-70);
- --in-content-primary-button-text-color-active: var(--purple-button-text-color);
- --in-content-primary-button-background-active: var(--purple-80);
- --in-content-focus-outline-color: var(--purple-60);
- fill: white;
-}
-
-#cancelButton {
- color: var(--in-content-button-text-color);
- border: 1px solid var(--in-content-button-border-color);
- border-radius: 4px;
- background-color: var(--in-content-button-background);
+button, select {
+ --in-content-focus-outline-color: var(--tor-focus-outline-color);
}
#locationDropdownLabel {
@@ -157,18 +129,6 @@ button {
color: var(--text-color-error)
}
-#tryBridgeButton.danger-button {
- background-color: var(--purple-70);
-}
-
-#tryBridgeButton.danger-button:hover {
- background-color: var(--purple-80);
-}
-
-#tryBridgeButton.danger-button:active {
- background-color: var(--purple-90);
-}
-
/* this follows similar css in error-pages.css for buttons */
@media only screen and (min-width: 480px) {
form#locationDropdown {
@@ -195,35 +155,6 @@ form#locationDropdown select {
font-weight: 700;
}
-/* checkbox css */
-input[type="checkbox"]:not(:disabled) {
- background-color: var(--grey-20)!important;
-}
-
-input[type="checkbox"]:not(:disabled):checked {
- background-color: var(--purple-60)!important;
- color: white;
- fill: white;
-}
-
-input[type="checkbox"]:not(:disabled):hover {
- /* override firefox's default blue border on hover */
- border-color: var(--purple-70);
- background-color: var(--grey-30)!important;
-}
-
-input[type="checkbox"]:not(:disabled):hover:checked {
- background-color: var(--purple-70)!important;
-}
-
-input[type="checkbox"]:not(:disabled):active {
- background-color: var(--grey-40)!important;
-}
-
-input[type="checkbox"]:not(:disabled):active:checked {
- background-color: var(--purple-80)!important;
-}
-
:root {
--progressbar-shadow-start: rgba(255, 255, 255, 0.7);
--progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
@@ -352,7 +283,7 @@ body.aboutTorConnect .title {
.title.location {
background-image: url("chrome://global/content/torconnect/connection-location.svg");
- stroke: var(--warning-color);
+ stroke: var(--in-content-warning-icon-color);
}
:root {
=====================================
toolkit/components/torconnect/content/aboutTorConnect.html
=====================================
@@ -75,8 +75,8 @@
<button id="restartButton" hidden="true"></button>
<button id="configureButton" hidden="true"></button>
<button id="cancelButton" hidden="true"></button>
- <button id="connectButton" class="primary" hidden="true"></button>
- <button id="tryBridgeButton" class="primary" hidden="true"></button>
+ <button id="connectButton" hidden="true"></button>
+ <button id="tryBridgeButton" hidden="true"></button>
</span>
</div>
</div>
=====================================
toolkit/components/torconnect/content/aboutTorConnect.js
=====================================
@@ -188,8 +188,9 @@ class AboutTorConnect {
Element helper methods
*/
- show(element, primary) {
- element.classList.toggle("primary", primary !== undefined && primary);
+ show(element, primary = false) {
+ element.classList.toggle("primary", primary);
+ element.classList.toggle("tor-button", primary);
element.removeAttribute("hidden");
}
@@ -554,7 +555,7 @@ class AboutTorConnect {
} else {
this.hide(this.elements.viewLogButton);
}
- this.show(this.elements.cancelButton, true);
+ this.show(this.elements.cancelButton);
if (state.StateChanged) {
this.elements.cancelButton.focus();
}
@@ -687,7 +688,6 @@ class AboutTorConnect {
this.show(this.elements.locationDropdown);
this.elements.locationDropdownLabel.classList.toggle("error", isError);
this.show(this.elements.tryBridgeButton, true);
- this.elements.tryBridgeButton.classList.toggle("danger-button", isError);
if (buttonLabel !== undefined) {
this.elements.tryBridgeButton.textContent = buttonLabel;
}
=====================================
toolkit/components/torconnect/content/torConnectTitlebarStatus.css
=====================================
@@ -44,13 +44,7 @@
}
#tor-connect-titlebar-status.tor-connect-status-connected {
- color: var(--purple-60);
-}
-
- at media (prefers-color-scheme: dark) {
- #tor-connect-titlebar-status.tor-connect-status-connected {
- color: var(--purple-30);
- }
+ color: var(--tor-accent-color);
}
@keyframes onion-not-connected-to-connected {
=====================================
toolkit/themes/shared/browser-colors.css deleted
=====================================
@@ -1,97 +0,0 @@
-:root {
- /* photon colors, not all of them are available for whatever reason
- in firefox, so here they are */
-
- --magenta-50: #ff1ad9;
- --magenta-60: #ed00b5;
- --magenta-70: #b5007f;
- --magenta-80: #7d004f;
- --magenta-90: #440027;
-
- --purple-30: #c069ff;
- --purple-40: #ad3bff;
- --purple-50: #9400ff;
- --purple-60: #8000d7;
- --purple-70: #6200a4;
- --purple-80: #440071;
- --purple-90: #25003e;
-
- --blue-40: #45a1ff;
- --blue-50: #0a84ff;
- --blue-50-a30: rgba(10, 132, 255, 0.3);
- --blue-60: #0060df;
- --blue-70: #003eaa;
- --blue-80: #002275;
- --blue-90: #000f40;
-
- --teal-50: #00feff;
- --teal-60: #00c8d7;
- --teal-70: #008ea4;
- --teal-80: #005a71;
- --teal-90: #002d3e;
-
- --green-50: #30e60b;
- --green-60: #12bc00;
- --green-70: #058b00;
- --green-80: #006504;
- --green-90: #003706;
-
- --yellow-50: #ffe900;
- --yellow-60: #d7b600;
- --yellow-70: #a47f00;
- --yellow-80: #715100;
- --yellow-90: #3e2800;
-
- --red-50: #ff0039;
- --red-60: #d70022;
- --red-70: #a4000f;
- --red-80: #5a0002;
- --red-90: #3e0200;
-
- --orange-50: #ff9400;
- --orange-60: #d76e00;
- --orange-70: #a44900;
- --orange-80: #712b00;
- --orange-90: #3e1300;
-
- --grey-10: #f9f9fa;
- --grey-10-a10: rgba(249, 249, 250, 0.1);
- --grey-10-a20: rgba(249, 249, 250, 0.2);
- --grey-10-a40: rgba(249, 249, 250, 0.4);
- --grey-10-a60: rgba(249, 249, 250, 0.6);
- --grey-10-a80: rgba(249, 249, 250, 0.8);
- --grey-20: #ededf0;
- --grey-30: #d7d7db;
- --grey-40: #b1b1b3;
- --grey-50: #737373;
- --grey-60: #4a4a4f;
- --grey-70: #38383d;
- --grey-80: #2a2a2e;
- --grey-90: #0c0c0d;
- --grey-90-a05: rgba(12, 12, 13, 0.05);
- --grey-90-a10: rgba(12, 12, 13, 0.1);
- --grey-90-a20: rgba(12, 12, 13, 0.2);
- --grey-90-a30: rgba(12, 12, 13, 0.3);
- --grey-90-a40: rgba(12, 12, 13, 0.4);
- --grey-90-a50: rgba(12, 12, 13, 0.5);
- --grey-90-a60: rgba(12, 12, 13, 0.6);
- --grey-90-a70: rgba(12, 12, 13, 0.7);
- --grey-90-a80: rgba(12, 12, 13, 0.8);
- --grey-90-a90: rgba(12, 12, 13, 0.9);
-
- --ink-70: #363959;
- --ink-80: #202340;
- --ink-90: #0f1126;
-
- --white-100: #ffffff;
-
- /* TODO: Switch to some Firefox variable, once Mozilla adds one for this
- color. Matches --warning-icon-bgcolor (but not on the dark theme variant). */
- --warning-color: #ffa436;
-}
-
- at media (prefers-color-scheme: dark) {
- :root {
- --warning-color: #ffbd4f;
- }
-}
=====================================
toolkit/themes/shared/desktop-jar.inc.mn
=====================================
@@ -46,6 +46,7 @@
skin/classic/global/popupnotification.css (../../shared/popupnotification.css)
skin/classic/global/splitter.css (../../shared/splitter.css)
skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.css)
+ skin/classic/global/tor-colors.css (../../shared/tor-colors.css)
skin/classic/global/tree/tree.css (../../shared/tree/tree.css)
skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css)
#ifdef XP_MACOSX
=====================================
toolkit/themes/shared/minimal-toolkit.jar.inc.mn
=====================================
@@ -45,5 +45,3 @@ toolkit.jar:
# Text recognition widget
skin/classic/global/media/textrecognition.css (../../shared/media/textrecognition.css)
-
- skin/classic/global/browser-colors.css (../../shared/browser-colors.css)
=====================================
toolkit/themes/shared/tor-colors.css
=====================================
@@ -0,0 +1,120 @@
+:root {
+ /* Photon colors not available in Firefox. */
+ --purple-30: #c069ff;
+ --purple-40: #ad3bff;
+ --purple-50: #9400ff;
+ --purple-60: #8000d7;
+ --purple-70: #6200a4;
+ --purple-80: #440071;
+ --purple-90: #25003e;
+
+ /* On light backgrounds. */
+ --tor-accent-color-light: var(--purple-60);
+ --tor-accent-color-hover-light: var(--purple-70);
+ --tor-accent-color-active-light: var(--purple-80);
+
+ /* Acorn color grey light 05. */
+ --tor-button-text-color-light: var(--color-gray-05);
+ --tor-button-text-color-hover-light: var(--color-gray-05);
+ --tor-button-text-color-active-light: var(--color-gray-05);
+ --tor-button-background-color-light: var(--tor-accent-color-light);
+ --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
+ --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
+ --tor-focus-outline-color-light: var(--tor-accent-color-light);
+ --tor-link-color-light: var(--tor-accent-color-light);
+ --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
+ --tor-link-color-active-light: var(--tor-accent-color-active-light);
+
+
+ /* On dark backgrounds. */
+ /* TODO: Need a dark theme purple color that gets *lighter* with hover and
+ * active states, see tor-browser#42025 */
+ --tor-accent-color-dark: var(--purple-30);
+ --tor-accent-color-hover-dark: var(--purple-40);
+ --tor-accent-color-active-dark: var(--purple-50);
+
+ /* TODO: Use a dark text color for dark theme. tor-browser#41787. */
+ --tor-button-text-color-dark: var(--color-gray-05);
+ --tor-button-text-color-hover-dark: var(--color-gray-05);
+ --tor-button-text-color-active-dark: var(--color-gray-05);
+ --tor-button-background-color-dark: var(--tor-accent-color-dark);
+ --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
+ --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
+ --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
+ --tor-link-color-dark: var(--tor-accent-color-dark);
+ --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
+ --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
+
+
+ /* Generic colors that adapt to theme. */
+ --tor-accent-color: light-dark(
+ var(--tor-accent-color-light),
+ var(--tor-accent-color-dark)
+ );
+ --tor-accent-color-hover: light-dark(
+ var(--tor-accent-color-hover-light),
+ var(--tor-accent-color-hover-dark)
+ );
+ --tor-accent-color-active: light-dark(
+ var(--tor-accent-color-active-light),
+ var(--tor-accent-color-active-dark)
+ );
+ --tor-button-text-color: light-dark(
+ var(--tor-button-text-color-light),
+ var(--tor-button-text-color-dark)
+ );
+ --tor-button-text-color-hover: light-dark(
+ var(--tor-button-text-color-hover-light),
+ var(--tor-button-text-color-hover-dark)
+ );
+ --tor-button-text-color-active: light-dark(
+ var(--tor-button-text-color-active-light),
+ var(--tor-button-text-color-active-dark)
+ );
+ --tor-button-background-color: light-dark(
+ var(--tor-button-background-color-light),
+ var(--tor-button-background-color-dark)
+ );
+ --tor-button-background-color-hover: light-dark(
+ var(--tor-button-background-color-hover-light),
+ var(--tor-button-background-color-hover-dark)
+ );
+ --tor-button-background-color-active: light-dark(
+ var(--tor-button-background-color-active-light),
+ var(--tor-button-background-color-active-dark)
+ );
+ --tor-focus-outline-color: light-dark(
+ var(--tor-focus-outline-color-light),
+ var(--tor-focus-outline-color-dark)
+ );
+ --tor-link-color: light-dark(
+ var(--tor-link-color-light),
+ var(--tor-link-color-dark)
+ );
+ --tor-link-color-hover: light-dark(
+ var(--tor-link-color-hover-light),
+ var(--tor-link-color-hover-dark)
+ );
+ --tor-link-color-active: light-dark(
+ var(--tor-link-color-active-light),
+ var(--tor-link-color-active-dark)
+ );
+}
+
+button.tor-button,
+.tor-button {
+ color: var(--tor-button-text-color);
+ background-color: var(--tor-button-background-color);
+}
+
+button.tor-button:hover,
+.tor-button:hover {
+ color: var(--tor-button-text-color-hover);
+ background-color: var(--tor-button-background-color-hover);
+}
+
+button.tor-button:hover:active,
+.tor-button:hover:active {
+ color: var(--tor-button-text-color-active);
+ background-color: var(--tor-button-background-color-active);
+}
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/908dda03ccf1e7adc8fbc830ee5df607dbe997c6...d45ef4702de16e711202fe6f6b9a117ea8399706
--
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/908dda03ccf1e7adc8fbc830ee5df607dbe997c6...d45ef4702de16e711202fe6f6b9a117ea8399706
You're receiving this email because of your account on gitlab.torproject.org.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tor-commits/attachments/20240821/3b5c4fcb/attachment-0001.htm>
More information about the tor-commits
mailing list