commit 5f2497f796b8039956c77942be303072cb8c2930 parent ccc22f306e8ef979d41feefc6ba0a98762d931d6 Author: Cristina Horotan <chorotan@mozilla.com> Date: Tue, 18 Nov 2025 02:05:55 +0200 Revert "Bug 1988865 - Part 5: Allow black and white keywords for border colors r=frontend-codestyle-reviewers,hjones" for causing dt failures on /browser_parsable_css.js This reverts commit 6fd4bc72d793b3bd435466aaac6e5ecae1d693a8. Revert "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" This reverts commit 8ee8d43fcb3d7855fd83532c4bd1c4d7cbd5a24c. Revert "Bug 1988865 - Part 3: Use `--border-color` instead of `--in-content-border-color` r=mtigley,webcompat-reviewers,extension-reviewers,credential-management-reviewers,webrtc-reviewers,devtools-reviewers,desktop-theme-reviewers,omc-reviewers,toolkit-telemetry-reviewers,twisniewski,janerik,nchevobbe,mimi,robwu,hjones,ng" This reverts commit cfc31d69b7f1098b4fd1942172dc6dcc63ff839f. Revert "Bug 1988865 - Part 2: Use `--border-color-selected` instead of `--color-accent-primary` r=mtigley,extension-reviewers,desktop-theme-reviewers,credential-management-reviewers,tabbrowser-reviewers,omc-reviewers,home-newtab-reviewers,emcminn,sthompson,robwu,hjones,mconley" This reverts commit 58d47b7292c517210408daecf4a199c216efce72. Revert "Bug 1988865 - Part 1: Add token for border-color-selected r=mtigley,desktop-theme-reviewers,credential-management-reviewers,devtools-reviewers,nchevobbe,hjones" This reverts commit c7cdc0660d9187b2d77345062183d77622463d60. Diffstat:
65 files changed, 176 insertions(+), 383 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(--border-color, ThreeDDarkShadow); + border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); border-radius: 5px; padding: 16px; margin-block: 6px; diff --git a/browser/components/aboutlogins/content/aboutLoginsImportReport.css b/browser/components/aboutlogins/content/aboutLoginsImportReport.css @@ -84,7 +84,7 @@ grid-row-start: 3; display: grid; grid-template-columns: auto 1fr; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); grid-auto-rows: 28px; overflow-y: auto; } diff --git a/browser/components/aboutlogins/content/components/generic-dialog.css b/browser/components/aboutlogins/content/components/generic-dialog.css @@ -57,7 +57,7 @@ ::slotted([slot="buttons"]) { grid-column: 1 / 4; grid-row-start: 3; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); padding-top: 12px; } diff --git a/browser/components/aboutlogins/content/components/login-alert.css b/browser/components/aboutlogins/content/components/login-alert.css @@ -11,7 +11,7 @@ color: var(--text-color); background-color: var(--background-color-box); border-radius: var(--border-radius-small); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); font-size: 0.9em; } diff --git a/browser/components/aboutlogins/content/components/login-list-lit-item.css b/browser/components/aboutlogins/content/components/login-list-lit-item.css @@ -22,12 +22,12 @@ } .list-item.keyboard-selected { - border-inline-start-color: var(--border-color); + border-inline-start-color: var(--in-content-border-color); background-color: var(--button-background-color-hover); } .list-item.selected { - border-inline-start-color: var(--border-color-selected); + border-inline-start-color: var(--color-accent-primary); background-color: var(--background-color-canvas); } diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :host { - border-inline-end: 1px solid var(--border-color); + border-inline-end: 1px solid var(--in-content-border-color); background-color: var(--background-color-box); display: flex; flex-direction: column; @@ -14,7 +14,7 @@ display: flex; align-items: center; padding: 0 16px 16px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); background-color: var(--background-color-box); } @@ -77,7 +77,7 @@ padding: 1em; max-width: 50ch; /* This should be kept in sync with login-list-item username and title max-width */ flex-grow: 1; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } .empty-search-message span, @@ -110,7 +110,7 @@ ol { font-size: 0.85em; font-weight: var(--heading-font-weight); padding: 4px 16px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); background-color: var(--background-color-box); margin-block-start: 2px; margin-inline: 2px; @@ -127,12 +127,12 @@ ol { } .login-list-item.keyboard-selected { - border-inline-start-color: var(--border-color); + border-inline-start-color: var(--in-content-border-color); background-color: var(--button-background-color-hover); } .login-list-item.selected { - border-inline-start-color: var(--border-color-selected); + border-inline-start-color: var(--color-accent-primary); background-color: var(--background-color-canvas); } diff --git a/browser/components/aboutlogins/content/components/login-message-popup.css b/browser/components/aboutlogins/content/components/login-message-popup.css @@ -19,7 +19,7 @@ position: relative; padding: 12px; background-color: var(--background-color-box); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-radius: var(--border-radius-small); } @@ -41,7 +41,7 @@ margin-top: -10px; } :host .arrow-box::before { - border-inline-end-color: var(--border-color); + border-inline-end-color: var(--in-content-border-color); border-width: 11px; margin-top: -11px; } diff --git a/browser/components/aboutlogins/content/components/login-timeline.css b/browser/components/aboutlogins/content/components/login-timeline.css @@ -24,7 +24,7 @@ height: 2px; justify-self: stretch; align-self: center; - background-color: var(--border-color); + background-color: var(--in-content-border-color); grid-row: 1; } @@ -47,7 +47,7 @@ .timeline > .point { width: 24px; height: 24px; - stroke: var(--border-color); + stroke: var(--in-content-border-color); stroke-width: 30px; justify-self: center; } 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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); box-shadow: var(--box-shadow-popup); min-width: max-content; diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.css b/browser/components/aboutlogins/content/components/remove-logins-dialog.css @@ -100,6 +100,6 @@ .buttons { padding-block: 16px 32px; padding-inline: 48px 0; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); margin-inline: 48px; } diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -127,8 +127,8 @@ html { --single-select-hover-color: light-dark(#DEDEDF, #52525E); --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%); --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%); - --picker-border-color: var(--border-color); - --picker-checked-border-color: var(--border-color-selected); + --picker-border-color: var(--in-content-border-color); + --picker-checked-border-color: var(--color-accent-primary-selected); --picker-hover-border-color: var(--picker-border-color); --picker-focus-ring-color: var(--color-accent-primary-selected); --picker-checkbox-color: var(--color-accent-primary-selected); @@ -490,8 +490,8 @@ html { .addon-container { display: flex; - border: 1px solid var(--border-color); - box-shadow: 0 1px 2px 0 var(--border-color); + border: 1px solid var(--in-content-border-color); + box-shadow: 0 1px 2px 0 var(--in-content-border-color); border-radius: var(--border-radius-small); margin: 5px auto; text-align: start; @@ -1175,8 +1175,8 @@ html { .addon-container { display: flex; flex-direction: row; - border: 1px solid var(--border-color); - box-shadow: 0 1px 2px 0 var(--border-color); + border: 1px solid var(--in-content-border-color); + box-shadow: 0 1px 2px 0 var(--in-content-border-color); border-radius: var(--border-radius-small); margin-block: 0 16px; text-align: start; @@ -2002,7 +2002,7 @@ html { padding-top: 0; &:has(.selected) { - border: 1px solid var(--border-color-selected); + border: 1px solid var(--color-accent-primary); } &:hover { @@ -2242,7 +2242,7 @@ html { @media (prefers-contrast: no-preference) { background-color: var(--background-color-canvas); - border-color: var(--border-color); + border-color: var(--in-content-border-color); } cursor: pointer; @@ -2313,7 +2313,7 @@ html { border-end-end-radius: 0; & + .tile-content { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-top: none; border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius); } @@ -2333,8 +2333,8 @@ html { justify-content: space-between; & + .tile-content { - border-inline-start: 1px solid var(--border-color); - border-inline-end: 1px solid var(--border-color); + border-inline-start: 1px solid var(--in-content-border-color); + border-inline-end: 1px solid var(--in-content-border-color); } .header-text-container { diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1063,8 +1063,8 @@ html { --single-select-hover-color: light-dark(#DEDEDF, #52525E); --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%); --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%); - --picker-border-color: var(--border-color); - --picker-checked-border-color: var(--border-color-selected); + --picker-border-color: var(--in-content-border-color); + --picker-checked-border-color: var(--color-accent-primary-selected); --picker-hover-border-color: var(--picker-border-color); --picker-focus-ring-color: var(--color-accent-primary-selected); --picker-checkbox-color: var(--color-accent-primary-selected); @@ -1383,8 +1383,8 @@ html { } .onboardingContainer .screen[pos=center].addons-picker .addon-container { display: flex; - border: 1px solid var(--border-color); - box-shadow: 0 1px 2px 0 var(--border-color); + border: 1px solid var(--in-content-border-color); + box-shadow: 0 1px 2px 0 var(--in-content-border-color); border-radius: var(--border-radius-small); margin: 5px auto; text-align: start; @@ -1977,8 +1977,8 @@ html { .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container { display: flex; flex-direction: row; - border: 1px solid var(--border-color); - box-shadow: 0 1px 2px 0 var(--border-color); + border: 1px solid var(--in-content-border-color); + box-shadow: 0 1px 2px 0 var(--in-content-border-color); border-radius: var(--border-radius-small); margin-block: 0 16px; text-align: start; @@ -2854,7 +2854,7 @@ html { padding-top: 0; } .onboardingContainer .tiles-single-select-section .select-item.backup:has(.selected) { - border: 1px solid var(--border-color-selected); + border: 1px solid var(--color-accent-primary); } .onboardingContainer .tiles-single-select-section .select-item.backup:hover { background-color: transparent; @@ -3063,7 +3063,7 @@ html { .onboardingContainer #content-tiles-container button.tile-header, .onboardingContainer button.content-tiles-header { background-color: var(--background-color-canvas); - border-color: var(--border-color); + border-color: var(--in-content-border-color); } } .onboardingContainer #content-tiles-container button.tile-header .arrow-icon, @@ -3124,7 +3124,7 @@ html { border-end-end-radius: 0; } .onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] + .tile-content { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-top: none; border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius); } @@ -3136,8 +3136,8 @@ html { justify-content: space-between; } .onboardingContainer #content-tiles-container .content-tile button.tile-header + .tile-content { - border-inline-start: 1px solid var(--border-color); - border-inline-end: 1px solid var(--border-color); + border-inline-start: 1px solid var(--in-content-border-color); + border-inline-end: 1px solid var(--in-content-border-color); } .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container { display: flex; 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(--border-color); + border: 1px solid var(--in-content-box-border-color); } td { padding: 4px; &[rowspan] { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); } } } @@ -197,13 +197,13 @@ min-width: 100%; tr:first-child td { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-box-border-color); } td { vertical-align: top; padding: 8px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-box-border-color); &.no-wrap { white-space: nowrap; @@ -214,11 +214,11 @@ } &:first-child { - border-inline-start: 1px solid var(--border-color); + border-inline-start: 1px solid var(--in-content-box-border-color); } &:last-child { - border-inline-end: 1px solid var(--border-color); + border-inline-end: 1px solid var(--in-content-box-border-color); } } } @@ -397,7 +397,7 @@ textarea[readonly] { color: var(--text-color-deemphasized); - border-color: var(--border-color); + border-color: var(--in-content-border-color); } .monospace { @@ -432,7 +432,7 @@ display: flex; flex-flow: column nowrap; padding: 8px; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-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(--border-color); + border: 1px solid var(--in-content-box-border-color); } .asrouter-admin table.errorReporting td { padding: 4px; } .asrouter-admin table.errorReporting td[rowspan] { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); } .asrouter-admin table.bordered-table { min-width: 100%; } .asrouter-admin table.bordered-table tr:first-child td { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-box-border-color); } .asrouter-admin table.bordered-table td { vertical-align: top; padding: 8px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-box-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(--border-color); + border-inline-start: 1px solid var(--in-content-box-border-color); } .asrouter-admin table.bordered-table td:last-child { - border-inline-end: 1px solid var(--border-color); + border-inline-end: 1px solid var(--in-content-box-border-color); } .asrouter-admin table input[type=checkbox], .asrouter-admin table input[type=radio] { margin: 0; @@ -311,7 +311,7 @@ } .asrouter-admin textarea[readonly] { color: var(--text-color-deemphasized); - border-color: var(--border-color); + border-color: var(--in-content-border-color); } .asrouter-admin .monospace { font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; @@ -340,7 +340,7 @@ display: flex; flex-flow: column nowrap; padding: 8px; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: 2px; color: var(--text-color); padding: 0.5em; diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css @@ -317,7 +317,7 @@ a.hidden, } .card .card-body { - border-block-start: 1px solid var(--border-color); + border-block-start: 1px solid var(--in-content-border-color); grid-column: span 2; grid-row: 2; position: relative; @@ -349,7 +349,7 @@ a.hidden, } #private-window-message { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); grid-area: 1 / 2 / 1 / 7; background-color: var(--background-color-box-info); padding: 13px 45px; diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css @@ -75,7 +75,7 @@ } #selection-size { - border: var(--border-width) solid var(--border-color); + border: var(--border-width) solid var(--in-content-border-color); box-shadow: var(--box-shadow-popup); } diff --git a/browser/components/security/unexpectedScriptLoad.css b/browser/components/security/unexpectedScriptLoad.css @@ -11,7 +11,7 @@ .dialogTitleBar { display: flex; padding: 0.4em 0.2em; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } .dialogTitle { 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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: 2px 2px 0 0; user-select: none; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss @@ -77,12 +77,6 @@ &:has(input:checked) { background-color: var(--color-accent-primary); - - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ border-color: var(--color-accent-primary); color: var(--button-text-color-primary); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss @@ -117,22 +117,11 @@ } &:has(input:checked) { - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ border-color: var(--color-accent-primary); } &:focus-within { outline-offset: 2px; - - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ outline: 2px solid var(--color-accent-primary); } diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -8659,20 +8659,10 @@ dialog:dir(rtl)::after { background-color: var(--button-background-color-active); } .topic-list .topic-item:has(input:checked) { - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ border-color: var(--color-accent-primary); } .topic-list .topic-item:focus-within { outline-offset: 2px; - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ outline: 2px solid var(--color-accent-primary); } .topic-list .topic-item .topic-item-label { @@ -9017,11 +9007,6 @@ dialog:dir(rtl)::after { } .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) { background-color: var(--color-accent-primary); - /** - * @backward-compat { version 147 } - * - * Replace this with `--border-color-selected` once 147 hits release. - */ border-color: var(--color-accent-primary); color: var(--button-text-color-primary); } diff --git a/browser/extensions/webcompat/about-compat/aboutCompat.css b/browser/extensions/webcompat/about-compat/aboutCompat.css @@ -17,7 +17,7 @@ } td { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } td:last-child > button { 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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-xsmall); } diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css @@ -6,7 +6,7 @@ #credential-chooser-notification { --list-item-border: color-mix(in srgb, currentColor 10%, transparent); --list-item-checked-bgcolor: color-mix(in srgb, var(--color-accent-primary) 6%, transparent); - --list-item-checked-border: color-mix(in srgb, var(--border-color-selected) 20%, transparent); + --list-item-checked-border: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); @media (prefers-contrast) { --list-item-border: ThreeDShadow; --list-item-checked-bgcolor: transparent; diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css @@ -53,7 +53,7 @@ menulist.folder-icon { } #bookmarkpropertiesdialog #editBMPanel_tagsSelector { - border-color: var(--border-color); + border-color: var(--in-content-border-color); padding: 12px; } diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css @@ -42,9 +42,9 @@ radio > .userContext-icon { } .radio-buttons > radio[focused="true"] { - outline-color: var(--border-color-selected); + outline-color: var(--color-accent-primary); } .radio-buttons > radio:hover:active { - outline-color: var(--border-color-selected); + outline-color: var(--color-accent-primary); } diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css @@ -21,7 +21,7 @@ #containersView richlistitem { padding-block: 4px; - border-block-end: 1px solid var(--border-color); + border-block-end: 1px solid var(--in-content-border-color); } #containersView richlistitem > .container-buttons { diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -170,7 +170,7 @@ radio { .spotlight { background-color: color-mix(in srgb, var(--color-accent-primary) 15%, transparent); - outline: var(--border-color-selected) 1px dotted; + outline: var(--color-accent-primary) 1px dotted; animation: fade-out 0.5s ease-out 2s forwards; /* Show the border to spotlight the components in high-contrast mode. */ border: 1px solid transparent; @@ -201,7 +201,7 @@ radio { .subcategory:not([hidden]) ~ .subcategory { padding-top: var(--space-xxlarge); - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); } /* Category List */ @@ -624,7 +624,7 @@ html|dialog, .dialogTitleBar { padding: 0.4em 0.2em; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } .dialogTitle { @@ -759,7 +759,7 @@ html|dialog, } .separator { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-box-border-color); } #fxaGroup { @@ -791,7 +791,7 @@ html|dialog, .sync-group { margin-block: var(--space-large); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); } .sync-configured { @@ -919,8 +919,7 @@ dialog > .sync-engines-list + hbox { content: ""; width: 1px; height: 100%; - /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ - background-color: var(--border-color); + background-color: var(--in-content-border-color); top: 0; inset-inline-end: 0; position: absolute; @@ -1395,14 +1394,14 @@ setting-group[groupid="home"] { height: 220px; overflow: auto; background-color: var(--background-color-box); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); resize: vertical; margin: 4px 0; } .translations-manage-language:first-child { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-box-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(--border-color); + border-color: var(--in-content-box-border-color); } .privacy-detailedoption.disabled { @@ -192,12 +192,12 @@ } .privacy-detailedoption.selected { - border-color: var(--border-color-selected); + border-color: var(--color-accent-primary); } @media (forced-colors) { .privacy-detailedoption.selected { - outline: 2px solid var(--border-color-selected); + outline: 2px solid var(--color-accent-primary); } } diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css @@ -60,7 +60,7 @@ flex-wrap: wrap; align-items: center; padding: var(--space-small) 0; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); label { margin: 0 calc(2 * var(--space-small)); } 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(--border-color, ThreeDDarkShadow); + border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); border-radius: var(--border-radius-small); padding: 16px; margin-block: 6px; diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css @@ -2510,12 +2510,12 @@ toolbar:not(#TabsToolbar) #firefox-view-button { } #tab-group-suggestion-button { - --button-border-color-ghost: var(--border-color-selected); + --button-border-color-ghost: var(--color-accent-primary); color: var(--color-accent-primary); width: 100%; &:hover { - --button-border-color-ghost-hover: var(--border-color-selected); + --button-border-color-ghost-hover: var(--color-accent-primary); } } diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css @@ -419,7 +419,7 @@ .urlbarView-row:not([selected]) > .urlbarView-row-buttons > & { /* If the row is not selected, use the accent color instead. */ - outline-color: var(--border-color-selected); + outline-color: var(--color-accent-primary); } } @@ -504,7 +504,7 @@ &:is([selected], [primary]) { color: var(--button-text-color-primary); background-color: var(--color-accent-primary); - outline-color: var(--border-color-selected); + outline-color: var(--color-accent-primary); outline-offset: var(--focus-outline-offset); &:hover { diff --git a/devtools/client/aboutdebugging/src/base.css b/devtools/client/aboutdebugging/src/base.css @@ -5,12 +5,15 @@ :root { /* Colors from common.css */ --in-content-background-color: light-dark(#fff, rgb(28, 27, 34)); + --in-content-border-color: light-dark(#d7d7db, rgba(249, 249, 250, 0.2)); --bg-color: var(--in-content-background-color); --text-color: light-dark(#0c0c0d, #eee); --secondary-text-color: light-dark(var(--grey-50), rgb(168, 168, 168)); + --border-color: var(--in-content-border-color); + --box-background: light-dark(#fff, rgb(35, 34, 43)); - --box-border-color: var(--border-color); + --box-border-color: var(--in-content-border-color); /* prettier-ignore */ --button-background-color: light-dark( @@ -419,7 +422,7 @@ Form controls padding: 0 calc(var(--base-unit) * 2); height: 100%; - border: 1px solid var(--border-color); + border: 1px solid var(--box-border-color); border-radius: var(--border-radius-xsmall); color: var(--text-color); background-color: var(--box-background); diff --git a/devtools/client/themes/aboutprofiling.css b/devtools/client/themes/aboutprofiling.css @@ -65,7 +65,7 @@ .perf-presets { margin: 2em 0; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); padding-bottom: 1em; } @@ -134,7 +134,7 @@ box-sizing: border-box; width: 100%; height: 100px; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); margin: 0; padding: 0; overflow-y: auto; diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-border-color-tokens.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-border-color-tokens.rst @@ -88,24 +88,6 @@ The rule also allows these values non-token values: .. code-block:: css - .current-border-color { - border-color: currentColor; - } - -.. code-block:: css - - .white-border-color { - border-color: white; - } - -.. code-block:: css - - .black-border-color { - border-color: black; - } - -.. code-block:: css - .inherited-border-color{ border-colors: inherit; } @@ -122,86 +104,9 @@ The rule also allows these values non-token values: border-color: initial; } + .. code-block:: css .current-border-color { border-color: currentColor; } - -Autofix functionality ---------------------- - -This rule can automatically fix some violations by replacing hex color values with -appropriate color names. Examples of autofixable violations: - -.. code-block:: css - - /* Before */ - .a { - border-color: #fff; - } - - /* After autofix */ - .a { - border-color: white; - } - -.. code-block:: css - - /* Before */ - .a { - border-color: #ffffff; - } - - /* After autofix */ - .a { - border-color: white; - } - -.. code-block:: css - - /* Before */ - .a { - border-color: #FFF; - } - - /* After autofix */ - .a { - border-color: white; - } - -.. code-block:: css - - /* Before */ - .a { - border-color: #FFFFFF; - } - - /* After autofix */ - .a { - border-color: white; - } - -.. code-block:: css - - /* Before */ - .a { - border-color: #000; - } - - /* After autofix */ - .a { - border-color: black; - } - -.. code-block:: css - - /* Before */ - .a { - border-color: #000000; - } - - /* After autofix */ - .a { - border-color: black; - } 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(--border-color); + --prefs-table-border: var(--prefs-table-border-width) solid var(--in-content-box-border-color); } .hidden { diff --git a/toolkit/components/aboutinference/content/aboutInference.css b/toolkit/components/aboutinference/content/aboutInference.css @@ -69,7 +69,7 @@ table { th, td { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); padding: 8px 10px; } td { diff --git a/toolkit/components/aboutmemory/content/aboutMemory.css b/toolkit/components/aboutmemory/content/aboutMemory.css @@ -35,7 +35,7 @@ div.ancillary { div.section { padding: 2em; margin: 1em 0; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-radius: var(--border-radius-small); background: var(--background-color-box); } @@ -62,7 +62,7 @@ div.sidebarContents { div.sidebarItem { padding: 0.5em; margin: 1em 0; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-radius: var(--border-radius-small); background: var(--background-color-box); user-select: none; /* no need to include this when cutting+pasting */ @@ -86,7 +86,7 @@ div.opsRow { padding: 0.5em; margin-right: 0.5em; margin-top: 0.5em; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-radius: var(--border-radius-small); background: var(--background-color-box); display: inline-block; @@ -144,7 +144,7 @@ a.treemapEntry { position: absolute; color: FieldText; text-decoration: none; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-radius: var(--border-radius-small); background: var(--background-color-canvas); z-index: 0; diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css @@ -33,7 +33,7 @@ body { position: fixed; z-index: 1; height: 2em; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); width: 100%; background-color: var(--background-color-box); } @@ -62,7 +62,15 @@ th { } th:not(:first-child) { border-inline-start: 1px solid; - border-image: linear-gradient(transparent 0%, transparent 20%, var(--border-color) 20%, var(--border-color) 80%, transparent 80%, transparent 100%) 1 1; + 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; } th, td { @@ -292,7 +300,7 @@ tr:is([selected], :hover, :focus-visible):not(.killing) > td > .close-icon, */ tr.separate-from-previous-process-group { - border-top: dotted 1px var(--border-color); + border-top: dotted 1px var(--in-content-box-border-color); margin-top: -1px; } diff --git a/toolkit/components/certviewer/content/components/info-item.css b/toolkit/components/certviewer/content/components/info-item.css @@ -37,7 +37,7 @@ label { } .long-hex:hover { - border-block-color: var(--border-color); + border-block-color: var(--in-content-border-color); background-color: var(--in-content-item-hover); color: var(--in-content-item-hover-text); } diff --git a/toolkit/components/certviewer/content/components/list-item.css b/toolkit/components/certviewer/content/components/list-item.css @@ -5,7 +5,7 @@ :host { display: grid; padding: 1em 0 1em; - border-block: 0.5px solid var(--border-color); + border-block: 0.5px solid var(--in-content-border-color); border-inline: 0.5px solid transparent; position: relative; } @@ -13,7 +13,7 @@ :host(:hover) { background-color: var(--in-content-item-hover); color: var(--in-content-item-hover-text); - border-inline-color: var(--border-color); + border-inline-color: var(--in-content-border-color); cursor: pointer; } diff --git a/toolkit/components/normandy/content/about-studies/about-studies.css b/toolkit/components/normandy/content/about-studies/about-studies.css @@ -39,7 +39,7 @@ button > .button-box { .info-box-content { align-items: center; background: var(--background-color-box-info); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); display: inline-flex; padding: 10px 15px; } @@ -60,7 +60,7 @@ button > .button-box { .study { align-items: center; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); display: flex; flex-direction: row; padding: 10px; 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(--border-color, color-mix(in srgb, currentColor 41%, transparent)); + --aboutlogging-box-border-color: var(--in-content-box-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(--border-color); + border: 1px solid var(--in-content-box-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(--border-color); + border: 1px solid var(--in-content-box-border-color); background-color: var(--background-color-box); border-radius: 2px; margin-bottom: 24px; @@ -303,7 +303,7 @@ table { td { padding-bottom: 0.25em; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } tr:not(:first-child):hover { diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.css b/toolkit/content/aboutwebrtc/aboutWebrtc.css @@ -8,7 +8,7 @@ body { table { font-family: monospace; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); border-spacing: 0; margin-block: 1em; } @@ -39,7 +39,7 @@ table { #mediactx > div { padding: 1em 2em; margin: 1em 0; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: 10px; background-color: var(--background-color-box); } @@ -68,7 +68,7 @@ table { } .fold-target { - border-inline-start: 1px solid var(--border-color); + border-inline-start: 1px solid var(--in-content-border-color); padding-inline-start: 1em; .section-body > & { @@ -101,7 +101,7 @@ h3 > span { .peer-connection table th, .peer-connection table td { padding: 0.4em; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); } .peer-connection table tr:nth-child(odd) { @@ -123,7 +123,7 @@ h3 > span { .peer-connection-config div { margin-inline: 1em; padding: 4px; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); } .peer-connection-config div:nth-child(odd) { @@ -186,7 +186,7 @@ div.fold-trigger { } .active-tab-pane { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); display: block; } @@ -213,20 +213,20 @@ div.fold-trigger { } .sdp-history div { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); padding: 1em; width: 50%; overflow: scroll; } .line-graph { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); margin-inline: 1px; padding: 1px; } .svg-graph { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); margin-inline: 1px; } diff --git a/toolkit/content/widgets/moz-box-common.css b/toolkit/content/widgets/moz-box-common.css @@ -5,7 +5,8 @@ @layer box-common { :host { --box-border-width: var(--border-width); - --box-border: var(--box-border-width) solid var(--border-color); + --box-border-color: var(--border-color); + --box-border: var(--box-border-width) solid var(--box-border-color); --box-border-radius: var(--border-radius-medium); --box-border-radius-inner: calc(var(--box-border-radius) - var(--border-width)); --box-padding: var(--space-large); @@ -13,7 +14,7 @@ --box-icon-fill: var(--icon-color); border: var(--box-border); - border-block-end: var(--box-border-width-end, var(--box-border-width)) solid var(--border-color); + border-block-end: var(--box-border-width-end, var(--box-border-width)) solid var(--box-border-color); border-start-start-radius: var(--box-border-radius-start, var(--box-border-radius)); border-start-end-radius: var(--box-border-radius-start, var(--box-border-radius)); border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius)); diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -90,7 +90,7 @@ button { font-weight: var(--font-weight-semibold); @media (prefers-contrast) { - border-color: var(--border-color-selected); + border-color: var(--color-accent-primary); } &::before { diff --git a/toolkit/content/widgets/moz-visual-picker/moz-visual-picker-item.css b/toolkit/content/widgets/moz-visual-picker/moz-visual-picker-item.css @@ -29,7 +29,7 @@ &[checked] { --visual-picker-item-border-width: 3px; - border-color: var(--border-color-selected); + border-color: var(--color-accent-primary); margin: 0; } diff --git a/toolkit/crashreporter/content/crashes.css b/toolkit/crashreporter/content/crashes.css @@ -27,7 +27,7 @@ th { th, td { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } th, diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css @@ -57,8 +57,7 @@ h2 { content: ""; width: 1px; height: 100%; - /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ - background-color: var(--border-color); + background-color: var(--in-content-border-color); top: 0; inset-inline-end: 0; position: absolute; @@ -536,7 +535,7 @@ button.addon-detail-description-toggle { .addon-detail-contribute { display: flex; padding: var(--card-padding); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); margin-bottom: var(--card-padding); flex-direction: column; @@ -567,7 +566,7 @@ button.addon-detail-description-toggle { display: flex; justify-content: space-between; align-items: center; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); margin: 0 calc(var(--card-padding) * -1); padding: var(--card-padding); color: var(--text-color); @@ -751,8 +750,8 @@ addon-permissions-list .addon-permissions-list-wrapper:not(:first-child) { margin-top: 8px; /* Pull the buttons flush with the side of the card */ margin-inline: calc(var(--card-padding) * -1); - border-bottom: 1px solid var(--border-color); - border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); + border-top: 1px solid var(--in-content-border-color); font-size: 0; line-height: 0; } @@ -770,7 +769,7 @@ button.tab-button { } button.tab-button:hover { - border-top-color: var(--border-color); + border-top-color: var(--in-content-box-border-color); } button.tab-button[selected], diff --git a/toolkit/mozapps/extensions/content/shortcuts.css b/toolkit/mozapps/extensions/content/shortcuts.css @@ -6,7 +6,7 @@ margin-bottom: 16px; &.focused-extension { - border: 1px solid var(--border-color-selected); + border: 1px solid var(--color-accent-primary); } .card-heading-icon { 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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); padding: 10px; } #badCertAdvancedPanel { background-color: var(--background-color-box); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); } .advanced-panel { @@ -120,7 +120,7 @@ button:disabled { #certificateErrorDebugInformation { background-color: var(--background-color-box-info) !important; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-border-color); width: 100%; padding: 1em 3%; box-sizing: border-box; diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css @@ -78,7 +78,7 @@ th { td { padding-bottom: 0.25em; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--in-content-border-color); } #clearHTTPCache { 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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-medium); padding: 3em; background-color: var(--background-color-box); diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json b/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json @@ -79,11 +79,6 @@ "dark": "{Theme$border/color/interactive}", "forcedColors": "{HCM Theme$GrayText}" }, - "border/color/selected": { - "light": "{Theme$color/accent/primary}", - "dark": "{Theme$color/accent/primary}", - "forcedColors": "{HCM Theme$SelectedItem}" - }, "button/background/color": { "light": "color-mix(in srgb, currentColor 7%, transparent)", "dark": "color-mix(in srgb, currentColor 7%, transparent)", diff --git a/toolkit/themes/shared/design-system/dist/tokens-shared.css b/toolkit/themes/shared/design-system/dist/tokens-shared.css @@ -24,7 +24,6 @@ --border-color-interactive-hover: var(--border-color-interactive); --border-color-interactive-active: var(--border-color-interactive); --border-color-interactive-disabled: var(--border-color-interactive); - --border-color-selected: var(--color-accent-primary); --border-color-transparent: transparent; --border-radius-circle: 9999px; --border-radius-xsmall: 2px; @@ -374,7 +373,6 @@ --border-color-interactive-hover: SelectedItem; --border-color-interactive-active: ButtonText; --border-color-interactive-disabled: GrayText; - --border-color-selected: SelectedItem; /** Button **/ --button-background-color: ButtonFace; /* TODO Bug 1821203 - Gray use needs to be consolidated */ diff --git a/toolkit/themes/shared/design-system/dist/tokens-table.mjs b/toolkit/themes/shared/design-system/dist/tokens-table.mjs @@ -495,13 +495,6 @@ export const tokensTable = { }, { value: { - default: "var(--color-accent-primary)", - forcedColors: "SelectedItem", - }, - name: "--border-color-selected", - }, - { - value: { default: "transparent", prefersContrast: "var(--button-text-color)", forcedColors: "var(--border-color-interactive)", @@ -1212,10 +1205,6 @@ export const variableLookupTable = { default: "var(--border-color-interactive)", forcedColors: "GrayText", }, - "border-color-selected": { - default: "var(--color-accent-primary)", - forcedColors: "SelectedItem", - }, "border-radius-circle": "9999px", "border-radius-xsmall": "2px", "border-radius-small": "4px", diff --git a/toolkit/themes/shared/design-system/src/design-tokens.json b/toolkit/themes/shared/design-system/src/design-tokens.json @@ -154,12 +154,6 @@ "forcedColors": "GrayText" } } - }, - "selected": { - "value": { - "default": "{color.accent.primary.@base}", - "forcedColors": "SelectedItem" - } } }, "radius": { diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css @@ -17,13 +17,16 @@ * 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-border-color: light-dark(#d7d7db, rgba(249, 249, 250, 0.2)); --in-content-table-background: light-dark(#f8f8fa, rgb(35, 34, 43)); - --in-content-table-border-color: var(--border-color); + --in-content-table-border-color: var(--in-content-box-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; @@ -70,6 +73,8 @@ @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; @@ -77,6 +82,7 @@ * In theory, we shouldn't be conveying invalid state just with a colour * change... */ --in-content-border-invalid: ThreeDShadow; + --in-content-border-color: CanvasText; --in-content-table-border-color: ThreeDDarkShadow; --in-content-table-background: -moz-Dialog; @@ -103,7 +109,7 @@ html|body { html|hr { border-style: solid none none none; - border-color: var(--border-color); + border-color: var(--in-content-border-color); } .main-content { @@ -132,7 +138,7 @@ xul|tab { &:where(:hover) { background-color: var(--button-background-color-hover); color: var(--button-text-color-hover); - border-bottom-color: var(--border-color); + border-bottom-color: var(--in-content-border-color); @media (forced-colors) { border-bottom-color: currentColor; @@ -381,7 +387,7 @@ xul|menulist > xul|menupopup { border: none; background-color: transparent; - --panel-border-color: var(--border-color); + --panel-border-color: var(--in-content-box-border-color); --panel-border-radius: 2px; --panel-background: var(--background-color-box); --panel-color: var(--text-color); @@ -420,7 +426,7 @@ xul|menulist > xul|menupopup xul|menuseparator { appearance: none; margin: 0; padding: 0; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--in-content-box-border-color); border-bottom: none; } @@ -429,7 +435,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(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-medium); color: inherit; background-color: var(--background-color-box); @@ -753,7 +759,7 @@ xul|richlistbox { appearance: none; margin-inline: 0; background-color: var(--background-color-box); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); color: var(--text-color); } @@ -824,7 +830,7 @@ xul|richlistitem[selected] xul|menulist:focus-visible { xul|panel[type="autocomplete-richlistbox"] { background-color: var(--background-color-box); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); color: var(--text-color); } @@ -833,7 +839,7 @@ xul|panel[type="autocomplete-richlistbox"] { xul|tree { appearance: none; font-size: 1em; - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); background-color: var(--background-color-box); color: inherit; @@ -876,13 +882,21 @@ 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(--border-color) 20%, var(--border-color) 80%, transparent 80%, transparent 100%) 1 1; + 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; } @media (forced-colors) { xul|treecol:not([hideheader="true"], :first-child), xul|treecolpicker { - --border-color: var(--button-border-color); + --in-content-box-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 @@ -163,13 +163,13 @@ th.column { } td { - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-border-color); unicode-bidi: plaintext; /* Make sure file paths will be LTR */ } .action-box { background-color: var(--in-content-table-background); - border: 1px solid var(--border-color); + border: 1px solid var(--in-content-box-border-color); border-radius: var(--border-radius-small); padding: 16px; flex: 1 1 25%; diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-border-color-tokens.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-border-color-tokens.mjs @@ -3,7 +3,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import stylelint from "stylelint"; -import valueParser from "postcss-value-parser"; import { namespace, createTokenNamesArray, @@ -26,7 +25,7 @@ const messages = ruleMessages(ruleName, { const meta = { url: "https://firefox-source-docs.mozilla.org/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-border-color-tokens.html", - fixable: true, + fixable: false, }; // Gather an array of the ready css `['var(--token-name)']` @@ -38,8 +37,6 @@ const tokenCSS = createTokenNamesArray(INCLUDE_CATEGORIES); const ALLOW_LIST = createAllowList([ "transparent", "currentColor", - "white", - "black", "auto", "normal", "none", @@ -77,13 +74,6 @@ const CSS_PROPERTIES = [ ...SHORTHAND_CSS_PROPERTIES, ]; -const VIOLATION_AUTOFIX_MAP = { - "#fff": "white", - "#ffffff": "white", - "#000": "black", - "#000000": "black", -}; - const ruleFunction = primaryOption => { return (root, result) => { const validOptions = validateOptions(result, ruleName, { @@ -123,23 +113,6 @@ const ruleFunction = primaryOption => { node: declarations, result, ruleName, - fix: () => { - const val = valueParser(declarations.value); - let hasFixes = false; - val.walk(node => { - if (node.type == "word") { - const token = - VIOLATION_AUTOFIX_MAP[node.value.trim().toLowerCase()]; - if (token) { - hasFixes = true; - node.value = token; - } - } - }); - if (hasFixes) { - declarations.value = val.toString(); - } - }, }); }); }; diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-border-color-tokens.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-border-color-tokens.tests.mjs @@ -81,14 +81,6 @@ testRule({ description: "Using currentColor is valid.", }, { - code: ".a { border-color: white; }", - description: "Using white is valid.", - }, - { - code: ".a { border-color: black; }", - description: "Using black is valid.", - }, - { code: ".a { border: none; }", description: "Using none is valid.", }, @@ -251,48 +243,3 @@ testRule({ }, ], }); - -testRule({ - plugins: [plugin], - ruleName, - config: true, - fix: true, - reject: [ - { - code: ".a { border-color: #fff; }", - fixed: ".a { border-color: white; }", - message: messages.rejected("#fff"), - description: "#fff should be fixed to white", - }, - { - code: ".a { border: 1px solid #ffffff; }", - fixed: ".a { border: 1px solid white; }", - message: messages.rejected("1px solid #ffffff"), - description: "#ffffff should be fixed to white", - }, - { - code: ".a { outline-color: #FFF; }", - fixed: ".a { outline-color: white; }", - message: messages.rejected("#FFF"), - description: "#FFF should be fixed to white", - }, - { - code: ".a { border-left-color: #FFFFFF; }", - fixed: ".a { border-left-color: white; }", - message: messages.rejected("#FFFFFF"), - description: "#FFFFFF should be fixed to white", - }, - { - code: ".a { outline: 1px solid #000; }", - fixed: ".a { outline: 1px solid black; }", - message: messages.rejected("1px solid #000"), - description: "#000 should be fixed to black", - }, - { - code: ".a { border-block-end-color: #000000; }", - fixed: ".a { border-block-end-color: black; }", - message: messages.rejected("#000000"), - description: "#000000 should be fixed to black", - }, - ], -}); 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: // --border-color computed + case ColorID::Windowframe: // --in-content-box-border-color computed // with kWindowText above // kWindowBackground. case ColorID::Graytext: // opacity: 0.4 of kWindowText blended over the