[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-148.0a1-16.0-2] 12 commits: fixup! BB 42728: Modify ./mach lint to skip unused linters

5 Mar 2026


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


Commits:
f9003fe3 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 42728: Modify ./mach lint to skip unused linters

TB 44406: Re-enable stylelint.

- - - - -
d28011e1 by Henry Wilkes at 2026-03-05T17:34:22+00:00
amend! TB 41817: tor-browser semantic colors.

TB 41817: tor-browser semantic styling.

Note for rebases
================

DO NOT MANUALLY RESOLVE CONFLICTS in the following directory:
  toolkit/themes/shared/design-system/dist/

These files are generated by `./mach buildtokens`.
See tor-browser#44406.

When resolving conflicts, first resolve other conflicts outside the
'dist' directory, if there are any:

  git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'

Then regenerate these 'dist' files:

  ./mach buildtokens

Then add the generated files as resolved:

  git add toolkit/themes/shared/design-system/dist/

- - - - -
5a02868a by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 40925: Implemented the Security Level component

TB 44406: Use size tokens.

- - - - -
b1dd6076 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 32308: Use direct browser sizing for letterboxing.

TB 44406: Use size tokens.

- - - - -
d698a94d by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing.

TB 44406: Use size tokens.

- - - - -
838343b0 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 7494: Create local home page for TBB.

TB 44406: Use size tokens.

- - - - -
c5b30f96 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 30237: Add v3 onion services client authentication prompt

TB 44406: Use size tokens.

- - - - -
7a8a80b9 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 40458: Implement .tor.onion aliases

TB 44406: Use size tokens.

- - - - -
80e20a04 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 41600: Add a tor circuit display panel.

TB 44406: Use size tokens.

- - - - -
80b3e2f0 by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

TB 44406: Use size tokens.

- - - - -
bfe30c8d by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser

TB 44406: Use size tokens.

- - - - -
dbee23bb by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 40701: Add security warning when downloading a file

TB 44406: Use size tokens.

- - - - -


30 changed files:

- .stylelintrc.js
- browser/components/abouttor/content/aboutTor.css
- browser/components/onionservices/content/authPreferences.css
- browser/components/onionservices/content/onionservices.css
- browser/components/rulesets/content/aboutRulesets.css
- browser/components/securitylevel/content/securityLevelPanel.css
- browser/components/securitylevel/content/securityLevelPreferences.css
- browser/components/torcircuit/content/torCircuitPanel.css
- browser/components/torpreferences/content/torPreferences.css
- browser/themes/shared/browser-shared.css
- browser/themes/shared/downloads/contentAreaDownloadsView.css
- browser/themes/shared/tabbrowser/content-area.css
- browser/themes/shared/tor-urlbar-button.css
- python/mozlint/mozlint/cli.py
- toolkit/components/resistfingerprinting/content/letterboxing.css
- toolkit/components/torconnect/content/aboutTorConnect.css
- toolkit/components/torconnect/content/aboutTorConnect.html
- toolkit/components/torconnect/content/torConnectTitlebarStatus.css
- toolkit/themes/shared/design-system/config/tokens-config.js
- toolkit/themes/shared/design-system/dist/tokens-brand.css
- toolkit/themes/shared/design-system/dist/tokens-figma-colors.json
- toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json
- toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
- toolkit/themes/shared/design-system/dist/tokens-platform.css
- toolkit/themes/shared/design-system/dist/tokens-shared.css
- toolkit/themes/shared/design-system/dist/tokens-table.mjs
- toolkit/themes/shared/design-system/src/design-tokens.json
- toolkit/themes/shared/desktop-jar.inc.mn
- − toolkit/themes/shared/tor-colors.css
- + toolkit/themes/shared/tor-common.css


Changes:

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


=====================================
browser/components/abouttor/content/aboutTor.css
=====================================
@@ -1,4 +1,3 @@
-@import url("chrome://global/skin/tor-colors.css");
 @import url("chrome://global/skin/onion-pattern.css");
 
 body {
@@ -23,7 +22,7 @@ body {
     /* NOTE: "form" will be given a maximum width of --form-max-width. */
     / 1fr minmax(max-content, var(--form-max-width)) 1fr;
   justify-items: center;
-  padding-inline: 20px;
+  padding-inline: var(--space-large);
 }
 
 body:not(.initialized) {
@@ -37,12 +36,10 @@ h1 {
   grid-area: heading;
   display: flex;
   align-items: center;
-  gap: 16px;
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
+  gap: var(--space-large);
   font-size: 40px;
   margin-block-start: 0;
-  margin-block-end: 40px;
-  margin-inline: 20px;
+  margin-block-end: var(--space-small);
 }
 
 #tor-browser-logo {
@@ -61,17 +58,17 @@ body:not(.is-testing) #tor-browser-home-heading-testing {
 #tor-check {
   grid-area: tor-check;
   display: flex;
-  gap: 10px;
+  gap: var(--space-small);
   align-items: center;
-  padding-inline: 23px;
-  padding-block: 11px;
+  padding-inline: var(--space-xlarge);
+  padding-block: var(--space-medium);
   border-radius: var(--border-radius-medium);
-  margin-block-start: 0;
-  margin-block-end: 30px;
+  margin-block-start: var(--space-xxlarge);
+  margin-block-end: 0;
 }
 
 .tor-home-box {
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   background-color: var(--background-color-box-info);
   max-width: var(--form-max-width);
   width: -moz-available;
@@ -84,8 +81,8 @@ body:not(.show-tor-check) #tor-check {
 
 #tor-check-icon {
   flex: 0 0 auto;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -97,31 +94,31 @@ body:not(.show-tor-check) #tor-check {
 .home-message {
   grid-area: message;
   text-align: center;
-  margin-block: 1.6em;
+  margin-block: var(--space-xlarge);
 }
 
 .message-emoji {
-  height: 1em;
+  height: var(--icon-size);
   vertical-align: sub;
-  margin-inline-end: 0.3em;
+  margin-inline-end: var(--space-xsmall);
 }
 
 #search-form {
   grid-area: form;
   /* Occupy the entire "form" block. */
   justify-self: stretch;
+  margin-block-start: var(--space-xxlarge);
   background: var(--background-color-canvas);
   display: flex;
   align-items: stretch;
   /* Padding between elements. */
-  --form-padding: 12px;
-  --form-border-width: 1px;
+  --form-padding: var(--space-medium);
+  --form-border-width: var(--border-width);
   /* Padding between elements and the parent's border edge. */
   --form-outer-padding: calc(var(--form-padding) - var(--form-border-width));
   --form-radius-container: var(--border-radius-medium);
   --form-radius: calc(var(--form-radius-container) - var(--form-border-width));
-  --logo-size: 30px;
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
+  --logo-size: var(--icon-size-xlarge);
   border-radius: var(--form-radius-container);
   border-width: var(--form-border-width);
   border-style: solid;
@@ -151,12 +148,10 @@ body:not(.show-tor-check) #tor-check {
   padding-inline-end: var(--form-padding);
   padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);
   /* Make sure clickable area does not extend beyond the form's border. */
-  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
   border-start-start-radius: var(--form-radius);
   border-end-start-radius: var(--form-radius);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
-  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
   /* Focus and outline styling move to the parent. */
   background: none;
   border: none;
@@ -168,15 +163,13 @@ body:not(.show-tor-check) #tor-check {
   align-content: center;
   padding-block: var(--form-outer-padding);
   padding-inline-end: var(--form-outer-padding);
-  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
   border-start-end-radius: var(--form-radius);
   border-end-end-radius: var(--form-radius);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
   padding-inline-start: 0;
   /* Non-clickable gap between input and toggle. */
-  margin-inline-start: 0.5em;
+  margin-inline-start: var(--space-small);
 }
 
 #survey {
@@ -188,11 +181,10 @@ body:not(.show-tor-check) #tor-check {
     ". buttons buttons" min-content
     / min-content 1fr min-content;
   border-radius: var(--border-radius-small);
-  /* Remove 1px from padding for border. */
-  padding-block: 3px 11px;
-  padding-inline: 15px 3px;
-  gap: 8px;
-  margin-block-end: 1.6em;
+  padding-block: var(--space-xsmall) var(--space-medium);
+  padding-inline: var(--space-large) var(--space-xsmall);
+  gap: var(--space-small);
+  margin-block-end: var(--space-xlarge);
 }
 
 body:not(.show-survey) #survey {
@@ -205,9 +197,9 @@ body:not(.show-survey) #survey {
 
 #survey-icon {
   grid-area: icon;
-  width: 24px;
-  height: 24px;
-  padding: 8px;
+  width: var(--icon-size-large);
+  height: var(--icon-size-large);
+  padding: var(--space-small);
   border-radius: var(--border-radius-circle);
 }
 
@@ -218,18 +210,18 @@ body:not(.show-survey) #survey {
 
 #survey-icon,
 #survey-heading {
-  margin-block-start: 8px;
+  margin-block-start: var(--space-small);
 }
 
 #survey-body {
   grid-area: body;
-  margin-block-end: 8px;
+  margin-block-end: var(--space-small);
 }
 
 #survey-buttons {
   grid-area: buttons;
   display: flex;
-  gap: 8px;
+  gap: var(--space-small);
 }
 
 #survey-buttons > * {
@@ -248,7 +240,7 @@ body:not(.show-survey) #survey {
   /* On dark background */
   :root {
     background-color: #2c0449;
-    --focus-outline-color: var(--tor-focus-outline-color-dark);
+    --focus-outline-color: var(--focus-outline-color-tor-dark);
     --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
     --onion-pattern-stroke-color: #3e0663;
     --onion-pattern-fill-color: #350556;
@@ -271,9 +263,9 @@ body:not(.show-survey) #survey {
     --button-text-color-ghost: var(--button-text-color);
     --button-text-color-ghost-hover: var(--button-text-color);
     --button-text-color-ghost-active: var(--button-text-color);
-    --link-color: var(--tor-link-color-dark);
-    --link-color-hover: var(--tor-link-color-hover-dark);
-    --link-color-active: var(--tor-link-color-active-dark);
+    --link-color: var(--link-color-tor-dark);
+    --link-color-hover: var(--link-color-tor-hover-dark);
+    --link-color-active: var(--link-color-tor-active-dark);
   }
 
   #search-form {
@@ -286,8 +278,7 @@ body:not(.show-survey) #survey {
   #search-form:has(#search-input:focus-visible) {
     /* Use a light-themed inner-border to contrast with the dark-themed
      * focus outline. */
-    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
-    border-color: var(--tor-focus-outline-color-light);
+    border-color: var(--focus-outline-color-tor-light);
   }
 
   #search-form.onionized-search:has(#search-input:not(:focus-visible)) {
@@ -298,16 +289,16 @@ body:not(.show-survey) #survey {
 
   /* Light background. */
   #search-form > * {
-    --focus-outline-color: var(--tor-focus-outline-color-light);
+    --focus-outline-color: var(--focus-outline-color-tor-light);
     --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
     /* Variables used for --toggle- variables. */
-    --color-accent-primary: var(--tor-button-background-color-light);
-    --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
-    --color-accent-primary-active: var(--tor-button-background-color-active-light);
+    --color-accent-primary: var(--button-background-color-tor-light);
+    --color-accent-primary-hover: var(--button-background-color-tor-hover-light);
+    --color-accent-primary-active: var(--button-background-color-tor-active-light);
   }
 
   #search-form.onionized-search #onionize-toggle {
-    color: var(--tor-link-color-light);
+    color: var(--link-color);
   }
 
   #survey {
@@ -321,9 +312,9 @@ body:not(.show-survey) #survey {
 
   #survey-launch {
     color: var(--text-color-light);
-    --button-background-color-primary: var(--tor-button-background-color-dark);
-    --button-background-color-primary-hover: var(--tor-button-background-color-hover-dark);
-    --button-background-color-primary-active: var(--tor-button-background-color-active-dark);
+    --button-background-color-primary: var(--button-background-color-tor-dark);
+    --button-background-color-primary-hover: var(--button-background-color-tor-hover-dark);
+    --button-background-color-primary-active: var(--button-background-color-tor-active-dark);
   }
 }
 
