From 036f8ae9afa44eed0829f30286f540542ed5898c Mon Sep 17 00:00:00 2001 From: "nvasilyev@apple.com" Date: Sat, 16 Feb 2019 02:03:32 +0000 Subject: [PATCH] Web Inspector: Dark Mode: commas in CSS selectors are too dim https://bugs.webkit.org/show_bug.cgi?id=194729 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 | 19 +++++++++++++++++++ .../Views/SpreadsheetCSSStyleDeclarationEditor.css | 2 +- .../Views/SpreadsheetCSSStyleDeclarationSection.css | 15 ++++----------- .../WebInspectorUI/UserInterface/Views/Variables.css | 3 +++ 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog index 5e3280f..7c250e8 100644 --- a/Source/WebInspectorUI/ChangeLog +++ b/Source/WebInspectorUI/ChangeLog @@ -1,5 +1,24 @@ 2019-02-15 Nikita Vasilyev + Web Inspector: Dark Mode: commas in CSS selectors are too dim + https://bugs.webkit.org/show_bug.cgi?id=194729 + + + 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 + Unreviewed, fix intentation. * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css: diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css index 98b7498..9e6439b 100644 --- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css +++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css @@ -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%); diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css index 620f627..380964b 100644 --- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css +++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css @@ -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; } @@ -100,7 +100,7 @@ } .spreadsheet-css-declaration .selector > span { - color: hsl(0, 0%, 50%); + color: var(--text-color-secondary); } .spreadsheet-css-declaration .selector:focus, @@ -134,13 +134,6 @@ } @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); } diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css index 775f1f6..3eac5b9 100644 --- a/Source/WebInspectorUI/UserInterface/Views/Variables.css +++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css @@ -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%); -- 1.8.3.1