Bug 1865371 - Replace --in-content-box-background with --background-color-box r=cmkm,desktop-theme-reviewers,credential-management-reviewers,omc-reviewers,aminomancer,dao,issammani

Differential Revision: https://phabricator.services.mozilla.com/D222674
This commit is contained in:
jabram 2024-10-07 20:15:01 +00:00
parent 28496b0baf
commit 8aaaadc045
29 changed files with 48 additions and 49 deletions

View File

@ -23,7 +23,7 @@
/* Sanitize everything warning box */
#sanitizeEverythingWarningBox {
/* Fallback colors are used when the dialog is open outside of in-content prefs */
background-color: var(--in-content-box-background, Window);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
border-radius: 5px;
padding: 16px;

View File

@ -9,7 +9,7 @@
grid-template-columns: min-content 1fr auto;
padding: 16px 32px;
color: var(--in-content-text-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border-radius: 4px;
border: 1px solid var(--in-content-border-color);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
@ -17,7 +17,7 @@
}
:host([variant="info"]) {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
:host([variant="error"]) {

View File

@ -4,7 +4,7 @@
:host {
border-inline-end: 1px solid var(--in-content-border-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
display: flex;
flex-direction: column;
overflow: auto;
@ -15,7 +15,7 @@
align-items: center;
padding: 0 16px 16px;
border-bottom: 1px solid var(--in-content-border-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
.meta > label > span {
@ -110,7 +110,7 @@ ol {
font-weight: var(--font-weight-bold);
padding: 4px 16px;
border-bottom: 1px solid var(--in-content-border-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
margin-block-start: 2px;
margin-inline: 2px;
}

View File

@ -18,7 +18,7 @@
:host .arrow-box {
position: relative;
padding: 12px;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-border-color);
border-radius: 4px;
}
@ -36,7 +36,7 @@
}
:host .arrow-box::after {
border-inline-end-color: var(--in-content-box-background);
border-inline-end-color: var(--background-color-box);
border-width: 10px;
margin-top: -10px;
}

View File

@ -17,7 +17,7 @@
.timeline > svg {
grid-row: 1 / 1;
fill: var(--in-content-box-background);
fill: var(--background-color-box);
}
.timeline > .line {

View File

@ -22,7 +22,7 @@
inset-inline-end: 0;
margin: 0;
padding: 5px 0;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
box-shadow: var(--shadow-30);

View File

@ -232,7 +232,7 @@
}
.sourceLabel:not(:empty) {
background: var(--in-content-box-background);
background: var(--background-color-box);
padding: 2px 5px;
border-radius: 3px;

View File

@ -175,7 +175,7 @@
margin: 0;
}
.asrouter-admin .sourceLabel:not(:empty) {
background: var(--in-content-box-background);
background: var(--background-color-box);
padding: 2px 5px;
border-radius: 3px;
}

View File

@ -134,7 +134,7 @@ tbody:nth-child(4n + 1) {
}
.content-style {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
color: var(--blue-50);
}

View File

@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.options-container {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
color: var(--in-content-text-color);

View File

@ -1037,7 +1037,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
height: 110px;
width: 765px;
content: "";
background-image: linear-gradient(to right, var(--in-content-box-background) 0%, var(--protection-report-loader-color-stop) 30%, var(--in-content-box-background) 40%, var(--in-content-box-background) 100%);
background-image: linear-gradient(to right, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%);
background-repeat: no-repeat;
animation-duration: 2s;
animation-iteration-count: infinite;
@ -1049,7 +1049,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
.monitor-card.loading:dir(rtl)::after,
.lockwise-card.loading:dir(rtl)::after {
background-image: linear-gradient(to left, var(--in-content-box-background) 0%, var(--protection-report-loader-color-stop) 30%, var(--in-content-box-background) 40%, var(--in-content-box-background) 100%);
background-image: linear-gradient(to left, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%);
animation-name: loading-rtl;
}

View File

@ -24,7 +24,7 @@ fieldset {
box-sizing: border-box;
width: 100%;
padding: 0.4em 0.7em;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px 2px 0 0;
user-select: none;

View File

@ -1456,7 +1456,7 @@ richlistitem .text-link:hover {
#translations-manage-install-list {
height: 220px;
overflow: auto;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
resize: vertical;

View File

@ -31,7 +31,7 @@
/* Sanitize everything warning box */
#sanitizeEverythingWarningBox {
/* Fallback colors are used when the dialog is open outside of in-content prefs */
background-color: var(--in-content-box-background, Window);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
border-radius: 5px;
padding: 16px;

View File

@ -126,7 +126,7 @@
margin: 0;
padding: 0;
overflow-y: auto;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
.perf-settings-dir-list:hover {

View File

@ -98,7 +98,7 @@
}
#prefs {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
color: var(--in-content-text-color);
margin: 10px;
table-layout: fixed;

View File

@ -48,7 +48,7 @@ td {
}
tr:nth-child(even) td {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
tr:nth-child(odd) td {

View File

@ -33,7 +33,7 @@ div.section {
margin: 1em 0em;
border: 1px solid var(--in-content-border-color);
border-radius: var(--border-radius-small);
background: var(--in-content-box-background);
background: var(--background-color-box);
}
div.outputContainer {
@ -60,7 +60,7 @@ div.sidebarItem {
margin: 1em 0em;
border: 1px solid var(--in-content-border-color);
border-radius: var(--border-radius-small);
background: var(--in-content-box-background);
background: var(--background-color-box);
user-select: none; /* no need to include this when cutting+pasting */
}
@ -84,7 +84,7 @@ div.opsRow {
margin-top: 0.5em;
border: 1px solid var(--in-content-border-color);
border-radius: var(--border-radius-small);
background: var(--in-content-box-background);
background: var(--background-color-box);
display: inline-block;
}

View File

@ -15,7 +15,7 @@ body {
user-select: none;
font-size: 1em;
border-spacing: 0;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
margin: 0;
position: absolute;
top: 0;
@ -35,7 +35,7 @@ body {
height: 2em;
border-bottom: 1px solid var(--in-content-border-color);
width: 100%;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
tr {
display: grid;

View File

@ -18,7 +18,7 @@ h1 {
.info-groups {
display: none;
outline: none;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
box-shadow: var(--card-shadow);
margin-bottom: 2em;
border-radius: 0 0 4px 4px;
@ -35,7 +35,7 @@ h1 {
padding-bottom: 15px; /* compensate for border-bottom below */
border: none;
border-bottom: 3px solid transparent;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
color: var(--in-content-text-color);
flex: 1 1 auto;
text-overflow: ellipsis;

View File

@ -252,7 +252,7 @@ virtualized-list {
display: grid;
padding: 16px 32px;
color: var(--in-content-text-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-border-color);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

View File

@ -9,7 +9,7 @@
/* Provide backup values for some of the variables used in "browser" so that the styles
look nice by default in "toolkit". */
--AT-box-background: var(--in-content-box-background, #fff);
--AT-box-background: var(--background-color-box);
--AT-box-border-color: var(--in-content-box-border-color, #9e9ea0);
--AT-box-info-background: var(--in-content-box-info-background, #f0f0f4);

View File

@ -192,7 +192,7 @@ section:not(.active) {
display: flex;
padding: 24px;
flex-direction: column;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
margin: 12px 0;
inset-inline-start: 12px;
@ -229,7 +229,7 @@ section:not(.active) {
padding-block: 12px;
padding-inline: 20px;
border: 1px solid var(--in-content-box-border-color);
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border-radius: 2px;
margin-bottom: 24px;
margin-inline-end: 24px;

View File

@ -41,7 +41,7 @@ table {
margin: 1em 0;
border: 1px solid var(--in-content-box-border-color);
border-radius: 10px;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
.autorefresh {

View File

@ -98,14 +98,14 @@ button:disabled {
}
.trr-message-container {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
padding: 10px;
}
#badCertAdvancedPanel {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
}

View File

@ -20,7 +20,7 @@
border: 1px solid var(--in-content-box-border-color);
border-radius: 10px;
padding: 3em;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
text-align: center;
}

View File

@ -37,7 +37,7 @@ td.integer {
--codec-bg-supported-odd: #54ffbd;
--codec-bg-unsupported-even: #ffdfe7;
--codec-bg-unsupported-odd: #ffbdc5;
--codec-text-name-even: var(--in-content-box-background);
--codec-text-name-even: var(--background-color-box);
--codec-text-name-odd: var(--in-content-box-background-odd);
--codec-text-other: var(--in-content-text-color);
--codec-text-supported: #15141a;

View File

@ -13,7 +13,6 @@
--in-content-page-color: rgb(21, 20, 26);
--in-content-page-background: var(--background-color-canvas);
--in-content-text-color: var(--in-content-page-color);
--in-content-box-background: var(--background-color-box);
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
--in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
--in-content-box-info-background: #f0f0f4;
@ -150,9 +149,9 @@
:root {
--in-content-page-color: CanvasText;
--in-content-box-background-odd: var(--in-content-box-background);
--in-content-box-background-odd: var(--background-color-box);
--in-content-box-border-color: -moz-DialogText;
--in-content-box-info-background: var(--in-content-box-background);
--in-content-box-info-background: var(--background-color-box);
--in-content-item-hover: SelectedItem;
--in-content-item-hover-text: SelectedItemText;
@ -397,7 +396,7 @@ html|select:not([size], [multiple]):dir(rtl) {
}
html|select:not([size], [multiple]) > html|option {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
color: var(--in-content-text-color);
}
@ -526,7 +525,7 @@ xul|menulist > xul|menupopup {
--panel-border-color: var(--in-content-box-border-color);
--panel-border-radius: 2px;
--panel-background: var(--in-content-box-background);
--panel-background: var(--background-color-box);
--panel-color: var(--in-content-text-color);
--panel-padding: 0;
}
@ -576,7 +575,7 @@ xul|search-textbox {
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
color: inherit;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
}
xul|search-textbox {
@ -901,7 +900,7 @@ xul|listheader,
xul|richlistbox {
appearance: none;
margin-inline: 0;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
color: var(--in-content-text-color);
@ -972,7 +971,7 @@ xul|richlistitem[selected] xul|menulist:focus-visible {
}
xul|panel[type="autocomplete-richlistbox"] {
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
border: 1px solid var(--in-content-box-border-color);
color: var(--in-content-text-color);
}
@ -984,7 +983,7 @@ xul|tree {
font-size: 1em;
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
background-color: var(--in-content-box-background);
background-color: var(--background-color-box);
color: inherit;
margin: 0;
}
@ -1130,7 +1129,7 @@ input[type="text"][warning]:enabled:not(:focus) {
/* Cards */
.card {
background: var(--in-content-box-background);
background: var(--background-color-box);
/* Needed for high-contrast where the border will appear. */
border: 1px solid transparent;
border-radius: 4px;

View File

@ -757,7 +757,7 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) {
case ColorID::MozEventreerow:
case ColorID::MozOddtreerow:
case ColorID::MozDialog: // --in-content-box-background
case ColorID::MozDialog: // --background-color-box
color = NS_RGB(35, 34, 43);
break;
case ColorID::Windowtext: // --in-content-page-color