@@ -342,7 +333,7 @@ body.show-yec h1 {
 #yec-banner {
   grid-area: heading;
   border-radius: var(--border-radius-medium);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   display: grid;
   grid-template:
     "yec-heading yec-image" auto
@@ -356,10 +347,10 @@ body.show-yec h1 {
   padding-inline: 47px 47px;
   box-sizing: border-box;
   max-width: 850px;
-  margin-block-end: 40px;
+  margin-block-end: var(--space-small);
   /* Position for the close button. */
   position: relative;
-  gap: 0 24px;
+  gap: 0 var(--space-xlarge);
 }
 
 #yec-image {
@@ -371,12 +362,12 @@ body.show-yec h1 {
    * contrast or forced color theme. */
   background-color: var(--yec-image-background);
   border-radius: var(--border-radius-medium);
-  padding: 4px;
+  padding: var(--space-xsmall);
   height: 196px;
-  border: 1px solid transparent;
+  border: var(--border-width) solid transparent;
   /* Remove border and padding from the layout size. These parts are only
    * visible in contrast or forced color themes. */
-  margin: -5px;
+  margin: calc(-1 * (var(--border-width) + var(--space-xsmall)));
   /* Do not let forced colors ignore the background-color, which is needed to
    * see the drawing. */
   forced-color-adjust: none;
@@ -388,15 +379,14 @@ body.show-yec h1 {
 
 #yec-heading {
   grid-area: yec-heading;
-  margin-block: 0 16px;
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
+  margin-block: 0 var(--space-large);
   font-size: 64px;
   font-weight: var(--font-weight);
 }
 
 #yec-body {
   grid-area: yec-body;
-  margin-block: 0 12px;
+  margin-block: 0 var(--space-medium);
 }
 
 #yec-body-highlight {
@@ -405,7 +395,7 @@ body.show-yec h1 {
 
 #yec-matching {
   grid-area: yec-matching;
-  margin-block: 0 32px;
+  margin-block: 0 var(--space-xxlarge);
 }
 
 #yec-donate-link {
@@ -414,7 +404,7 @@ body.show-yec h1 {
   /* Style like a button. */
   font-weight: var(--button-font-weight);
   color: var(--button-text-color);
-  border: 1px solid var(--button-border-color);
+  border: var(--border-width) solid var(--button-border-color);
   border-radius: var(--button-border-radius);
   background-color: var(--button-background-color);
   padding: var(--button-padding);
@@ -423,7 +413,7 @@ body.show-yec h1 {
   text-decoration: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-small);
   white-space: nowrap;
 }
 
@@ -450,8 +440,8 @@ body.show-yec h1 {
 
 #yec-close {
   position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 16px;
+  inset-block-start: var(--space-large);
+  inset-inline-end: var(--space-large);
 }
 
 @media (max-width: 768px) {
@@ -464,11 +454,11 @@ body.show-yec h1 {
       "yec-matching" auto
       "yec-donate" min-content
       / 1fr;
-    padding-block: 31px 39px;
-    padding-inline: 15px;
+    padding-block: var(--space-xxlarge);
+    padding-inline: var(--space-large);
     /* Match max-width of the form. */
     max-width: var(--form-max-width);
-    margin-block-end: 32px;
+    margin-block-end: var(--space-xxlarge);
   }
 
   #yec-image {
@@ -476,18 +466,17 @@ body.show-yec h1 {
   }
 
   #yec-heading {
-    margin-block-start: 16px;
+    margin-block-start: var(--space-large);
     text-align: center;
     text-wrap-style: balance;
   }
 
   #yec-heading {
-    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
     font-size: 50px;
   }
 
   #yec-matching {
-    margin-block-end: 16px;
+    margin-block-end: var(--space-large);
   }
 
   #yec-donate-link {


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


=====================================
browser/components/onionservices/content/onionservices.css
=====================================
@@ -7,8 +7,8 @@
 #tor-clientauth-notification-key {
   box-sizing: border-box;
   width: 100%;
-  margin-top: 15px;
-  padding: 6px;
+  margin-top: var(--space-large);
+  padding: var(--space-small);
 }
 
 /* Start of rules adapted from
@@ -16,7 +16,7 @@
  * use the same rules).
  */
 #tor-clientauth-notification-key.invalid {
-  border: 1px solid var(--outline-color-error);
+  border: var(--border-width) solid var(--outline-color-error);
 }
 
 #tor-clientauth-warning {
@@ -26,10 +26,10 @@
   background: var(--button-background-color-destructive);
   color: var(--button-text-color-destructive);
   border-radius: var(--border-radius-xsmall);
-  inset-inline-start: 3px;
-  padding: 5px 12px;
+  inset-inline-start: var(--space-xsmall);
+  padding: var(--space-xsmall) var(--space-medium);
   position: relative;
-  top: 6px;
+  inset-block-start: var(--space-small);
   z-index: 1;
 }
 
@@ -39,16 +39,16 @@
 
 #tor-clientauth-warning::before {
   background: var(--button-background-color-destructive);
-  bottom: -8px;
+  inset-block-end: calc(-1 * var(--space-small));
+  inset-block-start: calc(-1 * var(--space-small));
   content: ".";
-  height: 16px;
-  inset-inline-start: 12px;
+  height: var(--size-item-small);
+  inset-inline-start: var(--space-medium);
   position: absolute;
   text-indent: -999px;
-  top: -7px;
   transform: rotate(45deg);
   white-space: nowrap;
-  width: 16px;
+  width: var(--size-item-small);
   z-index: -1;
 }
 


=====================================
browser/components/rulesets/content/aboutRulesets.css
=====================================
@@ -11,7 +11,7 @@ body {
 label {
   display: flex;
   align-items: center;
-  padding: 6px 0;
+  padding: var(--space-small) 0;
 }
 
 input[type="text"] {
@@ -40,7 +40,7 @@ dt {
 }
 
 dd {
-  margin: 8px 0 0 0;
+  margin: var(--space-small) 0 0 0;
   padding: 0;
   max-width: 600px;
   box-sizing: border-box;
@@ -50,7 +50,7 @@ hr {
   width: 40px;
   margin: 0;
   border: none;
-  border-top: 1px solid var(--border-color);
+  border-block-start: var(--border-width) solid var(--border-color);
 }
 
 .hidden {
@@ -85,11 +85,11 @@ hr {
 }
 
 #warning-description {
-  margin: 30px 0 16px 0;
+  margin: var(--space-xxlarge) 0 var(--space-large) 0;
 }
 
 #warning-buttonbar {
-  margin-top: 30px;
+  margin-top: var(--space-xxlarge);
   text-align: right;
 }
 
@@ -113,7 +113,7 @@ hr {
 section {
   display: none;
   flex: 1 0 auto;
-  padding: 40px;
+  padding: var(--space-xxlarge);
 }
 
 .title {
@@ -121,25 +121,25 @@ section {
   align-items: center;
   width: var(--content-width);
   max-width: 100%;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-color);
+  padding-bottom: var(--space-large);
+  border-bottom: var(--border-width) solid var(--border-color);
 }
 
 .title h1 {
   margin: 0;
   padding: 0;
-  padding-inline-start: 35px;
+  padding-inline-start: var(--space-xxlarge);
   font-size: var(--font-size-xlarge);
   font-weight: var(--font-weight-bold);
   background-image: url("chrome://browser/content/rulesets/securedrop.svg");
   background-position: 0 center;
-  background-size: 22px;
-  min-height: 22px;
+  background-size: var(--icon-size-large);
+  min-height: var(--icon-size-large);
   background-repeat: no-repeat;
 }
 
 #main-content h1:dir(rtl) {
-  background-position: right 0 top 4px;
+  background-position: right 0 center;
 }
 
 /* Ruleset list */
@@ -150,15 +150,15 @@ aside {
   flex: 0 0 var(--sidebar-width);
   box-sizing: border-box;
 
-  border-inline-end: 1px solid var(--border-color);
+  border-inline-end: var(--border-width) solid var(--border-color);
   background-color: var(--background-color-box);
 }
 
 #ruleset-heading {
-  padding: 16px;
+  padding: var(--space-large);
   text-align: center;
   font-weight: var(--font-weight-bold);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border-width) solid var(--border-color);
 }
 
 #ruleset-list-container {
@@ -166,7 +166,7 @@ aside {
 }
 
 #ruleset-list-empty {
-  padding: 16px;
+  padding: var(--space-large);
   text-align: center;
 }
 
@@ -183,10 +183,10 @@ aside {
   display: flex;
   align-items: center;
   margin: 0;
-  padding: 10px 18px;
+  padding: var(--space-medium) var(--space-large);
   list-style: none;
   border-inline-start: 4px solid transparent;
-  border-bottom: 1px solid var(--border-color);
+  border-block-end: var(--border-width) solid var(--border-color);
 }
 
 #ruleset-list li:last-child {
@@ -194,11 +194,11 @@ aside {
 }
 
 #ruleset-list .icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-end: 12px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin-inline-end: var(--space-medium);
   background-image: url("chrome://browser/content/rulesets/securedrop.svg");
-  background-size: 16px;
+  background-size: var(--icon-size);
 }
 
 #ruleset-list .icon.has-favicon {
@@ -215,7 +215,6 @@ aside {
 }
 
 #ruleset-list .selected {
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
   border-inline-start-color: var(--color-accent-primary);
 }
 
@@ -243,7 +242,7 @@ aside {
 }
 
 #ruleset-jwk-value {
-  padding: 8px;
+  padding: var(--space-small);
   border-radius: var(--border-radius-xsmall);
   background-color: var(--background-color-box);
   font-size: var(--font-size-small);
@@ -254,10 +253,10 @@ aside {
 
 #ruleset-edit {
   margin-inline-start: auto;
-  padding-inline-start: 32px;
+  padding-inline-start: var(--space-xxlarge);
   background-image: url("chrome://global/skin/icons/edit.svg");
   background-repeat: no-repeat;
-  background-position: 8px;
+  background-position: var(--space-small);
   -moz-context-properties: fill;
   fill: currentColor;
   min-width: auto;
@@ -273,7 +272,7 @@ aside {
 }
 
 #ruleset-updated {
-  margin-top: 24px;
+  margin-top: var(--space-xlarge);
   color: var(--text-color-deemphasized);
   font-size: var(--font-size-small);
 }


=====================================
browser/components/securitylevel/content/securityLevelPanel.css
=====================================
@@ -1,25 +1,25 @@
 /* Security Level CSS */
 
 #securityLevel-background {
-  min-height: 10em;
-  padding-inline: 16px;
-  column-gap: 0.5em;
+  min-height: 150px;
+  padding-inline: var(--space-large);
+  column-gap: var(--space-small);
   display: grid;
   grid-template:
-    "top-pad icon" 16px
+    "top-pad icon" var(--space-large)
     "title icon" auto
     "body icon" auto
     "learn-more icon" auto
-    "bottom-pad icon" minmax(8px, 1fr)
+    "bottom-pad icon" minmax(var(--space-small), 1fr)
     / auto auto;
 }
 
 #securityLevel-background-image {
   grid-area: icon;
-  --security-level-icon-size: 9em;
+  --security-level-icon-size: 130px;
   width: var(--security-level-icon-size);
   height: var(--security-level-icon-size);
-  margin-block: 0.4em;
+  margin-block: var(--space-small);
   /* Middle of shield aligns with the panel padding: */
   margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
   align-self: start;
@@ -50,12 +50,12 @@
 }
 
 #securityLevel-background p {
-  margin-block: 0 16px;
+  margin-block: 0 var(--space-large);
 }
 
 /* Override margin in panelUI-shared.css */
 #securityLevel-panel toolbarseparator#securityLevel-separator {
-  margin-inline: 16px;
+  margin-inline: var(--space-large);
 }
 
 #securityLevel-level {
@@ -65,7 +65,7 @@
 }
 
 #securityLevel-summary {
-  max-width: 20em;
+  max-width: 300px;
   grid-area: body;
 }
 


=====================================
browser/components/securitylevel/content/securityLevelPreferences.css
=====================================
@@ -10,8 +10,8 @@
 .security-level-icon {
   grid-area: icon;
   align-self: start;
-  width: 24px;
-  height: 24px;
+  width: var(--icon-size-large);
+  height: var(--icon-size-large);
   -moz-context-properties: fill;
   fill: var(--icon-color);
   margin-block-start: var(--space-xsmall);
@@ -97,7 +97,7 @@
 #security-level-current {
   margin-block-start: var(--space-large);
   background: var(--background-color-box);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius-small);
   padding: var(--space-medium);
 }


=====================================
browser/components/torcircuit/content/torCircuitPanel.css
=====================================
@@ -1,8 +1,8 @@
 /* Toolbar button */
 
 #tor-circuit-button-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   /* We want to set flat fill if we have prefers-contrast. Otherwise, we want a
    * gradient fill depending on the dark mode.
    * context-fill is insufficient for a linear gradient, so we instead use the
@@ -69,10 +69,10 @@
 #tor-circuit-alias img {
   -moz-context-properties: fill;
   fill: currentColor;
