Bug 1549809 - Tweak the colors on the page and change to semantic CSS variable names. r=MattN
authorJared Wein <jwein@mozilla.com>
Tue, 14 May 2019 20:06:18 +0000
changeset 532681 2e3ae6f6b1cf59ef0babbb29ce6dff99c880b336
parent 532680 bba51fabf09d9868343e6f12cb55d62ae168d961
child 532682 ae45390d506114e7ffd97d35918e63b6912252e7
push id11270
push userrgurzau@mozilla.com
push dateWed, 15 May 2019 15:07:19 +0000
treeherdermozilla-beta@571bc76da583 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1549809
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1549809 - Tweak the colors on the page and change to semantic CSS variable names. r=MattN With this patch the page now works correctly with in-content dark mode. Tested by setting ui.systemUsesDarkTheme=1 in about:config. Differential Revision: https://phabricator.services.mozilla.com/D30759
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-list-item.css
browser/components/aboutlogins/content/components/login-list.css
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -1,14 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 h2 {
-  border-bottom: 1px solid var(--grey-30);
+  border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
 .field-label {
   display: block;
 }
 
 .meta-info {
   font-size: smaller;
@@ -18,10 +18,10 @@ h2 {
   margin-top: 0;
 }
 
 .meta-info:not(:last-of-type) {
   margin-bottom: 0;
 }
 
 .meta-info:first-of-type {
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--in-content-box-border-color);
 }
--- a/browser/components/aboutlogins/content/components/login-list-item.css
+++ b/browser/components/aboutlogins/content/components/login-list-item.css
@@ -1,42 +1,35 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :host {
-  border-inline-start: 4px solid transparent;
-  border-bottom: 1px solid var(--grey-30);
   display: block;
   padding: 10px;
+  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-inline-start: 4px solid transparent;
 }
 
 /* [hidden] isn't applying to elements in Shadow DOM. */
 :host([hidden]) {
   display: none;
 }
 
 :host(:hover) {
-  background-color: var(--grey-90-a10);
+  background-color: var(--in-content-box-background-hover);
 }
 
 :host(:hover:active) {
-  background-color: var(--grey-90-a20);
+  background-color: var(--in-content-box-background-active);
 }
 
 :host(.selected) {
-  border-inline-start-color: var(--blue-40);
-  background-color: var(--grey-20);
-}
-
-:host(.selected:hover) {
-}
-
-:host(.selected:hover:active) {
-  background-color: var(--grey-30);
+  border-inline-start-color: var(--in-content-border-highlight);
+  background-color: var(--in-content-box-background-hover);
 }
 
 .hostname {
   font-weight: bold;
 }
 
 .hostname,
 .username {
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -1,21 +1,22 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :host {
-  border-inline-end: 1px solid var(--grey-30);
+  border-inline-end: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-background);
 }
 
 .meta {
   display: flex;
   padding: 10px;
-  border-bottom: 1px solid var(--grey-30);
-  background-color: var(--grey-20);
+  border-bottom: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-info-background);
 }
 
 .count {
   flex: auto;
   text-align: end;
   font-size: smaller;
 }