Pier Angelo Vendrame pushed to branch tor-browser-145.0a1-16.0-1 at The Tor Project / Applications / Tor Browser Commits: f2691678 by Henry Wilkes at 2025-11-27T17:24:01+00:00 fixup! BB 40925: Implemented the Security Level component TB 44365: Fix CSS linting errors and missing variables. - - - - - 528c689e by Henry Wilkes at 2025-11-27T17:35:12+00:00 fixup! BB 32308: Use direct browser sizing for letterboxing. TB 44365: Fix CSS linting errors and missing variables. - - - - - 6689ac59 by Henry Wilkes at 2025-11-27T17:43:04+00:00 fixup! TB 7494: Create local home page for TBB. TB 44365: Fix CSS linting errors and missing variables. - - - - - dffc19a1 by Henry Wilkes at 2025-11-27T17:43:05+00:00 fixup! TB 30237: Add v3 onion services client authentication prompt TB 44365: Fix CSS linting errors and missing variables. - - - - - 2641c3fc by Henry Wilkes at 2025-11-27T17:43:06+00:00 fixup! TB 40458: Implement .tor.onion aliases TB 44365: Fix CSS linting errors and missing variables. - - - - - 72fcc979 by Henry Wilkes at 2025-11-27T17:43:06+00:00 fixup! TB 41600: Add a tor circuit display panel. TB 44365: Fix CSS linting errors and missing variables. - - - - - e2c81a70 by Henry Wilkes at 2025-11-27T17:43:07+00:00 fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection TB 44365: Fix CSS linting errors and missing variables. - - - - - 5c6aea6a by Henry Wilkes at 2025-11-27T17:43:08+00:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 44365: Fix CSS linting errors and missing variables. - - - - - 7d4f87d0 by Henry Wilkes at 2025-11-27T17:43:09+00:00 fixup! Temporary changes to about:torconnect for Android. TB 44365: Fix CSS linting errors and missing variables. - - - - - 2342c259 by Henry Wilkes at 2025-11-27T17:43:10+00:00 fixup! TB 44032: YEC 2025 assets. TB 44365: Fix CSS linting errors and missing variables. - - - - - 13 changed files: - browser/components/abouttor/content/aboutTor.css - browser/components/abouttor/content/yec2025-font.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/tor-urlbar-button.css - toolkit/components/resistfingerprinting/content/letterboxing.css - toolkit/components/torconnect/content/aboutTorConnect.css - toolkit/components/torconnect/content/aboutTorConnect.js Changes: ===================================== browser/components/abouttor/content/aboutTor.css ===================================== @@ -38,6 +38,7 @@ h1 { display: flex; align-items: center; gap: 16px; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */ font-size: 40px; margin-block-start: 0; margin-block-end: 40px; @@ -70,8 +71,8 @@ body:not(.is-testing) #tor-browser-home-heading-testing { } .tor-home-box { - border: 1px solid var(--in-content-box-border-color); - background-color: var(--in-content-box-info-background); + border: 1px solid var(--border-color); + background-color: var(--background-color-box-info); max-width: var(--form-max-width); width: -moz-available; box-sizing: border-box; @@ -95,7 +96,6 @@ body:not(.show-tor-check) #tor-check { .home-message { grid-area: message; - font-weight: 400; text-align: center; margin-block: 1.6em; } @@ -118,12 +118,14 @@ body:not(.show-tor-check) #tor-check { --form-border-width: 1px; /* Padding between elements and the parent's border edge. */ --form-outer-padding: calc(var(--form-padding) - var(--form-border-width)); - --form-radius: 7px; + --form-radius-container: var(--border-radius-medium); + --form-radius: calc(var(--form-radius-container) - var(--form-border-width)); --logo-size: 30px; - border-radius: calc(var(--form-radius) + var(--form-border-width)); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */ + border-radius: var(--form-radius-container); border-width: var(--form-border-width); border-style: solid; - border-color: var(--in-content-box-border-color); + border-color: var(--border-color); } #search-form:has(#search-input:focus-visible) { @@ -149,10 +151,12 @@ 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; @@ -161,14 +165,15 @@ body:not(.show-tor-check) #tor-check { #onionize-toggle { flex: 0 0 auto; - font-weight: 500; 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; @@ -203,7 +208,7 @@ body:not(.show-survey) #survey { width: 24px; height: 24px; padding: 8px; - border-radius: 20px; + border-radius: var(--border-radius-circle); } #survey-heading { @@ -245,10 +250,12 @@ body:not(.show-survey) #survey { background-color: #2c0449; --focus-outline-color: var(--tor-focus-outline-color-dark); --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); - --in-content-focus-outline-color: var(--focus-outline-color); - --in-content-focus-outline: var(--focus-outline); --onion-pattern-stroke-color: #3e0663; --onion-pattern-fill-color: #350556; + /* Same as --text-color when "prefers-color-scheme: light" */ + --text-color-light: var(--color-gray-100); + /* Same as --text-color when "prefers-color-scheme: dark" */ + --text-color-dark: var(--color-gray-05); } #tor-check { @@ -257,13 +264,10 @@ body:not(.show-survey) #survey { } body > :not(#search-form) { - /* Same as --in-content-page-color when "prefers-color-scheme: dark" */ - --in-content-page-color-dark: var(--color-gray-05); - color: var(--in-content-page-color-dark); + color: var(--text-color-dark); --button-text-color: currentColor; - --in-content-button-text-color: var(--button-text-color); - --in-content-button-text-color-hover: var(--button-text-color); - --in-content-button-text-color-active: var(--button-text-color); + --button-text-color-hover: var(--button-text-color); + --button-text-color-active: var(--button-text-color); --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); @@ -275,15 +279,14 @@ body:not(.show-survey) #survey { #search-form { /* Use light color for background and moz-toggle shadow root. */ color-scheme: light; - /* Same as --in-content-page-color when "prefers-color-scheme: light" */ - --in-content-page-color-light: var(--color-gray-100); - color: var(--in-content-page-color-light); + color: var(--text-color-light); border-color: transparent; } #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); } @@ -297,8 +300,6 @@ body:not(.show-survey) #survey { #search-form > * { --focus-outline-color: var(--tor-focus-outline-color-light); --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); - --in-content-focus-outline-color: var(--focus-outline-color); - --in-content-focus-outline: var(--focus-outline); /* Variables used for --toggle- variables. */ --color-accent-primary: var(--tor-button-background-color-light); --color-accent-primary-hover: var(--tor-button-background-color-hover-light); @@ -319,10 +320,10 @@ body:not(.show-survey) #survey { } #survey-launch { - color: var(--in-content-page-color-light); - --in-content-primary-button-background: var(--tor-button-background-color-dark); - --in-content-primary-button-background-hover: var(--tor-button-background-color-hover-dark); - --in-content-primary-button-background-active: var(--tor-button-background-color-active-dark); + 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); } } @@ -341,7 +342,7 @@ body.show-yec h1 { #yec-banner { grid-area: heading; border-radius: var(--border-radius-medium); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); display: grid; grid-template: "yec-heading yec-image" auto @@ -388,8 +389,9 @@ 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 */ font-size: 64px; - font-weight: 400; + font-weight: var(--font-weight); font-family: "Jacquard 12", serif; } @@ -418,10 +420,10 @@ body.show-yec h1 { justify-self: start; /* Style like a button. */ font-weight: var(--button-font-weight); - color: var(--in-content-button-text-color); - border: 1px solid var(--in-content-button-border-color); - border-radius: var(--border-radius-small); - background-color: var(--in-content-button-background); + color: var(--button-text-color); + border: 1px solid var(--button-border-color); + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); padding: var(--button-padding); box-sizing: border-box; min-height: var(--button-min-height); @@ -437,15 +439,15 @@ body.show-yec h1 { } #yec-donate-link:hover { - background-color: var(--in-content-button-background-hover); - color: var(--in-content-button-text-color-hover); - border-color: var(--in-content-button-border-color-hover); + background-color: var(--button-background-color-hover); + color: var(--button-text-color-hover); + border-color: var(--button-border-color-hover); } #yec-donate-link:hover:active { - background-color: var(--in-content-button-background-active); - color: var(--in-content-button-text-color-active); - border-color: var(--in-content-button-border-color-active); + background-color: var(--button-background-color-active); + color: var(--button-text-color-active); + border-color: var(--button-border-color-active); } #yec-donate-icon { @@ -487,7 +489,8 @@ body.show-yec h1 { } #yec-heading { - font-size: 3.5rem; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */ + font-size: 50px; } #yec-matching { @@ -502,7 +505,7 @@ body.show-yec h1 { @media ((prefers-contrast) or (forced-colors)) and (prefers-color-scheme: dark) { #yec-image { /* Give the dark image a light border to separate from background. */ - border-color: var(--in-content-box-border-color); + border-color: var(--border-color); } } @@ -523,11 +526,11 @@ body.show-yec h1 { } #yec-donate-link { - --in-content-button-text-color: var(--yec-button-text); - --in-content-button-text-color-hover: var(--yec-button-text); - --in-content-button-text-color-active: var(--yec-button-text); - --in-content-button-background: var(--yec-button-background); - --in-content-button-background-hover: var(--yec-button-background-hover); - --in-content-button-background-active: var(--yec-button-background-active); + --button-text-color: var(--yec-button-text); + --button-text-color-hover: var(--yec-button-text); + --button-text-color-active: var(--yec-button-text); + --button-background-color: var(--yec-button-background); + --button-background-color-hover: var(--yec-button-background-hover); + --button-background-color-active: var(--yec-button-background-active); } } ===================================== browser/components/abouttor/content/yec2025-font.css ===================================== @@ -98,6 +98,7 @@ @font-face { font-family: "Jacquard 12"; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-weight-tokens */ font-weight: 400 400; font-style: normal; /* woff2 stream */ ===================================== browser/components/onionservices/content/authPreferences.css ===================================== @@ -5,7 +5,7 @@ } #onionservices-savedkeys-tree treechildren::-moz-tree-cell-text { - font-size: 80%; + font-size: var(--font-size-small); } #onionservices-savedkeys-errorContainer { ===================================== browser/components/onionservices/content/onionservices.css ===================================== @@ -1,7 +1,7 @@ /* Copyright (c) 2020, The Tor Project, Inc. */ #tor-clientauth-notification-desc { - font-weight: bold; + font-weight: var(--font-weight-bold); } #tor-clientauth-notification-key { @@ -16,18 +16,16 @@ * use the same rules). */ #tor-clientauth-notification-key.invalid { - border: 1px solid #d70022; - box-shadow: - 0 0 0 1px #d70022, - 0 0 0 4px rgba(215, 0, 34, 0.3); + border: 1px solid var(--outline-color-error); } #tor-clientauth-warning { display: inline-block; animation: fade-up-tt 450ms; - background: #d70022; + /* FIXME: This warning block does not follow upstream's styling. */ + background: var(--button-background-color-destructive); + color: var(--button-text-color-destructive); border-radius: var(--border-radius-xsmall); - color: #fff; inset-inline-start: 3px; padding: 5px 12px; position: relative; @@ -40,7 +38,7 @@ } #tor-clientauth-warning::before { - background: #d70022; + background: var(--button-background-color-destructive); bottom: -8px; content: "."; height: 16px; ===================================== browser/components/rulesets/content/aboutRulesets.css ===================================== @@ -4,20 +4,10 @@ html, body { - margin: 0; - padding: 0; width: 100%; height: 100%; } -body { - font: message-box; - background-color: var(--background-color-canvas); - color: var(--in-content-page-color); - font-size: 15px; - cursor: default; -} - label { display: flex; align-items: center; @@ -39,14 +29,14 @@ textarea { select, option { - font-weight: 700; + font-weight: var(--font-weight-bold); } dt { margin: var(--ruleset-vmargin) 0 0 0; padding: 0; color: var(--text-color-deemphasized); - font-size: 85%; + font-size: var(--font-size-small); } dd { @@ -60,7 +50,7 @@ hr { width: 40px; margin: 0; border: none; - border-top: 1px solid var(--in-content-border-color); + border-top: 1px solid var(--border-color); } .hidden { @@ -132,15 +122,15 @@ section { width: var(--content-width); max-width: 100%; padding-bottom: 16px; - border-bottom: 1px solid var(--in-content-border-color); + border-bottom: 1px solid var(--border-color); } .title h1 { margin: 0; padding: 0; padding-inline-start: 35px; - font-size: 20px; - font-weight: 700; + 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; @@ -160,15 +150,15 @@ aside { flex: 0 0 var(--sidebar-width); box-sizing: border-box; - border-inline-end: 1px solid var(--in-content-border-color); + border-inline-end: 1px solid var(--border-color); background-color: var(--background-color-box); } #ruleset-heading { padding: 16px; text-align: center; - font-weight: 700; - border-bottom: 1px solid var(--in-content-border-color); + font-weight: var(--font-weight-bold); + border-bottom: 1px solid var(--border-color); } #ruleset-list-container { @@ -181,7 +171,7 @@ aside { } #ruleset-list-empty-description { - font-size: 80%; + font-size: var(--font-size-small); } #ruleset-list { @@ -196,7 +186,7 @@ aside { padding: 10px 18px; list-style: none; border-inline-start: 4px solid transparent; - border-bottom: 1px solid var(--in-content-border-color); + border-bottom: 1px solid var(--border-color); } #ruleset-list li:last-child { @@ -216,29 +206,30 @@ aside { } #ruleset-list .name { - font-weight: 700; + font-weight: var(--font-weight-bold); } #ruleset-list .description { - font-size: 85%; + font-size: var(--font-size-small); color: var(--text-color-deemphasized); } #ruleset-list .selected { + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */ border-inline-start-color: var(--color-accent-primary); } #ruleset-list .selected.disabled { - border-inline-start-color: var(--in-content-border-color); + border-inline-start-color: var(--border-color); } #ruleset-list li:not(.selected):hover { - background-color: var(--in-content-button-background-hover); - color: var(--in-content-button-text-color-hover); + background-color: var(--button-background-color-hover); + color: var(--button-text-color-hover); } #ruleset-list li:not(.selected):hover:active { - background-color: var(--in-content-button-background-active); + background-color: var(--button-background-color-active); } #ruleset-list #ruleset-template { @@ -255,7 +246,7 @@ aside { padding: 8px; border-radius: var(--border-radius-xsmall); background-color: var(--background-color-box); - font-size: 85%; + font-size: var(--font-size-small); line-break: anywhere; /* ASCII-only text, so can set line-height. */ line-height: 1.4; @@ -284,7 +275,7 @@ aside { #ruleset-updated { margin-top: 24px; color: var(--text-color-deemphasized); - font-size: 85%; + font-size: var(--font-size-small); } /* Edit ruleset */ ===================================== browser/components/securitylevel/content/securityLevelPanel.css ===================================== @@ -59,7 +59,7 @@ } #securityLevel-level { - font-size: 1.25em; + font-size: larger; font-weight: var(--font-weight-bold); grid-area: title; } ===================================== browser/components/securitylevel/content/securityLevelPreferences.css ===================================== @@ -63,7 +63,7 @@ .security-level-name { grid-area: name; - font-weight: bold; + font-weight: var(--font-weight-bold); align-self: center; white-space: nowrap; } @@ -97,7 +97,7 @@ #security-level-current { margin-block-start: var(--space-large); background: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-small); padding: var(--space-medium); } ===================================== browser/components/torcircuit/content/torCircuitPanel.css ===================================== @@ -167,6 +167,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; ===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -82,7 +82,7 @@ button.spoof-button-disabled { } .network-status-label { - font-weight: bold; + font-weight: var(--font-weight-bold); margin-inline-end: 0.75em; } @@ -142,7 +142,7 @@ button.spoof-button-disabled { min-width: max-content; align-items: center; gap: 0.5em; - font-size: 0.85em; + font-size: var(--font-size-small); } .bridge-status-badge:not(.bridge-status-connected, .bridge-status-none, .bridge-status-current-built-in) { @@ -210,7 +210,7 @@ button.spoof-button-disabled { gap: 16px; border-radius: var(--border-radius-small); color: var(--text-color-deemphasized); - border: 2px dashed color-mix(in srgb, currentColor 20%, transparent); + border: 2px dashed var(--border-color-deemphasized); } #tor-bridges-none-icon { @@ -225,8 +225,8 @@ button.spoof-button-disabled { .tor-bridges-details-box { padding: 16px; border-radius: var(--border-radius-small); - background: var(--in-content-box-info-background); - border: 1px solid var(--in-content-box-border-color); + background: var(--background-color-box-info); + border: 1px solid var(--border-color); } @media not forced-colors { @@ -240,7 +240,7 @@ 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(--in-content-border-color); + border-block-end: 1px solid var(--border-color); padding-block-end: 16px; margin-block-end: 16px; white-space: nowrap; @@ -307,7 +307,7 @@ button.spoof-button-disabled { } #tor-bridges-built-in-type-name { - font-weight: 700; + font-weight: var(--font-weight-bold); grid-area: type; } @@ -525,7 +525,7 @@ button.spoof-button-disabled { /* fill is the progress, stroke is the empty ring. */ -moz-context-properties: fill, stroke; fill: var(--icon-color-success); - stroke: var(--in-content-border-color); + stroke: var(--border-color); content: url("chrome://browser/content/torpreferences/lox-progress-ring.svg"); } @@ -602,7 +602,7 @@ button.spoof-button-disabled { } #tor-bridges-lox-details .tor-bridges-lox-list-item::before { - stroke: var(--in-content-border-color); + stroke: var(--border-color); } #tor-bridges-lox-unlock-alert .tor-bridges-lox-list-item::before { @@ -673,7 +673,7 @@ button.spoof-button-disabled { .tor-bridges-provider-name { font-weight: var(--font-weight-bold); - font-size: 0.85em; + font-size: var(--font-size-small); } .tor-bridges-provider-instruction { @@ -707,8 +707,8 @@ button.spoof-button-disabled { } #torPreferences-bridges-location menuitem[disabled="true"] { - color: var(--in-content-button-text-color, inherit); - font-weight: 700; + color: var(--button-text-color, inherit); + font-weight: var(--font-weight-bold); } /* Request bridges */ @@ -849,7 +849,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { } #lox-invite-dialog-list-label { - font-weight: 700; + font-weight: var(--font-weight-bold); } #lox-invite-dialog-list { @@ -882,7 +882,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { } #torPreferences-builtinBridge-typeSelection radio label { - font-weight: 700; + font-weight: var(--font-weight-bold); } /* Request bridge dialog */ @@ -954,8 +954,8 @@ groupbox#torPreferences-bridges-group textarea { } #user-provide-bridge-textarea.invalid-input { - border-color: var(--in-content-danger-button-background); - outline-color: var(--in-content-danger-button-background); + border-color: var(--outline-color-error); + outline-color: var(--outline-color-error); } #user-provide-bridge-error-message { @@ -1047,7 +1047,7 @@ groupbox#torPreferences-bridges-group textarea { flex-direction: column; padding: var(--space-small); margin-block-end: 4px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-small); font-size: var(--font-size-small); } ===================================== browser/themes/shared/tor-urlbar-button.css ===================================== @@ -2,7 +2,8 @@ display: flex; align-items: center; gap: 0.5em; - border-radius: var(--urlbar-icon-border-radius); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */ + border-radius: var(--urlbar-inner-border-radius); --tor-urlbar-button-inline-padding: 8px; padding-inline: var(--tor-urlbar-button-inline-padding); margin: 0; ===================================== toolkit/components/resistfingerprinting/content/letterboxing.css ===================================== @@ -17,6 +17,9 @@ } } +/* 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. */ ===================================== toolkit/components/torconnect/content/aboutTorConnect.css ===================================== @@ -35,18 +35,18 @@ body:not(.loaded) { .breadcrumb-item { align-items: center; cursor: pointer; - color: var(--in-content-text-color); + color: var(--text-color); border-radius: var(--border-radius-small); } .breadcrumb-item:hover { color: var(--color-accent-primary); - background-color: var(--in-content-button-background-hover); + background-color: var(--button-background-color-hover); } .breadcrumb-item:active { color: var(--color-accent-primary-active); - background-color: var(--in-content-button-background-active); + background-color: var(--button-background-color-active); } .breadcrumb-separator { @@ -74,23 +74,11 @@ body:not(.loaded) { .breadcrumb-item.disabled, .breadcrumb-item.disabled:hover, .breadcrumb-item.disabled:active { - color: var(--in-content-text-color); + color: var(--text-color); opacity: 0.4; cursor: default; } -.breadcrumb-item.error { - color: var(--in-content-danger-button-background); -} - -.breadcrumb-item.error:hover { - color: var(--in-content-danger-button-background-hover); -} - -.breadcrumb-item.error:active { - color: var(--in-content-danger-button-background-active); -} - .breadcrumb-item.hidden, .breadcrumb-separator.hidden { display: none; @@ -157,7 +145,7 @@ form#locationDropdown { form#locationDropdown select { max-width: 100%; margin-inline: 0; - font-weight: 700; + font-weight: var(--font-weight-bold); } :root { @@ -188,7 +176,7 @@ form#locationDropdown select { #progressBarBackground { width: 100%; height: var(--progress-bar-height); - background: var(--in-content-box-info-background); + background: var(--background-color-box-info); } #progressBackground { @@ -199,6 +187,7 @@ 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; } @@ -206,8 +195,10 @@ 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); } @@ -306,7 +297,7 @@ body.android { color: var(--android-dark-text-primary); background: linear-gradient(194deg, #692e9d -0.93%, #393270 48.91%); font: menu; - font-size: 14px; + font-size: var(--font-size-small); display: flex; } @@ -332,13 +323,13 @@ body.android { background-repeat: no-repeat; background-size: 40px; padding-top: 64px; - font-size: 22px; + font-size: var(--font-size-xlarge); line-height: 28px; } .android h1 { font-weight: var(--font-weight); - font-size: 100%; + font-size: inherit; margin: 0 0 16px 0; } @@ -367,6 +358,7 @@ body.android { .android select { background: transparent; border: none; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */ border-bottom: 1px solid var(--android-dark-text-primary); color: var(--android-dark-text-primary); display: block; @@ -396,8 +388,8 @@ body:not(.android) #connectButtonContainer { width: 100%; margin: 4px 0; padding: 11px 30px; - font-size: 14px; - font-weight: 500; + font-size: var(--font-size-small); + font-weight: var(--font-weight); border: none; border-radius: var(--border-radius-small); } ===================================== toolkit/components/torconnect/content/aboutTorConnect.js ===================================== @@ -20,7 +20,6 @@ const BreadcrumbStatus = Object.freeze({ Disabled: "disabled", Default: "default", Active: "active", - Error: "error", }); /** @@ -257,7 +256,6 @@ class AboutTorConnect { elem.classList.remove(BreadcrumbStatus.Hidden); elem.classList.remove(BreadcrumbStatus.Disabled); elem.classList.remove(BreadcrumbStatus.Active); - elem.classList.remove(BreadcrumbStatus.Error); if (status !== "") { elem.classList.add(status); } View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/8e60c9e... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/8e60c9e... You're receiving this email because of your account on gitlab.torproject.org.