-  width: 14px;
-  height: 14px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   flex: 0 0 auto;
-  margin-inline-end: 0.25em;
+  margin-inline-end: var(--space-xsmall);
 }
 
 #tor-circuit-alias-label {
@@ -107,8 +107,8 @@
    * list item so that the different parts visually connect.
    * Using list-style-image does not give us enough control over sizing the
    * image. So instead we use a background-image. */
-  padding-inline-start: 1.5em;
-  padding-block: 6px;
+  padding-inline-start: var(--space-xlarge);
+  padding-block: var(--space-small);
   background-image: url("chrome://browser/content/tor-circuit-node-middle.svg");
   -moz-context-properties: fill;
   /* Light Gray 50 */
@@ -118,7 +118,7 @@
   /* Bump the size by small amount to prevent rendering gaps.
    * We're assuming here that each line will have the same height so that each
    * image has the same size. */
-  background-size: auto calc(100% + 0.5px);
+  background-size: auto calc(100% + 2px);
   background-repeat: no-repeat;
 }
 
@@ -155,11 +155,11 @@
 }
 
 .tor-circuit-region-flag {
-  margin-inline-end: 0.5em;
-  height: 16px;
+  margin-inline-end: var(--space-small);
+  height: var(--icon-size);
   align-self: center;
   /* Don't occupy any vertical height. */
-  margin-block: -8px;
+  margin-block: calc(-0.5 * var(--icon-size));
 }
 
 .tor-circuit-region-flag.no-region-flag-src {
@@ -169,10 +169,9 @@
 .tor-circuit-addresses {
   /* FIXME: Use a standard font size. Likely will be replaced with the conflux
    * design. */
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
   font-size: 0.9em;
   font-family: monospace;
-  margin-inline-start: 0.75em;
+  margin-inline-start: var(--space-medium);
 }
 
 .tor-circuit-ip-address {


=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -1,4 +1,4 @@
-@import url("chrome://global/skin/tor-colors.css");
+@import url("chrome://global/skin/tor-common.css");
 
 #category-connection > .category-icon {
   list-style-image: url("chrome://global/content/torconnect/tor-connect.svg");
@@ -16,29 +16,32 @@ button.spoof-button-disabled {
 }
 
 .tor-loading-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   -moz-context-properties: fill;
-  /* Use --tor-text-color. This will have good contrast for this small icon
-   * against the background. And it will match the surrounding text for high
-   * contrast and forced colour themes. */
-  fill: var(--tor-text-color);
+  /* Use --text-color-tor. This will have good contrast for this small icon
+   * against the background. */
+  fill: var(--text-color-tor);
   content: url("chrome://global/skin/icons/loading.svg");
+
+  @media (forced-colors) or (prefers-contrast) {
+    fill: currentColor;
+  }
 }
 
 .tor-toggle {
-  margin-block: 16px;
+  margin-block: var(--space-large);
   width: max-content;
 }
 
 /* Status */
 
 #network-status-internet-area {
-  margin-block: 16px;
+  margin-block: var(--space-large);
 }
 
 #network-status-tor-area {
-  margin-block: 0 32px;
+  margin-block: 0 var(--space-xxlarge);
 }
 
 .network-status-area {
@@ -52,9 +55,9 @@ button.spoof-button-disabled {
 }
 
 .network-status-icon {
-  width: 18px;
-  height: 18px;
-  margin-inline-end: 8px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin-inline-end: var(--space-small);
   -moz-context-properties: fill, stroke;
   fill: var(--icon-color);
   stroke: var(--icon-color);
@@ -83,11 +86,11 @@ button.spoof-button-disabled {
 
 .network-status-label {
   font-weight: var(--font-weight-bold);
-  margin-inline-end: 0.75em;
+  margin-inline-end: var(--space-medium);
 }
 
 .network-status-result {
-  margin-inline-end: 0.75em;
+  margin-inline-end: var(--space-medium);
 }
 
 #network-status-tor-area.status-connected #network-status-tor-connect-button {
@@ -141,7 +144,7 @@ button.spoof-button-disabled {
   display: flex;
   min-width: max-content;
   align-items: center;
-  gap: 0.5em;
+  gap: var(--space-small);
   font-size: var(--font-size-small);
 }
 
@@ -154,10 +157,12 @@ button.spoof-button-disabled {
    * using it for text colors, so we only enable these rules when not using a
    * high contrast theme or forced colors. */
   .bridge-status-badge.bridge-status-connected {
-    color: var(--tor-text-color);
+    color: var(--text-color-tor);
   }
 
   .bridge-status-badge.bridge-status-current-built-in {
+    /* Using the accent colour should be avoided. Will likely be replaced in
+     * tor-browser#44421. */
     color: var(--color-accent-primary);
   }
 }
@@ -167,8 +172,8 @@ button.spoof-button-disabled {
 }
 
 .bridge-status-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   background-repeat: no-repeat;
   background-position: center center;
   -moz-context-properties: fill;
@@ -198,7 +203,7 @@ button.spoof-button-disabled {
 #tor-bridges-none,
 #tor-bridges-current {
   margin-inline: 0;
-  margin-block: 32px;
+  margin-block: var(--space-xxlarge);
 }
 
 #tor-bridges-none:not([hidden]) {
@@ -206,16 +211,16 @@ button.spoof-button-disabled {
   justify-items: center;
   text-align: center;
   padding-block: 64px;
-  padding-inline: 32px;
-  gap: 16px;
+  padding-inline: var(--space-xxlarge);
+  gap: var(--space-large);
   border-radius: var(--border-radius-small);
   color: var(--text-color-deemphasized);
   border: 2px dashed var(--border-color-deemphasized);
 }
 
 #tor-bridges-none-icon {
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-medium);
+  height: var(--icon-size-medium);
   content: url("chrome://browser/content/torpreferences/bridge.svg");
   -moz-context-properties: fill;
   fill: currentColor;
@@ -223,10 +228,10 @@ button.spoof-button-disabled {
 
 .tor-bridges-box,
 .tor-bridges-details-box {
-  padding: 16px;
+  padding: var(--space-large);
   border-radius: var(--border-radius-small);
   background: var(--background-color-box-info);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
 }
 
 @media not forced-colors {
@@ -240,9 +245,9 @@ button.spoof-button-disabled {
   min-width: max-content;
   grid-template: "heading source button" min-content / max-content 1fr max-content;
   align-items: center;
-  border-block-end: 1px solid var(--border-color);
-  padding-block-end: 16px;
-  margin-block-end: 16px;
+  border-block-end: var(--border-width) solid var(--border-color);
+  padding-block-end: var(--space-large);
+  margin-block-end: var(--space-large);
   white-space: nowrap;
 }
 
@@ -251,8 +256,8 @@ button.spoof-button-disabled {
 }
 
 .tor-bridges-source-label {
-  margin-inline-start: 2em;
-  margin-inline-end: 8px;
+  margin-inline-start: var(--space-xxlarge);
+  margin-inline-end: var(--space-small);
   grid-area: source;
   justify-self: end;
 }
@@ -264,7 +269,7 @@ button.spoof-button-disabled {
 #tor-bridges-lox-label:not([hidden]) {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-small);
 }
 
 #tor-bridges-lox-label > * {
@@ -273,20 +278,20 @@ button.spoof-button-disabled {
 
 #tor-bridges-lox-label-icon {
   content: url("chrome://browser/content/torpreferences/lox-bridge-pass.svg");
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   -moz-context-properties: fill;
   fill: var(--icon-color);
 }
 
 .tor-bridges-options-button {
-  padding: 3px;
+  padding: var(--space-xsmall);
   margin: 0;
   min-height: auto;
   min-width: auto;
   box-sizing: content-box;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-repeat: no-repeat;
   background-position: center center;
@@ -302,8 +307,8 @@ button.spoof-button-disabled {
     "type status" min-content
     "description description" auto
     / max-content 1fr;
-  gap: 12px 1.5em;
-  margin-block-end: 16px;
+  gap: var(--space-medium) var(--space-xlarge);
+  margin-block-end: var(--space-large);
 }
 
 #tor-bridges-built-in-type-name {
@@ -323,8 +328,8 @@ button.spoof-button-disabled {
 .tor-bridges-grid:not([hidden]) {
   display: grid;
   grid-template-columns: max-content repeat(4, max-content) 1fr;
-  --tor-bridges-grid-column-gap: 8px;
-  --tor-bridges-grid-column-short-gap: 4px;
+  --tor-bridges-grid-column-gap: var(--space-small);
+  --tor-bridges-grid-column-short-gap: var(--space-xsmall);
   /* For #tor-bridges-grid-display we want each grid item to have the same
    * height so that their focus outlines match. */
   align-items: stretch;
@@ -358,7 +363,7 @@ button.spoof-button-disabled {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   /* Add 16px gap between rows, plus 8px at the start and end of the grid. */
-  padding-block: 8px;
+  padding-block: var(--space-small);
 }
 
 #tor-bridges-grid-display .tor-bridges-grid-cell:focus-visible {
@@ -391,12 +396,12 @@ button.spoof-button-disabled {
 .tor-bridges-emoji-icon {
   display: block;
   box-sizing: content-box;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   /* color-light-gray-10, color-dark-gray-60 */
   background: light-dark(#f9f9fb, #2b2a33);
   border-radius: var(--border-radius-small);
-  padding: 8px;
+  padding: var(--space-small);
 }
 
 .tor-bridges-grid-end-block {
@@ -414,7 +419,7 @@ button.spoof-button-disabled {
 
 .tor-bridges-address-cell {
   /* base size */
-  width: 10em;
+  width: 150px;
   flex: 1 0 auto;
 }
 
@@ -448,7 +453,7 @@ button.spoof-button-disabled {
 }
 
 .tor-bridges-details-box {
-  margin-block-start: 24px;
+  margin-block-start: var(--space-xlarge);
 }
 
 #tor-bridges-share:not([hidden]) {
@@ -460,13 +465,13 @@ button.spoof-button-disabled {
     "description . ." 1fr
     "description copy qr" min-content
     / 1fr max-content max-content;
-  gap: 0 8px;
+  gap: 0 var(--space-small);
   align-items: center;
 }
 
 .tor-bridges-share-heading {
   grid-area: heading;
-  margin-block-end: 4px;
+  margin-block-end: var(--space-xsmall);
 }
 
 #tor-bridges-share-description {
@@ -483,13 +488,13 @@ button.spoof-button-disabled {
 
 #tor-bridges-qr-addresses-button {
   grid-area: qr;
-  padding: 5px;
+  padding: var(--space-xsmall);
   margin: 0;
   min-height: auto;
   min-width: auto;
   box-sizing: content-box;
-  width: 24px;
-  height: 24px;
+  width: var(--icon-size-large);
+  height: var(--icon-size-large);
   background-image: url("chrome://browser/content/torpreferences/bridge-qr.svg");
   background-repeat: no-repeat;
   background-position: center center;
@@ -500,7 +505,7 @@ button.spoof-button-disabled {
 }
 
 #tor-bridges-lox-status {
-  margin-block-start: 8px;
+  margin-block-start: var(--space-small);
 }
 
 .tor-bridges-lox-box:not([hidden]) {
@@ -511,7 +516,7 @@ button.spoof-button-disabled {
     ". invites button" min-content
     / min-content 1fr max-content;
   align-items: start;
-  gap: 8px;
+  gap: var(--space-small);
 }
 
 .tor-bridges-lox-image-outer {
@@ -535,9 +540,8 @@ button.spoof-button-disabled {
 
 .tor-bridges-lox-image-inner {
   grid-area: image;
-  /* Extra 4px space for gaussian blur. */
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   align-self: center;
   justify-self: center;
   -moz-context-properties: fill;
@@ -570,7 +574,7 @@ button.spoof-button-disabled {
   /* Align the icons, as if list markers. */
   grid-template-columns: max-content 1fr;
   align-items: start;
-  gap: 8px 0;
+  gap: var(--space-small) 0;
 }
 
 .tor-bridges-lox-list-item:not([hidden]) {
@@ -580,11 +584,11 @@ button.spoof-button-disabled {
 .tor-bridges-lox-list-item:not([hidden])::before {
   /* We use ::before rather than list-style-image to have more control. */
   box-sizing: content-box;
-  width: 18px;
-  height: 18px;
-  margin-inline: 4px 6px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin-inline: var(--space-xsmall) var(--space-small);
   /* We want the icons to be center-aligned relative to the *first* line. */
-  margin-block-start: calc((1lh - 18px) / 2);
+  margin-block-start: calc((1lh - var(--icon-size)) / 2);
   /* We use display: grid rather than display: block. Otherwise the content will
    * be offset vertically by the line-height. */
   display: grid;
@@ -622,23 +626,22 @@ button.spoof-button-disabled {
 }
 
 .tor-bridges-provider-heading {
-  margin-block: 48px 8px;
+  margin-block: var(--space-xxlarge) var(--space-small);
 }
 
 #tor-bridges-provider-area {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: var(--space-large);
   align-items: start;
-  margin-block-start: 24px;
+  margin-block-start: var(--space-xlarge);
 }
 
 #tor-bridges-provider-list {
   display: grid;
   grid-template-columns: max-content max-content;
-  /* 24px gap between items. */
-  gap: 24px 12px;
-  margin-block: 16px;
+  gap: var(--space-xlarge) var(--space-medium);
+  margin-block: var(--space-large);
   padding: 0;
 }
 
@@ -648,13 +651,12 @@ button.spoof-button-disabled {
   grid-template-columns: subgrid;
   align-items: center;
   justify-items: start;
-  /* 8px gap between the name and instruction. */
-  gap: 8px 12px;
+  gap: var(--space-small) var(--space-medium);
 }
 
 .tor-bridges-provider-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   -moz-context-properties: fill;
   fill: var(--icon-color);
 }
@@ -695,7 +697,7 @@ button.spoof-button-disabled {
 }
 
 #tor-bridges-request-description {
-  margin-block: 12px 16px;
+  margin-block: var(--space-medium) var(--space-large);
 }
 
 #tor-bridges-open-request-dialog-button {
@@ -714,7 +716,7 @@ button.spoof-button-disabled {
 /* Request bridges */
 
 image#torPreferences-requestBridge-captchaImage {
-  margin: 16px 0 8px 0;
+  margin: var(--space-large) 0 var(--space-small) 0;
   min-height: 140px;
 }
 
@@ -732,15 +734,15 @@ button#torPreferences-requestBridge-refreshCaptchaButton {
 }
 
 dialog#torPreferences-requestBridge-dialog > hbox {
-  margin-bottom: 1em;
+  margin-bottom: var(--space-large);
 }
 
 /*
  Various elements that really should be lining up don't because they have inconsistent margins
 */
 .torMarginFix {
-  margin-left: 4px;
-  margin-right: 4px;
+  margin-left: var(--space-xsmall);
+  margin-right: var(--space-xsmall);
 }
 
 /* Show bridge QR dialog */
@@ -756,8 +758,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   background: var(--qr-zero);
   /* Padding is needed in case the dark theme is used so the bits don't blend
   with whatever the default background color is. */
-  padding: 10px;
-  margin-block: 4px 8px;
+  padding: var(--space-medium);
+  margin-block: var(--space-xsmall) var(--space-small);
   border-radius: var(--border-radius-small);
   display: grid;
   align-items: center;
@@ -777,7 +779,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   /* Share the same grid area as #bridgeQr-target. */
   grid-area: qr;
   content: url("chrome://browser/content/torpreferences/bridge.svg");
-  padding: 10px;
+  padding: var(--space-small);
   border-radius: var(--border-radius-medium);
   box-sizing: content-box;
   width: 52px;
@@ -796,8 +798,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
     ". remaining button" min-content
     "message message message" auto
     / 1fr max-content max-content;
-  gap: 8px;
-  margin-block: 16px 8px;
+  gap: var(--space-small);
+  margin-block: var(--space-large) var(--space-small);
   align-items: center;
 }
 
@@ -832,7 +834,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
 #lox-invite-dialog-connecting {
   color: var(--text-color-deemphasized);
   /* Gap with #user-provide-bridge-loading-icon. */
-  margin-inline-start: 0.5em;
+  margin-inline-start: var(--space-small);
 }
 
 #lox-invite-dialog-generate-area:not(.show-connecting) #lox-invite-dialog-connecting {
@@ -855,8 +857,8 @@ dialog#torPreferences-requestBridge-dialog > hbox {
 #lox-invite-dialog-list {
   flex: 1 1 auto;
   /* basis height */
-  height: 10em;
-  margin-block: 8px;
+  height: 160px;
+  margin-block: var(--space-small);
 }
 
 .lox-invite-dialog-list-item {
@@ -864,21 +866,13 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   overflow-x: hidden;
   /* FIXME: ellipsis does not show. */
   text-overflow: ellipsis;
-  padding-block: 6px;
-  padding-inline: 8px;
+  padding-block: var(--space-small);
+  padding-inline: var(--space-small);
 }
 
 /* Builtin bridge dialog */
-#torPreferences-builtinBridge-header {
-  margin: 8px 0 10px 0;
-}
-
-#torPreferences-builtinBridge-description {
-  margin-bottom: 18px;
-}
-
 #torPreferences-builtinBridge-typeSelection {
-  margin-bottom: 16px;
+  margin-block-end: var(--space-large);
 }
 
 #torPreferences-builtinBridge-typeSelection radio label {
@@ -927,7 +921,7 @@ groupbox#torPreferences-bridges-group textarea {
 }
 
 #user-provide-bridge-textarea-label {
-  margin-block: 16px 6px;
+  margin-block: var(--space-large) var(--space-small);
   flex: 0 0 auto;
   align-self: start;
 }
@@ -942,7 +936,7 @@ groupbox#torPreferences-bridges-group textarea {
 
 #user-provide-bridge-message-area {
   flex: 0 0 auto;
-  margin-block: 8px 12px;
+  margin-block: var(--space-small) var(--space-medium);
   align-self: end;
   display: flex;
   align-items: center;
@@ -969,7 +963,7 @@ groupbox#torPreferences-bridges-group textarea {
 #user-provide-bridge-connecting {
   color: var(--text-color-deemphasized);
   /* Gap with #user-provide-bridge-loading-icon. */
-  margin-inline-start: 0.5em;
+  margin-inline-start: var(--space-small);
 }
 
 #user-provide-bridge-dialog:not(.show-connecting) #user-provide-bridge-connecting {
@@ -999,7 +993,7 @@ groupbox#torPreferences-bridges-group textarea {
 #user-provide-bridge-grid-display {
   flex: 0 1 auto;
   overflow: auto;
-  margin-block: 8px;
+  margin-block: var(--space-small);
 }
 
 #user-provide-bridge-grid-display:focus-visible {
@@ -1014,7 +1008,7 @@ groupbox#torPreferences-bridges-group textarea {
 }
 
 #torPreferences-connection-header {
-  margin: 4px 0 14px 0;
+  margin: var(--space-xsmall) 0 var(--space-large) 0;
 }
 
 #torPreferences-connection-grid {
