commit 0f6413dbbdc8cf156e9cd95c60161a0f36320214 parent 81635b4f708f7ca8f4c5d8976b08adaca3dc3540 Author: dwhisman <dwhisman@mozilla.com> Date: Wed, 19 Nov 2025 20:50:26 +0000 Bug 1988865 - Part 4: Use `--border-color` instead of `--in-content-box-border-color` r=mtigley,extension-reviewers,desktop-theme-reviewers,credential-management-reviewers,webrtc-reviewers,omc-reviewers,toolkit-telemetry-reviewers,janerik,devtools-reviewers,hjones,nchevobbe,mimi,ng,willdurand Differential Revision: https://phabricator.services.mozilla.com/D269661 Diffstat:
21 files changed, 47 insertions(+), 67 deletions(-)
diff --git a/browser/base/content/sanitizeDialog.css b/browser/base/content/sanitizeDialog.css @@ -24,7 +24,7 @@ #sanitizeEverythingWarningBox { /* Fallback colors are used when the dialog is open outside of in-content prefs */ background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); + border: 1px solid var(--border-color, ThreeDDarkShadow); border-radius: 5px; padding: 16px; margin-block: 6px; diff --git a/browser/components/aboutlogins/content/components/menu-button.css b/browser/components/aboutlogins/content/components/menu-button.css @@ -23,7 +23,7 @@ margin: 0; padding: 5px 0; background-color: 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); box-shadow: var(--box-shadow-popup); min-width: max-content; diff --git a/browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss b/browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss @@ -181,14 +181,14 @@ &.errorReporting { tr { - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); } td { padding: 4px; &[rowspan] { - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); } } } @@ -197,13 +197,13 @@ min-width: 100%; tr:first-child td { - border-top: 1px solid var(--in-content-box-border-color); + border-top: 1px solid var(--border-color); } td { vertical-align: top; padding: 8px; - border-bottom: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--border-color); &.no-wrap { white-space: nowrap; @@ -214,11 +214,11 @@ } &:first-child { - border-inline-start: 1px solid var(--in-content-box-border-color); + border-inline-start: 1px solid var(--border-color); } &:last-child { - border-inline-end: 1px solid var(--in-content-box-border-color); + border-inline-end: 1px solid var(--border-color); } } } @@ -432,7 +432,7 @@ display: flex; flex-flow: column nowrap; padding: 8px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: 5px; .impressions-inner-box { diff --git a/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css b/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css @@ -140,24 +140,24 @@ border-collapse: collapse; } .asrouter-admin table.errorReporting tr { - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); } .asrouter-admin table.errorReporting td { padding: 4px; } .asrouter-admin table.errorReporting td[rowspan] { - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); } .asrouter-admin table.bordered-table { min-width: 100%; } .asrouter-admin table.bordered-table tr:first-child td { - border-top: 1px solid var(--in-content-box-border-color); + border-top: 1px solid var(--border-color); } .asrouter-admin table.bordered-table td { vertical-align: top; padding: 8px; - border-bottom: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--border-color); } .asrouter-admin table.bordered-table td.no-wrap { white-space: nowrap; @@ -166,10 +166,10 @@ width: 0; } .asrouter-admin table.bordered-table td:first-child { - border-inline-start: 1px solid var(--in-content-box-border-color); + border-inline-start: 1px solid var(--border-color); } .asrouter-admin table.bordered-table td:last-child { - border-inline-end: 1px solid var(--in-content-box-border-color); + border-inline-end: 1px solid var(--border-color); } .asrouter-admin table input[type=checkbox], .asrouter-admin table input[type=radio] { margin: 0; @@ -340,7 +340,7 @@ display: flex; flex-flow: column nowrap; padding: 8px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: 5px; } .asrouter-admin .impressions-section .impressions-item .impressions-inner-box { diff --git a/browser/components/preferences/dialogs/clearSiteData.css b/browser/components/preferences/dialogs/clearSiteData.css @@ -4,7 +4,7 @@ .options-container { background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: 2px; color: var(--text-color); padding: 0.5em; diff --git a/browser/extensions/formautofill/content/manageDialog.css b/browser/extensions/formautofill/content/manageDialog.css @@ -25,7 +25,7 @@ fieldset { width: 100%; padding: 0.4em 0.7em; background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: 2px 2px 0 0; user-select: none; } diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css @@ -10,7 +10,7 @@ background-color: var(--background-color-box-info); margin: 24px 0; padding: 14px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-xsmall); } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -759,7 +759,7 @@ html|dialog, } .separator { - border-bottom: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--border-color); } #fxaGroup { @@ -1395,14 +1395,14 @@ setting-group[groupid="home"] { height: 220px; overflow: auto; background-color: 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); resize: vertical; margin: 4px 0; } .translations-manage-language:first-child { - border-bottom: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--border-color); padding: 8px; margin-bottom: 8px; } diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css @@ -109,7 +109,7 @@ } .privacy-detailedoption { - border-color: var(--in-content-box-border-color); + border-color: var(--border-color); } .privacy-detailedoption.disabled { diff --git a/browser/themes/shared/sanitizeDialog_v2.css b/browser/themes/shared/sanitizeDialog_v2.css @@ -32,7 +32,7 @@ #sanitizeEverythingWarningBox { /* Fallback colors are used when the dialog is open outside of in-content prefs */ background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); + border: 1px solid var(--border-color, ThreeDDarkShadow); border-radius: var(--border-radius-small); padding: 16px; margin-block: 6px; diff --git a/toolkit/components/aboutconfig/content/aboutconfig.css b/toolkit/components/aboutconfig/content/aboutconfig.css @@ -4,7 +4,7 @@ :root { --prefs-table-border-width: 1px; - --prefs-table-border: var(--prefs-table-border-width) solid var(--in-content-box-border-color); + --prefs-table-border: var(--prefs-table-border-width) solid var(--border-color); } .hidden { diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css @@ -62,15 +62,7 @@ th { } th:not(:first-child) { border-inline-start: 1px solid; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--in-content-box-border-color) 20%, - var(--in-content-box-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1; + border-image: linear-gradient(transparent 0%, transparent 20%, var(--border-color) 20%, var(--border-color) 80%, transparent 80%, transparent 100%) 1 1; } th, td { @@ -300,7 +292,7 @@ tr:is([selected], :hover, :focus-visible):not(.killing) > td > .close-icon, */ tr.separate-from-previous-process-group { - border-top: dotted 1px var(--in-content-box-border-color); + border-top: dotted 1px var(--border-color); margin-top: -1px; } diff --git a/toolkit/content/aboutLogging/aboutLogging.css b/toolkit/content/aboutLogging/aboutLogging.css @@ -9,7 +9,7 @@ * Bug 1986645: We should ship these variables in Android and remove here. */ --aboutlogging-text-color-deemphasized: var(--text-color-deemphasized, color-mix(in srgb, currentColor 69%, transparent)); --aboutlogging-box-background: var(--background-color-box, light-dark(#fff, #23222b)); - --aboutlogging-box-border-color: var(--in-content-box-border-color, color-mix(in srgb, currentColor 41%, transparent)); + --aboutlogging-box-border-color: var(--border-color, color-mix(in srgb, currentColor 41%, transparent)); --aboutlogging-border-radius-small: var(--border-radius-small, 4px); } diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css @@ -194,7 +194,7 @@ section:not(.active) { padding: 24px; flex-direction: column; background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); margin: 12px 0; inset-inline-start: 12px; } @@ -229,7 +229,7 @@ section:not(.active) { position: relative; /* required for position:absolute of the contained .copy-node */ padding-block: 12px; padding-inline: 20px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); background-color: var(--background-color-box); border-radius: 2px; margin-bottom: 24px; diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.css b/toolkit/content/aboutwebrtc/aboutWebrtc.css @@ -39,7 +39,7 @@ table { #mediactx > div { padding: 1em 2em; margin: 1em 0; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: 10px; background-color: var(--background-color-box); } diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css @@ -536,7 +536,7 @@ button.addon-detail-description-toggle { .addon-detail-contribute { display: flex; padding: var(--card-padding); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-small); margin-bottom: var(--card-padding); flex-direction: column; @@ -770,7 +770,7 @@ button.tab-button { } button.tab-button:hover { - border-top-color: var(--in-content-box-border-color); + border-top-color: var(--border-color); } button.tab-button[selected], diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css @@ -88,14 +88,14 @@ button:disabled { .trr-message-container { background-color: 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: 10px; } #badCertAdvancedPanel { background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); } .advanced-panel { diff --git a/toolkit/themes/shared/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css @@ -17,7 +17,7 @@ min-width: 330px; max-width: 50em; margin: 4em auto; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); padding: 3em; background-color: var(--background-color-box); diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css @@ -17,15 +17,13 @@ * browser.display.background_color.dark */ - --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); - --in-content-item-hover: color-mix(in srgb, var(--button-background-color-primary) 20%, transparent); --in-content-item-hover-text: var(--text-color); --in-content-border-invalid: light-dark(var(--red-50), rgb(255, 132, 139)); --in-content-table-background: light-dark(#f8f8fa, rgb(35, 34, 43)); - --in-content-table-border-color: var(--in-content-box-border-color); + --in-content-table-border-color: var(--border-color); --in-content-table-header-background: var(--button-background-color-primary); --in-content-table-header-color: var(--button-text-color-primary); --in-content-sidebar-width: 280px; @@ -72,8 +70,6 @@ @media (forced-colors) { :host(.anonymous-content-host), :root { - --in-content-box-border-color: -moz-DialogText; - --in-content-item-hover: SelectedItem; --in-content-item-hover-text: SelectedItemText; @@ -385,7 +381,7 @@ xul|menulist > xul|menupopup { border: none; background-color: transparent; - --panel-border-color: var(--in-content-box-border-color); + --panel-border-color: var(--border-color); --panel-border-radius: 2px; --panel-background: var(--background-color-box); --panel-color: var(--text-color); @@ -424,7 +420,7 @@ xul|menulist > xul|menupopup xul|menuseparator { appearance: none; margin: 0; padding: 0; - border-top: 1px solid var(--in-content-box-border-color); + border-top: 1px solid var(--border-color); border-bottom: none; } @@ -433,7 +429,7 @@ xul|menulist > xul|menupopup xul|menuseparator { html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), html|textarea { appearance: none; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); color: inherit; background-color: var(--background-color-box); @@ -757,7 +753,7 @@ xul|richlistbox { appearance: none; margin-inline: 0; background-color: 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); color: var(--text-color); } @@ -828,7 +824,7 @@ xul|richlistitem[selected] xul|menulist:focus-visible { xul|panel[type="autocomplete-richlistbox"] { background-color: var(--background-color-box); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); color: var(--text-color); } @@ -837,7 +833,7 @@ xul|panel[type="autocomplete-richlistbox"] { xul|tree { appearance: none; font-size: 1em; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-small); background-color: var(--background-color-box); color: inherit; @@ -880,21 +876,13 @@ xul|treecol:not([hideheader="true"], :first-child), .tree-columnpicker-button { border-inline-start-width: 1px; border-inline-start-style: solid; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--in-content-box-border-color) 20%, - var(--in-content-box-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1; + border-image: linear-gradient(transparent 0%, transparent 20%, var(--border-color) 20%, var(--border-color) 80%, transparent 80%, transparent 100%) 1 1; } @media (forced-colors) { xul|treecol:not([hideheader="true"], :first-child), xul|treecolpicker { - --in-content-box-border-color: var(--button-border-color); + --border-color: var(--button-border-color); } } diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css @@ -169,7 +169,7 @@ td { .action-box { background-color: var(--in-content-table-background); - border: 1px solid var(--in-content-box-border-color); + border: 1px solid var(--border-color); border-radius: var(--border-radius-small); padding: 16px; flex: 1 1 25%; diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp @@ -778,7 +778,7 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) { color = kWindowText; break; case ColorID::MozSidebarborder: - case ColorID::Windowframe: // --in-content-box-border-color computed + case ColorID::Windowframe: // --border-color computed // with kWindowText above // kWindowBackground. case ColorID::Graytext: // opacity: 0.4 of kWindowText blended over the