morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser

Commits:

16 changed files:

Changes:

  • browser/base/content/navigator-toolbox.inc.xhtml
    ... ... @@ -431,7 +431,7 @@
    431 431
    432 432 
                 <hbox id="tor-connect-urlbar-button"
    433 433 
                       role="button"
    434 
    -                  class="tor-urlbar-button"
    434 
    +                  class="tor-button tor-urlbar-button"
    435 435 
                       hidden="true">
    436 436 
                   <label id="tor-connect-urlbar-button-label"/>
    437 437 
                 </hbox>

  • browser/components/abouttor/content/aboutTor.css
    1 
    -@import url("chrome://global/skin/browser-colors.css");
    1 
    +@import url("chrome://global/skin/tor-colors.css");
    2 2
    3 3 
     body {
    4 4 
       margin: 0;
    ... ... @@ -179,7 +179,7 @@ body:not(.show-tor-check) #tor-check {
    179 179 
       /* On dark background */
    180 180 
       :root {
    181 181 
         background-color: #2C0449;
    182 
    -    --focus-outline-color: var(--purple-30);
    182 
    +    --focus-outline-color: var(--tor-focus-outline-color-dark);
    183 183 
         --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    184 184 
         --in-content-focus-outline-color: var(--focus-outline-color);
    185 185 
         --in-content-focus-outline: var(--focus-outline);
    ... ... @@ -194,14 +194,9 @@ body:not(.show-tor-check) #tor-check {
    194 194 
         --in-content-page-color: #fbfbfe;
    195 195 
         --in-content-text-color: #fbfbfe;
    196 196 
         color: var(--in-content-text-color);
    197 
    -    --link-color: var(--purple-30);
    198 
    -    /* FIXME: Since we have a dark background, the color should get lighter on
    199 
    -     * hover, but --purple-40 and --pruple-50 are darker than --purple-30.
    200 
    -     * However, we do not have a standard lighter purple in our current set of
    201 
    -     * Photon colors.
    202 
    -     * See tor-browser#42025 */
    203 
    -    --link-color-hover: var(--purple-40);
    204 
    -    --link-color-active: var(--purple-50);
    197 
    +    --link-color: var(--tor-link-color-dark);
    198 
    +    --link-color-hover: var(--tor-link-color-hover-dark);
    199 
    +    --link-color-active: var(--tor-link-color-active-dark);
    205 200 
       }
    206 201
    207 202 
       #search-form {
    ... ... @@ -209,7 +204,9 @@ body:not(.show-tor-check) #tor-check {
    209 204 
       }
    210 205
    211 206 
       #search-form.search-input-focus-visible {
    212 
    -    border-color: var(--purple-60);
    207 
    +    /* Use a light-themed inner-border to contrast with the dark-themed
    208 
    +     * focus outline. */
    209 
    +    border-color: var(--tor-focus-outline-color-light);
    213 210 
       }
    214 211
    215 212 
       #search-form.onionized-search:not(.search-input-focus-visible) {
    ... ... @@ -218,17 +215,17 @@ body:not(.show-tor-check) #tor-check {
    218 215
    219 216 
       /* Light background. */
    220 217 
       #search-form > * {
    221 
    -    --focus-outline-color: var(--purple-60);
    218 
    +    --focus-outline-color: var(--tor-focus-outline-color-light);
    222 219 
         --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    223 220 
         --in-content-focus-outline-color: var(--focus-outline-color);
    224 221 
         --in-content-focus-outline: var(--focus-outline);
    225 222 
         /* Variables used for --toggle- variables. */
    226 
    -    --color-accent-primary: var(--purple-60);
    227 
    -    --color-accent-primary-hover: var(--purple-70);
    228 
    -    --color-accent-primary-active: var(--purple-80);
    223 
    +    --color-accent-primary: var(--tor-button-background-color-light);
    224 
    +    --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
    225 
    +    --color-accent-primary-active: var(--tor-button-background-color-active-light);
    229 226 
       }
    230 227
    231 228 
       #search-form.onionized-search #onionize-toggle {
    232 
    -    color: var(--purple-60);
    229 
    +    color: var(--tor-link-color-light);
    233 230 
       }
    234 231 
     }

  • browser/components/onionservices/content/authPreferences.css
    1 1 
     /* Copyright (c) 2020, The Tor Project, Inc. */
    2 2
    3 
    -@import url("chrome://global/skin/browser-colors.css");
    4 
    -
    5 3 
     #onionservices-savedkeys-dialog {
    6 4 
       min-width: 45em;
    7 5 
     }
    ... ... @@ -23,5 +21,5 @@
    23 21 
       margin-inline-end: 4px;
    24 22 
       list-style-image: url("chrome://global/skin/icons/warning.svg");
    25 23 
       -moz-context-properties: fill;
    26 
    -  fill: var(--warning-color);
    24 
    +  fill: var(--in-content-warning-icon-color);
    27 25 
     }

  • browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml
    1 1 
     # Copyright (c) 2020, The Tor Project, Inc.
    2 2
    3 3 
     <hbox id="onion-location-box"
    4 
    -      class="tor-urlbar-button"
    4 
    +      class="tor-button tor-urlbar-button"
    5 5 
           role="button"
    6 6 
           hidden="true"
    7 7 
           onclick="OnionLocationParent.buttonClick(event);">

  • browser/components/securitylevel/content/securityLevelPanel.css
    ... ... @@ -51,7 +51,7 @@
    51 51
    52 52 
     #securityLevel-custom {
    53 53 
       border-radius: 4px;
    54 
    -  background-color: var(--warning-color);
    54 
    +  background-color: var(--warning-icon-bgcolor);
    55 55 
       color: black;
    56 56 
       padding: 0.4em 0.5em;
    57 57 
       margin-inline-start: 1em;

  • browser/components/torpreferences/content/torPreferences.css
    1 
    -@import url("chrome://global/skin/browser-colors.css");
    1 
    +@import url("chrome://global/skin/tor-colors.css");
    2 2
    3 3
    4 4 
     #category-connection > .category-icon {
    ... ... @@ -137,13 +137,7 @@ button.spoof-button-disabled {
    137 137 
     }
    138 138
    139 139 
     .bridge-status-badge.bridge-status-connected {
    140 
    -  color: var(--purple-60);
    141 
    -}
    142 
    -
    143 
    -@media (prefers-color-scheme: dark) {
    144 
    -  .bridge-status-badge.bridge-status-connected {
    145 
    -    color: var(--purple-30);
    146 
    -  }
    140 
    +  color: var(--tor-accent-color);
    147 141 
     }
    148 142
    149 143 
     .bridge-status-badge.bridge-status-current-built-in {
    ... ... @@ -990,7 +984,7 @@ hbox#torPreferences-requestBridge-incorrectCaptchaHbox {
    990 984 
     image#torPreferences-requestBridge-errorIcon {
    991 985 
       list-style-image: url("chrome://global/skin/icons/warning.svg");
    992 986 
       -moz-context-properties: fill;
    993 
    -  fill: var(--warning-color);
    987 
    +  fill: var(--in-content-warning-icon-color);
    994 988 
     }
    995 989
    996 990 
     groupbox#torPreferences-bridges-group textarea {

  • browser/themes/shared/browser-shared.css
    ... ... @@ -26,8 +26,8 @@
    26 26 
     @import url("chrome://browser/skin/customizableui/customizeMode.css");
    27 27 
     @import url("chrome://browser/skin/UITour.css");
    28 28 
     @import url("chrome://browser/skin/formautofill-notification.css");
    29 
    -@import url("chrome://global/skin/browser-colors.css");
    30 29 
     @import url("chrome://browser/skin/tor-branding.css");
    30 
    +@import url("chrome://global/skin/tor-colors.css");
    31 31 
     @import url("chrome://browser/skin/tor-urlbar-button.css");
    32 32 
     @import url("chrome://browser/skin/onionlocation.css");
    33 33

  • browser/themes/shared/tor-urlbar-button.css
    1 1 
     .tor-urlbar-button:not([hidden]) {
    2 
    -  --tor-urlbar-button-background-color: var(--purple-60);
    3 
    -  background-color: var(--tor-urlbar-button-background-color);
    4 
    -  /* FIXME: Use different colors for light and dark theme, rather than "white".
    5 
    -   * See tor-browser#41787 */
    6 
    -  color: white;
    7 2 
       display: flex;
    8 3 
       align-items: center;
    9 4 
       gap: 0.5em;
    ... ... @@ -31,8 +26,7 @@
    31 26 
        * urlbar background, but we keep the rounded corners. */
    32 27 
       outline: var(--focus-outline);
    33 28 
       outline-offset: var(--focus-outline-offset);
    34 
    -  /* Use the background color for the outline, same as in-content buttons. */
    35 
    -  outline-color: var(--tor-urlbar-button-background-color);
    29 
    +  outline-color: var(--tor-focus-outline-color);
    36 30 
       /* Calculate the difference between the button's border area and the outline
    37 31 
        * area. */
    38 32 
       --tor-urlbar-focus-outline-difference: calc(
    ... ... @@ -64,31 +58,9 @@
    64 58 
       display: none;
    65 59 
     }
    66 60
    67 
    -.tor-urlbar-button:hover {
    68 
    -  --tor-urlbar-button-background-color: var(--purple-70);
    69 
    -}
    70 
    -
    71 
    -.tor-urlbar-button:hover:active {
    72 
    -  --tor-urlbar-button-background-color: var(--purple-80);
    73 
    -}
    74 
    -
    75 
    -@media (prefers-color-scheme: dark) {
    76 
    -  .tor-urlbar-button {
    77 
    -    --tor-urlbar-button-background-color: var(--purple-50);
    78 
    -  }
    79 
    -
    80 
    -  .tor-urlbar-button:hover {
    81 
    -    --tor-urlbar-button-background-color: var(--purple-60);
    82 
    -  }
    83 
    -
    84 
    -  .tor-urlbar-button:hover:active {
    85 
    -    --tor-urlbar-button-background-color: var(--purple-70);
    86 
    -  }
    87 
    -}
    88 
    -
    89 61 
     /* Make the button look plain like the identity #urlbar-label-box. */
    90 62 
     .tor-urlbar-button.tor-urlbar-button-plain {
    91 
    -  --tor-urlbar-button-background-color: var(--urlbar-box-bgcolor);
    63 
    +  background-color: var(--urlbar-box-bgcolor);
    92 64 
       color: var(--urlbar-box-text-color);
    93 65 
     }
    94 66
    ... ... @@ -97,11 +69,11 @@
    97 69 
     }
    98 70
    99 71 
     .tor-urlbar-button.tor-urlbar-button-plain:hover {
    100 
    -  --tor-urlbar-button-background-color: var(--urlbar-box-hover-bgcolor);
    72 
    +  background-color: var(--urlbar-box-hover-bgcolor);
    101 73 
       color: var(--urlbar-box-hover-text-color);
    102 74 
     }
    103 75
    104 76 
     .tor-urlbar-button.tor-urlbar-button-plain:hover:active {
    105 
    -  --tor-urlbar-button-background-color: var(--urlbar-box-active-bgcolor);
    77 
    +  background-color: var(--urlbar-box-active-bgcolor);
    106 78 
       color: var(--urlbar-box-hover-text-color);
    107 79 
     }

  • toolkit/components/torconnect/content/aboutTorConnect.css
    ... ... @@ -2,7 +2,7 @@
    2 2 
     /* Copyright (c) 2021, The Tor Project, Inc. */
    3 3
    4 4 
     @import url("chrome://global/skin/error-pages.css");
    5 
    -@import url("chrome://global/skin/browser-colors.css");
    5 
    +@import url("chrome://global/skin/tor-colors.css");
    6 6
    7 7 
     :root {
    8 8 
       --onion-opacity: 1;
    ... ... @@ -14,23 +14,10 @@ html {
    14 14 
       height: 100%;
    15 15 
     }
    16 16
    17 
    -input[type="checkbox"]:focus, select:focus {
    18 
    -  outline:  none!important;
    19 
    -  box-shadow: 0 0 0 3px var(--purple-30) !important;
    20 
    -  border:  1px var(--purple-80) solid !important;
    21 
    -}
    22 
    -
    23 
    -@media (prefers-color-scheme: dark) {
    24 
    -  input[type="checkbox"]:focus, select:focus {
    25 
    -    box-shadow: 0 0 0 3px var(--purple-50)!important;
    26 
    -  }
    27 
    -}
    28 
    -
    29 17 
     #breadcrumbs {
    30 18 
       display: flex;
    31 19 
       align-items: center;
    32 20 
       margin: 0 0 24px 0;
    33 
    -  color: var(--grey-40);
    34 21 
     }
    35 22
    36 23 
     #breadcrumbs.hidden {
    ... ... @@ -129,23 +116,8 @@ input[type="checkbox"]:focus, select:focus {
    129 116 
       list-style-image: url("chrome://global/content/torconnect/bridge.svg");
    130 117 
     }
    131 118
    132 
    -button {
    133 
    -  --purple-button-text-color: rgb(251,251,254);
    134 
    -  --in-content-primary-button-text-color: var(--purple-button-text-color);
    135 
    -  --in-content-primary-button-background: var(--purple-60);
    136 
    -  --in-content-primary-button-text-color-hover: var(--purple-button-text-color);
    137 
    -  --in-content-primary-button-background-hover: var(--purple-70);
    138 
    -  --in-content-primary-button-text-color-active: var(--purple-button-text-color);
    139 
    -  --in-content-primary-button-background-active: var(--purple-80);
    140 
    -  --in-content-focus-outline-color: var(--purple-60);
    141 
    -  fill: white;
    142 
    -}
    143 
    -
    144 
    -#cancelButton {
    145 
    -  color: var(--in-content-button-text-color);
    146 
    -  border: 1px solid var(--in-content-button-border-color);
    147 
    -  border-radius: 4px;
    148 
    -  background-color: var(--in-content-button-background);
    119 
    +button, select {
    120 
    +  --in-content-focus-outline-color: var(--tor-focus-outline-color);
    149 121 
     }
    150 122
    151 123 
     #locationDropdownLabel {
    ... ... @@ -157,18 +129,6 @@ button {
    157 129 
       color: var(--text-color-error)
    158 130 
     }
    159 131
    160 
    -#tryBridgeButton.danger-button {
    161 
    -  background-color: var(--purple-70);
    162 
    -}
    163 
    -
    164 
    -#tryBridgeButton.danger-button:hover {
    165 
    -  background-color: var(--purple-80);
    166 
    -}
    167 
    -
    168 
    -#tryBridgeButton.danger-button:active {
    169 
    -  background-color: var(--purple-90);
    170 
    -}
    171 
    -
    172 132 
     /* this follows similar css in error-pages.css for buttons */
    173 133 
     @media only screen and (min-width: 480px) {
    174 134 
       form#locationDropdown {
    ... ... @@ -195,35 +155,6 @@ form#locationDropdown select {
    195 155 
       font-weight: 700;
    196 156 
     }
    197 157
    198 
    -/* checkbox css */
    199 
    -input[type="checkbox"]:not(:disabled) {
    200 
    -  background-color: var(--grey-20)!important;
    201 
    -}
    202 
    -
    203 
    -input[type="checkbox"]:not(:disabled):checked {
    204 
    -  background-color: var(--purple-60)!important;
    205 
    -  color: white;
    206 
    -  fill: white;
    207 
    -}
    208 
    -
    209 
    -input[type="checkbox"]:not(:disabled):hover {
    210 
    -  /* override firefox's default blue border on hover */
    211 
    -  border-color: var(--purple-70);
    212 
    -  background-color: var(--grey-30)!important;
    213 
    -}
    214 
    -
    215 
    -input[type="checkbox"]:not(:disabled):hover:checked {
    216 
    -  background-color: var(--purple-70)!important;
    217 
    -}
    218 
    -
    219 
    -input[type="checkbox"]:not(:disabled):active {
    220 
    -  background-color: var(--grey-40)!important;
    221 
    -}
    222 
    -
    223 
    -input[type="checkbox"]:not(:disabled):active:checked {
    224 
    -  background-color: var(--purple-80)!important;
    225 
    -}
    226 
    -
    227 158 
     :root {
    228 159 
       --progressbar-shadow-start: rgba(255, 255, 255, 0.7);
    229 160 
       --progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
    ... ... @@ -352,7 +283,7 @@ body.aboutTorConnect .title {
    352 283
    353 284 
     .title.location {
    354 285 
       background-image: url("chrome://global/content/torconnect/connection-location.svg");
    355 
    -  stroke: var(--warning-color);
    286 
    +  stroke: var(--in-content-warning-icon-color);
    356 287 
     }
    357 288
    358 289 
     :root {

  • toolkit/components/torconnect/content/aboutTorConnect.html
    ... ... @@ -75,8 +75,8 @@
    75 75 
                 <button id="restartButton" hidden="true"></button>
    76 76 
                 <button id="configureButton" hidden="true"></button>
    77 77 
                 <button id="cancelButton" hidden="true"></button>
    78 
    -            <button id="connectButton" class="primary" hidden="true"></button>
    79 
    -            <button id="tryBridgeButton" class="primary" hidden="true"></button>
    78 
    +            <button id="connectButton" hidden="true"></button>
    79 
    +            <button id="tryBridgeButton" hidden="true"></button>
    80 80 
               </span>
    81 81 
             </div>
    82 82 
           </div>

  • toolkit/components/torconnect/content/aboutTorConnect.js
    ... ... @@ -188,8 +188,9 @@ class AboutTorConnect {
    188 188 
       Element helper methods
    189 189 
       */
    190 190
    191 
    -  show(element, primary) {
    192 
    -    element.classList.toggle("primary", primary !== undefined && primary);
    191 
    +  show(element, primary = false) {
    192 
    +    element.classList.toggle("primary", primary);
    193 
    +    element.classList.toggle("tor-button", primary);
    193 194 
         element.removeAttribute("hidden");
    194 195 
       }
    195 196
    ... ... @@ -554,7 +555,7 @@ class AboutTorConnect {
    554 555 
         } else {
    555 556 
           this.hide(this.elements.viewLogButton);
    556 557 
         }
    557 
    -    this.show(this.elements.cancelButton, true);
    558 
    +    this.show(this.elements.cancelButton);
    558 559 
         if (state.StateChanged) {
    559 560 
           this.elements.cancelButton.focus();
    560 561 
         }
    ... ... @@ -687,7 +688,6 @@ class AboutTorConnect {
    687 688 
         this.show(this.elements.locationDropdown);
    688 689 
         this.elements.locationDropdownLabel.classList.toggle("error", isError);
    689 690 
         this.show(this.elements.tryBridgeButton, true);
    690 
    -    this.elements.tryBridgeButton.classList.toggle("danger-button", isError);
    691 691 
         if (buttonLabel !== undefined) {
    692 692 
           this.elements.tryBridgeButton.textContent = buttonLabel;
    693 693 
         }

  • toolkit/components/torconnect/content/torConnectTitlebarStatus.css
    ... ... @@ -44,13 +44,7 @@
    44 44 
     }
    45 45
    46 46 
     #tor-connect-titlebar-status.tor-connect-status-connected {
    47 
    -  color: var(--purple-60);
    48 
    -}
    49 
    -
    50 
    -@media (prefers-color-scheme: dark) {
    51 
    -  #tor-connect-titlebar-status.tor-connect-status-connected {
    52 
    -    color: var(--purple-30);
    53 
    -  }
    47 
    +  color: var(--tor-accent-color);
    54 48 
     }
    55 49
    56 50 
     @keyframes onion-not-connected-to-connected {

  • toolkit/themes/shared/browser-colors.css deleted
    1 
    -:root {
    2 
    -  /* photon colors, not all of them are available for whatever reason
    3 
    -     in firefox, so here they are */
    4 
    -
    5 
    -  --magenta-50: #ff1ad9;
    6 
    -  --magenta-60: #ed00b5;
    7 
    -  --magenta-70: #b5007f;
    8 
    -  --magenta-80: #7d004f;
    9 
    -  --magenta-90: #440027;
    10 
    -
    11 
    -  --purple-30: #c069ff;
    12 
    -  --purple-40: #ad3bff;
    13 
    -  --purple-50: #9400ff;
    14 
    -  --purple-60: #8000d7;
    15 
    -  --purple-70: #6200a4;
    16 
    -  --purple-80: #440071;
    17 
    -  --purple-90: #25003e;
    18 
    -
    19 
    -  --blue-40: #45a1ff;
    20 
    -  --blue-50: #0a84ff;
    21 
    -  --blue-50-a30: rgba(10, 132, 255, 0.3);
    22 
    -  --blue-60: #0060df;
    23 
    -  --blue-70: #003eaa;
    24 
    -  --blue-80: #002275;
    25 
    -  --blue-90: #000f40;
    26 
    -
    27 
    -  --teal-50: #00feff;
    28 
    -  --teal-60: #00c8d7;
    29 
    -  --teal-70: #008ea4;
    30 
    -  --teal-80: #005a71;
    31 
    -  --teal-90: #002d3e;
    32 
    -
    33 
    -  --green-50: #30e60b;
    34 
    -  --green-60: #12bc00;
    35 
    -  --green-70: #058b00;
    36 
    -  --green-80: #006504;
    37 
    -  --green-90: #003706;
    38 
    -
    39 
    -  --yellow-50: #ffe900;
    40 
    -  --yellow-60: #d7b600;
    41 
    -  --yellow-70: #a47f00;
    42 
    -  --yellow-80: #715100;
    43 
    -  --yellow-90: #3e2800;
    44 
    -
    45 
    -  --red-50: #ff0039;
    46 
    -  --red-60: #d70022;
    47 
    -  --red-70: #a4000f;
    48 
    -  --red-80: #5a0002;
    49 
    -  --red-90: #3e0200;
    50 
    -
    51 
    -  --orange-50: #ff9400;
    52 
    -  --orange-60: #d76e00;
    53 
    -  --orange-70: #a44900;
    54 
    -  --orange-80: #712b00;
    55 
    -  --orange-90: #3e1300;
    56 
    -
    57 
    -  --grey-10: #f9f9fa;
    58 
    -  --grey-10-a10: rgba(249, 249, 250, 0.1);
    59 
    -  --grey-10-a20: rgba(249, 249, 250, 0.2);
    60 
    -  --grey-10-a40: rgba(249, 249, 250, 0.4);
    61 
    -  --grey-10-a60: rgba(249, 249, 250, 0.6);
    62 
    -  --grey-10-a80: rgba(249, 249, 250, 0.8);
    63 
    -  --grey-20: #ededf0;
    64 
    -  --grey-30: #d7d7db;
    65 
    -  --grey-40: #b1b1b3;
    66 
    -  --grey-50: #737373;
    67 
    -  --grey-60: #4a4a4f;
    68 
    -  --grey-70: #38383d;
    69 
    -  --grey-80: #2a2a2e;
    70 
    -  --grey-90: #0c0c0d;
    71 
    -  --grey-90-a05: rgba(12, 12, 13, 0.05);
    72 
    -  --grey-90-a10: rgba(12, 12, 13, 0.1);
    73 
    -  --grey-90-a20: rgba(12, 12, 13, 0.2);
    74 
    -  --grey-90-a30: rgba(12, 12, 13, 0.3);
    75 
    -  --grey-90-a40: rgba(12, 12, 13, 0.4);
    76 
    -  --grey-90-a50: rgba(12, 12, 13, 0.5);
    77 
    -  --grey-90-a60: rgba(12, 12, 13, 0.6);
    78 
    -  --grey-90-a70: rgba(12, 12, 13, 0.7);
    79 
    -  --grey-90-a80: rgba(12, 12, 13, 0.8);
    80 
    -  --grey-90-a90: rgba(12, 12, 13, 0.9);
    81 
    -
    82 
    -  --ink-70: #363959;
    83 
    -  --ink-80: #202340;
    84 
    -  --ink-90: #0f1126;
    85 
    -
    86 
    -  --white-100: #ffffff;
    87 
    -
    88 
    -  /* TODO: Switch to some Firefox variable, once Mozilla adds one for this
    89 
    -  color. Matches --warning-icon-bgcolor (but not on the dark theme variant). */
    90 
    -  --warning-color: #ffa436;
    91 
    -}
    92 
    -
    93 
    -@media (prefers-color-scheme: dark) {
    94 
    -  :root {
    95 
    -    --warning-color: #ffbd4f;
    96 
    -  }
    97 
    -}

  • toolkit/themes/shared/desktop-jar.inc.mn
    ... ... @@ -46,6 +46,7 @@
    46 46 
       skin/classic/global/popupnotification.css                (../../shared/popupnotification.css)
    47 47 
       skin/classic/global/splitter.css                         (../../shared/splitter.css)
    48 48 
       skin/classic/global/toolbarbutton.css                    (../../shared/toolbarbutton.css)
    49 
    +  skin/classic/global/tor-colors.css                       (../../shared/tor-colors.css)
    49 50 
       skin/classic/global/tree/tree.css                        (../../shared/tree/tree.css)
    50 51 
       skin/classic/global/dirListing/dirListing.css            (../../shared/dirListing/dirListing.css)
    51 52 
     #ifdef XP_MACOSX

  • toolkit/themes/shared/minimal-toolkit.jar.inc.mn
    ... ... @@ -45,5 +45,3 @@ toolkit.jar:
    45 45 
     # Text recognition widget
    46 46
    47 47 
       skin/classic/global/media/textrecognition.css            (../../shared/media/textrecognition.css)
    48 
    -
    49 
    -  skin/classic/global/browser-colors.css                   (../../shared/browser-colors.css)

  • toolkit/themes/shared/tor-colors.css
    1 
    +:root {
    2 
    +  /* Photon colors not available in Firefox. */
    3 
    +  --purple-30: #c069ff;
    4 
    +  --purple-40: #ad3bff;
    5 
    +  --purple-50: #9400ff;
    6 
    +  --purple-60: #8000d7;
    7 
    +  --purple-70: #6200a4;
    8 
    +  --purple-80: #440071;
    9 
    +  --purple-90: #25003e;
    10 
    +
    11 
    +  /* On light backgrounds. */
    12 
    +  --tor-accent-color-light: var(--purple-60);
    13 
    +  --tor-accent-color-hover-light: var(--purple-70);
    14 
    +  --tor-accent-color-active-light: var(--purple-80);
    15 
    +
    16 
    +  /* Acorn color grey light 05. */
    17 
    +  --tor-button-text-color-light: var(--color-gray-05);
    18 
    +  --tor-button-text-color-hover-light: var(--color-gray-05);
    19 
    +  --tor-button-text-color-active-light: var(--color-gray-05);
    20 
    +  --tor-button-background-color-light: var(--tor-accent-color-light);
    21 
    +  --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
    22 
    +  --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
    23 
    +  --tor-focus-outline-color-light: var(--tor-accent-color-light);
    24 
    +  --tor-link-color-light: var(--tor-accent-color-light);
    25 
    +  --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
    26 
    +  --tor-link-color-active-light: var(--tor-accent-color-active-light);
    27 
    +
    28 
    +
    29 
    +  /* On dark backgrounds. */
    30 
    +  /* TODO: Need a dark theme purple color that gets *lighter* with hover and
    31 
    +   * active states, see tor-browser#42025 */
    32 
    +  --tor-accent-color-dark: var(--purple-30);
    33 
    +  --tor-accent-color-hover-dark: var(--purple-40);
    34 
    +  --tor-accent-color-active-dark: var(--purple-50);
    35 
    +
    36 
    +  /* TODO: Use a dark text color for dark theme. tor-browser#41787. */
    37 
    +  --tor-button-text-color-dark: var(--color-gray-05);
    38 
    +  --tor-button-text-color-hover-dark: var(--color-gray-05);
    39 
    +  --tor-button-text-color-active-dark: var(--color-gray-05);
    40 
    +  --tor-button-background-color-dark: var(--tor-accent-color-dark);
    41 
    +  --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
    42 
    +  --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
    43 
    +  --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
    44 
    +  --tor-link-color-dark: var(--tor-accent-color-dark);
    45 
    +  --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
    46 
    +  --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
    47 
    +
    48 
    +
    49 
    +  /* Generic colors that adapt to theme. */
    50 
    +  --tor-accent-color: light-dark(
    51 
    +    var(--tor-accent-color-light),
    52 
    +    var(--tor-accent-color-dark)
    53 
    +  );
    54 
    +  --tor-accent-color-hover: light-dark(
    55 
    +    var(--tor-accent-color-hover-light),
    56 
    +    var(--tor-accent-color-hover-dark)
    57 
    +  );
    58 
    +  --tor-accent-color-active: light-dark(
    59 
    +    var(--tor-accent-color-active-light),
    60 
    +    var(--tor-accent-color-active-dark)
    61 
    +  );
    62 
    +  --tor-button-text-color: light-dark(
    63 
    +    var(--tor-button-text-color-light),
    64 
    +    var(--tor-button-text-color-dark)
    65 
    +  );
    66 
    +  --tor-button-text-color-hover: light-dark(
    67 
    +    var(--tor-button-text-color-hover-light),
    68 
    +    var(--tor-button-text-color-hover-dark)
    69 
    +  );
    70 
    +  --tor-button-text-color-active: light-dark(
    71 
    +    var(--tor-button-text-color-active-light),
    72 
    +    var(--tor-button-text-color-active-dark)
    73 
    +  );
    74 
    +  --tor-button-background-color: light-dark(
    75 
    +    var(--tor-button-background-color-light),
    76 
    +    var(--tor-button-background-color-dark)
    77 
    +  );
    78 
    +  --tor-button-background-color-hover: light-dark(
    79 
    +    var(--tor-button-background-color-hover-light),
    80 
    +    var(--tor-button-background-color-hover-dark)
    81 
    +  );
    82 
    +  --tor-button-background-color-active: light-dark(
    83 
    +    var(--tor-button-background-color-active-light),
    84 
    +    var(--tor-button-background-color-active-dark)
    85 
    +  );
    86 
    +  --tor-focus-outline-color: light-dark(
    87 
    +    var(--tor-focus-outline-color-light),
    88 
    +    var(--tor-focus-outline-color-dark)
    89 
    +  );
    90 
    +  --tor-link-color: light-dark(
    91 
    +    var(--tor-link-color-light),
    92 
    +    var(--tor-link-color-dark)
    93 
    +  );
    94 
    +  --tor-link-color-hover: light-dark(
    95 
    +    var(--tor-link-color-hover-light),
    96 
    +    var(--tor-link-color-hover-dark)
    97 
    +  );
    98 
    +  --tor-link-color-active: light-dark(
    99 
    +    var(--tor-link-color-active-light),
    100 
    +    var(--tor-link-color-active-dark)
    101 
    +  );
    102 
    +}
    103 
    +
    104 
    +button.tor-button,
    105 
    +.tor-button {
    106 
    +  color: var(--tor-button-text-color);
    107 
    +  background-color: var(--tor-button-background-color);
    108 
    +}
    109 
    +
    110 
    +button.tor-button:hover,
    111 
    +.tor-button:hover {
    112 
    +  color: var(--tor-button-text-color-hover);
    113 
    +  background-color: var(--tor-button-background-color-hover);
    114 
    +}
    115 
    +
    116 
    +button.tor-button:hover:active,
    117 
    +.tor-button:hover:active {
    118 
    +  color: var(--tor-button-text-color-active);
    119 
    +  background-color: var(--tor-button-background-color-active);
    120 
    +}

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help