@@ -1041,13 +1035,13 @@ groupbox#torPreferences-bridges-group textarea {
 #tor-log-table {
   flex: 1 0 auto;
   overflow: auto;
-  min-height: 20em;
-  height: 20em;
+  min-height: 300px;
+  height: 300px;
   display: flex;
   flex-direction: column;
   padding: var(--space-small);
-  margin-block-end: 4px;
-  border: 1px solid var(--border-color);
+  margin-block-end: var(--space-xsmall);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius-small);
   font-size: var(--font-size-small);
 }


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


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


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


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


=====================================
python/mozlint/mozlint/cli.py
=====================================
@@ -38,7 +38,6 @@ INACTIVE_LINTERS = [
     "updatebot",
     "typescript",
     "wpt",
-    "stylelint",
     "glean-parser",
 ]
 


=====================================
toolkit/components/resistfingerprinting/content/letterboxing.css
=====================================
@@ -17,9 +17,6 @@
   }
 }
 
-/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */
-/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
-
 #tabbrowser-tabbox.letterboxing {
   --letterboxing-bgcolor: var(--background-color-canvas);
   /* Match the border radius used for the sidebar. */
@@ -28,7 +25,7 @@
   --letterboxing-vertical-alignment: start;
   --letterboxing-shadow: none;
   --letterboxing-outline-color: var(--border-color);
