Web Inspector: Dark Mode: commas in CSS selectors are too dim
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 16 Feb 2019 02:03:32 +0000 (02:03 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 16 Feb 2019 02:03:32 +0000 (02:03 +0000)
https://bugs.webkit.org/show_bug.cgi?id=194729
<rdar://problem/48128592>

Reviewed by Matt Baker.

Use `--text-color-tertiary` for both light and dark modes.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration .selector > span):
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Variables.css:
(:root):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index 5e3280f..7c250e8 100644 (file)
@@ -1,5 +1,24 @@
 2019-02-15  Nikita Vasilyev  <nvasilyev@apple.com>
 
+        Web Inspector: Dark Mode: commas in CSS selectors are too dim
+        https://bugs.webkit.org/show_bug.cgi?id=194729
+        <rdar://problem/48128592>
+
+        Reviewed by Matt Baker.
+
+        Use `--text-color-tertiary` for both light and dark modes.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration):
+        (.spreadsheet-css-declaration .selector > span):
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Variables.css:
+        (:root):
+
+2019-02-15  Nikita Vasilyev  <nvasilyev@apple.com>
+
         Unreviewed, fix intentation.
 
         * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
index 98b7498..9e6439b 100644 (file)
@@ -28,7 +28,7 @@
     clear: both;
     font-family: Menlo, monospace;
     font-size: 11px;
-    color: hsl(0, 0%, 70%);
+    color: var(--text-color-tertiary);
     -webkit-user-select: text;
 
     --background-color-selected: hsl(210, 98%, 93%);
index 620f627..380964b 100644 (file)
@@ -28,9 +28,9 @@
     padding: 0 0 var(--css-declaration-vertical-padding);
     font-family: Menlo, monospace;
     font-size: 11px;
-    color: hsl(0, 0%, 70%);
-    background: white;
-    border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
+    color: var(--text-color-tertiary);
+    background: var(--background-color-code);
+    border-bottom: 0.5px solid var(--text-color-quaternary);
     -webkit-user-select: text;
 }
 
 }
 
 .spreadsheet-css-declaration .selector > span {
-    color: hsl(0, 0%, 50%);
+    color: var(--text-color-secondary);
 }
 
 .spreadsheet-css-declaration .selector:focus,
 }
 
 @media (prefers-color-scheme: dark) {
-    .spreadsheet-css-declaration {
-        background: var(--background-color-code);
-        color: var(--text-color-tertiary);
-        color: hsl(0, 0%, 30%);
-        border-bottom-color: var(--text-color-quaternary);
-    }
-
     .spreadsheet-css-declaration.locked {
         background: var(--background-color);
     }
index 775f1f6..3eac5b9 100644 (file)
@@ -39,6 +39,9 @@
 
     --text-color-secondary: hsl(0, 0%, 50%);
 
+    /* Disabled text/glyphs */
+    --text-color-tertiary: hsl(0, 0%, 70%);
+
     /* Dividers, separators, background fills */
     --text-color-quaternary: hsl(0, 0%, 85%);