Web Inspector: Dark Mode: Font guideline colors are too bright
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2018 17:34:48 +0000 (17:34 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2018 17:34:48 +0000 (17:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186986

Reviewed by Brian Burg.

Make the guidelines less distractive from the font glyphs.

* UserInterface/Views/DarkMode.css:
(@media (prefers-dark-interface)):
(.content-view.resource.font .preview > .line):
(.content-view.resource.font .metric.top):
(.content-view.resource.font .metric.baseline):
(.content-view.resource.font .metric.middle):
(.content-view.resource.font .metric.xheight):
(.content-view.resource.font .metric.bottom):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@233152 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DarkMode.css

index 3de4046..e4f7329 100644 (file)
@@ -1,3 +1,21 @@
+2018-06-25  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Dark Mode: Font guideline colors are too bright
+        https://bugs.webkit.org/show_bug.cgi?id=186986
+
+        Reviewed by Brian Burg.
+
+        Make the guidelines less distractive from the font glyphs.
+
+        * UserInterface/Views/DarkMode.css:
+        (@media (prefers-dark-interface)):
+        (.content-view.resource.font .preview > .line):
+        (.content-view.resource.font .metric.top):
+        (.content-view.resource.font .metric.baseline):
+        (.content-view.resource.font .metric.middle):
+        (.content-view.resource.font .metric.xheight):
+        (.content-view.resource.font .metric.bottom):
+
 2018-06-20  Daniel Bates  <dabates@apple.com>
 
         Web Inspector: All non-Same-Site cookies are marked as Same-Site Strict in Storage tab
index f389143..06ecb20 100644 (file)
     }
 
 
+    /* FontResourceContentView.css */
+    .content-view.resource.font .preview > .line {
+        border-left-color: var(--text-color-quaternary);
+        border-right-color: var(--text-color-quaternary);
+    }
+
+    .content-view.resource.font .metric.top {
+        background-color: var(--text-color-quaternary);
+    }
+
+    .content-view.resource.font .metric.baseline {
+        background-color: hsl(195, 100%, 37%);
+    }
+
+    .content-view.resource.font .metric.middle {
+        background-color: hsl(120, 100%, 35%);
+    }
+
+    .content-view.resource.font .metric.xheight {
+        background-color: hsl(350, 100%, 40%);
+    }
+
+    .content-view.resource.font .metric.bottom {
+        background-color: var(--text-color-quaternary);
+    }
+
+
     /* FilterBar.css */
     .filter-bar > input[type="search"] {
         border-color: var(--background-color-selected);