-  --letterboxing-outline-width: 1px;
+  --letterboxing-outline-width: var(--border-width);
 
   @media not ((prefers-contrast) or (forced-colors)) {
     /* Match the #sidebar outline width. */


=====================================
toolkit/components/torconnect/content/aboutTorConnect.css
=====================================
@@ -1,7 +1,6 @@
 /* Copyright (c) 2021, The Tor Project, Inc. */
 
 @import url("chrome://global/skin/error-pages.css");
-@import url("chrome://global/skin/tor-colors.css");
 @import url("chrome://global/skin/onion-pattern.css");
 
 body:not(.loaded) {
@@ -12,7 +11,7 @@ body:not(.loaded) {
 #breadcrumbs {
   display: flex;
   align-items: center;
-  margin: 0 0 24px 0;
+  margin: 0 0 var(--space-xlarge) 0;
 }
 
 #breadcrumbs.hidden {
@@ -23,8 +22,8 @@ body:not(.loaded) {
 .breadcrumb-separator {
   display: flex;
   margin: 0;
-  margin-inline-start: 20px;
-  padding: 8px;
+  margin-inline-start: var(--space-large);
+  padding: var(--space-small);
 }
 
 .breadcrumb-item {
@@ -45,7 +44,7 @@ body:not(.loaded) {
 }
 
 .breadcrumb-separator {
-  width: 15px;
+  width: var(--icon-size);
   list-style-image: url("chrome://global/content/torconnect/arrow-right.svg");
 }
 
@@ -55,7 +54,7 @@ body:not(.loaded) {
 
 .breadcrumb-icon {
   display: inline list-item;
-  height: 16px;
+  height: var(--icon-size);
   list-style-position: inside;
   -moz-context-properties: fill, stroke;
   fill: currentColor;
@@ -110,7 +109,7 @@ body:not(.loaded) {
 
 #locationDropdownLabel {
   margin-block: auto;
-  margin-inline: 4px;
+  margin-inline: var(--space-xsmall);
 }
 
 #locationDropdownLabel.error {
@@ -120,16 +119,16 @@ body:not(.loaded) {
 /* this follows similar css in error-pages.css for buttons */
 @media only screen and (min-width: 480px) {
   form#locationDropdown {
-    margin-inline: 4px;
+    margin-inline: var(--space-xsmall);
     /* subtracting out the margin is needeed because by
        default forms have different margins than buttons */
-    max-width: calc(100% - 8px);
+    max-width: calc(100% - 2 * var(--space-xsmall));
   }
 }
 
 @media only screen and (max-width: 480px) {
   #tryAgainButton {
-    margin-top: 4px;
+    margin-top: var(--space-xsmall);
   }
 }
 
@@ -182,7 +181,6 @@ form#locationDropdown select {
   background-image: linear-gradient(var(--progressbar-shadow-start), var(--background-color-canvas) 100%), var(--progressbar-gradient);
   animation: var(--progress-animation);
   filter: blur(5px);
-  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
   border-end-end-radius: 33px;
 }
 
@@ -190,10 +188,8 @@ form#locationDropdown select {
   z-index: 2;
   width: var(--progress-percent);
   height: var(--progress-bar-height);
-  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
   border-start-end-radius: calc(var(--progress-bar-height) / 2);
   border-end-end-radius: calc(var(--progress-bar-height) / 2);
-  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
   background-image: var(--progressbar-gradient);
   animation: var(--progress-animation);
 }
@@ -239,13 +235,13 @@ form#locationDropdown select {
 
 /* mirrors p element spacing */
 #viewLogButton {
-  margin: 1em 0;
+  margin: var(--space-large) 0;
 }
 
 body.aboutTorConnect {
   justify-content: space-between;
-  /* Always reserve 150px for the background, plus 15px padding with content. */
-  padding-block-end: calc(var(--onion-pattern-height) + 15px);
+  /* Always reserve 150px for the background, plus padding with content. */
+  padding-block-end: calc(var(--onion-pattern-height) + var(--space-large));
 }
 
 body.aboutTorConnect .title {


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


=====================================
toolkit/components/torconnect/content/torConnectTitlebarStatus.css
=====================================
@@ -1,8 +1,7 @@
 .tor-connect-titlebar-status:not([hidden]) {
   display: flex;
   align-items: center;
-  /* Want same as .private-browsing-indicator-with-label */
-  margin-inline: 7px;
+  margin-inline: var(--space-small);
 
   #navigator-toolbox[tabs-hidden] #TabsToolbar > & {
     /* Hide in the tabs bar when the tabs bar is hidden. E.g. when using
@@ -18,7 +17,7 @@
 }
 
 .tor-connect-titlebar-status-label {
-  margin-inline: 6px;
+  margin-inline: var(--space-small);
   white-space: nowrap;
 }
 
@@ -26,8 +25,8 @@
   -moz-context-properties: fill, stroke;
   fill: var(--icon-color);
   stroke: var(--icon-color);
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
   object-fit: none;
   --num-animation-steps: 8;
   /* First frame has no offset. */
@@ -52,12 +51,12 @@
 @media not ((prefers-contrast) or (forced-colors)) {
   /* Make the connected text and icon purple. */
   .tor-connect-titlebar-status.tor-connect-status-connected {
-    color: var(--tor-text-color);
+    color: var(--text-color-tor);
   }
 
   .tor-connect-titlebar-status.tor-connect-status-connected img {
-    fill: var(--tor-text-color);
-    stroke: var(--tor-text-color);
+    fill: var(--text-color-tor);
+    stroke: var(--text-color-tor);
   }
 }
 


=====================================
toolkit/themes/shared/design-system/config/tokens-config.js
=====================================
@@ -72,6 +72,28 @@ let customFileHeader = ({ surface, platform }) => {
   ].join("\n");
 
   let commentString = [
+    // Add an additional note for Tor Browser developers! See tor-browser#44406.
+    "/* Tor Browser instructions",
+    " * ========================",
+    " *",
+    " * DO NOT EDIT this file directly!",
+    " *",
+    " * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!",
+    " *",
+    " * This is a file generated by `./mach buildtokens`.",
+    " *",
+    " * When resolving conflicts, first resolve other conflicts outside the",
+    " * 'dist' directory, if there are any:",
+    " *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'",
+    " *",
+    " * Then regenerate these 'dist' files:",
+    " *",
+    " *   ./mach buildtokens",
+    " *",
+    " * Then add the generated files as resolved:",
+    " *",
+    " *   git add toolkit/themes/shared/design-system/dist/",
+    " */",
     "/* DO NOT EDIT this file directly, instead modify design-tokens.json",
     " * and run `npm run build` to see your changes. */",
   ].join("\n");


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


=====================================
toolkit/themes/shared/design-system/dist/tokens-figma-colors.json
=====================================
@@ -135,5 +135,11 @@
   "color/black/alpha/60": "oklch(0 0 0 / 60%)",
   "color/black/alpha/70": "oklch(0 0 0 / 70%)",
   "color/black/alpha/80": "oklch(0 0 0 / 80%)",
-  "color/black/alpha/90": "oklch(0 0 0 / 90%)"
+  "color/black/alpha/90": "oklch(0 0 0 / 90%)",
+  "color/accent/tor/light": "{Colors$color/purple/60}",
+  "color/accent/tor/dark": "{Colors$color/purple/30}",
+  "color/accent/tor/hover/light": "{Colors$color/purple/70}",
+  "color/accent/tor/hover/dark": "{Colors$color/purple/20}",
+  "color/accent/tor/active/light": "{Colors$color/purple/80}",
+  "color/accent/tor/active/dark": "{Colors$color/purple/10}"
 }


=====================================
toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json
=====================================
@@ -6,6 +6,12 @@
   "border/radius/medium": 8,
   "border/radius/large": 16,
   "border/width": 1,
+  "button/background/color/tor/light": "{Colors$color/accent/tor/light}",
+  "button/background/color/tor/dark": "{Colors$color/accent/tor/dark}",
+  "button/background/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
+  "button/background/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
+  "button/background/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
+  "button/background/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
   "button/border/radius": "{Primitives$border/radius/medium}",
   "button/min/height": "{Primitives$size/item/large}",
   "button/min/height/small": "{Primitives$size/item/medium}",
@@ -14,8 +20,16 @@
   "button/padding/icon": 0,
   "button/size/icon": "{Primitives$button/min/height}",
   "button/size/icon/small": "{Primitives$button/min/height/small}",
+  "button/text/color/tor/light": "{Colors$color/gray/05}",
+  "button/text/color/tor/dark": "{Colors$color/gray/100}",
+  "button/text/color/tor/hover/light": "{Colors$color/gray/05}",
+  "button/text/color/tor/hover/dark": "{Colors$color/gray/100}",
+  "button/text/color/tor/active/light": "{Colors$color/gray/05}",
+  "button/text/color/tor/active/dark": "{Colors$color/gray/100}",
   "checkbox/margin/inline": "{Primitives$space/small}",
   "checkbox/size": "{Primitives$size/item/small}",
+  "focus/outline/color/tor/light": "{Colors$color/accent/tor/light}",
+  "focus/outline/color/tor/dark": "{Colors$color/accent/tor/dark}",
   "focus/outline/inset": -2,
   "focus/outline/offset": 2,
   "focus/outline/width": 2,
@@ -26,6 +40,12 @@
   "icon/size/large": "{Primitives$size/item/medium}",
   "icon/size/xlarge": "{Primitives$size/item/large}",
   "input/text/min/height": "{Primitives$button/min/height}",
+  "link/color/tor/light": "{Colors$color/accent/tor/light}",
+  "link/color/tor/dark": "{Colors$color/accent/tor/dark}",
+  "link/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
+  "link/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
+  "link/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
+  "link/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
   "link/focus/outline/offset": 1,
   "page/main/content/width": 664,
   "size/item/xsmall": 12,
@@ -71,5 +91,7 @@
   "box/shadow/level-4/shadow-2/x": 0,
   "box/shadow/level-4/shadow-2/y": 4,
   "box/shadow/level-4/shadow-2/blur": 16,
-  "box/shadow/level-4/shadow-2/spread": 0
+  "box/shadow/level-4/shadow-2/spread": 0,
+  "text/color/tor/light": "{Colors$color/purple/60}",
+  "text/color/tor/dark": "{Colors$color/purple/20}"
 }


=====================================
toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
=====================================
@@ -189,6 +189,21 @@
     "dark": "{Theme$button/background/color/active}",
     "forcedColors": "{Theme$button/background/color/active}"
   },
+  "button/background/color/tor": {
+    "light": "{Primitives$button/background/color/tor/light}",
+    "dark": "{Primitives$button/background/color/tor/dark}",
+    "forcedColors": "{Theme$button/background/color/primary}"
+  },
+  "button/background/color/tor/hover": {
+    "light": "{Primitives$button/background/color/tor/hover/light}",
+    "dark": "{Primitives$button/background/color/tor/hover/dark}",
+    "forcedColors": "{Theme$button/background/color/primary/hover}"
+  },
+  "button/background/color/tor/active": {
+    "light": "{Primitives$button/background/color/tor/active/light}",
+    "dark": "{Primitives$button/background/color/tor/active/dark}",
+    "forcedColors": "{Theme$button/background/color/primary/active}"
+  },
   "button/border": {
     "light": "{Primitives$border/width} solid {Theme$button/border/color}",
     "dark": "{Primitives$border/width} solid {Theme$button/border/color}",
@@ -401,6 +416,21 @@
     "dark": "{Theme$button/text/color/active}",
     "forcedColors": "{Theme$button/text/color/active}"
   },
+  "button/text/color/tor": {
+    "light": "{Primitives$button/text/color/tor/light}",
+    "dark": "{Primitives$button/text/color/tor/dark}",
+    "forcedColors": "{Theme$button/text/color/primary}"
+  },
+  "button/text/color/tor/hover": {
+    "light": "{Primitives$button/text/color/tor/hover/light}",
+    "dark": "{Primitives$button/text/color/tor/hover/dark}",
+    "forcedColors": "{Theme$button/text/color/primary/hover}"
+  },
+  "button/text/color/tor/active": {
+    "light": "{Primitives$button/text/color/tor/active/light}",
+    "dark": "{Primitives$button/text/color/tor/active/dark}",
+    "forcedColors": "{Theme$button/text/color/primary/active}"
+  },
   "color/accent/primary": {
     "light": "{Colors$color/blue/60}",
     "dark": "{Colors$color/cyan/30}",
@@ -421,6 +451,21 @@
     "dark": "{Colors$color/cyan/30}",
     "forcedColors": "{HCM Theme$SelectedItem}"
   },
+  "color/accent/tor": {
+    "light": "{Colors$color/accent/tor/light}",
+    "dark": "{Colors$color/accent/tor/dark}",
+    "forcedColors": "{Theme$color/accent/primary}"
+  },
+  "color/accent/tor/hover": {
+    "light": "{Colors$color/accent/tor/hover/light}",
+    "dark": "{Colors$color/accent/tor/hover/dark}",
+    "forcedColors": "{Theme$color/accent/primary/hover}"
+  },
+  "color/accent/tor/active": {
+    "light": "{Colors$color/accent/tor/active/light}",
+    "dark": "{Colors$color/accent/tor/active/dark}",
+    "forcedColors": "{Theme$color/accent/primary/active}"
+  },
   "focus/outline": {
     "light": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
     "dark": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
@@ -431,6 +476,11 @@
     "dark": "{Theme$color/accent/primary}",
     "forcedColors": "{Theme$text/color}"
   },
+  "focus/outline/color/tor": {
+    "light": "{Primitives$focus/outline/color/tor/light}",
+    "dark": "{Primitives$focus/outline/color/tor/dark}",
+    "forcedColors": "{Theme$focus/outline/color}"
+  },
   "icon/color": {
     "light": "{Colors$color/gray/70}",
     "dark": "{Colors$color/gray/05}",
@@ -476,6 +526,21 @@
     "dark": "{Theme$link/color}",
     "forcedColors": "{Theme$link/color}"
   },
+  "link/color/tor": {
+    "light": "{Primitives$link/color/tor/light}",
+    "dark": "{Primitives$link/color/tor/dark}",
+    "forcedColors": "{Theme$link/color}"
+  },
+  "link/color/tor/hover": {
+    "light": "{Primitives$link/color/tor/hover/light}",
+    "dark": "{Primitives$link/color/tor/hover/dark}",
+    "forcedColors": "{Theme$link/color/hover}"
+  },
+  "link/color/tor/active": {
+    "light": "{Primitives$link/color/tor/active/light}",
+    "dark": "{Primitives$link/color/tor/active/dark}",
+    "forcedColors": "{Theme$link/color/active}"
+  },
   "outline/color/error": {
     "light": "{Colors$color/red/70}",
     "dark": "{Colors$color/red/20}",
@@ -553,5 +618,10 @@
     "light": "{Theme$text/color}",
     "dark": "{Theme$text/color}",
     "forcedColors": "{HCM Theme$SelectedItemText}"
+  },
+  "text/color/tor": {
+    "light": "{Primitives$text/color/tor/light}",
+    "dark": "{Primitives$text/color/tor/dark}",
+    "forcedColors": "inherit"
   }
 }


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


=====================================
toolkit/themes/shared/design-system/dist/tokens-shared.css
=====================================
@@ -2,6 +2,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* Tor Browser instructions
+ * ========================
+ *
+ * DO NOT EDIT this file directly!
+ *
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
+ *
+ * This is a file generated by `./mach buildtokens`.
+ *
+ * When resolving conflicts, first resolve other conflicts outside the
+ * 'dist' directory, if there are any:
+ *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
+ *
+ * Then regenerate these 'dist' files:
+ *
+ *   ./mach buildtokens
+ *
+ * Then add the generated files as resolved:
+ *
+ *   git add toolkit/themes/shared/design-system/dist/
+ */
 /* DO NOT EDIT this file directly, instead modify design-tokens.json
  * and run `npm run build` to see your changes. */
 
@@ -66,6 +87,15 @@
     --button-background-color-primary-disabled: var(--button-background-color-primary);
     --button-background-color-primary-selected: var(--button-background-color-primary-active);
     --button-background-color-selected: var(--button-background-color-active);
+    --button-background-color-tor: light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark));
+    --button-background-color-tor-hover: light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark));
+    --button-background-color-tor-active: light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark));
+    --button-background-color-tor-active-dark: var(--color-accent-tor-active-dark);
+    --button-background-color-tor-active-light: var(--color-accent-tor-active-light);
+    --button-background-color-tor-dark: var(--color-accent-tor-dark);
+    --button-background-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
+    --button-background-color-tor-hover-light: var(--color-accent-tor-hover-light);
+    --button-background-color-tor-light: var(--color-accent-tor-light);
     --button-border: var(--border-width) solid var(--button-border-color);
     --button-border-color: transparent;
     --button-border-color-hover: var(--button-border-color);
@@ -118,12 +148,30 @@
     --button-text-color-primary-disabled: var(--button-text-color-primary);
     --button-text-color-primary-selected: var(--button-text-color-primary-active);
     --button-text-color-selected: var(--button-text-color-active);
