henry pushed to branch tor-browser-148.0a1-16.0-2 at The Tor Project / Applications / Tor Browser

Commits:

30 changed files:

Changes:

  • .stylelintrc.js
    ... ... @@ -274,9 +274,9 @@ module.exports = {
    274 274 
         // Remove this line setting `csscontrols/use-logical` to null after implementing fixes
    275 275 
         "csstools/use-logical": null,
    276 276 
         "stylelint-plugin-mozilla/no-base-design-tokens": true,
    277 
    -    "stylelint-plugin-mozilla/use-design-tokens": true,
    278 
    -    "stylelint-plugin-mozilla/no-non-semantic-token-usage": true,
    279 
    -    "stylelint-plugin-mozilla/use-size-tokens": true,
    277 
    +    "stylelint-plugin-mozilla/use-design-tokens": false,
    278 
    +    "stylelint-plugin-mozilla/no-non-semantic-token-usage": false,
    279 
    +    "stylelint-plugin-mozilla/use-size-tokens": false,
    280 280 
       },
    281 281
    282 282 
       overrides: [

  • browser/components/abouttor/content/aboutTor.css
    1 
    -@import url("chrome://global/skin/tor-colors.css");
    2 1 
     @import url("chrome://global/skin/onion-pattern.css");
    3 2
    4 3 
     body {
    ... ... @@ -23,7 +22,7 @@ body {
    23 22 
         /* NOTE: "form" will be given a maximum width of --form-max-width. */
    24 23 
         / 1fr minmax(max-content, var(--form-max-width)) 1fr;
    25 24 
       justify-items: center;
    26 
    -  padding-inline: 20px;
    25 
    +  padding-inline: var(--space-large);
    27 26 
     }
    28 27
    29 28 
     body:not(.initialized) {
    ... ... @@ -37,12 +36,10 @@ h1 {
    37 36 
       grid-area: heading;
    38 37 
       display: flex;
    39 38 
       align-items: center;
    40 
    -  gap: 16px;
    41 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
    39 
    +  gap: var(--space-large);
    42 40 
       font-size: 40px;
    43 41 
       margin-block-start: 0;
    44 
    -  margin-block-end: 40px;
    45 
    -  margin-inline: 20px;
    42 
    +  margin-block-end: var(--space-small);
    46 43 
     }
    47 44
    48 45 
     #tor-browser-logo {
    ... ... @@ -61,17 +58,17 @@ body:not(.is-testing) #tor-browser-home-heading-testing {
    61 58 
     #tor-check {
    62 59 
       grid-area: tor-check;
    63 60 
       display: flex;
    64 
    -  gap: 10px;
    61 
    +  gap: var(--space-small);
    65 62 
       align-items: center;
    66 
    -  padding-inline: 23px;
    67 
    -  padding-block: 11px;
    63 
    +  padding-inline: var(--space-xlarge);
    64 
    +  padding-block: var(--space-medium);
    68 65 
       border-radius: var(--border-radius-medium);
    69 
    -  margin-block-start: 0;
    70 
    -  margin-block-end: 30px;
    66 
    +  margin-block-start: var(--space-xxlarge);
    67 
    +  margin-block-end: 0;
    71 68 
     }
    72 69
    73 70 
     .tor-home-box {
    74 
    -  border: 1px solid var(--border-color);
    71 
    +  border: var(--border-width) solid var(--border-color);
    75 72 
       background-color: var(--background-color-box-info);
    76 73 
       max-width: var(--form-max-width);
    77 74 
       width: -moz-available;
    ... ... @@ -84,8 +81,8 @@ body:not(.show-tor-check) #tor-check {
    84 81
    85 82 
     #tor-check-icon {
    86 83 
       flex: 0 0 auto;
    87 
    -  width: 16px;
    88 
    -  height: 16px;
    84 
    +  width: var(--icon-size);
    85 
    +  height: var(--icon-size);
    89 86 
       -moz-context-properties: fill;
    90 87 
       fill: currentColor;
    91 88 
     }
    ... ... @@ -97,31 +94,31 @@ body:not(.show-tor-check) #tor-check {
    97 94 
     .home-message {
    98 95 
       grid-area: message;
    99 96 
       text-align: center;
    100 
    -  margin-block: 1.6em;
    97 
    +  margin-block: var(--space-xlarge);
    101 98 
     }
    102 99
    103 100 
     .message-emoji {
    104 
    -  height: 1em;
    101 
    +  height: var(--icon-size);
    105 102 
       vertical-align: sub;
    106 
    -  margin-inline-end: 0.3em;
    103 
    +  margin-inline-end: var(--space-xsmall);
    107 104 
     }
    108 105
    109 106 
     #search-form {
    110 107 
       grid-area: form;
    111 108 
       /* Occupy the entire "form" block. */
    112 109 
       justify-self: stretch;
    110 
    +  margin-block-start: var(--space-xxlarge);
    113 111 
       background: var(--background-color-canvas);
    114 112 
       display: flex;
    115 113 
       align-items: stretch;
    116 114 
       /* Padding between elements. */
    117 
    -  --form-padding: 12px;
    118 
    -  --form-border-width: 1px;
    115 
    +  --form-padding: var(--space-medium);
    116 
    +  --form-border-width: var(--border-width);
    119 117 
       /* Padding between elements and the parent's border edge. */
    120 118 
       --form-outer-padding: calc(var(--form-padding) - var(--form-border-width));
    121 119 
       --form-radius-container: var(--border-radius-medium);
    122 120 
       --form-radius: calc(var(--form-radius-container) - var(--form-border-width));
    123 
    -  --logo-size: 30px;
    124 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
    121 
    +  --logo-size: var(--icon-size-xlarge);
    125 122 
       border-radius: var(--form-radius-container);
    126 123 
       border-width: var(--form-border-width);
    127 124 
       border-style: solid;
    ... ... @@ -151,12 +148,10 @@ body:not(.show-tor-check) #tor-check {
    151 148 
       padding-inline-end: var(--form-padding);
    152 149 
       padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);
    153 150 
       /* Make sure clickable area does not extend beyond the form's border. */
    154 
    -  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
    155 151 
       border-start-start-radius: var(--form-radius);
    156 152 
       border-end-start-radius: var(--form-radius);
    157 153 
       border-start-end-radius: 0;
    158 154 
       border-end-end-radius: 0;
    159 
    -  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
    160 155 
       /* Focus and outline styling move to the parent. */
    161 156 
       background: none;
    162 157 
       border: none;
    ... ... @@ -168,15 +163,13 @@ body:not(.show-tor-check) #tor-check {
    168 163 
       align-content: center;
    169 164 
       padding-block: var(--form-outer-padding);
    170 165 
       padding-inline-end: var(--form-outer-padding);
    171 
    -  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
    172 166 
       border-start-end-radius: var(--form-radius);
    173 167 
       border-end-end-radius: var(--form-radius);
    174 168 
       border-start-start-radius: 0;
    175 169 
       border-end-start-radius: 0;
    176 
    -  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
    177 170 
       padding-inline-start: 0;
    178 171 
       /* Non-clickable gap between input and toggle. */
    179 
    -  margin-inline-start: 0.5em;
    172 
    +  margin-inline-start: var(--space-small);
    180 173 
     }
    181 174
    182 175 
     #survey {
    ... ... @@ -188,11 +181,10 @@ body:not(.show-tor-check) #tor-check {
    188 181 
         ". buttons buttons" min-content
    189 182 
         / min-content 1fr min-content;
    190 183 
       border-radius: var(--border-radius-small);
    191 
    -  /* Remove 1px from padding for border. */
    192 
    -  padding-block: 3px 11px;
    193 
    -  padding-inline: 15px 3px;
    194 
    -  gap: 8px;
    195 
    -  margin-block-end: 1.6em;
    184 
    +  padding-block: var(--space-xsmall) var(--space-medium);
    185 
    +  padding-inline: var(--space-large) var(--space-xsmall);
    186 
    +  gap: var(--space-small);
    187 
    +  margin-block-end: var(--space-xlarge);
    196 188 
     }
    197 189
    198 190 
     body:not(.show-survey) #survey {
    ... ... @@ -205,9 +197,9 @@ body:not(.show-survey) #survey {
    205 197
    206 198 
     #survey-icon {
    207 199 
       grid-area: icon;
    208 
    -  width: 24px;
    209 
    -  height: 24px;
    210 
    -  padding: 8px;
    200 
    +  width: var(--icon-size-large);
    201 
    +  height: var(--icon-size-large);
    202 
    +  padding: var(--space-small);
    211 203 
       border-radius: var(--border-radius-circle);
    212 204 
     }
    213 205
    ... ... @@ -218,18 +210,18 @@ body:not(.show-survey) #survey {
    218 210
    219 211 
     #survey-icon,
    220 212 
     #survey-heading {
    221 
    -  margin-block-start: 8px;
    213 
    +  margin-block-start: var(--space-small);
    222 214 
     }
    223 215
    224 216 
     #survey-body {
    225 217 
       grid-area: body;
    226 
    -  margin-block-end: 8px;
    218 
    +  margin-block-end: var(--space-small);
    227 219 
     }
    228 220
    229 221 
     #survey-buttons {
    230 222 
       grid-area: buttons;
    231 223 
       display: flex;
    232 
    -  gap: 8px;
    224 
    +  gap: var(--space-small);
    233 225 
     }
    234 226
    235 227 
     #survey-buttons > * {
    ... ... @@ -248,7 +240,7 @@ body:not(.show-survey) #survey {
    248 240 
       /* On dark background */
    249 241 
       :root {
    250 242 
         background-color: #2c0449;
    251 
    -    --focus-outline-color: var(--tor-focus-outline-color-dark);
    243 
    +    --focus-outline-color: var(--focus-outline-color-tor-dark);
    252 244 
         --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    253 245 
         --onion-pattern-stroke-color: #3e0663;
    254 246 
         --onion-pattern-fill-color: #350556;
    ... ... @@ -271,9 +263,9 @@ body:not(.show-survey) #survey {
    271 263 
         --button-text-color-ghost: var(--button-text-color);
    272 264 
         --button-text-color-ghost-hover: var(--button-text-color);
    273 265 
         --button-text-color-ghost-active: var(--button-text-color);
    274 
    -    --link-color: var(--tor-link-color-dark);
    275 
    -    --link-color-hover: var(--tor-link-color-hover-dark);
    276 
    -    --link-color-active: var(--tor-link-color-active-dark);
    266 
    +    --link-color: var(--link-color-tor-dark);
    267 
    +    --link-color-hover: var(--link-color-tor-hover-dark);
    268 
    +    --link-color-active: var(--link-color-tor-active-dark);
    277 269 
       }
    278 270
    279 271 
       #search-form {
    ... ... @@ -286,8 +278,7 @@ body:not(.show-survey) #survey {
    286 278 
       #search-form:has(#search-input:focus-visible) {
    287 279 
         /* Use a light-themed inner-border to contrast with the dark-themed
    288 280 
          * focus outline. */
    289 
    -    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
    290 
    -    border-color: var(--tor-focus-outline-color-light);
    281 
    +    border-color: var(--focus-outline-color-tor-light);
    291 282 
       }
    292 283
    293 284 
       #search-form.onionized-search:has(#search-input:not(:focus-visible)) {
    ... ... @@ -298,16 +289,16 @@ body:not(.show-survey) #survey {
    298 289
    299 290 
       /* Light background. */
    300 291 
       #search-form > * {
    301 
    -    --focus-outline-color: var(--tor-focus-outline-color-light);
    292 
    +    --focus-outline-color: var(--focus-outline-color-tor-light);
    302 293 
         --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    303 294 
         /* Variables used for --toggle- variables. */
    304 
    -    --color-accent-primary: var(--tor-button-background-color-light);
    305 
    -    --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
    306 
    -    --color-accent-primary-active: var(--tor-button-background-color-active-light);
    295 
    +    --color-accent-primary: var(--button-background-color-tor-light);
    296 
    +    --color-accent-primary-hover: var(--button-background-color-tor-hover-light);
    297 
    +    --color-accent-primary-active: var(--button-background-color-tor-active-light);
    307 298 
       }
    308 299
    309 300 
       #search-form.onionized-search #onionize-toggle {
    310 
    -    color: var(--tor-link-color-light);
    301 
    +    color: var(--link-color);
    311 302 
       }
    312 303
    313 304 
       #survey {
    ... ... @@ -321,9 +312,9 @@ body:not(.show-survey) #survey {
    321 312
    322 313 
       #survey-launch {
    323 314 
         color: var(--text-color-light);
    324 
    -    --button-background-color-primary: var(--tor-button-background-color-dark);
    325 
    -    --button-background-color-primary-hover: var(--tor-button-background-color-hover-dark);
    326 
    -    --button-background-color-primary-active: var(--tor-button-background-color-active-dark);
    315 
    +    --button-background-color-primary: var(--button-background-color-tor-dark);
    316 
    +    --button-background-color-primary-hover: var(--button-background-color-tor-hover-dark);
    317 
    +    --button-background-color-primary-active: var(--button-background-color-tor-active-dark);
    327 318 
       }
    328 319 
     }
    329 320
    ... ... @@ -342,7 +333,7 @@ body.show-yec h1 {
    342 333 
     #yec-banner {
    343 334 
       grid-area: heading;
    344 335 
       border-radius: var(--border-radius-medium);
    345 
    -  border: 1px solid var(--border-color);
    336 
    +  border: var(--border-width) solid var(--border-color);
    346 337 
       display: grid;
    347 338 
       grid-template:
    348 339 
         "yec-heading yec-image" auto
    ... ... @@ -356,10 +347,10 @@ body.show-yec h1 {
    356 347 
       padding-inline: 47px 47px;
    357 348 
       box-sizing: border-box;
    358 349 
       max-width: 850px;
    359 
    -  margin-block-end: 40px;
    350 
    +  margin-block-end: var(--space-small);
    360 351 
       /* Position for the close button. */
    361 352 
       position: relative;
    362 
    -  gap: 0 24px;
    353 
    +  gap: 0 var(--space-xlarge);
    363 354 
     }
    364 355
    365 356 
     #yec-image {
    ... ... @@ -371,12 +362,12 @@ body.show-yec h1 {
    371 362 
        * contrast or forced color theme. */
    372 363 
       background-color: var(--yec-image-background);
    373 364 
       border-radius: var(--border-radius-medium);
    374 
    -  padding: 4px;
    365 
    +  padding: var(--space-xsmall);
    375 366 
       height: 196px;
    376 
    -  border: 1px solid transparent;
    367 
    +  border: var(--border-width) solid transparent;
    377 368 
       /* Remove border and padding from the layout size. These parts are only
    378 369 
        * visible in contrast or forced color themes. */
    379 
    -  margin: -5px;
    370 
    +  margin: calc(-1 * (var(--border-width) + var(--space-xsmall)));
    380 371 
       /* Do not let forced colors ignore the background-color, which is needed to
    381 372 
        * see the drawing. */
    382 373 
       forced-color-adjust: none;
    ... ... @@ -388,15 +379,14 @@ body.show-yec h1 {
    388 379
    389 380 
     #yec-heading {
    390 381 
       grid-area: yec-heading;
    391 
    -  margin-block: 0 16px;
    392 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
    382 
    +  margin-block: 0 var(--space-large);
    393 383 
       font-size: 64px;
    394 384 
       font-weight: var(--font-weight);
    395 385 
     }
    396 386
    397 387 
     #yec-body {
    398 388 
       grid-area: yec-body;
    399 
    -  margin-block: 0 12px;
    389 
    +  margin-block: 0 var(--space-medium);
    400 390 
     }
    401 391
    402 392 
     #yec-body-highlight {
    ... ... @@ -405,7 +395,7 @@ body.show-yec h1 {
    405 395
    406 396 
     #yec-matching {
    407 397 
       grid-area: yec-matching;
    408 
    -  margin-block: 0 32px;
    398 
    +  margin-block: 0 var(--space-xxlarge);
    409 399 
     }
    410 400
    411 401 
     #yec-donate-link {
    ... ... @@ -414,7 +404,7 @@ body.show-yec h1 {
    414 404 
       /* Style like a button. */
    415 405 
       font-weight: var(--button-font-weight);
    416 406 
       color: var(--button-text-color);
    417 
    -  border: 1px solid var(--button-border-color);
    407 
    +  border: var(--border-width) solid var(--button-border-color);
    418 408 
       border-radius: var(--button-border-radius);
    419 409 
       background-color: var(--button-background-color);
    420 410 
       padding: var(--button-padding);
    ... ... @@ -423,7 +413,7 @@ body.show-yec h1 {
    423 413 
       text-decoration: none;
    424 414 
       display: flex;
    425 415 
       align-items: center;
    426 
    -  gap: 8px;
    416 
    +  gap: var(--space-small);
    427 417 
       white-space: nowrap;
    428 418 
     }
    429 419
    ... ... @@ -450,8 +440,8 @@ body.show-yec h1 {
    450 440
    451 441 
     #yec-close {
    452 442 
       position: absolute;
    453 
    -  inset-block-start: 16px;
    454 
    -  inset-inline-end: 16px;
    443 
    +  inset-block-start: var(--space-large);
    444 
    +  inset-inline-end: var(--space-large);
    455 445 
     }
    456 446
    457 447 
     @media (max-width: 768px) {
    ... ... @@ -464,11 +454,11 @@ body.show-yec h1 {
    464 454 
           "yec-matching" auto
    465 455 
           "yec-donate" min-content
    466 456 
           / 1fr;
    467 
    -    padding-block: 31px 39px;
    468 
    -    padding-inline: 15px;
    457 
    +    padding-block: var(--space-xxlarge);
    458 
    +    padding-inline: var(--space-large);
    469 459 
         /* Match max-width of the form. */
    470 460 
         max-width: var(--form-max-width);
    471 
    -    margin-block-end: 32px;
    461 
    +    margin-block-end: var(--space-xxlarge);
    472 462 
       }
    473 463
    474 464 
       #yec-image {
    ... ... @@ -476,18 +466,17 @@ body.show-yec h1 {
    476 466 
       }
    477 467
    478 468 
       #yec-heading {
    479 
    -    margin-block-start: 16px;
    469 
    +    margin-block-start: var(--space-large);
    480 470 
         text-align: center;
    481 471 
         text-wrap-style: balance;
    482 472 
       }
    483 473
    484 474 
       #yec-heading {
    485 
    -    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
    486 475 
         font-size: 50px;
    487 476 
       }
    488 477
    489 478 
       #yec-matching {
    490 
    -    margin-block-end: 16px;
    479 
    +    margin-block-end: var(--space-large);
    491 480 
       }
    492 481
    493 482 
       #yec-donate-link {

  • browser/components/onionservices/content/authPreferences.css
    1 1 
     /* Copyright (c) 2020, The Tor Project, Inc. */
    2 2
    3 3 
     #onionservices-savedkeys-dialog {
    4 
    -  min-width: 45em;
    4 
    +  min-width: 700px;
    5 5 
     }
    6 6
    7 7 
     #onionservices-savedkeys-tree treechildren::-moz-tree-cell-text {
    ... ... @@ -9,8 +9,8 @@
    9 9 
     }
    10 10
    11 11 
     #onionservices-savedkeys-errorContainer {
    12 
    -  margin-block-start: 4px;
    13 
    -  min-height: 3em;
    12 
    +  margin-block-start: var(--space-xsmall);
    13 
    +  min-height: var(--size-item-xlarge);
    14 14 
     }
    15 15
    16 16 
     #onionservices-savedkeys-errorContainer:not(.show-error) {
    ... ... @@ -18,7 +18,7 @@
    18 18 
     }
    19 19
    20 20 
     #onionservices-savedkeys-errorIcon {
    21 
    -  margin-inline-end: 4px;
    21 
    +  margin-inline-end: var(--space-xsmall);
    22 22 
       list-style-image: url("chrome://global/skin/icons/warning.svg");
    23 23 
       -moz-context-properties: fill;
    24 24 
       fill: var(--icon-color-warning);

  • browser/components/onionservices/content/onionservices.css
    ... ... @@ -7,8 +7,8 @@
    7 7 
     #tor-clientauth-notification-key {
    8 8 
       box-sizing: border-box;
    9 9 
       width: 100%;
    10 
    -  margin-top: 15px;
    11 
    -  padding: 6px;
    10 
    +  margin-top: var(--space-large);
    11 
    +  padding: var(--space-small);
    12 12 
     }
    13 13
    14 14 
     /* Start of rules adapted from
    ... ... @@ -16,7 +16,7 @@
    16 16 
      * use the same rules).
    17 17 
      */
    18 18 
     #tor-clientauth-notification-key.invalid {
    19 
    -  border: 1px solid var(--outline-color-error);
    19 
    +  border: var(--border-width) solid var(--outline-color-error);
    20 20 
     }
    21 21
    22 22 
     #tor-clientauth-warning {
    ... ... @@ -26,10 +26,10 @@
    26 26 
       background: var(--button-background-color-destructive);
    27 27 
       color: var(--button-text-color-destructive);
    28 28 
       border-radius: var(--border-radius-xsmall);
    29 
    -  inset-inline-start: 3px;
    30 
    -  padding: 5px 12px;
    29 
    +  inset-inline-start: var(--space-xsmall);
    30 
    +  padding: var(--space-xsmall) var(--space-medium);
    31 31 
       position: relative;
    32 
    -  top: 6px;
    32 
    +  inset-block-start: var(--space-small);
    33 33 
       z-index: 1;
    34 34 
     }
    35 35
    ... ... @@ -39,16 +39,16 @@
    39 39
    40 40 
     #tor-clientauth-warning::before {
    41 41 
       background: var(--button-background-color-destructive);
    42 
    -  bottom: -8px;
    42 
    +  inset-block-end: calc(-1 * var(--space-small));
    43 
    +  inset-block-start: calc(-1 * var(--space-small));
    43 44 
       content: ".";
    44 
    -  height: 16px;
    45 
    -  inset-inline-start: 12px;
    45 
    +  height: var(--size-item-small);
    46 
    +  inset-inline-start: var(--space-medium);
    46 47 
       position: absolute;
    47 48 
       text-indent: -999px;
    48 
    -  top: -7px;
    49 49 
       transform: rotate(45deg);
    50 50 
       white-space: nowrap;
    51 
    -  width: 16px;
    51 
    +  width: var(--size-item-small);
    52 52 
       z-index: -1;
    53 53 
     }
    54 54

  • browser/components/rulesets/content/aboutRulesets.css
    ... ... @@ -11,7 +11,7 @@ body {
    11 11 
     label {
    12 12 
       display: flex;
    13 13 
       align-items: center;
    14 
    -  padding: 6px 0;
    14 
    +  padding: var(--space-small) 0;
    15 15 
     }
    16 16
    17 17 
     input[type="text"] {
    ... ... @@ -40,7 +40,7 @@ dt {
    40 40 
     }
    41 41
    42 42 
     dd {
    43 
    -  margin: 8px 0 0 0;
    43 
    +  margin: var(--space-small) 0 0 0;
    44 44 
       padding: 0;
    45 45 
       max-width: 600px;
    46 46 
       box-sizing: border-box;
    ... ... @@ -50,7 +50,7 @@ hr {
    50 50 
       width: 40px;
    51 51 
       margin: 0;
    52 52 
       border: none;
    53 
    -  border-top: 1px solid var(--border-color);
    53 
    +  border-block-start: var(--border-width) solid var(--border-color);
    54 54 
     }
    55 55
    56 56 
     .hidden {
    ... ... @@ -85,11 +85,11 @@ hr {
    85 85 
     }
    86 86
    87 87 
     #warning-description {
    88 
    -  margin: 30px 0 16px 0;
    88 
    +  margin: var(--space-xxlarge) 0 var(--space-large) 0;
    89 89 
     }
    90 90
    91 91 
     #warning-buttonbar {
    92 
    -  margin-top: 30px;
    92 
    +  margin-top: var(--space-xxlarge);
    93 93 
       text-align: right;
    94 94 
     }
    95 95
    ... ... @@ -113,7 +113,7 @@ hr {
    113 113 
     section {
    114 114 
       display: none;
    115 115 
       flex: 1 0 auto;
    116 
    -  padding: 40px;
    116 
    +  padding: var(--space-xxlarge);
    117 117 
     }
    118 118
    119 119 
     .title {
    ... ... @@ -121,25 +121,25 @@ section {
    121 121 
       align-items: center;
    122 122 
       width: var(--content-width);
    123 123 
       max-width: 100%;
    124 
    -  padding-bottom: 16px;
    125 
    -  border-bottom: 1px solid var(--border-color);
    124 
    +  padding-bottom: var(--space-large);
    125 
    +  border-bottom: var(--border-width) solid var(--border-color);
    126 126 
     }
    127 127
    128 128 
     .title h1 {
    129 129 
       margin: 0;
    130 130 
       padding: 0;
    131 
    -  padding-inline-start: 35px;
    131 
    +  padding-inline-start: var(--space-xxlarge);
    132 132 
       font-size: var(--font-size-xlarge);
    133 133 
       font-weight: var(--font-weight-bold);
    134 134 
       background-image: url("chrome://browser/content/rulesets/securedrop.svg");
    135 135 
       background-position: 0 center;
    136 
    -  background-size: 22px;
    137 
    -  min-height: 22px;
    136 
    +  background-size: var(--icon-size-large);
    137 
    +  min-height: var(--icon-size-large);
    138 138 
       background-repeat: no-repeat;
    139 139 
     }
    140 140
    141 141 
     #main-content h1:dir(rtl) {
    142 
    -  background-position: right 0 top 4px;
    142 
    +  background-position: right 0 center;
    143 143 
     }
    144 144
    145 145 
     /* Ruleset list */
    ... ... @@ -150,15 +150,15 @@ aside {
    150 150 
       flex: 0 0 var(--sidebar-width);
    151 151 
       box-sizing: border-box;
    152 152
    153 
    -  border-inline-end: 1px solid var(--border-color);
    153 
    +  border-inline-end: var(--border-width) solid var(--border-color);
    154 154 
       background-color: var(--background-color-box);
    155 155 
     }
    156 156
    157 157 
     #ruleset-heading {
    158 
    -  padding: 16px;
    158 
    +  padding: var(--space-large);
    159 159 
       text-align: center;
    160 160 
       font-weight: var(--font-weight-bold);
    161 
    -  border-bottom: 1px solid var(--border-color);
    161 
    +  border-bottom: var(--border-width) solid var(--border-color);
    162 162 
     }
    163 163
    164 164 
     #ruleset-list-container {
    ... ... @@ -166,7 +166,7 @@ aside {
    166 166 
     }
    167 167
    168 168 
     #ruleset-list-empty {
    169 
    -  padding: 16px;
    169 
    +  padding: var(--space-large);
    170 170 
       text-align: center;
    171 171 
     }
    172 172
    ... ... @@ -183,10 +183,10 @@ aside {
    183 183 
       display: flex;
    184 184 
       align-items: center;
    185 185 
       margin: 0;
    186 
    -  padding: 10px 18px;
    186 
    +  padding: var(--space-medium) var(--space-large);
    187 187 
       list-style: none;
    188 188 
       border-inline-start: 4px solid transparent;
    189 
    -  border-bottom: 1px solid var(--border-color);
    189 
    +  border-block-end: var(--border-width) solid var(--border-color);
    190 190 
     }
    191 191
    192 192 
     #ruleset-list li:last-child {
    ... ... @@ -194,11 +194,11 @@ aside {
    194 194 
     }
    195 195
    196 196 
     #ruleset-list .icon {
    197 
    -  width: 16px;
    198 
    -  height: 16px;
    199 
    -  margin-inline-end: 12px;
    197 
    +  width: var(--icon-size);
    198 
    +  height: var(--icon-size);
    199 
    +  margin-inline-end: var(--space-medium);
    200 200 
       background-image: url("chrome://browser/content/rulesets/securedrop.svg");
    201 
    -  background-size: 16px;
    201 
    +  background-size: var(--icon-size);
    202 202 
     }
    203 203
    204 204 
     #ruleset-list .icon.has-favicon {
    ... ... @@ -215,7 +215,6 @@ aside {
    215 215 
     }
    216 216
    217 217 
     #ruleset-list .selected {
    218 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
    219 218 
       border-inline-start-color: var(--color-accent-primary);
    220 219 
     }
    221 220
    ... ... @@ -243,7 +242,7 @@ aside {
    243 242 
     }
    244 243
    245 244 
     #ruleset-jwk-value {
    246 
    -  padding: 8px;
    245 
    +  padding: var(--space-small);
    247 246 
       border-radius: var(--border-radius-xsmall);
    248 247 
       background-color: var(--background-color-box);
    249 248 
       font-size: var(--font-size-small);
    ... ... @@ -254,10 +253,10 @@ aside {
    254 253
    255 254 
     #ruleset-edit {
    256 255 
       margin-inline-start: auto;
    257 
    -  padding-inline-start: 32px;
    256 
    +  padding-inline-start: var(--space-xxlarge);
    258 257 
       background-image: url("chrome://global/skin/icons/edit.svg");
    259 258 
       background-repeat: no-repeat;
    260 
    -  background-position: 8px;
    259 
    +  background-position: var(--space-small);
    261 260 
       -moz-context-properties: fill;
    262 261 
       fill: currentColor;
    263 262 
       min-width: auto;
    ... ... @@ -273,7 +272,7 @@ aside {
    273 272 
     }
    274 273
    275 274 
     #ruleset-updated {
    276 
    -  margin-top: 24px;
    275 
    +  margin-top: var(--space-xlarge);
    277 276 
       color: var(--text-color-deemphasized);
    278 277 
       font-size: var(--font-size-small);
    279 278 
     }

  • browser/components/securitylevel/content/securityLevelPanel.css
    1 1 
     /* Security Level CSS */
    2 2
    3 3 
     #securityLevel-background {
    4 
    -  min-height: 10em;
    5 
    -  padding-inline: 16px;
    6 
    -  column-gap: 0.5em;
    4 
    +  min-height: 150px;
    5 
    +  padding-inline: var(--space-large);
    6 
    +  column-gap: var(--space-small);
    7 7 
       display: grid;
    8 8 
       grid-template:
    9 
    -    "top-pad icon" 16px
    9 
    +    "top-pad icon" var(--space-large)
    10 10 
         "title icon" auto
    11 11 
         "body icon" auto
    12 12 
         "learn-more icon" auto
    13 
    -    "bottom-pad icon" minmax(8px, 1fr)
    13 
    +    "bottom-pad icon" minmax(var(--space-small), 1fr)
    14 14 
         / auto auto;
    15 15 
     }
    16 16
    17 17 
     #securityLevel-background-image {
    18 18 
       grid-area: icon;
    19 
    -  --security-level-icon-size: 9em;
    19 
    +  --security-level-icon-size: 130px;
    20 20 
       width: var(--security-level-icon-size);
    21 21 
       height: var(--security-level-icon-size);
    22 
    -  margin-block: 0.4em;
    22 
    +  margin-block: var(--space-small);
    23 23 
       /* Middle of shield aligns with the panel padding: */
    24 24 
       margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
    25 25 
       align-self: start;
    ... ... @@ -50,12 +50,12 @@
    50 50 
     }
    51 51
    52 52 
     #securityLevel-background p {
    53 
    -  margin-block: 0 16px;
    53 
    +  margin-block: 0 var(--space-large);
    54 54 
     }
    55 55
    56 56 
     /* Override margin in panelUI-shared.css */
    57 57 
     #securityLevel-panel toolbarseparator#securityLevel-separator {
    58 
    -  margin-inline: 16px;
    58 
    +  margin-inline: var(--space-large);
    59 59 
     }
    60 60
    61 61 
     #securityLevel-level {
    ... ... @@ -65,7 +65,7 @@
    65 65 
     }
    66 66
    67 67 
     #securityLevel-summary {
    68 
    -  max-width: 20em;
    68 
    +  max-width: 300px;
    69 69 
       grid-area: body;
    70 70 
     }
    71 71

  • browser/components/securitylevel/content/securityLevelPreferences.css
    ... ... @@ -10,8 +10,8 @@
    10 10 
     .security-level-icon {
    11 11 
       grid-area: icon;
    12 12 
       align-self: start;
    13 
    -  width: 24px;
    14 
    -  height: 24px;
    13 
    +  width: var(--icon-size-large);
    14 
    +  height: var(--icon-size-large);
    15 15 
       -moz-context-properties: fill;
    16 16 
       fill: var(--icon-color);
    17 17 
       margin-block-start: var(--space-xsmall);
    ... ... @@ -97,7 +97,7 @@
    97 97 
     #security-level-current {
    98 98 
       margin-block-start: var(--space-large);
    99 99 
       background: var(--background-color-box);
    100 
    -  border: 1px solid var(--border-color);
    100 
    +  border: var(--border-width) solid var(--border-color);
    101 101 
       border-radius: var(--border-radius-small);
    102 102 
       padding: var(--space-medium);
    103 103 
     }

  • browser/components/torcircuit/content/torCircuitPanel.css
    1 1 
     /* Toolbar button */
    2 2
    3 3 
     #tor-circuit-button-icon {
    4 
    -  width: 16px;
    5 
    -  height: 16px;
    4 
    +  width: var(--icon-size);
    5 
    +  height: var(--icon-size);
    6 6 
       /* We want to set flat fill if we have prefers-contrast. Otherwise, we want a
    7 7 
        * gradient fill depending on the dark mode.
    8 8 
        * context-fill is insufficient for a linear gradient, so we instead use the
    ... ... @@ -69,10 +69,10 @@
    69 69 
     #tor-circuit-alias img {
    70 70 
       -moz-context-properties: fill;
    71 71 
       fill: currentColor;
    72 
    -  width: 14px;
    73 
    -  height: 14px;
    72 
    +  width: var(--icon-size);
    73 
    +  height: var(--icon-size);
    74 74 
       flex: 0 0 auto;
    75 
    -  margin-inline-end: 0.25em;
    75 
    +  margin-inline-end: var(--space-xsmall);
    76 76 
     }
    77 77
    78 78 
     #tor-circuit-alias-label {
    ... ... @@ -107,8 +107,8 @@
    107 107 
        * list item so that the different parts visually connect.
    108 108 
        * Using list-style-image does not give us enough control over sizing the
    109 109 
        * image. So instead we use a background-image. */
    110 
    -  padding-inline-start: 1.5em;
    111 
    -  padding-block: 6px;
    110 
    +  padding-inline-start: var(--space-xlarge);
    111 
    +  padding-block: var(--space-small);
    112 112 
       background-image: url("chrome://browser/content/tor-circuit-node-middle.svg");
    113 113 
       -moz-context-properties: fill;
    114 114 
       /* Light Gray 50 */
    ... ... @@ -118,7 +118,7 @@
    118 118 
       /* Bump the size by small amount to prevent rendering gaps.
    119 119 
        * We're assuming here that each line will have the same height so that each
    120 120 
        * image has the same size. */
    121 
    -  background-size: auto calc(100% + 0.5px);
    121 
    +  background-size: auto calc(100% + 2px);
    122 122 
       background-repeat: no-repeat;
    123 123 
     }
    124 124
    ... ... @@ -155,11 +155,11 @@
    155 155 
     }
    156 156
    157 157 
     .tor-circuit-region-flag {
    158 
    -  margin-inline-end: 0.5em;
    159 
    -  height: 16px;
    158 
    +  margin-inline-end: var(--space-small);
    159 
    +  height: var(--icon-size);
    160 160 
       align-self: center;
    161 161 
       /* Don't occupy any vertical height. */
    162 
    -  margin-block: -8px;
    162 
    +  margin-block: calc(-0.5 * var(--icon-size));
    163 163 
     }
    164 164
    165 165 
     .tor-circuit-region-flag.no-region-flag-src {
    ... ... @@ -169,10 +169,9 @@
    169 169 
     .tor-circuit-addresses {
    170 170 
       /* FIXME: Use a standard font size. Likely will be replaced with the conflux
    171 171 
        * design. */
    172 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
    173 172 
       font-size: 0.9em;
    174 173 
       font-family: monospace;
    175 
    -  margin-inline-start: 0.75em;
    174 
    +  margin-inline-start: var(--space-medium);
    176 175 
     }
    177 176
    178 177 
     .tor-circuit-ip-address {

  • browser/components/torpreferences/content/torPreferences.css
    1 
    -@import url("chrome://global/skin/tor-colors.css");
    1 
    +@import url("chrome://global/skin/tor-common.css");
    2 2
    3 3 
     #category-connection > .category-icon {
    4 4 
       list-style-image: url("chrome://global/content/torconnect/tor-connect.svg");
    ... ... @@ -16,29 +16,32 @@ button.spoof-button-disabled {
    16 16 
     }
    17 17
    18 18 
     .tor-loading-icon {
    19 
    -  width: 16px;
    20 
    -  height: 16px;
    19 
    +  width: var(--icon-size);
    20 
    +  height: var(--icon-size);
    21 21 
       -moz-context-properties: fill;
    22 
    -  /* Use --tor-text-color. This will have good contrast for this small icon
    23 
    -   * against the background. And it will match the surrounding text for high
    24 
    -   * contrast and forced colour themes. */
    25 
    -  fill: var(--tor-text-color);
    22 
    +  /* Use --text-color-tor. This will have good contrast for this small icon
    23 
    +   * against the background. */
    24 
    +  fill: var(--text-color-tor);
    26 25 
       content: url("chrome://global/skin/icons/loading.svg");
    26 
    +
    27 
    +  @media (forced-colors) or (prefers-contrast) {
    28 
    +    fill: currentColor;
    29 
    +  }
    27 30 
     }
    28 31
    29 32 
     .tor-toggle {
    30 
    -  margin-block: 16px;
    33 
    +  margin-block: var(--space-large);
    31 34 
       width: max-content;
    32 35 
     }
    33 36
    34 37 
     /* Status */
    35 38
    36 39 
     #network-status-internet-area {
    37 
    -  margin-block: 16px;
    40 
    +  margin-block: var(--space-large);
    38 41 
     }
    39 42
    40 43 
     #network-status-tor-area {
    41 
    -  margin-block: 0 32px;
    44 
    +  margin-block: 0 var(--space-xxlarge);
    42 45 
     }
    43 46
    44 47 
     .network-status-area {
    ... ... @@ -52,9 +55,9 @@ button.spoof-button-disabled {
    52 55 
     }
    53 56
    54 57 
     .network-status-icon {
    55 
    -  width: 18px;
    56 
    -  height: 18px;
    57 
    -  margin-inline-end: 8px;
    58 
    +  width: var(--icon-size);
    59 
    +  height: var(--icon-size);
    60 
    +  margin-inline-end: var(--space-small);
    58 61 
       -moz-context-properties: fill, stroke;
    59 62 
       fill: var(--icon-color);
    60 63 
       stroke: var(--icon-color);
    ... ... @@ -83,11 +86,11 @@ button.spoof-button-disabled {
    83 86
    84 87 
     .network-status-label {
    85 88 
       font-weight: var(--font-weight-bold);
    86 
    -  margin-inline-end: 0.75em;
    89 
    +  margin-inline-end: var(--space-medium);
    87 90 
     }
    88 91
    89 92 
     .network-status-result {
    90 
    -  margin-inline-end: 0.75em;
    93 
    +  margin-inline-end: var(--space-medium);
    91 94 
     }
    92 95
    93 96 
     #network-status-tor-area.status-connected #network-status-tor-connect-button {
    ... ... @@ -141,7 +144,7 @@ button.spoof-button-disabled {
    141 144 
       display: flex;
    142 145 
       min-width: max-content;
    143 146 
       align-items: center;
    144 
    -  gap: 0.5em;
    147 
    +  gap: var(--space-small);
    145 148 
       font-size: var(--font-size-small);
    146 149 
     }
    147 150
    ... ... @@ -154,10 +157,12 @@ button.spoof-button-disabled {
    154 157 
        * using it for text colors, so we only enable these rules when not using a
    155 158 
        * high contrast theme or forced colors. */
    156 159 
       .bridge-status-badge.bridge-status-connected {
    157 
    -    color: var(--tor-text-color);
    160 
    +    color: var(--text-color-tor);
    158 161 
       }
    159 162
    160 163 
       .bridge-status-badge.bridge-status-current-built-in {
    164 
    +    /* Using the accent colour should be avoided. Will likely be replaced in
    165 
    +     * tor-browser#44421. */
    161 166 
         color: var(--color-accent-primary);
    162 167 
       }
    163 168 
     }
    ... ... @@ -167,8 +172,8 @@ button.spoof-button-disabled {
    167 172 
     }
    168 173
    169 174 
     .bridge-status-icon {
    170 
    -  width: 16px;
    171 
    -  height: 16px;
    175 
    +  width: var(--icon-size);
    176 
    +  height: var(--icon-size);
    172 177 
       background-repeat: no-repeat;
    173 178 
       background-position: center center;
    174 179 
       -moz-context-properties: fill;
    ... ... @@ -198,7 +203,7 @@ button.spoof-button-disabled {
    198 203 
     #tor-bridges-none,
    199 204 
     #tor-bridges-current {
    200 205 
       margin-inline: 0;
    201 
    -  margin-block: 32px;
    206 
    +  margin-block: var(--space-xxlarge);
    202 207 
     }
    203 208
    204 209 
     #tor-bridges-none:not([hidden]) {
    ... ... @@ -206,16 +211,16 @@ button.spoof-button-disabled {
    206 211 
       justify-items: center;
    207 212 
       text-align: center;
    208 213 
       padding-block: 64px;
    209 
    -  padding-inline: 32px;
    210 
    -  gap: 16px;
    214 
    +  padding-inline: var(--space-xxlarge);
    215 
    +  gap: var(--space-large);
    211 216 
       border-radius: var(--border-radius-small);
    212 217 
       color: var(--text-color-deemphasized);
    213 218 
       border: 2px dashed var(--border-color-deemphasized);
    214 219 
     }
    215 220
    216 221 
     #tor-bridges-none-icon {
    217 
    -  width: 20px;
    218 
    -  height: 20px;
    222 
    +  width: var(--icon-size-medium);
    223 
    +  height: var(--icon-size-medium);
    219 224 
       content: url("chrome://browser/content/torpreferences/bridge.svg");
    220 225 
       -moz-context-properties: fill;
    221 226 
       fill: currentColor;
    ... ... @@ -223,10 +228,10 @@ button.spoof-button-disabled {
    223 228
    224 229 
     .tor-bridges-box,
    225 230 
     .tor-bridges-details-box {
    226 
    -  padding: 16px;
    231 
    +  padding: var(--space-large);
    227 232 
       border-radius: var(--border-radius-small);
    228 233 
       background: var(--background-color-box-info);
    229 
    -  border: 1px solid var(--border-color);
    234 
    +  border: var(--border-width) solid var(--border-color);
    230 235 
     }
    231 236
    232 237 
     @media not forced-colors {
    ... ... @@ -240,9 +245,9 @@ button.spoof-button-disabled {
    240 245 
       min-width: max-content;
    241 246 
       grid-template: "heading source button" min-content / max-content 1fr max-content;
    242 247 
       align-items: center;
    243 
    -  border-block-end: 1px solid var(--border-color);
    244 
    -  padding-block-end: 16px;
    245 
    -  margin-block-end: 16px;
    248 
    +  border-block-end: var(--border-width) solid var(--border-color);
    249 
    +  padding-block-end: var(--space-large);
    250 
    +  margin-block-end: var(--space-large);
    246 251 
       white-space: nowrap;
    247 252 
     }
    248 253
    ... ... @@ -251,8 +256,8 @@ button.spoof-button-disabled {
    251 256 
     }
    252 257
    253 258 
     .tor-bridges-source-label {
    254 
    -  margin-inline-start: 2em;
    255 
    -  margin-inline-end: 8px;
    259 
    +  margin-inline-start: var(--space-xxlarge);
    260 
    +  margin-inline-end: var(--space-small);
    256 261 
       grid-area: source;
    257 262 
       justify-self: end;
    258 263 
     }
    ... ... @@ -264,7 +269,7 @@ button.spoof-button-disabled {
    264 269 
     #tor-bridges-lox-label:not([hidden]) {
    265 270 
       display: flex;
    266 271 
       align-items: center;
    267 
    -  gap: 6px;
    272 
    +  gap: var(--space-small);
    268 273 
     }
    269 274
    270 275 
     #tor-bridges-lox-label > * {
    ... ... @@ -273,20 +278,20 @@ button.spoof-button-disabled {
    273 278
    274 279 
     #tor-bridges-lox-label-icon {
    275 280 
       content: url("chrome://browser/content/torpreferences/lox-bridge-pass.svg");
    276 
    -  width: 16px;
    277 
    -  height: 16px;
    281 
    +  width: var(--icon-size);
    282 
    +  height: var(--icon-size);
    278 283 
       -moz-context-properties: fill;
    279 284 
       fill: var(--icon-color);
    280 285 
     }
    281 286
    282 287 
     .tor-bridges-options-button {
    283 
    -  padding: 3px;
    288 
    +  padding: var(--space-xsmall);
    284 289 
       margin: 0;
    285 290 
       min-height: auto;
    286 291 
       min-width: auto;
    287 292 
       box-sizing: content-box;
    288 
    -  width: 16px;
    289 
    -  height: 16px;
    293 
    +  width: var(--icon-size);
    294 
    +  height: var(--icon-size);
    290 295 
       background-image: url("chrome://global/skin/icons/more.svg");
    291 296 
       background-repeat: no-repeat;
    292 297 
       background-position: center center;
    ... ... @@ -302,8 +307,8 @@ button.spoof-button-disabled {
    302 307 
         "type status" min-content
    303 308 
         "description description" auto
    304 309 
         / max-content 1fr;
    305 
    -  gap: 12px 1.5em;
    306 
    -  margin-block-end: 16px;
    310 
    +  gap: var(--space-medium) var(--space-xlarge);
    311 
    +  margin-block-end: var(--space-large);
    307 312 
     }
    308 313
    309 314 
     #tor-bridges-built-in-type-name {
    ... ... @@ -323,8 +328,8 @@ button.spoof-button-disabled {
    323 328 
     .tor-bridges-grid:not([hidden]) {
    324 329 
       display: grid;
    325 330 
       grid-template-columns: max-content repeat(4, max-content) 1fr;
    326 
    -  --tor-bridges-grid-column-gap: 8px;
    327 
    -  --tor-bridges-grid-column-short-gap: 4px;
    331 
    +  --tor-bridges-grid-column-gap: var(--space-small);
    332 
    +  --tor-bridges-grid-column-short-gap: var(--space-xsmall);
    328 333 
       /* For #tor-bridges-grid-display we want each grid item to have the same
    329 334 
        * height so that their focus outlines match. */
    330 335 
       align-items: stretch;
    ... ... @@ -358,7 +363,7 @@ button.spoof-button-disabled {
    358 363 
       grid-column: 1 / -1;
    359 364 
       grid-template-columns: subgrid;
    360 365 
       /* Add 16px gap between rows, plus 8px at the start and end of the grid. */
    361 
    -  padding-block: 8px;
    366 
    +  padding-block: var(--space-small);
    362 367 
     }
    363 368
    364 369 
     #tor-bridges-grid-display .tor-bridges-grid-cell:focus-visible {
    ... ... @@ -391,12 +396,12 @@ button.spoof-button-disabled {
    391 396 
     .tor-bridges-emoji-icon {
    392 397 
       display: block;
    393 398 
       box-sizing: content-box;
    394 
    -  width: 16px;
    395 
    -  height: 16px;
    399 
    +  width: var(--icon-size);
    400 
    +  height: var(--icon-size);
    396 401 
       /* color-light-gray-10, color-dark-gray-60 */
    397 402 
       background: light-dark(#f9f9fb, #2b2a33);
    398 403 
       border-radius: var(--border-radius-small);
    399 
    -  padding: 8px;
    404 
    +  padding: var(--space-small);
    400 405 
     }
    401 406
    402 407 
     .tor-bridges-grid-end-block {
    ... ... @@ -414,7 +419,7 @@ button.spoof-button-disabled {
    414 419
    415 420 
     .tor-bridges-address-cell {
    416 421 
       /* base size */
    417 
    -  width: 10em;
    422 
    +  width: 150px;
    418 423 
       flex: 1 0 auto;
    419 424 
     }
    420 425
    ... ... @@ -448,7 +453,7 @@ button.spoof-button-disabled {
    448 453 
     }
    449 454
    450 455 
     .tor-bridges-details-box {
    451 
    -  margin-block-start: 24px;
    456 
    +  margin-block-start: var(--space-xlarge);
    452 457 
     }
    453 458
    454 459 
     #tor-bridges-share:not([hidden]) {
    ... ... @@ -460,13 +465,13 @@ button.spoof-button-disabled {
    460 465 
         "description . ." 1fr
    461 466 
         "description copy qr" min-content
    462 467 
         / 1fr max-content max-content;
    463 
    -  gap: 0 8px;
    468 
    +  gap: 0 var(--space-small);
    464 469 
       align-items: center;
    465 470 
     }
    466 471
    467 472 
     .tor-bridges-share-heading {
    468 473 
       grid-area: heading;
    469 
    -  margin-block-end: 4px;
    474 
    +  margin-block-end: var(--space-xsmall);
    470 475 
     }
    471 476
    472 477 
     #tor-bridges-share-description {
    ... ... @@ -483,13 +488,13 @@ button.spoof-button-disabled {
    483 488
    484 489 
     #tor-bridges-qr-addresses-button {
    485 490 
       grid-area: qr;
    486 
    -  padding: 5px;
    491 
    +  padding: var(--space-xsmall);
    487 492 
       margin: 0;
    488 493 
       min-height: auto;
    489 494 
       min-width: auto;
    490 495 
       box-sizing: content-box;
    491 
    -  width: 24px;
    492 
    -  height: 24px;
    496 
    +  width: var(--icon-size-large);
    497 
    +  height: var(--icon-size-large);
    493 498 
       background-image: url("chrome://browser/content/torpreferences/bridge-qr.svg");
    494 499 
       background-repeat: no-repeat;
    495 500 
       background-position: center center;
    ... ... @@ -500,7 +505,7 @@ button.spoof-button-disabled {
    500 505 
     }
    501 506
    502 507 
     #tor-bridges-lox-status {
    503 
    -  margin-block-start: 8px;
    508 
    +  margin-block-start: var(--space-small);
    504 509 
     }
    505 510
    506 511 
     .tor-bridges-lox-box:not([hidden]) {
    ... ... @@ -511,7 +516,7 @@ button.spoof-button-disabled {
    511 516 
         ". invites button" min-content
    512 517 
         / min-content 1fr max-content;
    513 518 
       align-items: start;
    514 
    -  gap: 8px;
    519 
    +  gap: var(--space-small);
    515 520 
     }
    516 521
    517 522 
     .tor-bridges-lox-image-outer {
    ... ... @@ -535,9 +540,8 @@ button.spoof-button-disabled {
    535 540
    536 541 
     .tor-bridges-lox-image-inner {
    537 542 
       grid-area: image;
    538 
    -  /* Extra 4px space for gaussian blur. */
    539 
    -  width: 16px;
    540 
    -  height: 16px;
    543 
    +  width: var(--icon-size);
    544 
    +  height: var(--icon-size);
    541 545 
       align-self: center;
    542 546 
       justify-self: center;
    543 547 
       -moz-context-properties: fill;
    ... ... @@ -570,7 +574,7 @@ button.spoof-button-disabled {
    570 574 
       /* Align the icons, as if list markers. */
    571 575 
       grid-template-columns: max-content 1fr;
    572 576 
       align-items: start;
    573 
    -  gap: 8px 0;
    577 
    +  gap: var(--space-small) 0;
    574 578 
     }
    575 579
    576 580 
     .tor-bridges-lox-list-item:not([hidden]) {
    ... ... @@ -580,11 +584,11 @@ button.spoof-button-disabled {
    580 584 
     .tor-bridges-lox-list-item:not([hidden])::before {
    581 585 
       /* We use ::before rather than list-style-image to have more control. */
    582 586 
       box-sizing: content-box;
    583 
    -  width: 18px;
    584 
    -  height: 18px;
    585 
    -  margin-inline: 4px 6px;
    587 
    +  width: var(--icon-size);
    588 
    +  height: var(--icon-size);
    589 
    +  margin-inline: var(--space-xsmall) var(--space-small);
    586 590 
       /* We want the icons to be center-aligned relative to the *first* line. */
    587 
    -  margin-block-start: calc((1lh - 18px) / 2);
    591 
    +  margin-block-start: calc((1lh - var(--icon-size)) / 2);
    588 592 
       /* We use display: grid rather than display: block. Otherwise the content will
    589 593 
        * be offset vertically by the line-height. */
    590 594 
       display: grid;
    ... ... @@ -622,23 +626,22 @@ button.spoof-button-disabled {
    622 626 
     }
    623 627
    624 628 
     .tor-bridges-provider-heading {
    625 
    -  margin-block: 48px 8px;
    629 
    +  margin-block: var(--space-xxlarge) var(--space-small);
    626 630 
     }
    627 631
    628 632 
     #tor-bridges-provider-area {
    629 633 
       display: grid;
    630 634 
       grid-template-columns: 1fr 1fr;
    631 
    -  gap: 16px;
    635 
    +  gap: var(--space-large);
    632 636 
       align-items: start;
    633 
    -  margin-block-start: 24px;
    637 
    +  margin-block-start: var(--space-xlarge);
    634 638 
     }
    635 639
    636 640 
     #tor-bridges-provider-list {
    637 641 
       display: grid;
    638 642 
       grid-template-columns: max-content max-content;
    639 
    -  /* 24px gap between items. */
    640 
    -  gap: 24px 12px;
    641 
    -  margin-block: 16px;
    643 
    +  gap: var(--space-xlarge) var(--space-medium);
    644 
    +  margin-block: var(--space-large);
    642 645 
       padding: 0;
    643 646 
     }
    644 647
    ... ... @@ -648,13 +651,12 @@ button.spoof-button-disabled {
    648 651 
       grid-template-columns: subgrid;
    649 652 
       align-items: center;
    650 653 
       justify-items: start;
    651 
    -  /* 8px gap between the name and instruction. */
    652 
    -  gap: 8px 12px;
    654 
    +  gap: var(--space-small) var(--space-medium);
    653 655 
     }
    654 656
    655 657 
     .tor-bridges-provider-icon {
    656 
    -  width: 16px;
    657 
    -  height: 16px;
    658 
    +  width: var(--icon-size);
    659 
    +  height: var(--icon-size);
    658 660 
       -moz-context-properties: fill;
    659 661 
       fill: var(--icon-color);
    660 662 
     }
    ... ... @@ -695,7 +697,7 @@ button.spoof-button-disabled {
    695 697 
     }
    696 698
    697 699 
     #tor-bridges-request-description {
    698 
    -  margin-block: 12px 16px;
    700 
    +  margin-block: var(--space-medium) var(--space-large);
    699 701 
     }
    700 702
    701 703 
     #tor-bridges-open-request-dialog-button {
    ... ... @@ -714,7 +716,7 @@ button.spoof-button-disabled {
    714 716 
     /* Request bridges */
    715 717
    716 718 
     image#torPreferences-requestBridge-captchaImage {
    717 
    -  margin: 16px 0 8px 0;
    719 
    +  margin: var(--space-large) 0 var(--space-small) 0;
    718 720 
       min-height: 140px;
    719 721 
     }
    720 722
    ... ... @@ -732,15 +734,15 @@ button#torPreferences-requestBridge-refreshCaptchaButton {
    732 734 
     }
    733 735
    734 736 
     dialog#torPreferences-requestBridge-dialog > hbox {
    735 
    -  margin-bottom: 1em;
    737 
    +  margin-bottom: var(--space-large);
    736 738 
     }
    737 739
    738 740 
     /*
    739 741 
      Various elements that really should be lining up don't because they have inconsistent margins
    740 742 
     */
    741 743 
     .torMarginFix {
    742 
    -  margin-left: 4px;
    743 
    -  margin-right: 4px;
    744 
    +  margin-left: var(--space-xsmall);
    745 
    +  margin-right: var(--space-xsmall);
    744 746 
     }
    745 747
    746 748 
     /* Show bridge QR dialog */
    ... ... @@ -756,8 +758,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    756 758 
       background: var(--qr-zero);
    757 759 
       /* Padding is needed in case the dark theme is used so the bits don't blend
    758 760 
       with whatever the default background color is. */
    759 
    -  padding: 10px;
    760 
    -  margin-block: 4px 8px;
    761 
    +  padding: var(--space-medium);
    762 
    +  margin-block: var(--space-xsmall) var(--space-small);
    761 763 
       border-radius: var(--border-radius-small);
    762 764 
       display: grid;
    763 765 
       align-items: center;
    ... ... @@ -777,7 +779,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    777 779 
       /* Share the same grid area as #bridgeQr-target. */
    778 780 
       grid-area: qr;
    779 781 
       content: url("chrome://browser/content/torpreferences/bridge.svg");
    780 
    -  padding: 10px;
    782 
    +  padding: var(--space-small);
    781 783 
       border-radius: var(--border-radius-medium);
    782 784 
       box-sizing: content-box;
    783 785 
       width: 52px;
    ... ... @@ -796,8 +798,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    796 798 
         ". remaining button" min-content
    797 799 
         "message message message" auto
    798 800 
         / 1fr max-content max-content;
    799 
    -  gap: 8px;
    800 
    -  margin-block: 16px 8px;
    801 
    +  gap: var(--space-small);
    802 
    +  margin-block: var(--space-large) var(--space-small);
    801 803 
       align-items: center;
    802 804 
     }
    803 805
    ... ... @@ -832,7 +834,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    832 834 
     #lox-invite-dialog-connecting {
    833 835 
       color: var(--text-color-deemphasized);
    834 836 
       /* Gap with #user-provide-bridge-loading-icon. */
    835 
    -  margin-inline-start: 0.5em;
    837 
    +  margin-inline-start: var(--space-small);
    836 838 
     }
    837 839
    838 840 
     #lox-invite-dialog-generate-area:not(.show-connecting) #lox-invite-dialog-connecting {
    ... ... @@ -855,8 +857,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    855 857 
     #lox-invite-dialog-list {
    856 858 
       flex: 1 1 auto;
    857 859 
       /* basis height */
    858 
    -  height: 10em;
    859 
    -  margin-block: 8px;
    860 
    +  height: 160px;
    861 
    +  margin-block: var(--space-small);
    860 862 
     }
    861 863
    862 864 
     .lox-invite-dialog-list-item {
    ... ... @@ -864,21 +866,13 @@ dialog#torPreferences-requestBridge-dialog > hbox {
    864 866 
       overflow-x: hidden;
    865 867 
       /* FIXME: ellipsis does not show. */
    866 868 
       text-overflow: ellipsis;
    867 
    -  padding-block: 6px;
    868 
    -  padding-inline: 8px;
    869 
    +  padding-block: var(--space-small);
    870 
    +  padding-inline: var(--space-small);
    869 871 
     }
    870 872
    871 873 
     /* Builtin bridge dialog */
    872 
    -#torPreferences-builtinBridge-header {
    873 
    -  margin: 8px 0 10px 0;
    874 
    -}
    875 
    -
    876 
    -#torPreferences-builtinBridge-description {
    877 
    -  margin-bottom: 18px;
    878 
    -}
    879 
    -
    880 874 
     #torPreferences-builtinBridge-typeSelection {
    881 
    -  margin-bottom: 16px;
    875 
    +  margin-block-end: var(--space-large);
    882 876 
     }
    883 877
    884 878 
     #torPreferences-builtinBridge-typeSelection radio label {
    ... ... @@ -927,7 +921,7 @@ groupbox#torPreferences-bridges-group textarea {
    927 921 
     }
    928 922
    929 923 
     #user-provide-bridge-textarea-label {
    930 
    -  margin-block: 16px 6px;
    924 
    +  margin-block: var(--space-large) var(--space-small);
    931 925 
       flex: 0 0 auto;
    932 926 
       align-self: start;
    933 927 
     }
    ... ... @@ -942,7 +936,7 @@ groupbox#torPreferences-bridges-group textarea {
    942 936
    943 937 
     #user-provide-bridge-message-area {
    944 938 
       flex: 0 0 auto;
    945 
    -  margin-block: 8px 12px;
    939 
    +  margin-block: var(--space-small) var(--space-medium);
    946 940 
       align-self: end;
    947 941 
       display: flex;
    948 942 
       align-items: center;
    ... ... @@ -969,7 +963,7 @@ groupbox#torPreferences-bridges-group textarea {
    969 963 
     #user-provide-bridge-connecting {
    970 964 
       color: var(--text-color-deemphasized);
    971 965 
       /* Gap with #user-provide-bridge-loading-icon. */
    972 
    -  margin-inline-start: 0.5em;
    966 
    +  margin-inline-start: var(--space-small);
    973 967 
     }
    974 968
    975 969 
     #user-provide-bridge-dialog:not(.show-connecting) #user-provide-bridge-connecting {
    ... ... @@ -999,7 +993,7 @@ groupbox#torPreferences-bridges-group textarea {
    999 993 
     #user-provide-bridge-grid-display {
    1000 994 
       flex: 0 1 auto;
    1001 995 
       overflow: auto;
    1002 
    -  margin-block: 8px;
    996 
    +  margin-block: var(--space-small);
    1003 997 
     }
    1004 998
    1005 999 
     #user-provide-bridge-grid-display:focus-visible {
    ... ... @@ -1014,7 +1008,7 @@ groupbox#torPreferences-bridges-group textarea {
    1014 1008 
     }
    1015 1009
    1016 1010 
     #torPreferences-connection-header {
    1017 
    -  margin: 4px 0 14px 0;
    1011 
    +  margin: var(--space-xsmall) 0 var(--space-large) 0;
    1018 1012 
     }
    1019 1013
    1020 1014 
     #torPreferences-connection-grid {
    ... ... @@ -1041,13 +1035,13 @@ groupbox#torPreferences-bridges-group textarea {
    1041 1035 
     #tor-log-table {
    1042 1036 
       flex: 1 0 auto;
    1043 1037 
       overflow: auto;
    1044 
    -  min-height: 20em;
    1045 
    -  height: 20em;
    1038 
    +  min-height: 300px;
    1039 
    +  height: 300px;
    1046 1040 
       display: flex;
    1047 1041 
       flex-direction: column;
    1048 1042 
       padding: var(--space-small);
    1049 
    -  margin-block-end: 4px;
    1050 
    -  border: 1px solid var(--border-color);
    1043 
    +  margin-block-end: var(--space-xsmall);
    1044 
    +  border: var(--border-width) solid var(--border-color);
    1051 1045 
       border-radius: var(--border-radius-small);
    1052 1046 
       font-size: var(--font-size-small);
    1053 1047 
     }

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

  • browser/themes/shared/downloads/contentAreaDownloadsView.css
    ... ... @@ -26,5 +26,5 @@
    26 26 
     }
    27 27
    28 28 
     #aboutDownloadsTorWarning {
    29 
    -  margin-block-end: 8px;
    29 
    +  margin-block-end: var(--space-small);
    30 30 
     }

  • browser/themes/shared/tabbrowser/content-area.css
    ... ... @@ -390,16 +390,16 @@ split-view-footer {
    390 390
    391 391 
     #statuspanel:is([type="letterboxingStatus"], [previoustype="letterboxingStatus"][inactive]) > #statuspanel-label {
    392 392 
       background-image: url("chrome://browser/skin/window.svg");
    393 
    -  background-size: 1em;
    393 
    +  background-size: var(--icon-size);
    394 394 
       background-repeat: no-repeat;
    395 395 
       background-position-y: center;
    396 
    -  background-position-x: left 0.5em;
    396 
    +  background-position-x: left var(--space-small);
    397 397
    398 398 
       &:-moz-locale-dir(rtl) {
    399 
    -    background-position-x: right 0.5em;
    399 
    +    background-position-x: right var(--space-small);
    400 400 
       }
    401 401
    402 
    -  padding-inline-start: 2em;
    402 
    +  padding-inline-start: calc(var(--space-small) + var(--icon-size) + var(--space-small));
    403 403 
       -moz-context-properties: fill;
    404 404 
       fill: var(--color-accent-primary);
    405 405 
       @media (forced-colors) {

  • browser/themes/shared/tor-urlbar-button.css
    1 1 
     .tor-urlbar-button:not([hidden]) {
    2 2 
       display: flex;
    3 3 
       align-items: center;
    4 
    -  gap: 0.5em;
    5 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
    4 
    +  gap: var(--space-small);
    6 5 
       border-radius: var(--urlbar-inner-border-radius);
    7 
    -  --tor-urlbar-button-inline-padding: 8px;
    6 
    +  --tor-urlbar-button-inline-padding: var(--space-small);
    8 7 
       padding-inline: var(--tor-urlbar-button-inline-padding);
    9 8 
       margin: 0;
    10 9 
     }

  • python/mozlint/mozlint/cli.py
    ... ... @@ -38,7 +38,6 @@ INACTIVE_LINTERS = [
    38 38 
         "updatebot",
    39 39 
         "typescript",
    40 40 
         "wpt",
    41 
    -    "stylelint",
    42 41 
         "glean-parser",
    43 42 
     ]
    44 43

  • toolkit/components/resistfingerprinting/content/letterboxing.css
    ... ... @@ -17,9 +17,6 @@
    17 17 
       }
    18 18 
     }
    19 19
    20 
    -/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */
    21 
    -/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
    22 
    -
    23 20 
     #tabbrowser-tabbox.letterboxing {
    24 21 
       --letterboxing-bgcolor: var(--background-color-canvas);
    25 22 
       /* Match the border radius used for the sidebar. */
    ... ... @@ -28,7 +25,7 @@
    28 25 
       --letterboxing-vertical-alignment: start;
    29 26 
       --letterboxing-shadow: none;
    30 27 
       --letterboxing-outline-color: var(--border-color);
    31 
    -  --letterboxing-outline-width: 1px;
    28 
    +  --letterboxing-outline-width: var(--border-width);
    32 29
    33 30 
       @media not ((prefers-contrast) or (forced-colors)) {
    34 31 
         /* Match the #sidebar outline width. */

  • toolkit/components/torconnect/content/aboutTorConnect.css
    1 1 
     /* Copyright (c) 2021, The Tor Project, Inc. */
    2 2
    3 3 
     @import url("chrome://global/skin/error-pages.css");
    4 
    -@import url("chrome://global/skin/tor-colors.css");
    5 4 
     @import url("chrome://global/skin/onion-pattern.css");
    6 5
    7 6 
     body:not(.loaded) {
    ... ... @@ -12,7 +11,7 @@ body:not(.loaded) {
    12 11 
     #breadcrumbs {
    13 12 
       display: flex;
    14 13 
       align-items: center;
    15 
    -  margin: 0 0 24px 0;
    14 
    +  margin: 0 0 var(--space-xlarge) 0;
    16 15 
     }
    17 16
    18 17 
     #breadcrumbs.hidden {
    ... ... @@ -23,8 +22,8 @@ body:not(.loaded) {
    23 22 
     .breadcrumb-separator {
    24 23 
       display: flex;
    25 24 
       margin: 0;
    26 
    -  margin-inline-start: 20px;
    27 
    -  padding: 8px;
    25 
    +  margin-inline-start: var(--space-large);
    26 
    +  padding: var(--space-small);
    28 27 
     }
    29 28
    30 29 
     .breadcrumb-item {
    ... ... @@ -45,7 +44,7 @@ body:not(.loaded) {
    45 44 
     }
    46 45
    47 46 
     .breadcrumb-separator {
    48 
    -  width: 15px;
    47 
    +  width: var(--icon-size);
    49 48 
       list-style-image: url("chrome://global/content/torconnect/arrow-right.svg");
    50 49 
     }
    51 50
    ... ... @@ -55,7 +54,7 @@ body:not(.loaded) {
    55 54
    56 55 
     .breadcrumb-icon {
    57 56 
       display: inline list-item;
    58 
    -  height: 16px;
    57 
    +  height: var(--icon-size);
    59 58 
       list-style-position: inside;
    60 59 
       -moz-context-properties: fill, stroke;
    61 60 
       fill: currentColor;
    ... ... @@ -110,7 +109,7 @@ body:not(.loaded) {
    110 109
    111 110 
     #locationDropdownLabel {
    112 111 
       margin-block: auto;
    113 
    -  margin-inline: 4px;
    112 
    +  margin-inline: var(--space-xsmall);
    114 113 
     }
    115 114
    116 115 
     #locationDropdownLabel.error {
    ... ... @@ -120,16 +119,16 @@ body:not(.loaded) {
    120 119 
     /* this follows similar css in error-pages.css for buttons */
    121 120 
     @media only screen and (min-width: 480px) {
    122 121 
       form#locationDropdown {
    123 
    -    margin-inline: 4px;
    122 
    +    margin-inline: var(--space-xsmall);
    124 123 
         /* subtracting out the margin is needeed because by
    125 124 
            default forms have different margins than buttons */
    126 
    -    max-width: calc(100% - 8px);
    125 
    +    max-width: calc(100% - 2 * var(--space-xsmall));
    127 126 
       }
    128 127 
     }
    129 128
    130 129 
     @media only screen and (max-width: 480px) {
    131 130 
       #tryAgainButton {
    132 
    -    margin-top: 4px;
    131 
    +    margin-top: var(--space-xsmall);
    133 132 
       }
    134 133 
     }
    135 134
    ... ... @@ -182,7 +181,6 @@ form#locationDropdown select {
    182 181 
       background-image: linear-gradient(var(--progressbar-shadow-start), var(--background-color-canvas) 100%), var(--progressbar-gradient);
    183 182 
       animation: var(--progress-animation);
    184 183 
       filter: blur(5px);
    185 
    -  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
    186 184 
       border-end-end-radius: 33px;
    187 185 
     }
    188 186
    ... ... @@ -190,10 +188,8 @@ form#locationDropdown select {
    190 188 
       z-index: 2;
    191 189 
       width: var(--progress-percent);
    192 190 
       height: var(--progress-bar-height);
    193 
    -  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
    194 191 
       border-start-end-radius: calc(var(--progress-bar-height) / 2);
    195 192 
       border-end-end-radius: calc(var(--progress-bar-height) / 2);
    196 
    -  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
    197 193 
       background-image: var(--progressbar-gradient);
    198 194 
       animation: var(--progress-animation);
    199 195 
     }
    ... ... @@ -239,13 +235,13 @@ form#locationDropdown select {
    239 235
    240 236 
     /* mirrors p element spacing */
    241 237 
     #viewLogButton {
    242 
    -  margin: 1em 0;
    238 
    +  margin: var(--space-large) 0;
    243 239 
     }
    244 240
    245 241 
     body.aboutTorConnect {
    246 242 
       justify-content: space-between;
    247 
    -  /* Always reserve 150px for the background, plus 15px padding with content. */
    248 
    -  padding-block-end: calc(var(--onion-pattern-height) + 15px);
    243 
    +  /* Always reserve 150px for the background, plus padding with content. */
    244 
    +  padding-block-end: calc(var(--onion-pattern-height) + var(--space-large));
    249 245 
     }
    250 246
    251 247 
     body.aboutTorConnect .title {

  • toolkit/components/torconnect/content/aboutTorConnect.html
    ... ... @@ -6,6 +6,7 @@
    6 6 
           http-equiv="Content-Security-Policy"
    7 7 
           content="default-src chrome:; object-src 'none'"
    8 8 
         />
    9 
    +    <link rel="stylesheet" href="chrome://global/skin/tor-common.css" />
    9 10 
         <link
    10 11 
           rel="stylesheet"
    11 12 
           href="chrome://global/content/torconnect/aboutTorConnect.css"

  • toolkit/components/torconnect/content/torConnectTitlebarStatus.css
    1 1 
     .tor-connect-titlebar-status:not([hidden]) {
    2 2 
       display: flex;
    3 3 
       align-items: center;
    4 
    -  /* Want same as .private-browsing-indicator-with-label */
    5 
    -  margin-inline: 7px;
    4 
    +  margin-inline: var(--space-small);
    6 5
    7 6 
       #navigator-toolbox[tabs-hidden] #TabsToolbar > & {
    8 7 
         /* Hide in the tabs bar when the tabs bar is hidden. E.g. when using
    ... ... @@ -18,7 +17,7 @@
    18 17 
     }
    19 18
    20 19 
     .tor-connect-titlebar-status-label {
    21 
    -  margin-inline: 6px;
    20 
    +  margin-inline: var(--space-small);
    22 21 
       white-space: nowrap;
    23 22 
     }
    24 23
    ... ... @@ -26,8 +25,8 @@
    26 25 
       -moz-context-properties: fill, stroke;
    27 26 
       fill: var(--icon-color);
    28 27 
       stroke: var(--icon-color);
    29 
    -  width: 16px;
    30 
    -  height: 16px;
    28 
    +  width: var(--icon-size);
    29 
    +  height: var(--icon-size);
    31 30 
       object-fit: none;
    32 31 
       --num-animation-steps: 8;
    33 32 
       /* First frame has no offset. */
    ... ... @@ -52,12 +51,12 @@
    52 51 
     @media not ((prefers-contrast) or (forced-colors)) {
    53 52 
       /* Make the connected text and icon purple. */
    54 53 
       .tor-connect-titlebar-status.tor-connect-status-connected {
    55 
    -    color: var(--tor-text-color);
    54 
    +    color: var(--text-color-tor);
    56 55 
       }
    57 56
    58 57 
       .tor-connect-titlebar-status.tor-connect-status-connected img {
    59 
    -    fill: var(--tor-text-color);
    60 
    -    stroke: var(--tor-text-color);
    58 
    +    fill: var(--text-color-tor);
    59 
    +    stroke: var(--text-color-tor);
    61 60 
       }
    62 61 
     }
    63 62

  • toolkit/themes/shared/design-system/config/tokens-config.js
    ... ... @@ -72,6 +72,28 @@ let customFileHeader = ({ surface, platform }) => {
    72 72 
       ].join("\n");
    73 73
    74 74 
       let commentString = [
    75 
    +    // Add an additional note for Tor Browser developers! See tor-browser#44406.
    76 
    +    "/* Tor Browser instructions",
    77 
    +    " * ========================",
    78 
    +    " *",
    79 
    +    " * DO NOT EDIT this file directly!",
    80 
    +    " *",
    81 
    +    " * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!",
    82 
    +    " *",
    83 
    +    " * This is a file generated by `./mach buildtokens`.",
    84 
    +    " *",
    85 
    +    " * When resolving conflicts, first resolve other conflicts outside the",
    86 
    +    " * 'dist' directory, if there are any:",
    87 
    +    " *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'",
    88 
    +    " *",
    89 
    +    " * Then regenerate these 'dist' files:",
    90 
    +    " *",
    91 
    +    " *   ./mach buildtokens",
    92 
    +    " *",
    93 
    +    " * Then add the generated files as resolved:",
    94 
    +    " *",
    95 
    +    " *   git add toolkit/themes/shared/design-system/dist/",
    96 
    +    " */",
    75 97 
         "/* DO NOT EDIT this file directly, instead modify design-tokens.json",
    76 98 
         " * and run `npm run build` to see your changes. */",
    77 99 
       ].join("\n");

  • toolkit/themes/shared/design-system/dist/tokens-brand.css
    ... ... @@ -2,6 +2,27 @@
    2 2 
      * License, v. 2.0. If a copy of the MPL was not distributed with this
    3 3 
      * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
    4 4
    5 
    +/* Tor Browser instructions
    6 
    + * ========================
    7 
    + *
    8 
    + * DO NOT EDIT this file directly!
    9 
    + *
    10 
    + * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
    11 
    + *
    12 
    + * This is a file generated by `./mach buildtokens`.
    13 
    + *
    14 
    + * When resolving conflicts, first resolve other conflicts outside the
    15 
    + * 'dist' directory, if there are any:
    16 
    + *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
    17 
    + *
    18 
    + * Then regenerate these 'dist' files:
    19 
    + *
    20 
    + *   ./mach buildtokens
    21 
    + *
    22 
    + * Then add the generated files as resolved:
    23 
    + *
    24 
    + *   git add toolkit/themes/shared/design-system/dist/
    25 
    + */
    5 26 
     /* DO NOT EDIT this file directly, instead modify design-tokens.json
    6 27 
      * and run `npm run build` to see your changes. */
    7 28

  • toolkit/themes/shared/design-system/dist/tokens-figma-colors.json
    ... ... @@ -135,5 +135,11 @@
    135 135 
       "color/black/alpha/60": "oklch(0 0 0 / 60%)",
    136 136 
       "color/black/alpha/70": "oklch(0 0 0 / 70%)",
    137 137 
       "color/black/alpha/80": "oklch(0 0 0 / 80%)",
    138 
    -  "color/black/alpha/90": "oklch(0 0 0 / 90%)"
    138 
    +  "color/black/alpha/90": "oklch(0 0 0 / 90%)",
    139 
    +  "color/accent/tor/light": "{Colors$color/purple/60}",
    140 
    +  "color/accent/tor/dark": "{Colors$color/purple/30}",
    141 
    +  "color/accent/tor/hover/light": "{Colors$color/purple/70}",
    142 
    +  "color/accent/tor/hover/dark": "{Colors$color/purple/20}",
    143 
    +  "color/accent/tor/active/light": "{Colors$color/purple/80}",
    144 
    +  "color/accent/tor/active/dark": "{Colors$color/purple/10}"
    139 145 
     }

  • toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json
    ... ... @@ -6,6 +6,12 @@
    6 6 
       "border/radius/medium": 8,
    7 7 
       "border/radius/large": 16,
    8 8 
       "border/width": 1,
    9 
    +  "button/background/color/tor/light": "{Colors$color/accent/tor/light}",
    10 
    +  "button/background/color/tor/dark": "{Colors$color/accent/tor/dark}",
    11 
    +  "button/background/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
    12 
    +  "button/background/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
    13 
    +  "button/background/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
    14 
    +  "button/background/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
    9 15 
       "button/border/radius": "{Primitives$border/radius/medium}",
    10 16 
       "button/min/height": "{Primitives$size/item/large}",
    11 17 
       "button/min/height/small": "{Primitives$size/item/medium}",
    ... ... @@ -14,8 +20,16 @@
    14 20 
       "button/padding/icon": 0,
    15 21 
       "button/size/icon": "{Primitives$button/min/height}",
    16 22 
       "button/size/icon/small": "{Primitives$button/min/height/small}",
    23 
    +  "button/text/color/tor/light": "{Colors$color/gray/05}",
    24 
    +  "button/text/color/tor/dark": "{Colors$color/gray/100}",
    25 
    +  "button/text/color/tor/hover/light": "{Colors$color/gray/05}",
    26 
    +  "button/text/color/tor/hover/dark": "{Colors$color/gray/100}",
    27 
    +  "button/text/color/tor/active/light": "{Colors$color/gray/05}",
    28 
    +  "button/text/color/tor/active/dark": "{Colors$color/gray/100}",
    17 29 
       "checkbox/margin/inline": "{Primitives$space/small}",
    18 30 
       "checkbox/size": "{Primitives$size/item/small}",
    31 
    +  "focus/outline/color/tor/light": "{Colors$color/accent/tor/light}",
    32 
    +  "focus/outline/color/tor/dark": "{Colors$color/accent/tor/dark}",
    19 33 
       "focus/outline/inset": -2,
    20 34 
       "focus/outline/offset": 2,
    21 35 
       "focus/outline/width": 2,
    ... ... @@ -26,6 +40,12 @@
    26 40 
       "icon/size/large": "{Primitives$size/item/medium}",
    27 41 
       "icon/size/xlarge": "{Primitives$size/item/large}",
    28 42 
       "input/text/min/height": "{Primitives$button/min/height}",
    43 
    +  "link/color/tor/light": "{Colors$color/accent/tor/light}",
    44 
    +  "link/color/tor/dark": "{Colors$color/accent/tor/dark}",
    45 
    +  "link/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
    46 
    +  "link/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
    47 
    +  "link/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
    48 
    +  "link/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
    29 49 
       "link/focus/outline/offset": 1,
    30 50 
       "page/main/content/width": 664,
    31 51 
       "size/item/xsmall": 12,
    ... ... @@ -71,5 +91,7 @@
    71 91 
       "box/shadow/level-4/shadow-2/x": 0,
    72 92 
       "box/shadow/level-4/shadow-2/y": 4,
    73 93 
       "box/shadow/level-4/shadow-2/blur": 16,
    74 
    -  "box/shadow/level-4/shadow-2/spread": 0
    94 
    +  "box/shadow/level-4/shadow-2/spread": 0,
    95 
    +  "text/color/tor/light": "{Colors$color/purple/60}",
    96 
    +  "text/color/tor/dark": "{Colors$color/purple/20}"
    75 97 
     }

  • toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
    ... ... @@ -189,6 +189,21 @@
    189 189 
         "dark": "{Theme$button/background/color/active}",
    190 190 
         "forcedColors": "{Theme$button/background/color/active}"
    191 191 
       },
    192 
    +  "button/background/color/tor": {
    193 
    +    "light": "{Primitives$button/background/color/tor/light}",
    194 
    +    "dark": "{Primitives$button/background/color/tor/dark}",
    195 
    +    "forcedColors": "{Theme$button/background/color/primary}"
    196 
    +  },
    197 
    +  "button/background/color/tor/hover": {
    198 
    +    "light": "{Primitives$button/background/color/tor/hover/light}",
    199 
    +    "dark": "{Primitives$button/background/color/tor/hover/dark}",
    200 
    +    "forcedColors": "{Theme$button/background/color/primary/hover}"
    201 
    +  },
    202 
    +  "button/background/color/tor/active": {
    203 
    +    "light": "{Primitives$button/background/color/tor/active/light}",
    204 
    +    "dark": "{Primitives$button/background/color/tor/active/dark}",
    205 
    +    "forcedColors": "{Theme$button/background/color/primary/active}"
    206 
    +  },
    192 207 
       "button/border": {
    193 208 
         "light": "{Primitives$border/width} solid {Theme$button/border/color}",
    194 209 
         "dark": "{Primitives$border/width} solid {Theme$button/border/color}",
    ... ... @@ -401,6 +416,21 @@
    401 416 
         "dark": "{Theme$button/text/color/active}",
    402 417 
         "forcedColors": "{Theme$button/text/color/active}"
    403 418 
       },
    419 
    +  "button/text/color/tor": {
    420 
    +    "light": "{Primitives$button/text/color/tor/light}",
    421 
    +    "dark": "{Primitives$button/text/color/tor/dark}",
    422 
    +    "forcedColors": "{Theme$button/text/color/primary}"
    423 
    +  },
    424 
    +  "button/text/color/tor/hover": {
    425 
    +    "light": "{Primitives$button/text/color/tor/hover/light}",
    426 
    +    "dark": "{Primitives$button/text/color/tor/hover/dark}",
    427 
    +    "forcedColors": "{Theme$button/text/color/primary/hover}"
    428 
    +  },
    429 
    +  "button/text/color/tor/active": {
    430 
    +    "light": "{Primitives$button/text/color/tor/active/light}",
    431 
    +    "dark": "{Primitives$button/text/color/tor/active/dark}",
    432 
    +    "forcedColors": "{Theme$button/text/color/primary/active}"
    433 
    +  },
    404 434 
       "color/accent/primary": {
    405 435 
         "light": "{Colors$color/blue/60}",
    406 436 
         "dark": "{Colors$color/cyan/30}",
    ... ... @@ -421,6 +451,21 @@
    421 451 
         "dark": "{Colors$color/cyan/30}",
    422 452 
         "forcedColors": "{HCM Theme$SelectedItem}"
    423 453 
       },
    454 
    +  "color/accent/tor": {
    455 
    +    "light": "{Colors$color/accent/tor/light}",
    456 
    +    "dark": "{Colors$color/accent/tor/dark}",
    457 
    +    "forcedColors": "{Theme$color/accent/primary}"
    458 
    +  },
    459 
    +  "color/accent/tor/hover": {
    460 
    +    "light": "{Colors$color/accent/tor/hover/light}",
    461 
    +    "dark": "{Colors$color/accent/tor/hover/dark}",
    462 
    +    "forcedColors": "{Theme$color/accent/primary/hover}"
    463 
    +  },
    464 
    +  "color/accent/tor/active": {
    465 
    +    "light": "{Colors$color/accent/tor/active/light}",
    466 
    +    "dark": "{Colors$color/accent/tor/active/dark}",
    467 
    +    "forcedColors": "{Theme$color/accent/primary/active}"
    468 
    +  },
    424 469 
       "focus/outline": {
    425 470 
         "light": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
    426 471 
         "dark": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
    ... ... @@ -431,6 +476,11 @@
    431 476 
         "dark": "{Theme$color/accent/primary}",
    432 477 
         "forcedColors": "{Theme$text/color}"
    433 478 
       },
    479 
    +  "focus/outline/color/tor": {
    480 
    +    "light": "{Primitives$focus/outline/color/tor/light}",
    481 
    +    "dark": "{Primitives$focus/outline/color/tor/dark}",
    482 
    +    "forcedColors": "{Theme$focus/outline/color}"
    483 
    +  },
    434 484 
       "icon/color": {
    435 485 
         "light": "{Colors$color/gray/70}",
    436 486 
         "dark": "{Colors$color/gray/05}",
    ... ... @@ -476,6 +526,21 @@
    476 526 
         "dark": "{Theme$link/color}",
    477 527 
         "forcedColors": "{Theme$link/color}"
    478 528 
       },
    529 
    +  "link/color/tor": {
    530 
    +    "light": "{Primitives$link/color/tor/light}",
    531 
    +    "dark": "{Primitives$link/color/tor/dark}",
    532 
    +    "forcedColors": "{Theme$link/color}"
    533 
    +  },
    534 
    +  "link/color/tor/hover": {
    535 
    +    "light": "{Primitives$link/color/tor/hover/light}",
    536 
    +    "dark": "{Primitives$link/color/tor/hover/dark}",
    537 
    +    "forcedColors": "{Theme$link/color/hover}"
    538 
    +  },
    539 
    +  "link/color/tor/active": {
    540 
    +    "light": "{Primitives$link/color/tor/active/light}",
    541 
    +    "dark": "{Primitives$link/color/tor/active/dark}",
    542 
    +    "forcedColors": "{Theme$link/color/active}"
    543 
    +  },
    479 544 
       "outline/color/error": {
    480 545 
         "light": "{Colors$color/red/70}",
    481 546 
         "dark": "{Colors$color/red/20}",
    ... ... @@ -553,5 +618,10 @@
    553 618 
         "light": "{Theme$text/color}",
    554 619 
         "dark": "{Theme$text/color}",
    555 620 
         "forcedColors": "{HCM Theme$SelectedItemText}"
    621 
    +  },
    622 
    +  "text/color/tor": {
    623 
    +    "light": "{Primitives$text/color/tor/light}",
    624 
    +    "dark": "{Primitives$text/color/tor/dark}",
    625 
    +    "forcedColors": "inherit"
    556 626 
       }
    557 627 
     }

  • toolkit/themes/shared/design-system/dist/tokens-platform.css
    ... ... @@ -2,6 +2,27 @@
    2 2 
      * License, v. 2.0. If a copy of the MPL was not distributed with this
    3 3 
      * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
    4 4
    5 
    +/* Tor Browser instructions
    6 
    + * ========================
    7 
    + *
    8 
    + * DO NOT EDIT this file directly!
    9 
    + *
    10 
    + * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
    11 
    + *
    12 
    + * This is a file generated by `./mach buildtokens`.
    13 
    + *
    14 
    + * When resolving conflicts, first resolve other conflicts outside the
    15 
    + * 'dist' directory, if there are any:
    16 
    + *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
    17 
    + *
    18 
    + * Then regenerate these 'dist' files:
    19 
    + *
    20 
    + *   ./mach buildtokens
    21 
    + *
    22 
    + * Then add the generated files as resolved:
    23 
    + *
    24 
    + *   git add toolkit/themes/shared/design-system/dist/
    25 
    + */
    5 26 
     /* DO NOT EDIT this file directly, instead modify design-tokens.json
    6 27 
      * and run `npm run build` to see your changes. */
    7 28

  • toolkit/themes/shared/design-system/dist/tokens-shared.css
    ... ... @@ -2,6 +2,27 @@
    2 2 
      * License, v. 2.0. If a copy of the MPL was not distributed with this
    3 3 
      * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
    4 4
    5 
    +/* Tor Browser instructions
    6 
    + * ========================
    7 
    + *
    8 
    + * DO NOT EDIT this file directly!
    9 
    + *
    10 
    + * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
    11 
    + *
    12 
    + * This is a file generated by `./mach buildtokens`.
    13 
    + *
    14 
    + * When resolving conflicts, first resolve other conflicts outside the
    15 
    + * 'dist' directory, if there are any:
    16 
    + *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
    17 
    + *
    18 
    + * Then regenerate these 'dist' files:
    19 
    + *
    20 
    + *   ./mach buildtokens
    21 
    + *
    22 
    + * Then add the generated files as resolved:
    23 
    + *
    24 
    + *   git add toolkit/themes/shared/design-system/dist/
    25 
    + */
    5 26 
     /* DO NOT EDIT this file directly, instead modify design-tokens.json
    6 27 
      * and run `npm run build` to see your changes. */
    7 28
    ... ... @@ -66,6 +87,15 @@
    66 87 
         --button-background-color-primary-disabled: var(--button-background-color-primary);
    67 88 
         --button-background-color-primary-selected: var(--button-background-color-primary-active);
    68 89 
         --button-background-color-selected: var(--button-background-color-active);
    90 
    +    --button-background-color-tor: light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark));
    91 
    +    --button-background-color-tor-hover: light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark));
    92 
    +    --button-background-color-tor-active: light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark));
    93 
    +    --button-background-color-tor-active-dark: var(--color-accent-tor-active-dark);
    94 
    +    --button-background-color-tor-active-light: var(--color-accent-tor-active-light);
    95 
    +    --button-background-color-tor-dark: var(--color-accent-tor-dark);
    96 
    +    --button-background-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
    97 
    +    --button-background-color-tor-hover-light: var(--color-accent-tor-hover-light);
    98 
    +    --button-background-color-tor-light: var(--color-accent-tor-light);
    69 99 
         --button-border: var(--border-width) solid var(--button-border-color);
    70 100 
         --button-border-color: transparent;
    71 101 
         --button-border-color-hover: var(--button-border-color);
    ... ... @@ -118,12 +148,30 @@
    118 148 
         --button-text-color-primary-disabled: var(--button-text-color-primary);
    119 149 
         --button-text-color-primary-selected: var(--button-text-color-primary-active);
    120 150 
         --button-text-color-selected: var(--button-text-color-active);
    151 
    +    --button-text-color-tor: light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark));
    152 
    +    --button-text-color-tor-hover: light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark));
    153 
    +    --button-text-color-tor-active: light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark));
    154 
    +    --button-text-color-tor-active-dark: var(--color-gray-100);
    155 
    +    --button-text-color-tor-active-light: var(--color-gray-05);
    156 
    +    --button-text-color-tor-dark: var(--color-gray-100);
    157 
    +    --button-text-color-tor-hover-dark: var(--color-gray-100);
    158 
    +    --button-text-color-tor-hover-light: var(--color-gray-05);
    159 
    +    --button-text-color-tor-light: var(--color-gray-05);
    121 160
    122 161 
         /** Checkbox **/
    123 162 
         --checkbox-margin-inline: var(--space-small);
    124 163 
         --checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */
    125 164
    126 165 
         /** Color **/
    166 
    +    --color-accent-tor: light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark));
    167 
    +    --color-accent-tor-hover: light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark));
    168 
    +    --color-accent-tor-active: light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark));
    169 
    +    --color-accent-tor-active-dark: var(--color-purple-10);
    170 
    +    --color-accent-tor-active-light: var(--color-purple-80);
    171 
    +    --color-accent-tor-dark: var(--color-purple-30);
    172 
    +    --color-accent-tor-hover-dark: var(--color-purple-20);
    173 
    +    --color-accent-tor-hover-light: var(--color-purple-70);
    174 
    +    --color-accent-tor-light: var(--color-purple-60);
    127 175 
         --color-black: #000000;
    128 176 
         --color-black-alpha-10: oklch(0 0 0 / 10%);
    129 177 
         --color-black-alpha-20: oklch(0 0 0 / 20%);
    ... ... @@ -265,6 +313,9 @@
    265 313 
         /** Focus Outline **/
    266 314 
         --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    267 315 
         --focus-outline-color: var(--color-accent-primary);
    316 
    +    --focus-outline-color-tor: light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark));
    317 
    +    --focus-outline-color-tor-dark: var(--color-accent-tor-dark);
    318 
    +    --focus-outline-color-tor-light: var(--color-accent-tor-light);
    268 319 
         --focus-outline-inset: calc(-1 * var(--focus-outline-width));
    269 320 
         --focus-outline-offset: 2px;
    270 321 
         --focus-outline-width: 2px;
    ... ... @@ -297,6 +348,15 @@
    297 348 
         --input-text-min-height: var(--button-min-height);
    298 349
    299 350 
         /** Link **/
    351 
    +    --link-color-tor: light-dark(var(--link-color-tor-light), var(--link-color-tor-dark));
    352 
    +    --link-color-tor-hover: light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark));
    353 
    +    --link-color-tor-active: light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark));
    354 
    +    --link-color-tor-active-dark: var(--color-accent-tor-active-dark);
    355 
    +    --link-color-tor-active-light: var(--color-accent-tor-active-light);
    356 
    +    --link-color-tor-dark: var(--color-accent-tor-dark);
    357 
    +    --link-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
    358 
    +    --link-color-tor-hover-light: var(--color-accent-tor-hover-light);
    359 
    +    --link-color-tor-light: var(--color-accent-tor-light);
    300 360 
         /**
    301 361 
          * Not using --force-outline-offset for links because that's intended for
    302 362 
          * elements with a background, and we only want a slight offset here while
    ... ... @@ -328,6 +388,9 @@
    328 388 
         --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
    329 389 
         --text-color-error: light-dark(var(--color-red-70), var(--color-red-20));
    330 390 
         --text-color-list-item-hover: var(--text-color);
    391 
    +    --text-color-tor: light-dark(var(--text-color-tor-light), var(--text-color-tor-dark));
    392 
    +    --text-color-tor-dark: var(--color-purple-20);
    393 
    +    --text-color-tor-light: var(--color-purple-60);
    331 394 
       }
    332 395 
     }
    333 396
    ... ... @@ -358,9 +421,23 @@
    358 421 
           --border-color-transparent: CanvasText;
    359 422
    360 423 
           /** Button **/
    424 
    +      --button-background-color-tor: var(--button-background-color-primary);
    425 
    +      --button-background-color-tor-hover: var(--button-background-color-primary-hover);
    426 
    +      --button-background-color-tor-active: var(--button-background-color-primary-active);
    361 427 
           --button-border-color: var(--button-text-color);
    362 428 
           --button-text-color-ghost-hover: var(--button-text-color-hover);
    363 429 
           --button-text-color-ghost-active: var(--button-text-color-active);
    430 
    +      --button-text-color-tor: var(--button-text-color-primary);
    431 
    +      --button-text-color-tor-hover: var(--button-text-color-primary-hover);
    432 
    +      --button-text-color-tor-active: var(--button-text-color-primary-active);
    433 
    +
    434 
    +      /** Color **/
    435 
    +      --color-accent-tor: var(--color-accent-primary);
    436 
    +      --color-accent-tor-hover: var(--color-accent-primary-hover);
    437 
    +      --color-accent-tor-active: var(--color-accent-primary-active);
    438 
    +
    439 
    +      /** Focus Outline **/
    440 
    +      --focus-outline-color-tor: var(--focus-outline-color);
    364 441
    365 442 
           /** Icon **/
    366 443 
           --icon-color: var(--text-color);
    ... ... @@ -369,6 +446,11 @@
    369 446 
           --icon-color-success: var(--icon-color);
    370 447 
           --icon-color-warning: var(--icon-color);
    371 448
    449 
    +      /** Link **/
    450 
    +      --link-color-tor: var(--link-color);
    451 
    +      --link-color-tor-hover: var(--link-color-hover);
    452 
    +      --link-color-tor-active: var(--link-color-active);
    453 
    +
    372 454 
           /** Outline Color **/
    373 455 
           --outline-color-error: var(--border-color);
    374 456
    ... ... @@ -377,6 +459,7 @@
    377 459 
           --text-color-deemphasized: inherit;
    378 460 
           --text-color-error: inherit;
    379 461 
           --text-color-list-item-hover: SelectedItemText;
    462 
    +      --text-color-tor: inherit;
    380 463 
         }
    381 464 
       }
    382 465 
     }
    ... ... @@ -409,6 +492,9 @@
    409 492 
           --button-background-color-destructive-active: var(--button-background-color-primary-active);
    410 493 
           --button-background-color-destructive-disabled: var(--button-background-color-primary-disabled);
    411 494 
           --button-background-color-primary-disabled: var(--button-text-color-disabled);
    495 
    +      --button-background-color-tor: var(--button-background-color-primary);
    496 
    +      --button-background-color-tor-hover: var(--button-background-color-primary-hover);
    497 
    +      --button-background-color-tor-active: var(--button-background-color-primary-active);
    412 498 
           --button-border-color: var(--border-color-interactive);
    413 499 
           --button-border-color-hover: var(--border-color-interactive-hover);
    414 500 
           --button-border-color-active: var(--border-color-interactive-active);
    ... ... @@ -433,25 +519,36 @@
    433 519 
           --button-text-color-ghost-active: var(--button-text-color-active);
    434 520 
           --button-text-color-primary: ButtonFace;
    435 521 
           --button-text-color-primary-hover: SelectedItemText;
    522 
    +      --button-text-color-tor: var(--button-text-color-primary);
    523 
    +      --button-text-color-tor-hover: var(--button-text-color-primary-hover);
    524 
    +      --button-text-color-tor-active: var(--button-text-color-primary-active);
    436 525
    437 526 
           /** Color **/
    438 527 
           --color-accent-primary: ButtonText;
    439 528 
           --color-accent-primary-hover: SelectedItem;
    440 529 
           --color-accent-primary-active: var(--color-accent-primary-hover);
    441 530 
           --color-accent-primary-selected: SelectedItem;
    531 
    +      --color-accent-tor: var(--color-accent-primary);
    532 
    +      --color-accent-tor-hover: var(--color-accent-primary-hover);
    533 
    +      --color-accent-tor-active: var(--color-accent-primary-active);
    442 534
    443 535 
           /** Focus Outline **/
    444 536 
           --focus-outline-color: var(--text-color);
    537 
    +      --focus-outline-color-tor: var(--focus-outline-color);
    445 538
    446 539 
           /** Link **/
    447 540 
           --link-color: LinkText;
    448 541 
           --link-color-hover: LinkText;
    449 542 
           --link-color-active: ActiveText;
    543 
    +      --link-color-tor: var(--link-color);
    544 
    +      --link-color-tor-hover: var(--link-color-hover);
    545 
    +      --link-color-tor-active: var(--link-color-active);
    450 546 
           --link-color-visited: var(--link-color);
    451 547
    452 548 
           /** Text **/
    453 549 
           --text-color-disabled: GrayText;
    454 550 
           --text-color-accent-primary-selected: SelectedItemText;
    551 
    +      --text-color-tor: inherit;
    455 552 
         }
    456 553 
       }
    457 554 
     }

  • toolkit/themes/shared/design-system/dist/tokens-table.mjs
    ... ... @@ -2,6 +2,27 @@
    2 2 
      * License, v. 2.0. If a copy of the MPL was not distributed with this
    3 3 
      * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
    4 4
    5 
    +/* Tor Browser instructions
    6 
    + * ========================
    7 
    + *
    8 
    + * DO NOT EDIT this file directly!
    9 
    + *
    10 
    + * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
    11 
    + *
    12 
    + * This is a file generated by `./mach buildtokens`.
    13 
    + *
    14 
    + * When resolving conflicts, first resolve other conflicts outside the
    15 
    + * 'dist' directory, if there are any:
    16 
    + *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
    17 
    + *
    18 
    + * Then regenerate these 'dist' files:
    19 
    + *
    20 
    + *   ./mach buildtokens
    21 
    + *
    22 
    + * Then add the generated files as resolved:
    23 
    + *
    24 
    + *   git add toolkit/themes/shared/design-system/dist/
    25 
    + */
    5 26 
     /* DO NOT EDIT this file directly, instead modify design-tokens.json
    6 27 
      * and run `npm run build` to see your changes. */
    7 28
    ... ... @@ -208,6 +229,48 @@ export const tokensTable = {
    208 229 
           },
    209 230 
           name: "--color-accent-primary-selected",
    210 231 
         },
    232 
    +    { value: "var(--color-purple-60)", name: "--color-accent-tor-light" },
    233 
    +    { value: "var(--color-purple-30)", name: "--color-accent-tor-dark" },
    234 
    +    {
    235 
    +      value: {
    236 
    +        light: "var(--color-accent-tor-light)",
    237 
    +        dark: "var(--color-accent-tor-dark)",
    238 
    +        prefersContrast: "var(--color-accent-primary)",
    239 
    +        forcedColors: "var(--color-accent-primary)",
    240 
    +        default:
    241 
    +          "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
    242 
    +      },
    243 
    +      name: "--color-accent-tor",
    244 
    +    },
    245 
    +    { value: "var(--color-purple-70)", name: "--color-accent-tor-hover-light" },
    246 
    +    { value: "var(--color-purple-20)", name: "--color-accent-tor-hover-dark" },
    247 
    +    {
    248 
    +      value: {
    249 
    +        light: "var(--color-accent-tor-hover-light)",
    250 
    +        dark: "var(--color-accent-tor-hover-dark)",
    251 
    +        prefersContrast: "var(--color-accent-primary-hover)",
    252 
    +        forcedColors: "var(--color-accent-primary-hover)",
    253 
    +        default:
    254 
    +          "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
    255 
    +      },
    256 
    +      name: "--color-accent-tor-hover",
    257 
    +    },
    258 
    +    {
    259 
    +      value: "var(--color-purple-80)",
    260 
    +      name: "--color-accent-tor-active-light",
    261 
    +    },
    262 
    +    { value: "var(--color-purple-10)", name: "--color-accent-tor-active-dark" },
    263 
    +    {
    264 
    +      value: {
    265 
    +        light: "var(--color-accent-tor-active-light)",
    266 
    +        dark: "var(--color-accent-tor-active-dark)",
    267 
    +        prefersContrast: "var(--color-accent-primary-active)",
    268 
    +        forcedColors: "var(--color-accent-primary-active)",
    269 
    +        default:
    270 
    +          "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
    271 
    +      },
    272 
    +      name: "--color-accent-tor-active",
    273 
    +    },
    211 274 
       ],
    212 275 
       "background-color": [
    213 276 
         {
    ... ... @@ -426,6 +489,63 @@ export const tokensTable = {
    426 489 
           value: "var(--button-background-color-active)",
    427 490 
           name: "--button-background-color-selected",
    428 491 
         },
    492 
    +    {
    493 
    +      value: "var(--color-accent-tor-light)",
    494 
    +      name: "--button-background-color-tor-light",
    495 
    +    },
    496 
    +    {
    497 
    +      value: "var(--color-accent-tor-dark)",
    498 
    +      name: "--button-background-color-tor-dark",
    499 
    +    },
    500 
    +    {
    501 
    +      value: {
    502 
    +        light: "var(--button-background-color-tor-light)",
    503 
    +        dark: "var(--button-background-color-tor-dark)",
    504 
    +        prefersContrast: "var(--button-background-color-primary)",
    505 
    +        forcedColors: "var(--button-background-color-primary)",
    506 
    +        default:
    507 
    +          "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
    508 
    +      },
    509 
    +      name: "--button-background-color-tor",
    510 
    +    },
    511 
    +    {
    512 
    +      value: "var(--color-accent-tor-hover-light)",
    513 
    +      name: "--button-background-color-tor-hover-light",
    514 
    +    },
    515 
    +    {
    516 
    +      value: "var(--color-accent-tor-hover-dark)",
    517 
    +      name: "--button-background-color-tor-hover-dark",
    518 
    +    },
    519 
    +    {
    520 
    +      value: {
    521 
    +        light: "var(--button-background-color-tor-hover-light)",
    522 
    +        dark: "var(--button-background-color-tor-hover-dark)",
    523 
    +        prefersContrast: "var(--button-background-color-primary-hover)",
    524 
    +        forcedColors: "var(--button-background-color-primary-hover)",
    525 
    +        default:
    526 
    +          "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
    527 
    +      },
    528 
    +      name: "--button-background-color-tor-hover",
    529 
    +    },
    530 
    +    {
    531 
    +      value: "var(--color-accent-tor-active-light)",
    532 
    +      name: "--button-background-color-tor-active-light",
    533 
    +    },
    534 
    +    {
    535 
    +      value: "var(--color-accent-tor-active-dark)",
    536 
    +      name: "--button-background-color-tor-active-dark",
    537 
    +    },
    538 
    +    {
    539 
    +      value: {
    540 
    +        light: "var(--button-background-color-tor-active-light)",
    541 
    +        dark: "var(--button-background-color-tor-active-dark)",
    542 
    +        prefersContrast: "var(--button-background-color-primary-active)",
    543 
    +        forcedColors: "var(--button-background-color-primary-active)",
    544 
    +        default:
    545 
    +          "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
    546 
    +      },
    547 
    +      name: "--button-background-color-tor-active",
    548 
    +    },
    429 549 
         {
    430 550 
           value: "var(--background-color-box-info)",
    431 551 
           name: "--promo-background-color",
    ... ... @@ -957,6 +1077,57 @@ export const tokensTable = {
    957 1077 
           value: "var(--button-text-color-active)",
    958 1078 
           name: "--button-text-color-selected",
    959 1079 
         },
    1080 
    +    { value: "var(--color-gray-05)", name: "--button-text-color-tor-light" },
    1081 
    +    { value: "var(--color-gray-100)", name: "--button-text-color-tor-dark" },
    1082 
    +    {
    1083 
    +      value: {
    1084 
    +        light: "var(--button-text-color-tor-light)",
    1085 
    +        dark: "var(--button-text-color-tor-dark)",
    1086 
    +        prefersContrast: "var(--button-text-color-primary)",
    1087 
    +        forcedColors: "var(--button-text-color-primary)",
    1088 
    +        default:
    1089 
    +          "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
    1090 
    +      },
    1091 
    +      name: "--button-text-color-tor",
    1092 
    +    },
    1093 
    +    {
    1094 
    +      value: "var(--color-gray-05)",
    1095 
    +      name: "--button-text-color-tor-hover-light",
    1096 
    +    },
    1097 
    +    {
    1098 
    +      value: "var(--color-gray-100)",
    1099 
    +      name: "--button-text-color-tor-hover-dark",
    1100 
    +    },
    1101 
    +    {
    1102 
    +      value: {
    1103 
    +        light: "var(--button-text-color-tor-hover-light)",
    1104 
    +        dark: "var(--button-text-color-tor-hover-dark)",
    1105 
    +        prefersContrast: "var(--button-text-color-primary-hover)",
    1106 
    +        forcedColors: "var(--button-text-color-primary-hover)",
    1107 
    +        default:
    1108 
    +          "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
    1109 
    +      },
    1110 
    +      name: "--button-text-color-tor-hover",
    1111 
    +    },
    1112 
    +    {
    1113 
    +      value: "var(--color-gray-05)",
    1114 
    +      name: "--button-text-color-tor-active-light",
    1115 
    +    },
    1116 
    +    {
    1117 
    +      value: "var(--color-gray-100)",
    1118 
    +      name: "--button-text-color-tor-active-dark",
    1119 
    +    },
    1120 
    +    {
    1121 
    +      value: {
    1122 
    +        light: "var(--button-text-color-tor-active-light)",
    1123 
    +        dark: "var(--button-text-color-tor-active-dark)",
    1124 
    +        prefersContrast: "var(--button-text-color-primary-active)",
    1125 
    +        forcedColors: "var(--button-text-color-primary-active)",
    1126 
    +        default:
    1127 
    +          "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
    1128 
    +      },
    1129 
    +      name: "--button-text-color-tor-active",
    1130 
    +    },
    960 1131 
         {
    961 1132 
           value: {
    962 1133 
             forcedColors: "LinkText",
    ... ... @@ -993,6 +1164,57 @@ export const tokensTable = {
    993 1164 
           },
    994 1165 
           name: "--link-color-visited",
    995 1166 
         },
    1167 
    +    { value: "var(--color-accent-tor-light)", name: "--link-color-tor-light" },
    1168 
    +    { value: "var(--color-accent-tor-dark)", name: "--link-color-tor-dark" },
    1169 
    +    {
    1170 
    +      value: {
    1171 
    +        light: "var(--link-color-tor-light)",
    1172 
    +        dark: "var(--link-color-tor-dark)",
    1173 
    +        prefersContrast: "var(--link-color)",
    1174 
    +        forcedColors: "var(--link-color)",
    1175 
    +        default:
    1176 
    +          "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
    1177 
    +      },
    1178 
    +      name: "--link-color-tor",
    1179 
    +    },
    1180 
    +    {
    1181 
    +      value: "var(--color-accent-tor-hover-light)",
    1182 
    +      name: "--link-color-tor-hover-light",
    1183 
    +    },
    1184 
    +    {
    1185 
    +      value: "var(--color-accent-tor-hover-dark)",
    1186 
    +      name: "--link-color-tor-hover-dark",
    1187 
    +    },
    1188 
    +    {
    1189 
    +      value: {
    1190 
    +        light: "var(--link-color-tor-hover-light)",
    1191 
    +        dark: "var(--link-color-tor-hover-dark)",
    1192 
    +        prefersContrast: "var(--link-color-hover)",
    1193 
    +        forcedColors: "var(--link-color-hover)",
    1194 
    +        default:
    1195 
    +          "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
    1196 
    +      },
    1197 
    +      name: "--link-color-tor-hover",
    1198 
    +    },
    1199 
    +    {
    1200 
    +      value: "var(--color-accent-tor-active-light)",
    1201 
    +      name: "--link-color-tor-active-light",
    1202 
    +    },
    1203 
    +    {
    1204 
    +      value: "var(--color-accent-tor-active-dark)",
    1205 
    +      name: "--link-color-tor-active-dark",
    1206 
    +    },
    1207 
    +    {
    1208 
    +      value: {
    1209 
    +        light: "var(--link-color-tor-active-light)",
    1210 
    +        dark: "var(--link-color-tor-active-dark)",
    1211 
    +        prefersContrast: "var(--link-color-active)",
    1212 
    +        forcedColors: "var(--link-color-active)",
    1213 
    +        default:
    1214 
    +          "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
    1215 
    +      },
    1216 
    +      name: "--link-color-tor-active",
    1217 
    +    },
    996 1218 
         {
    997 1219 
           value: {
    998 1220 
             prefersContrast: "CanvasText",
    ... ... @@ -1047,6 +1269,19 @@ export const tokensTable = {
    1047 1269 
           },
    1048 1270 
           name: "--text-color-list-item-hover",
    1049 1271 
         },
    1272 
    +    { value: "var(--color-purple-60)", name: "--text-color-tor-light" },
    1273 
    +    { value: "var(--color-purple-20)", name: "--text-color-tor-dark" },
    1274 
    +    {
    1275 
    +      value: {
    1276 
    +        light: "var(--text-color-tor-light)",
    1277 
    +        dark: "var(--text-color-tor-dark)",
    1278 
    +        prefersContrast: "inherit",
    1279 
    +        forcedColors: "inherit",
    1280 
    +        default:
    1281 
    +          "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
    1282 
    +      },
    1283 
    +      name: "--text-color-tor",
    1284 
    +    },
    1050 1285 
       ],
    1051 1286 
       outline: [
    1052 1287 
         {
    ... ... @@ -1060,6 +1295,25 @@ export const tokensTable = {
    1060 1295 
           },
    1061 1296 
           name: "--focus-outline-color",
    1062 1297 
         },
    1298 
    +    {
    1299 
    +      value: "var(--color-accent-tor-light)",
    1300 
    +      name: "--focus-outline-color-tor-light",
    1301 
    +    },
    1302 
    +    {
    1303 
    +      value: "var(--color-accent-tor-dark)",
    1304 
    +      name: "--focus-outline-color-tor-dark",
    1305 
    +    },
    1306 
    +    {
    1307 
    +      value: {
    1308 
    +        light: "var(--focus-outline-color-tor-light)",
    1309 
    +        dark: "var(--focus-outline-color-tor-dark)",
    1310 
    +        prefersContrast: "var(--focus-outline-color)",
    1311 
    +        forcedColors: "var(--focus-outline-color)",
    1312 
    +        default:
    1313 
    +          "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
    1314 
    +      },
    1315 
    +      name: "--focus-outline-color-tor",
    1316 
    +    },
    1063 1317 
         {
    1064 1318 
           value: "calc(-1 * var(--focus-outline-width))",
    1065 1319 
           name: "--focus-outline-inset",
    ... ... @@ -1341,6 +1595,40 @@ export const variableLookupTable = {
    1341 1595 
       "button-background-color-ghost-selected":
    1342 1596 
         "var(--button-background-color-ghost-active)",
    1343 1597 
       "button-background-color-selected": "var(--button-background-color-active)",
    1598 
    +  "button-background-color-tor-light": "var(--color-accent-tor-light)",
    1599 
    +  "button-background-color-tor-dark": "var(--color-accent-tor-dark)",
    1600 
    +  "button-background-color-tor": {
    1601 
    +    light: "var(--button-background-color-tor-light)",
    1602 
    +    dark: "var(--button-background-color-tor-dark)",
    1603 
    +    prefersContrast: "var(--button-background-color-primary)",
    1604 
    +    forcedColors: "var(--button-background-color-primary)",
    1605 
    +    default:
    1606 
    +      "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
    1607 
    +  },
    1608 
    +  "button-background-color-tor-hover-light":
    1609 
    +    "var(--color-accent-tor-hover-light)",
    1610 
    +  "button-background-color-tor-hover-dark":
    1611 
    +    "var(--color-accent-tor-hover-dark)",
    1612 
    +  "button-background-color-tor-hover": {
    1613 
    +    light: "var(--button-background-color-tor-hover-light)",
    1614 
    +    dark: "var(--button-background-color-tor-hover-dark)",
    1615 
    +    prefersContrast: "var(--button-background-color-primary-hover)",
    1616 
    +    forcedColors: "var(--button-background-color-primary-hover)",
    1617 
    +    default:
    1618 
    +      "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
    1619 
    +  },
    1620 
    +  "button-background-color-tor-active-light":
    1621 
    +    "var(--color-accent-tor-active-light)",
    1622 
    +  "button-background-color-tor-active-dark":
    1623 
    +    "var(--color-accent-tor-active-dark)",
    1624 
    +  "button-background-color-tor-active": {
    1625 
    +    light: "var(--button-background-color-tor-active-light)",
    1626 
    +    dark: "var(--button-background-color-tor-active-dark)",
    1627 
    +    prefersContrast: "var(--button-background-color-primary-active)",
    1628 
    +    forcedColors: "var(--button-background-color-primary-active)",
    1629 
    +    default:
    1630 
    +      "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
    1631 
    +  },
    1344 1632 
       "button-border": "var(--border-width) solid var(--button-border-color)",
    1345 1633 
       "button-border-color": {
    1346 1634 
         default: "transparent",
    ... ... @@ -1502,6 +1790,36 @@ export const variableLookupTable = {
    1502 1790 
       "button-text-color-primary-selected":
    1503 1791 
         "var(--button-text-color-primary-active)",
    1504 1792 
       "button-text-color-selected": "var(--button-text-color-active)",
    1793 
    +  "button-text-color-tor-light": "var(--color-gray-05)",
    1794 
    +  "button-text-color-tor-dark": "var(--color-gray-100)",
    1795 
    +  "button-text-color-tor": {
    1796 
    +    light: "var(--button-text-color-tor-light)",
    1797 
    +    dark: "var(--button-text-color-tor-dark)",
    1798 
    +    prefersContrast: "var(--button-text-color-primary)",
    1799 
    +    forcedColors: "var(--button-text-color-primary)",
    1800 
    +    default:
    1801 
    +      "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
    1802 
    +  },
    1803 
    +  "button-text-color-tor-hover-light": "var(--color-gray-05)",
    1804 
    +  "button-text-color-tor-hover-dark": "var(--color-gray-100)",
    1805 
    +  "button-text-color-tor-hover": {
    1806 
    +    light: "var(--button-text-color-tor-hover-light)",
    1807 
    +    dark: "var(--button-text-color-tor-hover-dark)",
    1808 
    +    prefersContrast: "var(--button-text-color-primary-hover)",
    1809 
    +    forcedColors: "var(--button-text-color-primary-hover)",
    1810 
    +    default:
    1811 
    +      "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
    1812 
    +  },
    1813 
    +  "button-text-color-tor-active-light": "var(--color-gray-05)",
    1814 
    +  "button-text-color-tor-active-dark": "var(--color-gray-100)",
    1815 
    +  "button-text-color-tor-active": {
    1816 
    +    light: "var(--button-text-color-tor-active-light)",
    1817 
    +    dark: "var(--button-text-color-tor-active-dark)",
    1818 
    +    prefersContrast: "var(--button-text-color-primary-active)",
    1819 
    +    forcedColors: "var(--button-text-color-primary-active)",
    1820 
    +    default:
    1821 
    +      "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
    1822 
    +  },
    1505 1823 
       "checkbox-margin-inline": "var(--space-small)",
    1506 1824 
       "checkbox-size": "var(--size-item-small)",
    1507 1825 
       "color-gray-20": "#f0f0f4",
    ... ... @@ -1681,12 +1999,52 @@ export const variableLookupTable = {
    1681 1999 
         },
    1682 2000 
         platform: { default: "SelectedItem" },
    1683 2001 
       },
    2002 
    +  "color-accent-tor-light": "var(--color-purple-60)",
    2003 
    +  "color-accent-tor-dark": "var(--color-purple-30)",
    2004 
    +  "color-accent-tor": {
    2005 
    +    light: "var(--color-accent-tor-light)",
    2006 
    +    dark: "var(--color-accent-tor-dark)",
    2007 
    +    prefersContrast: "var(--color-accent-primary)",
    2008 
    +    forcedColors: "var(--color-accent-primary)",
    2009 
    +    default:
    2010 
    +      "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
    2011 
    +  },
    2012 
    +  "color-accent-tor-hover-light": "var(--color-purple-70)",
    2013 
    +  "color-accent-tor-hover-dark": "var(--color-purple-20)",
    2014 
    +  "color-accent-tor-hover": {
    2015 
    +    light: "var(--color-accent-tor-hover-light)",
    2016 
    +    dark: "var(--color-accent-tor-hover-dark)",
    2017 
    +    prefersContrast: "var(--color-accent-primary-hover)",
    2018 
    +    forcedColors: "var(--color-accent-primary-hover)",
    2019 
    +    default:
    2020 
    +      "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
    2021 
    +  },
    2022 
    +  "color-accent-tor-active-light": "var(--color-purple-80)",
    2023 
    +  "color-accent-tor-active-dark": "var(--color-purple-10)",
    2024 
    +  "color-accent-tor-active": {
    2025 
    +    light: "var(--color-accent-tor-active-light)",
    2026 
    +    dark: "var(--color-accent-tor-active-dark)",
    2027 
    +    prefersContrast: "var(--color-accent-primary-active)",
    2028 
    +    forcedColors: "var(--color-accent-primary-active)",
    2029 
    +    default:
    2030 
    +      "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
    2031 
    +  },
    1684 2032 
       "focus-outline":
    1685 2033 
         "var(--focus-outline-width) solid var(--focus-outline-color)",
    1686 2034 
       "focus-outline-color": {
    1687 2035 
         default: "var(--color-accent-primary)",
    1688 2036 
         forcedColors: "var(--text-color)",
    1689 2037 
       },
    2038 
    +  "focus-outline-color-tor-light": "var(--color-accent-tor-light)",
    2039 
    +  "focus-outline-color-tor-dark": "var(--color-accent-tor-dark)",
    2040 
    +  "focus-outline-color-tor": {
    2041 
    +    light: "var(--focus-outline-color-tor-light)",
    2042 
    +    dark: "var(--focus-outline-color-tor-dark)",
    2043 
    +    prefersContrast: "var(--focus-outline-color)",
    2044 
    +    forcedColors: "var(--focus-outline-color)",
    2045 
    +    default:
    2046 
    +      "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
    2047 
    +  },
    1690 2048 
       "focus-outline-inset": "calc(-1 * var(--focus-outline-width))",
    1691 2049 
       "focus-outline-offset": "2px",
    1692 2050 
       "focus-outline-width": "2px",
    ... ... @@ -1786,6 +2144,36 @@ export const variableLookupTable = {
    1786 2144 
         brand: { default: "var(--link-color)" },
    1787 2145 
         platform: { default: "var(--link-color)" },
    1788 2146 
       },
    2147 
    +  "link-color-tor-light": "var(--color-accent-tor-light)",
    2148 
    +  "link-color-tor-dark": "var(--color-accent-tor-dark)",
    2149 
    +  "link-color-tor": {
    2150 
    +    light: "var(--link-color-tor-light)",
    2151 
    +    dark: "var(--link-color-tor-dark)",
    2152 
    +    prefersContrast: "var(--link-color)",
    2153 
    +    forcedColors: "var(--link-color)",
    2154 
    +    default:
    2155 
    +      "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
    2156 
    +  },
    2157 
    +  "link-color-tor-hover-light": "var(--color-accent-tor-hover-light)",
    2158 
    +  "link-color-tor-hover-dark": "var(--color-accent-tor-hover-dark)",
    2159 
    +  "link-color-tor-hover": {
    2160 
    +    light: "var(--link-color-tor-hover-light)",
    2161 
    +    dark: "var(--link-color-tor-hover-dark)",
    2162 
    +    prefersContrast: "var(--link-color-hover)",
    2163 
    +    forcedColors: "var(--link-color-hover)",
    2164 
    +    default:
    2165 
    +      "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
    2166 
    +  },
    2167 
    +  "link-color-tor-active-light": "var(--color-accent-tor-active-light)",
    2168 
    +  "link-color-tor-active-dark": "var(--color-accent-tor-active-dark)",
    2169 
    +  "link-color-tor-active": {
    2170 
    +    light: "var(--link-color-tor-active-light)",
    2171 
    +    dark: "var(--link-color-tor-active-dark)",
    2172 
    +    prefersContrast: "var(--link-color-active)",
    2173 
    +    forcedColors: "var(--link-color-active)",
    2174 
    +    default:
    2175 
    +      "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
    2176 
    +  },
    1789 2177 
       "link-focus-outline-offset": "1px",
    1790 2178 
       "outline-color-error": {
    1791 2179 
         light: "var(--color-red-70)",
    ... ... @@ -1889,4 +2277,14 @@ export const variableLookupTable = {
    1889 2277 
         default: "var(--text-color)",
    1890 2278 
         prefersContrast: "SelectedItemText",
    1891 2279 
       },
    2280 
    +  "text-color-tor-light": "var(--color-purple-60)",
    2281 
    +  "text-color-tor-dark": "var(--color-purple-20)",
    2282 
    +  "text-color-tor": {
    2283 
    +    light: "var(--text-color-tor-light)",
    2284 
    +    dark: "var(--text-color-tor-dark)",
    2285 
    +    prefersContrast: "inherit",
    2286 
    +    forcedColors: "inherit",
    2287 
    +    default:
    2288 
    +      "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
    2289 
    +  },
    1892 2290 
     };

  • toolkit/themes/shared/design-system/src/design-tokens.json
    ... ... @@ -325,6 +325,42 @@
    325 325 
             },
    326 326 
             "selected": {
    327 327 
               "value": "{button.background.color.active}"
    328 
    +        },
    329 
    +        "tor": {
    330 
    +          "light": { "value": "{color.accent.tor.light}" },
    331 
    +          "dark": { "value": "{color.accent.tor.dark}" },
    332 
    +          "@base": {
    333 
    +            "value": {
    334 
    +              "light": "{button.background.color.tor.light}",
    335 
    +              "dark": "{button.background.color.tor.dark}",
    336 
    +              "prefersContrast": "{button.background.color.primary.@base}",
    337 
    +              "forcedColors": "{button.background.color.primary.@base}"
    338 
    +            }
    339 
    +          },
    340 
    +          "hover": {
    341 
    +            "light": { "value": "{color.accent.tor.hover.light}" },
    342 
    +            "dark": { "value": "{color.accent.tor.hover.dark}" },
    343 
    +            "@base": {
    344 
    +              "value": {
    345 
    +                "light": "{button.background.color.tor.hover.light}",
    346 
    +                "dark": "{button.background.color.tor.hover.dark}",
    347 
    +                "prefersContrast": "{button.background.color.primary.hover}",
    348 
    +                "forcedColors": "{button.background.color.primary.hover}"
    349 
    +              }
    350 
    +            }
    351 
    +          },
    352 
    +          "active": {
    353 
    +            "light": { "value": "{color.accent.tor.active.light}" },
    354 
    +            "dark": { "value": "{color.accent.tor.active.dark}" },
    355 
    +            "@base": {
    356 
    +              "value": {
    357 
    +                "light": "{button.background.color.tor.active.light}",
    358 
    +                "dark": "{button.background.color.tor.active.dark}",
    359 
    +                "prefersContrast": "{button.background.color.primary.active}",
    360 
    +                "forcedColors": "{button.background.color.primary.active}"
    361 
    +              }
    362 
    +            }
    363 
    +          }
    328 364 
             }
    329 365 
           }
    330 366 
         },
    ... ... @@ -633,6 +669,42 @@
    633 669 
             },
    634 670 
             "selected": {
    635 671 
               "value": "{button.text.color.active}"
    672 
    +        },
    673 
    +        "tor": {
    674 
    +          "light": { "value": "{color.gray.05}" },
    675 
    +          "dark": { "value": "{color.gray.100}" },
    676 
    +          "@base": {
    677 
    +            "value": {
    678 
    +              "light": "{button.text.color.tor.light}",
    679 
    +              "dark": "{button.text.color.tor.dark}",
    680 
    +              "prefersContrast": "{button.text.color.primary.@base}",
    681 
    +              "forcedColors": "{button.text.color.primary.@base}"
    682 
    +            }
    683 
    +          },
    684 
    +          "hover": {
    685 
    +            "light": { "value": "{color.gray.05}" },
    686 
    +            "dark": { "value": "{color.gray.100}" },
    687 
    +            "@base": {
    688 
    +              "value": {
    689 
    +                "light": "{button.text.color.tor.hover.light}",
    690 
    +                "dark": "{button.text.color.tor.hover.dark}",
    691 
    +                "prefersContrast": "{button.text.color.primary.hover}",
    692 
    +                "forcedColors": "{button.text.color.primary.hover}"
    693 
    +              }
    694 
    +            }
    695 
    +          },
    696 
    +          "active": {
    697 
    +            "light": { "value": "{color.gray.05}" },
    698 
    +            "dark": { "value": "{color.gray.100}" },
    699 
    +            "@base": {
    700 
    +              "value": {
    701 
    +                "light": "{button.text.color.tor.active.light}",
    702 
    +                "dark": "{button.text.color.tor.active.dark}",
    703 
    +                "prefersContrast": "{button.text.color.primary.active}",
    704 
    +                "forcedColors": "{button.text.color.primary.active}"
    705 
    +              }
    706 
    +            }
    707 
    +          }
    636 708 
             }
    637 709 
           }
    638 710 
         }
    ... ... @@ -1138,18 +1210,68 @@
    1138 1210 
                 }
    1139 1211 
               }
    1140 1212 
             }
    1213 
    +      },
    1214 
    +      "tor": {
    1215 
    +        "light": { "value": "{color.purple.60}" },
    1216 
    +        "dark": { "value": "{color.purple.30}" },
    1217 
    +        "@base": {
    1218 
    +          "value": {
    1219 
    +            "light": "{color.accent.tor.light}",
    1220 
    +            "dark": "{color.accent.tor.dark}",
    1221 
    +            "prefersContrast": "{color.accent.primary.@base}",
    1222 
    +            "forcedColors": "{color.accent.primary.@base}"
    1223 
    +          }
    1224 
    +        },
    1225 
    +        "hover": {
    1226 
    +          "light": { "value": "{color.purple.70}" },
    1227 
    +          "dark": { "value": "{color.purple.20}" },
    1228 
    +          "@base": {
    1229 
    +            "value": {
    1230 
    +              "light": "{color.accent.tor.hover.light}",
    1231 
    +              "dark": "{color.accent.tor.hover.dark}",
    1232 
    +              "prefersContrast": "{color.accent.primary.hover}",
    1233 
    +              "forcedColors": "{color.accent.primary.hover}"
    1234 
    +            }
    1235 
    +          }
    1236 
    +        },
    1237 
    +        "active": {
    1238 
    +          "light": { "value": "{color.purple.80}" },
    1239 
    +          "dark": { "value": "{color.purple.10}" },
    1240 
    +          "@base": {
    1241 
    +            "value": {
    1242 
    +              "light": "{color.accent.tor.active.light}",
    1243 
    +              "dark": "{color.accent.tor.active.dark}",
    1244 
    +              "prefersContrast": "{color.accent.primary.active}",
    1245 
    +              "forcedColors": "{color.accent.primary.active}"
    1246 
    +            }
    1247 
    +          }
    1248 
    +        }
    1141 1249 
           }
    1142 1250 
         }
    1143 1251 
       },
    1144 1252 
       "focus": {
    1145 1253 
         "outline": {
    1146 1254 
           "@base": {
    1147 
    -        "value": "{focus.outline.width} solid {focus.outline.color}"
    1255 
    +        "value": "{focus.outline.width} solid {focus.outline.color.@base}"
    1148 1256 
           },
    1149 1257 
           "color": {
    1150 
    -        "value": {
    1151 
    -          "default": "{color.accent.primary.@base}",
    1152 
    -          "forcedColors": "{text.color.@base}"
    1258 
    +        "@base": {
    1259 
    +          "value": {
    1260 
    +            "default": "{color.accent.primary.@base}",
    1261 
    +            "forcedColors": "{text.color.@base}"
    1262 
    +          }
    1263 
    +        },
    1264 
    +        "tor": {
    1265 
    +          "light": { "value": "{color.accent.tor.light}" },
    1266 
    +          "dark": { "value": "{color.accent.tor.dark}" },
    1267 
    +          "@base": {
    1268 
    +            "value": {
    1269 
    +              "light": "{focus.outline.color.tor.light}",
    1270 
    +              "dark": "{focus.outline.color.tor.dark}",
    1271 
    +              "prefersContrast": "{focus.outline.color.@base}",
    1272 
    +              "forcedColors": "{focus.outline.color.@base}"
    1273 
    +            }
    1274 
    +          }
    1153 1275 
             }
    1154 1276 
           },
    1155 1277 
           "inset": {
    ... ... @@ -1385,6 +1507,42 @@
    1385 1507 
                 "default": "{link.color.@base}"
    1386 1508 
               }
    1387 1509 
             }
    1510 
    +      },
    1511 
    +      "tor": {
    1512 
    +        "light": { "value": "{color.accent.tor.light}" },
    1513 
    +        "dark": { "value": "{color.accent.tor.dark}" },
    1514 
    +        "@base": {
    1515 
    +          "value": {
    1516 
    +            "light": "{link.color.tor.light}",
    1517 
    +            "dark": "{link.color.tor.dark}",
    1518 
    +            "prefersContrast": "{link.color.@base}",
    1519 
    +            "forcedColors": "{link.color.@base}"
    1520 
    +          }
    1521 
    +        },
    1522 
    +        "hover": {
    1523 
    +          "light": { "value": "{color.accent.tor.hover.light}" },
    1524 
    +          "dark": { "value": "{color.accent.tor.hover.dark}" },
    1525 
    +          "@base": {
    1526 
    +            "value": {
    1527 
    +              "light": "{link.color.tor.hover.light}",
    1528 
    +              "dark": "{link.color.tor.hover.dark}",
    1529 
    +              "prefersContrast": "{link.color.hover}",
    1530 
    +              "forcedColors": "{link.color.hover}"
    1531 
    +            }
    1532 
    +          }
    1533 
    +        },
    1534 
    +        "active": {
    1535 
    +          "light": { "value": "{color.accent.tor.active.light}" },
    1536 
    +          "dark": { "value": "{color.accent.tor.active.dark}" },
    1537 
    +          "@base": {
    1538 
    +            "value": {
    1539 
    +              "light": "{link.color.tor.active.light}",
    1540 
    +              "dark": "{link.color.tor.active.dark}",
    1541 
    +              "prefersContrast": "{link.color.active}",
    1542 
    +              "forcedColors": "{link.color.active}"
    1543 
    +            }
    1544 
    +          }
    1545 
    +        }
    1388 1546 
           }
    1389 1547 
         },
    1390 1548 
         "focus": {
    ... ... @@ -1619,6 +1777,18 @@
    1619 1777 
                 }
    1620 1778 
               }
    1621 1779 
             }
    1780 
    +      },
    1781 
    +      "tor": {
    1782 
    +        "light": { "value": "{color.purple.60}" },
    1783 
    +        "dark": { "value": "{color.purple.20}" },
    1784 
    +        "@base": {
    1785 
    +          "value": {
    1786 
    +            "light": "{text.color.tor.light}",
    1787 
    +            "dark": "{text.color.tor.dark}",
    1788 
    +            "prefersContrast": "inherit",
    1789 
    +            "forcedColors": "inherit"
    1790 
    +          }
    1791 
    +        }
    1622 1792 
           }
    1623 1793 
         }
    1624 1794 
       }

  • toolkit/themes/shared/desktop-jar.inc.mn
    ... ... @@ -49,7 +49,7 @@
    49 49 
       skin/classic/global/tabbox.css                           (../../shared/tabbox.css)
    50 50 
       skin/classic/global/toolbar.css                          (../../shared/toolbar.css)
    51 51 
       skin/classic/global/toolbarbutton.css                    (../../shared/toolbarbutton.css)
    52 
    -  skin/classic/global/tor-colors.css                       (../../shared/tor-colors.css)
    52 
    +  skin/classic/global/tor-common.css                       (../../shared/tor-common.css)
    53 53 
       skin/classic/global/tree/tree.css                        (../../shared/tree/tree.css)
    54 54 
       skin/classic/global/dirListing/dirListing.css            (../../shared/dirListing/dirListing.css)
    55 55 
     #ifdef XP_MACOSX

  • toolkit/themes/shared/tor-colors.css deleted
    1 
    -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
    2 
    -
    3 
    -:root {
    4 
    -  /* On light backgrounds. */
    5 
    -  --tor-accent-color-light: var(--color-purple-60);
    6 
    -  --tor-accent-color-hover-light: var(--color-purple-70);
    7 
    -  --tor-accent-color-active-light: var(--color-purple-80);
    8 
    -  /* Color for text on --background-color-canvas. */
    9 
    -  --tor-text-color-light: var(--color-purple-60);
    10 
    -  /* Buttons. */
    11 
    -  --tor-button-text-color-light: var(--color-gray-05);
    12 
    -  --tor-button-text-color-hover-light: var(--color-gray-05);
    13 
    -  --tor-button-text-color-active-light: var(--color-gray-05);
    14 
    -  --tor-button-background-color-light: var(--tor-accent-color-light);
    15 
    -  --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
    16 
    -  --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
    17 
    -  --tor-focus-outline-color-light: var(--tor-accent-color-light);
    18 
    -  /* Links. */
    19 
    -  --tor-link-color-light: var(--tor-accent-color-light);
    20 
    -  --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
    21 
    -  --tor-link-color-active-light: var(--tor-accent-color-active-light);
    22 
    -
    23 
    -  /* On dark backgrounds. */
    24 
    -  --tor-accent-color-dark: var(--color-purple-30);
    25 
    -  --tor-accent-color-hover-dark: var(--color-purple-20);
    26 
    -  --tor-accent-color-active-dark: var(--color-purple-10);
    27 
    -  /* Color for text on --background-color-canvas. */
    28 
    -  --tor-text-color-dark: var(--color-purple-20);
    29 
    -  /* Buttons. */
    30 
    -  --tor-button-text-color-dark: var(--color-gray-100);
    31 
    -  --tor-button-text-color-hover-dark: var(--color-gray-100);
    32 
    -  --tor-button-text-color-active-dark: var(--color-gray-100);
    33 
    -  --tor-button-background-color-dark: var(--tor-accent-color-dark);
    34 
    -  --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
    35 
    -  --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
    36 
    -  --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
    37 
    -  /* Links. */
    38 
    -  --tor-link-color-dark: var(--tor-accent-color-dark);
    39 
    -  --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
    40 
    -  --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
    41 
    -
    42 
    -  /* Generic colors that adapt to theme. */
    43 
    -  --tor-accent-color: light-dark(var(--tor-accent-color-light), var(--tor-accent-color-dark));
    44 
    -  --tor-accent-color-hover: light-dark(var(--tor-accent-color-hover-light), var(--tor-accent-color-hover-dark));
    45 
    -  --tor-accent-color-active: light-dark(var(--tor-accent-color-active-light), var(--tor-accent-color-active-dark));
    46 
    -  --tor-text-color: light-dark(var(--tor-text-color-light), var(--tor-text-color-dark));
    47 
    -  --tor-button-text-color: light-dark(var(--tor-button-text-color-light), var(--tor-button-text-color-dark));
    48 
    -  --tor-button-text-color-hover: light-dark(var(--tor-button-text-color-hover-light), var(--tor-button-text-color-hover-dark));
    49 
    -  --tor-button-text-color-active: light-dark(var(--tor-button-text-color-active-light), var(--tor-button-text-color-active-dark));
    50 
    -  --tor-button-background-color: light-dark(var(--tor-button-background-color-light), var(--tor-button-background-color-dark));
    51 
    -  --tor-button-background-color-hover: light-dark(var(--tor-button-background-color-hover-light), var(--tor-button-background-color-hover-dark));
    52 
    -  --tor-button-background-color-active: light-dark(var(--tor-button-background-color-active-light), var(--tor-button-background-color-active-dark));
    53 
    -  --tor-focus-outline-color: light-dark(var(--tor-focus-outline-color-light), var(--tor-focus-outline-color-dark));
    54 
    -  --tor-link-color: light-dark(var(--tor-link-color-light), var(--tor-link-color-dark));
    55 
    -  --tor-link-color-hover: light-dark(var(--tor-link-color-hover-light), var(--tor-link-color-hover-dark));
    56 
    -  --tor-link-color-active: light-dark(var(--tor-link-color-active-light), var(--tor-link-color-active-dark));
    57 
    -}
    58 
    -
    59 
    -@media ((prefers-contrast) or (forced-colors)) {
    60 
    -  :root {
    61 
    -    /* Use Firefox design system accent colors. */
    62 
    -    --tor-accent-color: var(--color-accent-primary);
    63 
    -    --tor-accent-color-hover: var(--color-accent-primary-hover);
    64 
    -    --tor-accent-color-active: var(--color-accent-primary-active);
    65 
    -
    66 
    -    /* Match surrounding text. */
    67 
    -    --tor-text-color: currentColor;
    68 
    -
    69 
    -    /* Use Firefox design system primary button colors. */
    70 
    -    --tor-button-text-color: var(--button-text-color-primary);
    71 
    -    --tor-button-text-color-hover: var(--button-text-color-primary-hover);
    72 
    -    --tor-button-text-color-active: var(--button-text-color-primary-active);
    73 
    -    --tor-button-background-color: var(--button-background-color-primary);
    74 
    -    --tor-button-background-color-hover: var(--button-background-color-primary-hover);
    75 
    -    --tor-button-background-color-active: var(--button-background-color-primary-active);
    76 
    -
    77 
    -    /* Use Firefox design system default colors. */
    78 
    -    --tor-focus-outline-color: var(--focus-outline-color);
    79 
    -    --tor-link-color: var(--link-color);
    80 
    -    --tor-link-color-hover: var(--link-color-hover);
    81 
    -    --tor-link-color-active: var(--link-color-active);
    82 
    -  }
    83 
    -}
    84 
    -
    85 
    -/* Has a higher specificity than `button` and `button.primary`. */
    86 
    -button.tor-button:is(*, .primary),
    87 
    -xul|button.tor-button:is(*, [default]),
    88 
    -.tor-button {
    89 
    -  color: var(--tor-button-text-color);
    90 
    -  background-color: var(--tor-button-background-color);
    91 
    -}
    92 
    -
    93 
    -:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
    94 
    -  color: var(--tor-button-text-color-hover);
    95 
    -  background-color: var(--tor-button-background-color-hover);
    96 
    -}
    97 
    -
    98 
    -:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
    99 
    -  color: var(--tor-button-text-color-active);
    100 
    -  background-color: var(--tor-button-background-color-active);
    101 
    -}
    102 
    -
    103 
    -:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
    104 
    -  outline-color: var(--tor-focus-outline-color);
    105 
    -}

  • toolkit/themes/shared/tor-common.css
    1 
    +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
    2 
    +
    3 
    +/* Has a higher specificity than `button` and `button.primary`. */
    4 
    +button.tor-button:is(*, .primary),
    5 
    +xul|button.tor-button:is(*, [default]),
    6 
    +.tor-button {
    7 
    +  color: var(--button-text-color-tor);
    8 
    +  background-color: var(--button-background-color-tor);
    9 
    +}
    10 
    +
    11 
    +:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
    12 
    +  color: var(--button-text-color-tor-hover);
    13 
    +  background-color: var(--button-background-color-tor-hover);
    14 
    +}
    15 
    +
    16 
    +:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
    17 
    +  color: var(--button-text-color-tor-active);
    18 
    +  background-color: var(--button-background-color-tor-active);
    19 
    +}
    20 
    +
    21 
    +:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
    22 
    +  outline-color: var(--focus-outline-color-tor);
    23 
    +}

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help Notification message regarding https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/45691865627db6d551761aba3f4f1d53b81b71fa...dbee23bb7d705d1fc5097be08f58e67af3496c0d at 1772732100