From 266a170bebd40e1ed559832fa9329453b155aa5d Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Fri, 2 Oct 2020 12:18:13 -0400 Subject: [PATCH] Add more CSS variables in preparation of dark mode support Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/401 --- src/css/codemirror.css | 81 ++++++++++++++++++++++++-------------- src/css/themes/default.css | 26 +++++++++++- 2 files changed, 77 insertions(+), 30 deletions(-) diff --git a/src/css/codemirror.css b/src/css/codemirror.css index 9c5f184c2..8a9b9453f 100644 --- a/src/css/codemirror.css +++ b/src/css/codemirror.css @@ -12,6 +12,13 @@ height: 100%; width: 100%; } +.CodeMirror-gutters { + background-color: var(--cm-gutter-surface); + border-color: var(--cm-gutter-border); + } +.CodeMirror-linenumber { + color: var(--cm-gutter-ink); + } /* For when panels are used */ .codeMirrorContainer > div:not([class^="CodeMirror"]) { @@ -25,27 +32,23 @@ } /* CodeMirror theme overrides */ -.cm-s-default .cm-variable { color: var(--sf-variable-ink); } -.cm-s-default .cm-value { color: #930; } -.cm-s-default .cm-comment { color: var(--sf-comment-ink); } -.cm-s-default .cm-keyword { color: #90b; } -.cm-s-default .cm-regex { - text-underline-position: under; - text-decoration-color: darkgray; - text-decoration-style: solid; - text-decoration-line: underline; +.cm-s-default .cm-comment { + color: var(--sf-comment-ink); + } +.cm-s-default .cm-def { + color: var(--sf-def-ink); + } +.cm-s-default .cm-directive { + color: var(--sf-directive-ink); + font-weight: bold; } .cm-s-default .cm-error { color: inherit; } .cm-s-default .cm-error, .CodeMirror-linebackground.error { - background-color: #ff000016; - text-decoration: underline red; - text-underline-position: under; - } -.cm-s-default .cm-warning { - text-decoration: underline var(--sf-warning-ink); + background-color: var(--sf-error-surface); + text-decoration: underline var(--sf-error-ink); text-underline-position: under; } .cm-s-default .cm-link { @@ -54,28 +57,42 @@ .cm-s-default .cm-link:hover { color: var(--link-ink); } - -.cm-directive { color: #333; font-weight: bold; } -.cm-staticext { color: #008; } -.cm-staticnetBlock { color: #800; } -.cm-staticnetAllow { color: #004f00; } -.cm-staticOpt { background-color: #ddd; font-weight: bold; } +.cm-s-default .cm-keyword { + color: var(--sf-keyword-ink); + } +.cm-s-default .cm-regex { + text-underline-position: under; + text-decoration-color: var(--sf-regex-ink); + text-decoration-style: solid; + text-decoration-line: underline; + } +.cm-s-default .cm-tag { + color: var(--sf-tag-ink); + } +.cm-s-default .cm-value { color: var(--sf-value-ink); } +.cm-s-default .cm-variable { + color: var(--sf-variable-ink); + } +.cm-s-default .cm-warning { + text-decoration: underline var(--sf-warning-ink); + text-underline-position: under; + } /* Rules */ .cm-s-default .cm-allowrule { - color: green; + color: var(--df-allow-ink); font-weight: bold; } .cm-s-default .cm-blockrule { - color: red; + color: var(--df-block-ink); font-weight: bold; } .cm-s-default .cm-nooprule { - color: darkslategray; + color: var(--df-noop-ink); font-weight: bold; } .cm-s-default .cm-sortkey { - color: #708; + color: var(--sf-keyword-ink); } div.CodeMirror span.CodeMirror-matchingbracket { @@ -89,7 +106,8 @@ div.CodeMirror span.CodeMirror-matchingbracket { .cm-search-widget { align-items: center; - background-color: var(--bg-code); + background-color: var(--cm-gutter-surface); + border-bottom: 1px solid var(--cm-gutter-border); cursor: default; direction: ltr; display: flex; @@ -106,14 +124,14 @@ div.CodeMirror span.CodeMirror-matchingbracket { flex-grow: 1; } .cm-search-widget .fa-icon { - fill: #888; + fill: var(--cm-gutter-ink); font-size: 140%; } .cm-search-widget .fa-icon:not(.fa-icon-ro):hover { fill: #000; } .cm-search-widget-input input { - border: 1px solid gray; + border: 1px solid var(--cm-gutter-ink); display: inline-flex; flex-grow: 1; max-width: 16em; @@ -139,6 +157,9 @@ div.CodeMirror span.CodeMirror-matchingbracket { border: 1px dotted black; } +.CodeMirror-merge { + border-color: var(--cm-gutter-border); + } .CodeMirror-merge-l-deleted { background-image: none; } @@ -147,10 +168,12 @@ div.CodeMirror span.CodeMirror-matchingbracket { } /* This probably needs to be added to CodeMirror repo */ .CodeMirror-merge-gap { + background-color: var(--cm-gutter-surface); + border-color: var(--cm-gutter-border); vertical-align: top; } .CodeMirror-merge-spacer { - background-color: var(--bg-code); + background-color: var(--cm-gutter-surface); } .CodeMirror-hints { diff --git a/src/css/themes/default.css b/src/css/themes/default.css index ba01adb7a..eafa247bf 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -12,9 +12,12 @@ */ :root { --blue-10: #80ebff; + --blue-40: #0090ed; --blue-50: #0060df; --blue-60: #0250bb; + --dark-gray-10: #52525e; --dark-gray-30: #42414d; + --dark-gray-40: #3a3944; --dark-gray-50: #32313c; --dark-gray-80: #1c1b22; --dark-gray-90: #15141a; @@ -29,13 +32,17 @@ --light-gray-10-a12: #f9f9fb1f; --light-gray-10-a16: #f9f9fb29; --light-gray-20: #f0f0f4; + --light-gray-25: #e8e8ed; --light-gray-30: #e0e0e6; --light-gray-30-a50: #e0e0e680; --light-gray-40: #cfcfd8; --light-gray-50: #bfbfc9; --light-gray-60: #afafba; --light-gray-70: #9f9fad; + --light-gray-80: #8f8f9e; --light-gray-90: #80808f; + --orange-80: #9e280b; + --purple-60: #952bb9; --red-60: #e22850; --violet-40: #ab71ff; --violet-60: #7542e5; @@ -160,12 +167,29 @@ --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1); --popup-icon-x-ink: var(--red-60); + /* codemirror */ + --cm-gutter-border: var(--light-gray-40); + --cm-gutter-ink: var(--light-gray-90); + --cm-gutter-surface: var(--light-gray-25); + /* syntax highlight: static filtering */ - --sf-variable-ink: var(--default-ink); --sf-comment-ink: var(--light-gray-90); + --sf-def-ink: #0000ff; + --sf-directive-ink: var(--dark-gray-40); + --sf-error-ink: #ff0000; + --sf-error-surface: #ff000016; + --sf-keyword-ink: var(--purple-60); + --sf-regex-ink: var(--light-gray-60); + --sf-tag-ink: #117700; + --sf-value-ink: var(--orange-80); + --sf-variable-ink: var(--default-ink); --sf-warning-ink: var(--yellow-50); /* syntax highlight: dynamic filtering */ + --df-allow-ink: #117700; + --df-block-ink: #ff0000; + --df-noop-ink: var(--dark-gray-10); + --df-key-ink: var(--violet-70); } /**