+    --button-text-color-tor: light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark));
+    --button-text-color-tor-hover: light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark));
+    --button-text-color-tor-active: light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark));
+    --button-text-color-tor-active-dark: var(--color-gray-100);
+    --button-text-color-tor-active-light: var(--color-gray-05);
+    --button-text-color-tor-dark: var(--color-gray-100);
+    --button-text-color-tor-hover-dark: var(--color-gray-100);
+    --button-text-color-tor-hover-light: var(--color-gray-05);
+    --button-text-color-tor-light: var(--color-gray-05);
 
     /** Checkbox **/
     --checkbox-margin-inline: var(--space-small);
     --checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */
 
     /** Color **/
+    --color-accent-tor: light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark));
+    --color-accent-tor-hover: light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark));
+    --color-accent-tor-active: light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark));
+    --color-accent-tor-active-dark: var(--color-purple-10);
+    --color-accent-tor-active-light: var(--color-purple-80);
+    --color-accent-tor-dark: var(--color-purple-30);
+    --color-accent-tor-hover-dark: var(--color-purple-20);
+    --color-accent-tor-hover-light: var(--color-purple-70);
+    --color-accent-tor-light: var(--color-purple-60);
     --color-black: #000000;
     --color-black-alpha-10: oklch(0 0 0 / 10%);
     --color-black-alpha-20: oklch(0 0 0 / 20%);
@@ -265,6 +313,9 @@
     /** Focus Outline **/
     --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
     --focus-outline-color: var(--color-accent-primary);
+    --focus-outline-color-tor: light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark));
+    --focus-outline-color-tor-dark: var(--color-accent-tor-dark);
+    --focus-outline-color-tor-light: var(--color-accent-tor-light);
     --focus-outline-inset: calc(-1 * var(--focus-outline-width));
     --focus-outline-offset: 2px;
     --focus-outline-width: 2px;
@@ -297,6 +348,15 @@
     --input-text-min-height: var(--button-min-height);
 
     /** Link **/
+    --link-color-tor: light-dark(var(--link-color-tor-light), var(--link-color-tor-dark));
+    --link-color-tor-hover: light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark));
+    --link-color-tor-active: light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark));
+    --link-color-tor-active-dark: var(--color-accent-tor-active-dark);
+    --link-color-tor-active-light: var(--color-accent-tor-active-light);
+    --link-color-tor-dark: var(--color-accent-tor-dark);
+    --link-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
+    --link-color-tor-hover-light: var(--color-accent-tor-hover-light);
+    --link-color-tor-light: var(--color-accent-tor-light);
     /**
      * Not using --force-outline-offset for links because that's intended for
      * elements with a background, and we only want a slight offset here while
@@ -328,6 +388,9 @@
     --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
     --text-color-error: light-dark(var(--color-red-70), var(--color-red-20));
     --text-color-list-item-hover: var(--text-color);
+    --text-color-tor: light-dark(var(--text-color-tor-light), var(--text-color-tor-dark));
+    --text-color-tor-dark: var(--color-purple-20);
+    --text-color-tor-light: var(--color-purple-60);
   }
 }
 
@@ -358,9 +421,23 @@
       --border-color-transparent: CanvasText;
 
       /** Button **/
+      --button-background-color-tor: var(--button-background-color-primary);
+      --button-background-color-tor-hover: var(--button-background-color-primary-hover);
+      --button-background-color-tor-active: var(--button-background-color-primary-active);
       --button-border-color: var(--button-text-color);
       --button-text-color-ghost-hover: var(--button-text-color-hover);
       --button-text-color-ghost-active: var(--button-text-color-active);
+      --button-text-color-tor: var(--button-text-color-primary);
+      --button-text-color-tor-hover: var(--button-text-color-primary-hover);
+      --button-text-color-tor-active: var(--button-text-color-primary-active);
+
+      /** Color **/
+      --color-accent-tor: var(--color-accent-primary);
+      --color-accent-tor-hover: var(--color-accent-primary-hover);
+      --color-accent-tor-active: var(--color-accent-primary-active);
+
+      /** Focus Outline **/
+      --focus-outline-color-tor: var(--focus-outline-color);
 
       /** Icon **/
       --icon-color: var(--text-color);
@@ -369,6 +446,11 @@
       --icon-color-success: var(--icon-color);
       --icon-color-warning: var(--icon-color);
 
+      /** Link **/
+      --link-color-tor: var(--link-color);
+      --link-color-tor-hover: var(--link-color-hover);
+      --link-color-tor-active: var(--link-color-active);
+
       /** Outline Color **/
       --outline-color-error: var(--border-color);
 
@@ -377,6 +459,7 @@
       --text-color-deemphasized: inherit;
       --text-color-error: inherit;
       --text-color-list-item-hover: SelectedItemText;
+      --text-color-tor: inherit;
     }
   }
 }
@@ -409,6 +492,9 @@
       --button-background-color-destructive-active: var(--button-background-color-primary-active);
       --button-background-color-destructive-disabled: var(--button-background-color-primary-disabled);
       --button-background-color-primary-disabled: var(--button-text-color-disabled);
+      --button-background-color-tor: var(--button-background-color-primary);
+      --button-background-color-tor-hover: var(--button-background-color-primary-hover);
+      --button-background-color-tor-active: var(--button-background-color-primary-active);
       --button-border-color: var(--border-color-interactive);
       --button-border-color-hover: var(--border-color-interactive-hover);
       --button-border-color-active: var(--border-color-interactive-active);
@@ -433,25 +519,36 @@
       --button-text-color-ghost-active: var(--button-text-color-active);
       --button-text-color-primary: ButtonFace;
       --button-text-color-primary-hover: SelectedItemText;
+      --button-text-color-tor: var(--button-text-color-primary);
+      --button-text-color-tor-hover: var(--button-text-color-primary-hover);
+      --button-text-color-tor-active: var(--button-text-color-primary-active);
 
       /** Color **/
       --color-accent-primary: ButtonText;
       --color-accent-primary-hover: SelectedItem;
       --color-accent-primary-active: var(--color-accent-primary-hover);
       --color-accent-primary-selected: SelectedItem;
+      --color-accent-tor: var(--color-accent-primary);
+      --color-accent-tor-hover: var(--color-accent-primary-hover);
+      --color-accent-tor-active: var(--color-accent-primary-active);
 
       /** Focus Outline **/
       --focus-outline-color: var(--text-color);
+      --focus-outline-color-tor: var(--focus-outline-color);
 
       /** Link **/
       --link-color: LinkText;
       --link-color-hover: LinkText;
       --link-color-active: ActiveText;
+      --link-color-tor: var(--link-color);
+      --link-color-tor-hover: var(--link-color-hover);
+      --link-color-tor-active: var(--link-color-active);
       --link-color-visited: var(--link-color);
 
       /** Text **/
       --text-color-disabled: GrayText;
       --text-color-accent-primary-selected: SelectedItemText;
+      --text-color-tor: inherit;
     }
   }
 }


=====================================
toolkit/themes/shared/design-system/dist/tokens-table.mjs
=====================================
@@ -2,6 +2,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* Tor Browser instructions
+ * ========================
+ *
+ * DO NOT EDIT this file directly!
+ *
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
+ *
+ * This is a file generated by `./mach buildtokens`.
+ *
+ * When resolving conflicts, first resolve other conflicts outside the
+ * 'dist' directory, if there are any:
+ *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
+ *
+ * Then regenerate these 'dist' files:
+ *
+ *   ./mach buildtokens
+ *
+ * Then add the generated files as resolved:
+ *
+ *   git add toolkit/themes/shared/design-system/dist/
+ */
 /* DO NOT EDIT this file directly, instead modify design-tokens.json
  * and run `npm run build` to see your changes. */
 
@@ -208,6 +229,48 @@ export const tokensTable = {
       },
       name: "--color-accent-primary-selected",
     },
+    { value: "var(--color-purple-60)", name: "--color-accent-tor-light" },
+    { value: "var(--color-purple-30)", name: "--color-accent-tor-dark" },
+    {
+      value: {
+        light: "var(--color-accent-tor-light)",
+        dark: "var(--color-accent-tor-dark)",
+        prefersContrast: "var(--color-accent-primary)",
+        forcedColors: "var(--color-accent-primary)",
+        default:
+          "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
+      },
+      name: "--color-accent-tor",
+    },
+    { value: "var(--color-purple-70)", name: "--color-accent-tor-hover-light" },
+    { value: "var(--color-purple-20)", name: "--color-accent-tor-hover-dark" },
+    {
+      value: {
+        light: "var(--color-accent-tor-hover-light)",
+        dark: "var(--color-accent-tor-hover-dark)",
+        prefersContrast: "var(--color-accent-primary-hover)",
+        forcedColors: "var(--color-accent-primary-hover)",
+        default:
+          "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
+      },
+      name: "--color-accent-tor-hover",
+    },
+    {
+      value: "var(--color-purple-80)",
+      name: "--color-accent-tor-active-light",
+    },
+    { value: "var(--color-purple-10)", name: "--color-accent-tor-active-dark" },
+    {
+      value: {
+        light: "var(--color-accent-tor-active-light)",
+        dark: "var(--color-accent-tor-active-dark)",
+        prefersContrast: "var(--color-accent-primary-active)",
+        forcedColors: "var(--color-accent-primary-active)",
+        default:
+          "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
+      },
+      name: "--color-accent-tor-active",
+    },
   ],
   "background-color": [
     {
@@ -426,6 +489,63 @@ export const tokensTable = {
       value: "var(--button-background-color-active)",
       name: "--button-background-color-selected",
     },
+    {
+      value: "var(--color-accent-tor-light)",
+      name: "--button-background-color-tor-light",
+    },
+    {
+      value: "var(--color-accent-tor-dark)",
+      name: "--button-background-color-tor-dark",
+    },
+    {
+      value: {
+        light: "var(--button-background-color-tor-light)",
+        dark: "var(--button-background-color-tor-dark)",
+        prefersContrast: "var(--button-background-color-primary)",
+        forcedColors: "var(--button-background-color-primary)",
+        default:
+          "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
+      },
+      name: "--button-background-color-tor",
+    },
+    {
+      value: "var(--color-accent-tor-hover-light)",
+      name: "--button-background-color-tor-hover-light",
+    },
+    {
+      value: "var(--color-accent-tor-hover-dark)",
+      name: "--button-background-color-tor-hover-dark",
+    },
+    {
+      value: {
+        light: "var(--button-background-color-tor-hover-light)",
+        dark: "var(--button-background-color-tor-hover-dark)",
+        prefersContrast: "var(--button-background-color-primary-hover)",
+        forcedColors: "var(--button-background-color-primary-hover)",
+        default:
+          "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
+      },
+      name: "--button-background-color-tor-hover",
+    },
+    {
+      value: "var(--color-accent-tor-active-light)",
+      name: "--button-background-color-tor-active-light",
+    },
+    {
+      value: "var(--color-accent-tor-active-dark)",
+      name: "--button-background-color-tor-active-dark",
+    },
+    {
+      value: {
+        light: "var(--button-background-color-tor-active-light)",
+        dark: "var(--button-background-color-tor-active-dark)",
+        prefersContrast: "var(--button-background-color-primary-active)",
+        forcedColors: "var(--button-background-color-primary-active)",
+        default:
+          "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
+      },
+      name: "--button-background-color-tor-active",
+    },
     {
       value: "var(--background-color-box-info)",
       name: "--promo-background-color",
@@ -957,6 +1077,57 @@ export const tokensTable = {
       value: "var(--button-text-color-active)",
       name: "--button-text-color-selected",
     },
+    { value: "var(--color-gray-05)", name: "--button-text-color-tor-light" },
+    { value: "var(--color-gray-100)", name: "--button-text-color-tor-dark" },
+    {
+      value: {
+        light: "var(--button-text-color-tor-light)",
+        dark: "var(--button-text-color-tor-dark)",
+        prefersContrast: "var(--button-text-color-primary)",
+        forcedColors: "var(--button-text-color-primary)",
+        default:
+          "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
+      },
+      name: "--button-text-color-tor",
+    },
+    {
+      value: "var(--color-gray-05)",
+      name: "--button-text-color-tor-hover-light",
+    },
+    {
+      value: "var(--color-gray-100)",
+      name: "--button-text-color-tor-hover-dark",
+    },
+    {
+      value: {
+        light: "var(--button-text-color-tor-hover-light)",
+        dark: "var(--button-text-color-tor-hover-dark)",
+        prefersContrast: "var(--button-text-color-primary-hover)",
+        forcedColors: "var(--button-text-color-primary-hover)",
+        default:
+          "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
+      },
+      name: "--button-text-color-tor-hover",
+    },
+    {
+      value: "var(--color-gray-05)",
+      name: "--button-text-color-tor-active-light",
+    },
+    {
+      value: "var(--color-gray-100)",
+      name: "--button-text-color-tor-active-dark",
+    },
+    {
+      value: {
+        light: "var(--button-text-color-tor-active-light)",
+        dark: "var(--button-text-color-tor-active-dark)",
+        prefersContrast: "var(--button-text-color-primary-active)",
+        forcedColors: "var(--button-text-color-primary-active)",
+        default:
+          "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
+      },
+      name: "--button-text-color-tor-active",
+    },
     {
       value: {
         forcedColors: "LinkText",
@@ -993,6 +1164,57 @@ export const tokensTable = {
       },
       name: "--link-color-visited",
     },
+    { value: "var(--color-accent-tor-light)", name: "--link-color-tor-light" },
+    { value: "var(--color-accent-tor-dark)", name: "--link-color-tor-dark" },
+    {
+      value: {
+        light: "var(--link-color-tor-light)",
+        dark: "var(--link-color-tor-dark)",
+        prefersContrast: "var(--link-color)",
+        forcedColors: "var(--link-color)",
+        default:
+          "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
+      },
+      name: "--link-color-tor",
+    },
+    {
+      value: "var(--color-accent-tor-hover-light)",
+      name: "--link-color-tor-hover-light",
+    },
+    {
+      value: "var(--color-accent-tor-hover-dark)",
+      name: "--link-color-tor-hover-dark",
+    },
+    {
+      value: {
+        light: "var(--link-color-tor-hover-light)",
+        dark: "var(--link-color-tor-hover-dark)",
+        prefersContrast: "var(--link-color-hover)",
+        forcedColors: "var(--link-color-hover)",
+        default:
+          "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
+      },
+      name: "--link-color-tor-hover",
+    },
+    {
+      value: "var(--color-accent-tor-active-light)",
+      name: "--link-color-tor-active-light",
+    },
+    {
+      value: "var(--color-accent-tor-active-dark)",
+      name: "--link-color-tor-active-dark",
+    },
+    {
+      value: {
+        light: "var(--link-color-tor-active-light)",
+        dark: "var(--link-color-tor-active-dark)",
+        prefersContrast: "var(--link-color-active)",
+        forcedColors: "var(--link-color-active)",
+        default:
+          "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
+      },
+      name: "--link-color-tor-active",
+    },
     {
       value: {
         prefersContrast: "CanvasText",
@@ -1047,6 +1269,19 @@ export const tokensTable = {
       },
       name: "--text-color-list-item-hover",
     },
+    { value: "var(--color-purple-60)", name: "--text-color-tor-light" },
+    { value: "var(--color-purple-20)", name: "--text-color-tor-dark" },
+    {
+      value: {
+        light: "var(--text-color-tor-light)",
+        dark: "var(--text-color-tor-dark)",
+        prefersContrast: "inherit",
+        forcedColors: "inherit",
+        default:
+          "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
+      },
+      name: "--text-color-tor",
+    },
   ],
   outline: [
     {
@@ -1060,6 +1295,25 @@ export const tokensTable = {
       },
       name: "--focus-outline-color",
     },
+    {
+      value: "var(--color-accent-tor-light)",
+      name: "--focus-outline-color-tor-light",
+    },
+    {
+      value: "var(--color-accent-tor-dark)",
+      name: "--focus-outline-color-tor-dark",
+    },
+    {
+      value: {
+        light: "var(--focus-outline-color-tor-light)",
+        dark: "var(--focus-outline-color-tor-dark)",
+        prefersContrast: "var(--focus-outline-color)",
+        forcedColors: "var(--focus-outline-color)",
+        default:
+          "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
+      },
+      name: "--focus-outline-color-tor",
+    },
     {
       value: "calc(-1 * var(--focus-outline-width))",
       name: "--focus-outline-inset",
@@ -1341,6 +1595,40 @@ export const variableLookupTable = {
   "button-background-color-ghost-selected":
     "var(--button-background-color-ghost-active)",
   "button-background-color-selected": "var(--button-background-color-active)",
+  "button-background-color-tor-light": "var(--color-accent-tor-light)",
+  "button-background-color-tor-dark": "var(--color-accent-tor-dark)",
+  "button-background-color-tor": {
+    light: "var(--button-background-color-tor-light)",
+    dark: "var(--button-background-color-tor-dark)",
+    prefersContrast: "var(--button-background-color-primary)",
+    forcedColors: "var(--button-background-color-primary)",
+    default:
+      "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
+  },
+  "button-background-color-tor-hover-light":
+    "var(--color-accent-tor-hover-light)",
+  "button-background-color-tor-hover-dark":
+    "var(--color-accent-tor-hover-dark)",
+  "button-background-color-tor-hover": {
+    light: "var(--button-background-color-tor-hover-light)",
+    dark: "var(--button-background-color-tor-hover-dark)",
+    prefersContrast: "var(--button-background-color-primary-hover)",
+    forcedColors: "var(--button-background-color-primary-hover)",
+    default:
+      "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
+  },
+  "button-background-color-tor-active-light":
+    "var(--color-accent-tor-active-light)",
+  "button-background-color-tor-active-dark":
+    "var(--color-accent-tor-active-dark)",
+  "button-background-color-tor-active": {
+    light: "var(--button-background-color-tor-active-light)",
+    dark: "var(--button-background-color-tor-active-dark)",
+    prefersContrast: "var(--button-background-color-primary-active)",
+    forcedColors: "var(--button-background-color-primary-active)",
+    default:
+      "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
+  },
   "button-border": "var(--border-width) solid var(--button-border-color)",
   "button-border-color": {
     default: "transparent",
@@ -1502,6 +1790,36 @@ export const variableLookupTable = {
   "button-text-color-primary-selected":
     "var(--button-text-color-primary-active)",
   "button-text-color-selected": "var(--button-text-color-active)",
+  "button-text-color-tor-light": "var(--color-gray-05)",
+  "button-text-color-tor-dark": "var(--color-gray-100)",
+  "button-text-color-tor": {
+    light: "var(--button-text-color-tor-light)",
+    dark: "var(--button-text-color-tor-dark)",
+    prefersContrast: "var(--button-text-color-primary)",
+    forcedColors: "var(--button-text-color-primary)",
+    default:
+      "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
+  },
+  "button-text-color-tor-hover-light": "var(--color-gray-05)",
+  "button-text-color-tor-hover-dark": "var(--color-gray-100)",
+  "button-text-color-tor-hover": {
+    light: "var(--button-text-color-tor-hover-light)",
+    dark: "var(--button-text-color-tor-hover-dark)",
+    prefersContrast: "var(--button-text-color-primary-hover)",
+    forcedColors: "var(--button-text-color-primary-hover)",
+    default:
+      "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
+  },
+  "button-text-color-tor-active-light": "var(--color-gray-05)",
+  "button-text-color-tor-active-dark": "var(--color-gray-100)",
+  "button-text-color-tor-active": {
+    light: "var(--button-text-color-tor-active-light)",
+    dark: "var(--button-text-color-tor-active-dark)",
+    prefersContrast: "var(--button-text-color-primary-active)",
+    forcedColors: "var(--button-text-color-primary-active)",
+    default:
+      "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
+  },
   "checkbox-margin-inline": "var(--space-small)",
   "checkbox-size": "var(--size-item-small)",
   "color-gray-20": "#f0f0f4",
@@ -1681,12 +1999,52 @@ export const variableLookupTable = {
     },
     platform: { default: "SelectedItem" },
   },
+  "color-accent-tor-light": "var(--color-purple-60)",
+  "color-accent-tor-dark": "var(--color-purple-30)",
+  "color-accent-tor": {
+    light: "var(--color-accent-tor-light)",
+    dark: "var(--color-accent-tor-dark)",
+    prefersContrast: "var(--color-accent-primary)",
+    forcedColors: "var(--color-accent-primary)",
+    default:
+      "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
+  },
+  "color-accent-tor-hover-light": "var(--color-purple-70)",
+  "color-accent-tor-hover-dark": "var(--color-purple-20)",
+  "color-accent-tor-hover": {
+    light: "var(--color-accent-tor-hover-light)",
+    dark: "var(--color-accent-tor-hover-dark)",
+    prefersContrast: "var(--color-accent-primary-hover)",
+    forcedColors: "var(--color-accent-primary-hover)",
+    default:
+      "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
+  },
+  "color-accent-tor-active-light": "var(--color-purple-80)",
+  "color-accent-tor-active-dark": "var(--color-purple-10)",
+  "color-accent-tor-active": {
+    light: "var(--color-accent-tor-active-light)",
+    dark: "var(--color-accent-tor-active-dark)",
+    prefersContrast: "var(--color-accent-primary-active)",
+    forcedColors: "var(--color-accent-primary-active)",
+    default:
+      "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
+  },
   "focus-outline":
     "var(--focus-outline-width) solid var(--focus-outline-color)",
   "focus-outline-color": {
     default: "var(--color-accent-primary)",
     forcedColors: "var(--text-color)",
   },
+  "focus-outline-color-tor-light": "var(--color-accent-tor-light)",
+  "focus-outline-color-tor-dark": "var(--color-accent-tor-dark)",
+  "focus-outline-color-tor": {
+    light: "var(--focus-outline-color-tor-light)",
+    dark: "var(--focus-outline-color-tor-dark)",
+    prefersContrast: "var(--focus-outline-color)",
+    forcedColors: "var(--focus-outline-color)",
+    default:
+      "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
+  },
   "focus-outline-inset": "calc(-1 * var(--focus-outline-width))",
   "focus-outline-offset": "2px",
   "focus-outline-width": "2px",
@@ -1786,6 +2144,36 @@ export const variableLookupTable = {
     brand: { default: "var(--link-color)" },
     platform: { default: "var(--link-color)" },
   },
+  "link-color-tor-light": "var(--color-accent-tor-light)",
+  "link-color-tor-dark": "var(--color-accent-tor-dark)",
+  "link-color-tor": {
+    light: "var(--link-color-tor-light)",
+    dark: "var(--link-color-tor-dark)",
+    prefersContrast: "var(--link-color)",
+    forcedColors: "var(--link-color)",
+    default:
+      "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
+  },
+  "link-color-tor-hover-light": "var(--color-accent-tor-hover-light)",
+  "link-color-tor-hover-dark": "var(--color-accent-tor-hover-dark)",
+  "link-color-tor-hover": {
+    light: "var(--link-color-tor-hover-light)",
+    dark: "var(--link-color-tor-hover-dark)",
+    prefersContrast: "var(--link-color-hover)",
+    forcedColors: "var(--link-color-hover)",
+    default:
+      "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
+  },
+  "link-color-tor-active-light": "var(--color-accent-tor-active-light)",
+  "link-color-tor-active-dark": "var(--color-accent-tor-active-dark)",
+  "link-color-tor-active": {
+    light: "var(--link-color-tor-active-light)",
+    dark: "var(--link-color-tor-active-dark)",
+    prefersContrast: "var(--link-color-active)",
+    forcedColors: "var(--link-color-active)",
+    default:
+      "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
+  },
   "link-focus-outline-offset": "1px",
   "outline-color-error": {
     light: "var(--color-red-70)",
@@ -1889,4 +2277,14 @@ export const variableLookupTable = {
     default: "var(--text-color)",
     prefersContrast: "SelectedItemText",
   },
+  "text-color-tor-light": "var(--color-purple-60)",
+  "text-color-tor-dark": "var(--color-purple-20)",
+  "text-color-tor": {
+    light: "var(--text-color-tor-light)",
+    dark: "var(--text-color-tor-dark)",
+    prefersContrast: "inherit",
+    forcedColors: "inherit",
+    default:
+      "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
+  },
 };


=====================================
toolkit/themes/shared/design-system/src/design-tokens.json
=====================================
@@ -325,6 +325,42 @@
         },
         "selected": {
           "value": "{button.background.color.active}"
+        },
+        "tor": {
+          "light": { "value": "{color.accent.tor.light}" },
+          "dark": { "value": "{color.accent.tor.dark}" },
+          "@base": {
+            "value": {
+              "light": "{button.background.color.tor.light}",
+              "dark": "{button.background.color.tor.dark}",
+              "prefersContrast": "{button.background.color.primary.@base}",
+              "forcedColors": "{button.background.color.primary.@base}"
+            }
+          },
+          "hover": {
+            "light": { "value": "{color.accent.tor.hover.light}" },
+            "dark": { "value": "{color.accent.tor.hover.dark}" },
+            "@base": {
+              "value": {
+                "light": "{button.background.color.tor.hover.light}",
+                "dark": "{button.background.color.tor.hover.dark}",
+                "prefersContrast": "{button.background.color.primary.hover}",
+                "forcedColors": "{button.background.color.primary.hover}"
+              }
+            }
+          },
+          "active": {
+            "light": { "value": "{color.accent.tor.active.light}" },
+            "dark": { "value": "{color.accent.tor.active.dark}" },
+            "@base": {
+              "value": {
+                "light": "{button.background.color.tor.active.light}",
+                "dark": "{button.background.color.tor.active.dark}",
+                "prefersContrast": "{button.background.color.primary.active}",
+                "forcedColors": "{button.background.color.primary.active}"
+              }
+            }
+          }
         }
       }
     },
@@ -633,6 +669,42 @@
         },
         "selected": {
           "value": "{button.text.color.active}"
+        },
+        "tor": {
+          "light": { "value": "{color.gray.05}" },
+          "dark": { "value": "{color.gray.100}" },
+          "@base": {
+            "value": {
+              "light": "{button.text.color.tor.light}",
+              "dark": "{button.text.color.tor.dark}",
+              "prefersContrast": "{button.text.color.primary.@base}",
+              "forcedColors": "{button.text.color.primary.@base}"
+            }
+          },
+          "hover": {
+            "light": { "value": "{color.gray.05}" },
+            "dark": { "value": "{color.gray.100}" },
+            "@base": {
+              "value": {
+                "light": "{button.text.color.tor.hover.light}",
+                "dark": "{button.text.color.tor.hover.dark}",
+                "prefersContrast": "{button.text.color.primary.hover}",
+                "forcedColors": "{button.text.color.primary.hover}"
+              }
+            }
+          },
+          "active": {
+            "light": { "value": "{color.gray.05}" },
+            "dark": { "value": "{color.gray.100}" },
+            "@base": {
+              "value": {
+                "light": "{button.text.color.tor.active.light}",
+                "dark": "{button.text.color.tor.active.dark}",
+                "prefersContrast": "{button.text.color.primary.active}",
+                "forcedColors": "{button.text.color.primary.active}"
+              }
+            }
+          }
         }
       }
     }
@@ -1138,18 +1210,68 @@
             }
           }
         }
+      },
+      "tor": {
+        "light": { "value": "{color.purple.60}" },
+        "dark": { "value": "{color.purple.30}" },
+        "@base": {
+          "value": {
+            "light": "{color.accent.tor.light}",
+            "dark": "{color.accent.tor.dark}",
+            "prefersContrast": "{color.accent.primary.@base}",
+            "forcedColors": "{color.accent.primary.@base}"
+          }
+        },
+        "hover": {
+          "light": { "value": "{color.purple.70}" },
+          "dark": { "value": "{color.purple.20}" },
+          "@base": {
+            "value": {
+              "light": "{color.accent.tor.hover.light}",
+              "dark": "{color.accent.tor.hover.dark}",
+              "prefersContrast": "{color.accent.primary.hover}",
+              "forcedColors": "{color.accent.primary.hover}"
+            }
+          }
+        },
+        "active": {
+          "light": { "value": "{color.purple.80}" },
+          "dark": { "value": "{color.purple.10}" },
+          "@base": {
+            "value": {
+              "light": "{color.accent.tor.active.light}",
+              "dark": "{color.accent.tor.active.dark}",
+              "prefersContrast": "{color.accent.primary.active}",
+              "forcedColors": "{color.accent.primary.active}"
+            }
+          }
+        }
       }
     }
   },
   "focus": {
     "outline": {
       "@base": {
-        "value": "{focus.outline.width} solid {focus.outline.color}"
+        "value": "{focus.outline.width} solid {focus.outline.color.@base}"
       },
       "color": {
-        "value": {
-          "default": "{color.accent.primary.@base}",
-          "forcedColors": "{text.color.@base}"
+        "@base": {
+          "value": {
+            "default": "{color.accent.primary.@base}",
+            "forcedColors": "{text.color.@base}"
+          }
+        },
+        "tor": {
+          "light": { "value": "{color.accent.tor.light}" },
+          "dark": { "value": "{color.accent.tor.dark}" },
+          "@base": {
+            "value": {
+              "light": "{focus.outline.color.tor.light}",
+              "dark": "{focus.outline.color.tor.dark}",
+              "prefersContrast": "{focus.outline.color.@base}",
+              "forcedColors": "{focus.outline.color.@base}"
+            }
+          }
         }
       },
       "inset": {
@@ -1385,6 +1507,42 @@
             "default": "{link.color.@base}"
           }
         }
+      },
+      "tor": {
+        "light": { "value": "{color.accent.tor.light}" },
+        "dark": { "value": "{color.accent.tor.dark}" },
+        "@base": {
+          "value": {
+            "light": "{link.color.tor.light}",
+            "dark": "{link.color.tor.dark}",
+            "prefersContrast": "{link.color.@base}",
+            "forcedColors": "{link.color.@base}"
+          }
+        },
+        "hover": {
+          "light": { "value": "{color.accent.tor.hover.light}" },
+          "dark": { "value": "{color.accent.tor.hover.dark}" },
+          "@base": {
+            "value": {
+              "light": "{link.color.tor.hover.light}",
+              "dark": "{link.color.tor.hover.dark}",
+              "prefersContrast": "{link.color.hover}",
+              "forcedColors": "{link.color.hover}"
+            }
+          }
+        },
+        "active": {
+          "light": { "value": "{color.accent.tor.active.light}" },
+          "dark": { "value": "{color.accent.tor.active.dark}" },
+          "@base": {
+            "value": {
+              "light": "{link.color.tor.active.light}",
+              "dark": "{link.color.tor.active.dark}",
+              "prefersContrast": "{link.color.active}",
+              "forcedColors": "{link.color.active}"
+            }
+          }
+        }
       }
     },
     "focus": {
@@ -1619,6 +1777,18 @@
             }
           }
         }
+      },
+      "tor": {
+        "light": { "value": "{color.purple.60}" },
+        "dark": { "value": "{color.purple.20}" },
+        "@base": {
+          "value": {
+            "light": "{text.color.tor.light}",
+            "dark": "{text.color.tor.dark}",
+            "prefersContrast": "inherit",
+            "forcedColors": "inherit"
+          }
+        }
       }
     }
   }


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


=====================================
toolkit/themes/shared/tor-colors.css deleted
=====================================
@@ -1,105 +0,0 @@
-@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-
-:root {
-  /* On light backgrounds. */
-  --tor-accent-color-light: var(--color-purple-60);
-  --tor-accent-color-hover-light: var(--color-purple-70);
-  --tor-accent-color-active-light: var(--color-purple-80);
-  /* Color for text on --background-color-canvas. */
-  --tor-text-color-light: var(--color-purple-60);
-  /* Buttons. */
-  --tor-button-text-color-light: var(--color-gray-05);
-  --tor-button-text-color-hover-light: var(--color-gray-05);
-  --tor-button-text-color-active-light: var(--color-gray-05);
-  --tor-button-background-color-light: var(--tor-accent-color-light);
-  --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
-  --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
-  --tor-focus-outline-color-light: var(--tor-accent-color-light);
-  /* Links. */
-  --tor-link-color-light: var(--tor-accent-color-light);
-  --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
-  --tor-link-color-active-light: var(--tor-accent-color-active-light);
-
-  /* On dark backgrounds. */
-  --tor-accent-color-dark: var(--color-purple-30);
-  --tor-accent-color-hover-dark: var(--color-purple-20);
-  --tor-accent-color-active-dark: var(--color-purple-10);
-  /* Color for text on --background-color-canvas. */
-  --tor-text-color-dark: var(--color-purple-20);
-  /* Buttons. */
-  --tor-button-text-color-dark: var(--color-gray-100);
-  --tor-button-text-color-hover-dark: var(--color-gray-100);
-  --tor-button-text-color-active-dark: var(--color-gray-100);
-  --tor-button-background-color-dark: var(--tor-accent-color-dark);
-  --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
-  --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
-  --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
-  /* Links. */
-  --tor-link-color-dark: var(--tor-accent-color-dark);
-  --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
-  --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
-
-  /* Generic colors that adapt to theme. */
-  --tor-accent-color: light-dark(var(--tor-accent-color-light), var(--tor-accent-color-dark));
-  --tor-accent-color-hover: light-dark(var(--tor-accent-color-hover-light), var(--tor-accent-color-hover-dark));
-  --tor-accent-color-active: light-dark(var(--tor-accent-color-active-light), var(--tor-accent-color-active-dark));
-  --tor-text-color: light-dark(var(--tor-text-color-light), var(--tor-text-color-dark));
-  --tor-button-text-color: light-dark(var(--tor-button-text-color-light), var(--tor-button-text-color-dark));
-  --tor-button-text-color-hover: light-dark(var(--tor-button-text-color-hover-light), var(--tor-button-text-color-hover-dark));
-  --tor-button-text-color-active: light-dark(var(--tor-button-text-color-active-light), var(--tor-button-text-color-active-dark));
-  --tor-button-background-color: light-dark(var(--tor-button-background-color-light), var(--tor-button-background-color-dark));
-  --tor-button-background-color-hover: light-dark(var(--tor-button-background-color-hover-light), var(--tor-button-background-color-hover-dark));
-  --tor-button-background-color-active: light-dark(var(--tor-button-background-color-active-light), var(--tor-button-background-color-active-dark));
-  --tor-focus-outline-color: light-dark(var(--tor-focus-outline-color-light), var(--tor-focus-outline-color-dark));
-  --tor-link-color: light-dark(var(--tor-link-color-light), var(--tor-link-color-dark));
-  --tor-link-color-hover: light-dark(var(--tor-link-color-hover-light), var(--tor-link-color-hover-dark));
-  --tor-link-color-active: light-dark(var(--tor-link-color-active-light), var(--tor-link-color-active-dark));
-}
-
-@media ((prefers-contrast) or (forced-colors)) {
-  :root {
-    /* Use Firefox design system accent colors. */
-    --tor-accent-color: var(--color-accent-primary);
-    --tor-accent-color-hover: var(--color-accent-primary-hover);
-    --tor-accent-color-active: var(--color-accent-primary-active);
-
-    /* Match surrounding text. */
-    --tor-text-color: currentColor;
-
-    /* Use Firefox design system primary button colors. */
-    --tor-button-text-color: var(--button-text-color-primary);
-    --tor-button-text-color-hover: var(--button-text-color-primary-hover);
-    --tor-button-text-color-active: var(--button-text-color-primary-active);
-    --tor-button-background-color: var(--button-background-color-primary);
-    --tor-button-background-color-hover: var(--button-background-color-primary-hover);
-    --tor-button-background-color-active: var(--button-background-color-primary-active);
-
-    /* Use Firefox design system default colors. */
-    --tor-focus-outline-color: var(--focus-outline-color);
-    --tor-link-color: var(--link-color);
-    --tor-link-color-hover: var(--link-color-hover);
-    --tor-link-color-active: var(--link-color-active);
-  }
-}
-
-/* Has a higher specificity than `button` and `button.primary`. */
-button.tor-button:is(*, .primary),
-xul|button.tor-button:is(*, [default]),
-.tor-button {
-  color: var(--tor-button-text-color);
-  background-color: var(--tor-button-background-color);
-}
-
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
-  color: var(--tor-button-text-color-hover);
-  background-color: var(--tor-button-background-color-hover);
-}
-
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
-  color: var(--tor-button-text-color-active);
-  background-color: var(--tor-button-background-color-active);
-}
-
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
-  outline-color: var(--tor-focus-outline-color);
-}


=====================================
toolkit/themes/shared/tor-common.css
=====================================
@@ -0,0 +1,23 @@
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Has a higher specificity than `button` and `button.primary`. */
+button.tor-button:is(*, .primary),
+xul|button.tor-button:is(*, [default]),
+.tor-button {
+  color: var(--button-text-color-tor);
+  background-color: var(--button-background-color-tor);
+}
+
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
+  color: var(--button-text-color-tor-hover);
+  background-color: var(--button-background-color-tor-hover);
+}
+
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
+  color: var(--button-text-color-tor-active);
+  background-color: var(--button-background-color-tor-active);
+}
+
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
+  outline-color: var(--focus-outline-color-tor);
+}



View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/4569186...

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/4569186...
You're receiving this email because of your account on gitlab.torproject.org.

    

[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-148.0a1-16.0-2] 12 commits: fixup! BB 42728: Modify ./mach lint to skip unused linters

henry (＠henry)