From b3aa3dd82713cea634af6d1419dd2a1b0a8650a2 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 17:52:25 +0800 Subject: [PATCH 01/23] Standardise formatting (0 in front of decimals, no unneccessary breaks) --- themes/prism-one-dark.css | 10 ++++------ themes/prism-one-light.css | 2 -- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 70f48d3..a7548c9 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -36,11 +36,9 @@ pre[class*="language-"] { word-spacing: normal; word-break: normal; line-height: 1.5; - -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; - -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; @@ -63,15 +61,15 @@ pre[class*="language-"] *::selection { /* Code blocks */ pre[class*="language-"] { padding: 1em; - margin: .5em 0; + margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .2em .3em; - border-radius: .3em; + padding: 0.2em 0.3em; + border-radius: 0.3em; white-space: normal; } @@ -248,5 +246,5 @@ pre[class*="language-"] { } .token.namespace { - opacity: .8; + opacity: 0.8; } diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 9ff0fd5..0bbc551 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -35,11 +35,9 @@ pre[class*="language-"] { word-spacing: normal; word-break: normal; line-height: 1.5; - -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; - -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; From 205cdef120f0df7c3e84b6cd1b6aa76b3854ce27 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 18:09:53 +0800 Subject: [PATCH 02/23] Add overrides for show invisibles plugin --- themes/prism-one-dark.css | 8 ++++++++ themes/prism-one-light.css | 10 +++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index a7548c9..39afbb0 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -248,3 +248,11 @@ pre[class*="language-"] { .token.namespace { opacity: 0.8; } + +/* Show Invisibles plugin overrides */ +.token.tab:not(:empty):before, +.token.cr:before, +.token.lf:before, +.token.space:before { + color: #abb2bf26; +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 0bbc551..04caf80 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -19,7 +19,7 @@ * @syntax-fg: #383a42 * @syntax-bg: #fafafa * @syntax-gutter: #9d9d9f - * @syntax-guide: #383a4233 + * @syntax-guide: #383a4240 * @syntax-accent: #526eff * @syntax-selection-color: #e5e5e6 */ @@ -237,3 +237,11 @@ pre[class*="language-"] { .token.namespace { opacity: 0.8; } + +/* Show Invisibles plugin overrides */ +.token.tab:not(:empty):before, +.token.cr:before, +.token.lf:before, +.token.space:before { + color: #383a4240; +} From 21442a9909a5947e44b448a65da465c5c65dc488 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 18:22:52 +0800 Subject: [PATCH 03/23] Remove text shadow from invisibles --- themes/prism-one-dark.css | 1 + 1 file changed, 1 insertion(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 39afbb0..f6b15b0 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -255,4 +255,5 @@ pre[class*="language-"] { .token.lf:before, .token.space:before { color: #abb2bf26; + text-shadow: none; } From 41c31a59f8a917208e1bc1055acbd111c6c35a6b Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 19:51:07 +0800 Subject: [PATCH 04/23] Add overrides for toolbar plugin --- themes/prism-one-dark.css | 27 +++++++++++++++++++++++++++ themes/prism-one-light.css | 27 +++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index f6b15b0..9d12c01 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -5,6 +5,7 @@ /** * One Dark colours in terms of RGB (accurate as of commit 8ae45ca on 6 Sep 2018) + * -- From colors.less * @mono-1: #abb2bf * @mono-2: #828997 * @mono-3: #5c6370 @@ -21,7 +22,9 @@ * @syntax-gutter: #636d83 * @syntax-guide: #abb2bf26 * @syntax-accent: #528bff + * -- From syntax-variables.less * @syntax-selection-color: #3e4451 + * @syntax-gutter-background-color-selected: #3a3f4b */ code[class*="language-"], @@ -257,3 +260,27 @@ pre[class*="language-"] { color: #abb2bf26; text-shadow: none; } + +/* Toolbar plugin overrides */ +div.code-toolbar > .toolbar { + right: 0.5em; +} + +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > span { + background: #3a3f4b; + color: #828997; + padding: 0.1em 0.4em; + border-radius: 0.3em; +} + +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + background: #3e4451; + color: #abb2bf; +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 04caf80..5f4354a 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -5,6 +5,7 @@ /** * One Light colours in terms of RGB (accurate as of commit eb064bf on 19 Feb 2021) + * -- From colors.less * @mono-1: #383a42 * @mono-2: #696c77 * @mono-3: #a0a1a7 @@ -21,7 +22,9 @@ * @syntax-gutter: #9d9d9f * @syntax-guide: #383a4240 * @syntax-accent: #526eff + * -- From syntax-variables.less * @syntax-selection-color: #e5e5e6 + * @syntax-gutter-background-color-selected: #e5e5e6 */ code[class*="language-"], @@ -245,3 +248,27 @@ pre[class*="language-"] { .token.space:before { color: #383a4240; } + +/* Toolbar plugin overrides */ +div.code-toolbar > .toolbar { + right: 0.5em; +} + +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > span { + background: #e5e5e6; + color: #696c77; + padding: 0.1em 0.4em; + border-radius: 0.3em; +} + +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + background: #c6c7c7; /* custom: darken(@syntax-bg, 20%) */ + color: #383a42; +} From 3c09de7376999cf0f435008c224547b26a6bb375 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 20:20:53 +0800 Subject: [PATCH 05/23] Add overrides for match braces plugin --- themes/prism-one-dark.css | 26 ++++++++++++++++++++++++++ themes/prism-one-light.css | 26 ++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 9d12c01..5dee637 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -284,3 +284,29 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { background: #3e4451; color: #abb2bf; } + +/* Match Braces plugin overrides */ +/* Note: Outline colour is inherited from the braces */ +.rainbow-braces .token.punctuation.brace-level-1, +.rainbow-braces .token.punctuation.brace-level-5, +.rainbow-braces .token.punctuation.brace-level-9 { + color: #e06c75; +} + +.rainbow-braces .token.punctuation.brace-level-2, +.rainbow-braces .token.punctuation.brace-level-6, +.rainbow-braces .token.punctuation.brace-level-10 { + color: #98c379; +} + +.rainbow-braces .token.punctuation.brace-level-3, +.rainbow-braces .token.punctuation.brace-level-7, +.rainbow-braces .token.punctuation.brace-level-11 { + color: #61afef; +} + +.rainbow-braces .token.punctuation.brace-level-4, +.rainbow-braces .token.punctuation.brace-level-8, +.rainbow-braces .token.punctuation.brace-level-12 { + color: #c678dd; +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 5f4354a..c883fea 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -272,3 +272,29 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { background: #c6c7c7; /* custom: darken(@syntax-bg, 20%) */ color: #383a42; } + +/* Match Braces plugin overrides */ +/* Note: Outline colour is inherited from the braces */ +.rainbow-braces .token.punctuation.brace-level-1, +.rainbow-braces .token.punctuation.brace-level-5, +.rainbow-braces .token.punctuation.brace-level-9 { + color: #e45649; +} + +.rainbow-braces .token.punctuation.brace-level-2, +.rainbow-braces .token.punctuation.brace-level-6, +.rainbow-braces .token.punctuation.brace-level-10 { + color: #50a14f; +} + +.rainbow-braces .token.punctuation.brace-level-3, +.rainbow-braces .token.punctuation.brace-level-7, +.rainbow-braces .token.punctuation.brace-level-11 { + color: #4078f2; +} + +.rainbow-braces .token.punctuation.brace-level-4, +.rainbow-braces .token.punctuation.brace-level-8, +.rainbow-braces .token.punctuation.brace-level-12 { + color: #a626a4; +} From 1595fc3405ce88b73c874f5a3034fceadad56a8d Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 21:52:56 +0800 Subject: [PATCH 06/23] Add overrides for diff highlight plugin --- themes/prism-one-dark.css | 34 ++++++++++++++++++++++++++++++++++ themes/prism-one-light.css | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 5dee637..16927b9 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -310,3 +310,37 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { .rainbow-braces .token.punctuation.brace-level-12 { color: #c678dd; } + +/* Diff Highlight plugin overrides */ +/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ +pre.diff-highlight > code .token.deleted:not(.prefix), +pre > code.diff-highlight .token.deleted:not(.prefix) { + background-color: #ff526626; +} + +pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre.diff-highlight > code .token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { + background-color: #fb566940; +} + +pre.diff-highlight > code .token.inserted:not(.prefix), +pre > code.diff-highlight .token.inserted:not(.prefix) { + background-color: #1aff5b26; +} + +pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre.diff-highlight > code .token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { + background-color: #38e06240; +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index c883fea..cb868a8 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -298,3 +298,37 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { .rainbow-braces .token.punctuation.brace-level-12 { color: #a626a4; } + +/* Diff Highlight plugin overrides */ +/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ +pre.diff-highlight > code .token.deleted:not(.prefix), +pre > code.diff-highlight .token.deleted:not(.prefix) { + background-color: #ff526626; +} + +pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre.diff-highlight > code .token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { + background-color: #fb566940; +} + +pre.diff-highlight > code .token.inserted:not(.prefix), +pre > code.diff-highlight .token.inserted:not(.prefix) { + background-color: #1aff5b26; +} + +pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre.diff-highlight > code .token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { + background-color: #38e06240; +} From 235e8aa5faef303f3c92eb39ba4da0b2804fe225 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 22:53:08 +0800 Subject: [PATCH 07/23] Add overrides for command line plugin --- themes/prism-one-dark.css | 9 +++++++++ themes/prism-one-light.css | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 16927b9..54ecf8a 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -344,3 +344,12 @@ pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; } + +/* Command Line plugin overrides */ +.command-line-prompt { + border-right: 1px solid #abb2bf26; +} + +.command-line-prompt > span:before { + color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index cb868a8..d2da4fd 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -332,3 +332,12 @@ pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; } + +/* Command Line plugin overrides */ +.command-line-prompt { + border-right: 1px solid #383a4240; +} + +.command-line-prompt > span:before { + color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ +} From 0567b34c92d17d09743f54c0ffd450489279acb8 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 12 Sep 2021 22:54:04 +0800 Subject: [PATCH 08/23] Fix text colour on user selection/highlight --- themes/prism-one-dark.css | 2 ++ themes/prism-one-light.css | 2 ++ 2 files changed, 4 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 54ecf8a..adae467 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -52,12 +52,14 @@ pre[class*="language-"] { code[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection { background: #3e4451; + color: inherit; text-shadow: none; } code[class*="language-"]::selection, pre[class*="language-"] *::selection { background: #3e4451; + color: inherit; text-shadow: none; } diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index d2da4fd..d929e70 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -51,11 +51,13 @@ pre[class*="language-"] { code[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection { background: #e5e5e6; + color: inherit; } code[class*="language-"]::selection, pre[class*="language-"] *::selection { background: #e5e5e6; + color: inherit; } /* Code blocks */ From 46a5c414c9b802b6a0fd4dfcc6d369ca35740d16 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 01:00:27 +0800 Subject: [PATCH 09/23] Add overrides for line numbers plugin --- themes/prism-one-dark.css | 9 +++++++++ themes/prism-one-light.css | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index adae467..0cde2b0 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -287,6 +287,15 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { color: #abb2bf; } +/* Line Numbers plugin overrides */ +.line-numbers .line-numbers-rows { + border-right: 1px solid #abb2bf26; +} + +.line-numbers-rows > span:before { + color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ +} + /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ .rainbow-braces .token.punctuation.brace-level-1, diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index d929e70..8f1a2c8 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -275,6 +275,15 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { color: #383a42; } +/* Line Numbers plugin overrides */ +.line-numbers .line-numbers-rows { + border-right: 1px solid #383a4240; +} + +.line-numbers-rows > span:before { + color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ +} + /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ .rainbow-braces .token.punctuation.brace-level-1, From eb1853e1eafa40a53a24623a58047bb8e7c90859 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 01:42:18 +0800 Subject: [PATCH 10/23] Add overrides for line highlight plugin --- themes/prism-one-dark.css | 19 +++++++++++++++++++ themes/prism-one-light.css | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 0cde2b0..ac40f3e 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -25,6 +25,7 @@ * -- From syntax-variables.less * @syntax-selection-color: #3e4451 * @syntax-gutter-background-color-selected: #3a3f4b + * @syntax-cursor-line: #99bbff0c */ code[class*="language-"], @@ -287,6 +288,24 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { color: #abb2bf; } +/* Line Highlight plugin overrides */ +.line-highlight { + background: #99bbff0c; +} + +.line-highlight:before, +.line-highlight[data-end]:after { + background: #3a3f4b; + color: #abb2bf; + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ +} + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: #99bbff0c; +} + /* Line Numbers plugin overrides */ .line-numbers .line-numbers-rows { border-right: 1px solid #abb2bf26; diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 8f1a2c8..d0cd193 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -25,6 +25,7 @@ * -- From syntax-variables.less * @syntax-selection-color: #e5e5e6 * @syntax-gutter-background-color-selected: #e5e5e6 + * @syntax-cursor-line: #383a420d */ code[class*="language-"], @@ -275,6 +276,24 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { color: #383a42; } +/* Line Highlight plugin overrides */ +.line-highlight { + background: #383a420d; +} + +.line-highlight:before, +.line-highlight[data-end]:after { + background: #e5e5e6; + color: #383a42; + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ +} + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: #383a420d; +} + /* Line Numbers plugin overrides */ .line-numbers .line-numbers-rows { border-right: 1px solid #383a4240; From 578c1b2aaa4236756ed7e745e190bd71cc6daadf Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 03:09:00 +0800 Subject: [PATCH 11/23] Add overrides for previewers plugin --- themes/prism-one-dark.css | 38 ++++++++++++++++++++++++++++++++++++++ themes/prism-one-light.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index ac40f3e..0a0245e 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -383,3 +383,41 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { .command-line-prompt > span:before { color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ } + +/* Previewers plugin overrides */ +/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ +.prism-previewer:before, +.prism-previewer-gradient div { + border-radius: 0.3em; + border: 5px solid #252830; +} + +.prism-previewer:after { + border-top-color: #252830; +} + +.prism-previewer-flipped.after { + border-bottom-color: #252830; +} + +.prism-previewer-angle:before, +.prism-previewer-time:before, +.prism-previewer-easing { + background: #31363f; +} + +.prism-previewer-angle circle, +.prism-previewer-time circle { + stroke: #abb2bf; + stroke-opacity: 1; +} + +.prism-previewer-easing circle, +.prism-previewer-easing path, +.prism-previewer-easing line { + stroke: #abb2bf; +} + +.prism-previewer-easing circle { + fill: transparent; +} diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index d0cd193..08c306b 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -371,3 +371,41 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { .command-line-prompt > span:before { color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ } + +/* Previewers plugin overrides */ +/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ +.prism-previewer:before, +.prism-previewer-gradient div { + border-radius: 0.3em; + border: 5px solid #f2f2f2; +} + +.prism-previewer:after { + border-top-color: #f2f2f2; +} + +.prism-previewer-flipped.after { + border-bottom-color: #f2f2f2; +} + +.prism-previewer-angle:before, +.prism-previewer-time:before, +.prism-previewer-easing { + background: #fff; +} + +.prism-previewer-angle circle, +.prism-previewer-time circle { + stroke: #383a42; + stroke-opacity: 1; +} + +.prism-previewer-easing circle, +.prism-previewer-easing path, +.prism-previewer-easing line { + stroke: #383a42; +} + +.prism-previewer-easing circle { + fill: transparent; +} From f317939ae6e20185a582ac6a207e94159a55b960 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 03:25:14 +0800 Subject: [PATCH 12/23] Add notes; Combine line numbers and command line --- themes/prism-one-dark.css | 27 ++++++++++++++------------- themes/prism-one-light.css | 27 ++++++++++++++------------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 0a0245e..b1ca8f9 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -266,9 +266,10 @@ pre[class*="language-"] { /* Toolbar plugin overrides */ div.code-toolbar > .toolbar { - right: 0.5em; + right: 0.5em; /* moving the toolbar more to the left than the default */ } +/* Styling the buttons */ div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > span { @@ -293,6 +294,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { background: #99bbff0c; } +/* Default line numbers in Line Highlight plugin */ .line-highlight:before, .line-highlight[data-end]:after { background: #3a3f4b; @@ -302,16 +304,21 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } +/* Hovering over a linkable line number (in the gutter area) */ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: #99bbff0c; } -/* Line Numbers plugin overrides */ -.line-numbers .line-numbers-rows { +/* Line Numbers and Command Line plugins overrides */ +/* Line separating gutter from coding area */ +.line-numbers .line-numbers-rows, +.command-line-prompt { border-right: 1px solid #abb2bf26; } -.line-numbers-rows > span:before { +/* Stuff in the gutter */ +.line-numbers-rows > span:before, +.command-line-prompt > span:before { color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ } @@ -375,23 +382,16 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; } -/* Command Line plugin overrides */ -.command-line-prompt { - border-right: 1px solid #abb2bf26; -} - -.command-line-prompt > span:before { - color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ -} - /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ +/* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { border-radius: 0.3em; border: 5px solid #252830; } +/* Triangles pointing to the code */ .prism-previewer:after { border-top-color: #252830; } @@ -400,6 +400,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { border-bottom-color: #252830; } +/* Background colour within the popup */ .prism-previewer-angle:before, .prism-previewer-time:before, .prism-previewer-easing { diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 08c306b..89b0a3c 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -254,9 +254,10 @@ pre[class*="language-"] { /* Toolbar plugin overrides */ div.code-toolbar > .toolbar { - right: 0.5em; + right: 0.5em; /* moving the toolbar more to the left than the default */ } +/* Styling the buttons */ div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > span { @@ -281,6 +282,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { background: #383a420d; } +/* Default line numbers in Line Highlight plugin */ .line-highlight:before, .line-highlight[data-end]:after { background: #e5e5e6; @@ -290,16 +292,21 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } +/* Hovering over a linkable line number (in the gutter area) */ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: #383a420d; } -/* Line Numbers plugin overrides */ -.line-numbers .line-numbers-rows { +/* Line Numbers and Command Line plugins overrides */ +/* Line separating gutter from coding area */ +.line-numbers .line-numbers-rows, +.command-line-prompt { border-right: 1px solid #383a4240; } -.line-numbers-rows > span:before { +/* Stuff in the gutter */ +.line-numbers-rows > span:before, +.command-line-prompt > span:before { color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ } @@ -363,23 +370,16 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; } -/* Command Line plugin overrides */ -.command-line-prompt { - border-right: 1px solid #383a4240; -} - -.command-line-prompt > span:before { - color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ -} - /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ +/* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { border-radius: 0.3em; border: 5px solid #f2f2f2; } +/* Triangles pointing to the code */ .prism-previewer:after { border-top-color: #f2f2f2; } @@ -388,6 +388,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { border-bottom-color: #f2f2f2; } +/* Background colour within the popup */ .prism-previewer-angle:before, .prism-previewer-time:before, .prism-previewer-easing { From 8dbc3a6811420500ac6b2cbd8c5b108ac6d75d75 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 03:30:01 +0800 Subject: [PATCH 13/23] Remove underlines from urls (without plugin) --- themes/prism-one-dark.css | 8 -------- themes/prism-one-light.css | 8 -------- 2 files changed, 16 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index b1ca8f9..a6510c3 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -139,7 +139,6 @@ pre[class*="language-"] { .token.url { color: #56b6c2; - text-decoration: underline; } /* HTML overrides */ @@ -157,10 +156,6 @@ pre[class*="language-"] { color: #abb2bf; } -.language-css .token.url { - text-decoration: none; -} - .language-css .token.function, .language-css .token.url > .token.function { color: #56b6c2; @@ -198,18 +193,15 @@ pre[class*="language-"] { .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string { color: #abb2bf; - text-decoration: none; } .language-markdown .token.url > .token.content { color: #61afef; - text-decoration: none; } .language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url { color: #56b6c2; - text-decoration: underline; } .language-markdown .token.blockquote.punctuation, diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 89b0a3c..5418eba 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -128,7 +128,6 @@ pre[class*="language-"] { .token.url { color: #0184bc; - text-decoration: underline; } /* HTML overrides */ @@ -146,10 +145,6 @@ pre[class*="language-"] { color: #383a42; } -.language-css .token.url { - text-decoration: none; -} - .language-css .token.function, .language-css .token.url > .token.function { color: #0184bc; @@ -187,18 +182,15 @@ pre[class*="language-"] { .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string { color: #383a42; - text-decoration: none; } .language-markdown .token.url > .token.content { color: #4078f2; - text-decoration: none; } .language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url { color: #0184bc; - text-decoration: underline; } .language-markdown .token.blockquote.punctuation, From 83d0ebf317642485df8eced6206e365582eba8a5 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 03:46:09 +0800 Subject: [PATCH 14/23] Fix typos --- README.md | 16 ++++++++-------- themes/prism-one-dark.css | 2 +- themes/prism-one-light.css | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index cf9489c..7d9332a 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,10 @@ To use one of the themes, just include the theme's CSS file in your page. Exampl ``` -## Adding a New Theme +## Adding new themes -To add your own theme, copy it into the `themes` directory and add your themes to the list of available themes in the readme. -The links for your themes have to be `themes/prism-.css` for the theme itself and `screenshots/prism-.png` for the screenshot. +To add your own theme/s, copy it/them into the `themes` directory and add your theme/s to the list of available themes in this readme. +The filenames for your themes have to be `themes/prism-.css` for the theme itself and `screenshots/prism-.png` for the screenshot. The screenshot will be created for you by running the following command: @@ -34,7 +34,7 @@ The screenshot will be created for you by running the following command: npm i && npx gulp screenshot ``` -Before making a pull request, you can the following command to verify that all checks pass: +Before making a pull request, you can run the following command to verify that all checks pass: ```bash npm test @@ -57,7 +57,7 @@ Thank you so much for contributing!! [![Xonokai](screenshots/prism-xonokai.png)](themes/prism-xonokai.css) * [__Ateliersulphurpool-light__](themes/prism-base16-ateliersulphurpool.light.css) (by [Bram de Haan](https://github.com/atelierbram))
-[![Ateliersulpherpool-light](screenshots/prism-base16-ateliersulphurpool.light.png)](themes/prism-base16-ateliersulphurpool.light.css) +[![Ateliersulphurpool-light](screenshots/prism-base16-ateliersulphurpool.light.png)](themes/prism-base16-ateliersulphurpool.light.css) * [__Hopscotch__](themes/prism-hopscotch.css) (by [Jan T. Sott](https://github.com/idleberg))
[![Hopscotch](screenshots/prism-hopscotch.png)](themes/prism-hopscotch.css) @@ -89,14 +89,14 @@ Thank you so much for contributing!! * [__VS Code Dark+__](themes/prism-vsc-dark-plus.css) (by [tabuckner](https://github.com/tabuckner))
[![VS](screenshots/prism-vsc-dark-plus.png)](themes/prism-vsc-dark-plus.css) -* [__Darcula__](themes/prism-darcula.css) (by [service-paradis](https://github.com/service-paradis), based on Jetbrains Darcula theme)
+* [__Darcula__](themes/prism-darcula.css) (by [service-paradis](https://github.com/service-paradis), based on Jetbrains' Darcula theme)
[![Darcula](screenshots/prism-darcula.png)](themes/prism-darcula.css) * [__a11y Dark__](themes/prism-a11y-dark.css) (by [ericwbailey](https://github.com/ericwbailey))
[![a11y Dark](screenshots/prism-a11y-dark.png)](themes/prism-a11y-dark.css) * [__Dracula__](themes/prism-dracula.css) (by [Byverdu](https://github.com/byverdu))
-[![a11y Dark](screenshots/prism-dracula.png)](themes/prism-dracula.css) +[![Dracula](screenshots/prism-dracula.png)](themes/prism-dracula.css) * [__Synthwave '84__](themes/prism-synthwave84.css) (originally by [Robb Owen](https://github.com/robb0wen), adapted by [Marc Backes](https://github.com/themarcba))
[![Synthwave '84](screenshots/prism-synthwave84.png)](themes/prism-synthwave84.css) @@ -134,7 +134,7 @@ Thank you so much for contributing!! * [__Lucario__](themes/prism-lucario.css) (by [Christopher Kapic](https://github.com/christopher-kapic), based on [Raphael Amorim's](https://github.com/raphamorim) [Lucario Theme](https://github.com/raphamorim/lucario))
[![Lucario](screenshots/prism-lucario.png)](themes/prism-lucario.css) -* [__Night Owl__](themes/prism-night-owl.css) (by [Souvik Mandal](https://github.com/SimpleIndian), based on [Sarah Drasner's](https://github.com/sdras) [Night owl Theme](https://github.com/sdras/night-owl-vscode-theme))
+* [__Night Owl__](themes/prism-night-owl.css) (by [Souvik Mandal](https://github.com/SimpleIndian), based on [Sarah Drasner's](https://github.com/sdras) [Night Owl Theme](https://github.com/sdras/night-owl-vscode-theme))
[![Night Owl](screenshots/prism-night-owl.png)](themes/prism-night-owl.css) * [__Holi Theme__](themes/prism-holi-theme.css) (by [Ayush Saini](https://github.com/AyushSaini00), based on [Holi Theme for VS Code](https://github.com/AyushSaini00/holi-theme))
diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index a6510c3..fb3b549 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -258,7 +258,7 @@ pre[class*="language-"] { /* Toolbar plugin overrides */ div.code-toolbar > .toolbar { - right: 0.5em; /* moving the toolbar more to the left than the default */ + right: 0.5em; /* move the toolbar more to the left than the default */ } /* Styling the buttons */ diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 5418eba..62818ac 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -246,7 +246,7 @@ pre[class*="language-"] { /* Toolbar plugin overrides */ div.code-toolbar > .toolbar { - right: 0.5em; /* moving the toolbar more to the left than the default */ + right: 0.5em; /* move the toolbar more to the left than the default */ } /* Styling the buttons */ From 5ae8abf9699d340d6560504b236be4b147ae8d3f Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 04:00:21 +0800 Subject: [PATCH 15/23] Separate `::-moz-selection` and `::selection` in diff highlight --- themes/prism-one-dark.css | 14 ++++++++++---- themes/prism-one-light.css | 14 ++++++++++---- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index fb3b549..eda136d 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -349,10 +349,13 @@ pre > code.diff-highlight .token.deleted:not(.prefix) { pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { + background-color: #fb566940; +} + pre.diff-highlight > code .token.deleted:not(.prefix)::selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix)::selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { background-color: #fb566940; @@ -365,10 +368,13 @@ pre > code.diff-highlight .token.inserted:not(.prefix) { pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { + background-color: #38e06240; +} + pre.diff-highlight > code .token.inserted:not(.prefix)::selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 62818ac..b53cab9 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -337,10 +337,13 @@ pre > code.diff-highlight .token.deleted:not(.prefix) { pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { + background-color: #fb566940; +} + pre.diff-highlight > code .token.deleted:not(.prefix)::selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix)::selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { background-color: #fb566940; @@ -353,10 +356,13 @@ pre > code.diff-highlight .token.inserted:not(.prefix) { pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { + background-color: #38e06240; +} + pre.diff-highlight > code .token.inserted:not(.prefix)::selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { background-color: #38e06240; From 3a00a97abe63c43754a1f7052bb5b17817f434bc Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 18:07:12 +0800 Subject: [PATCH 16/23] Declare only `border-color` instead of `border` for previewers plugin --- themes/prism-one-dark.css | 2 +- themes/prism-one-light.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index eda136d..f114b34 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -386,7 +386,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { .prism-previewer:before, .prism-previewer-gradient div { border-radius: 0.3em; - border: 5px solid #252830; + border-color: #252830; } /* Triangles pointing to the code */ diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index b53cab9..bad7bcc 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -374,7 +374,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { .prism-previewer:before, .prism-previewer-gradient div { border-radius: 0.3em; - border: 5px solid #f2f2f2; + border-color: #f2f2f2; } /* Triangles pointing to the code */ From 3b0547a7ccc37334b386042f9f3ecf462bd0dbff Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 21:25:13 +0800 Subject: [PATCH 17/23] Space out buttons in toolbar --- themes/prism-one-dark.css | 5 +++-- themes/prism-one-light.css | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index f114b34..d24ff23 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -257,8 +257,9 @@ pre[class*="language-"] { } /* Toolbar plugin overrides */ -div.code-toolbar > .toolbar { - right: 0.5em; /* move the toolbar more to the left than the default */ +/* Space out all buttons and move them away from the right edge of the code block */ +div.code-toolbar > .toolbar > .toolbar-item { + margin-right: 0.4em; } /* Styling the buttons */ diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index bad7bcc..97afdd3 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -245,8 +245,9 @@ pre[class*="language-"] { } /* Toolbar plugin overrides */ -div.code-toolbar > .toolbar { - right: 0.5em; /* move the toolbar more to the left than the default */ +/* Space out all buttons and move them away from the right edge of the code block */ +div.code-toolbar > .toolbar > .toolbar-item { + margin-right: 0.4em; } /* Styling the buttons */ From 4eb2afee424c76102c2ea56678d9aea6b1fb25e8 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Mon, 13 Sep 2021 21:33:02 +0800 Subject: [PATCH 18/23] Declare only `border-right-color` for line numbers and command line --- themes/prism-one-dark.css | 2 +- themes/prism-one-light.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index d24ff23..ec6d7d7 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -306,7 +306,7 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { /* Line separating gutter from coding area */ .line-numbers .line-numbers-rows, .command-line-prompt { - border-right: 1px solid #abb2bf26; + border-right-color: #abb2bf26; } /* Stuff in the gutter */ diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 97afdd3..afa73a6 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -294,7 +294,7 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { /* Line separating gutter from coding area */ .line-numbers .line-numbers-rows, .command-line-prompt { - border-right: 1px solid #383a4240; + border-right-color: #383a4240; } /* Stuff in the gutter */ From 1ffef8cdce43e111c9e13d01f1acc5d82a6002c9 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Tue, 14 Sep 2021 00:35:53 +0800 Subject: [PATCH 19/23] Adjust `border-radius` only for non-circular popups --- themes/prism-one-dark.css | 8 +++++++- themes/prism-one-light.css | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index ec6d7d7..1e7bb28 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -386,10 +386,16 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { - border-radius: 0.3em; border-color: #252830; } +/* Angle and time should remain as circles and are hence not included */ +.prism-previewer-color:before, +.prism-previewer-gradient div, +.prism-previewer-easing:before { + border-radius: 0.3em; +} + /* Triangles pointing to the code */ .prism-previewer:after { border-top-color: #252830; diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index afa73a6..e87dbdc 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -374,10 +374,16 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { - border-radius: 0.3em; border-color: #f2f2f2; } +/* Angle and time should remain as circles and are hence not included */ +.prism-previewer-color:before, +.prism-previewer-gradient div, +.prism-previewer-easing:before { + border-radius: 0.3em; +} + /* Triangles pointing to the code */ .prism-previewer:after { border-top-color: #f2f2f2; From d1e885fffdc3bef527807189da1f92c750e0b0d5 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Tue, 14 Sep 2021 01:35:53 +0800 Subject: [PATCH 20/23] Use hsl instead of hex --- themes/prism-one-dark.css | 158 ++++++++++++++++++------------------- themes/prism-one-light.css | 156 ++++++++++++++++++------------------ 2 files changed, 157 insertions(+), 157 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 1e7bb28..217167c 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -4,34 +4,34 @@ */ /** - * One Dark colours in terms of RGB (accurate as of commit 8ae45ca on 6 Sep 2018) - * -- From colors.less - * @mono-1: #abb2bf - * @mono-2: #828997 - * @mono-3: #5c6370 - * @hue-1: #56b6c2 <- cyan - * @hue-2: #61afef <- blue - * @hue-3: #c678dd <- purple - * @hue-4: #98c379 <- green - * @hue-5: #e06c75 <- red 1 - * @hue-5-2: #be5046 <- red 2 - * @hue-6: #d19a66 <- yellow 1 - * @hue-6-2: #e5c07b <- yellow 2 - * @syntax-fg: #abb2bf - * @syntax-bg: #282c34 - * @syntax-gutter: #636d83 - * @syntax-guide: #abb2bf26 - * @syntax-accent: #528bff - * -- From syntax-variables.less - * @syntax-selection-color: #3e4451 - * @syntax-gutter-background-color-selected: #3a3f4b - * @syntax-cursor-line: #99bbff0c + * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) + * From colors.less + * --mono-1: hsl(220, 14%, 71%); + * --mono-2: hsl(220, 9%, 55%); + * --mono-3: hsl(220, 10%, 40%); + * --hue-1: hsl(187, 47%, 55%); + * --hue-2: hsl(207, 82%, 66%); + * --hue-3: hsl(286, 60%, 67%); + * --hue-4: hsl(95, 38%, 62%); + * --hue-5: hsl(355, 65%, 65%); + * --hue-5-2: hsl(5, 48%, 51%); + * --hue-6: hsl(29, 54%, 61%); + * --hue-6-2: hsl(39, 67%, 69%); + * --syntax-fg: hsl(220, 14%, 71%); + * --syntax-bg: hsl(220, 13%, 18%); + * --syntax-gutter: hsl(220, 14%, 45%); + * --syntax-guide: hsla(220, 14%, 71%, 0.15); + * --syntax-accent: hsl(220, 100%, 66%); + * From syntax-variables.less + * --syntax-selection-color: hsl(220, 13%, 28%); + * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); + * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); */ code[class*="language-"], pre[class*="language-"] { - background: #282c34; - color: #abb2bf; + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; @@ -52,14 +52,14 @@ pre[class*="language-"] { /* Selection */ code[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection { - background: #3e4451; + background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } code[class*="language-"]::selection, pre[class*="language-"] *::selection { - background: #3e4451; + background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } @@ -90,13 +90,13 @@ pre[class*="language-"] { .token.comment, .token.prolog, .token.cdata { - color: #5c6370; + color: hsl(220, 10%, 40%); } .token.doctype, .token.punctuation, .token.entity { - color: #abb2bf; + color: hsl(220, 14%, 71%); } .token.attr-name, @@ -105,11 +105,11 @@ pre[class*="language-"] { .token.constant, .token.number, .token.atrule { - color: #d19a66; + color: hsl(29, 54%, 61%); } .token.keyword { - color: #c678dd; + color: hsl(286, 60%, 67%); } .token.property, @@ -117,7 +117,7 @@ pre[class*="language-"] { .token.symbol, .token.deleted, .token.important { - color: #e06c75; + color: hsl(355, 65%, 65%); } .token.selector, @@ -128,105 +128,105 @@ pre[class*="language-"] { .token.regex, .token.attr-value, .token.attr-value > .token.punctuation { - color: #98c379; + color: hsl(95, 38%, 62%); } .token.variable, .token.operator, .token.function { - color: #61afef; + color: hsl(207, 82%, 66%); } .token.url { - color: #56b6c2; + color: hsl(187, 47%, 55%); } /* HTML overrides */ .token.attr-value > .token.punctuation.attr-equals, .token.special-attr > .token.attr-value > .token.value.css { - color: #abb2bf; + color: hsl(220, 14%, 71%); } /* CSS overrides */ .language-css .token.selector { - color: #e06c75; + color: hsl(355, 65%, 65%); } .language-css .token.property { - color: #abb2bf; + color: hsl(220, 14%, 71%); } .language-css .token.function, .language-css .token.url > .token.function { - color: #56b6c2; + color: hsl(187, 47%, 55%); } .language-css .token.url > .token.string.url { - color: #98c379; + color: hsl(95, 38%, 62%); } .language-css .token.important, .language-css .token.atrule .token.rule { - color: #c678dd; + color: hsl(286, 60%, 67%); } /* JS overrides */ .language-javascript .token.operator { - color: #c678dd; + color: hsl(286, 60%, 67%); } .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { - color: #be5046; + color: hsl(5, 48%, 51%); } /* JSON overrides */ .language-json .token.operator { - color: #abb2bf; + color: hsl(220, 14%, 71%); } .language-json .token.null.keyword { - color: #d19a66; + color: hsl(29, 54%, 61%); } /* MD overrides */ .language-markdown .token.url, .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string { - color: #abb2bf; + color: hsl(220, 14%, 71%); } .language-markdown .token.url > .token.content { - color: #61afef; + color: hsl(207, 82%, 66%); } .language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url { - color: #56b6c2; + color: hsl(187, 47%, 55%); } .language-markdown .token.blockquote.punctuation, .language-markdown .token.hr.punctuation { - color: #5c6370; + color: hsl(220, 10%, 40%); font-style: italic; } .language-markdown .token.code-snippet { - color: #98c379; + color: hsl(95, 38%, 62%); } .language-markdown .token.bold .token.content { - color: #d19a66; + color: hsl(29, 54%, 61%); } .language-markdown .token.italic .token.content { - color: #c678dd; + color: hsl(286, 60%, 67%); } .language-markdown .token.strike .token.content, .language-markdown .token.strike .token.punctuation, .language-markdown .token.list.punctuation, .language-markdown .token.title.important > .token.punctuation { - color: #e06c75; + color: hsl(355, 65%, 65%); } /* General */ @@ -252,7 +252,7 @@ pre[class*="language-"] { .token.cr:before, .token.lf:before, .token.space:before { - color: #abb2bf26; + color: hsla(220, 14%, 71%, 0.15); text-shadow: none; } @@ -266,8 +266,8 @@ div.code-toolbar > .toolbar > .toolbar-item { div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > span { - background: #3a3f4b; - color: #828997; + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); padding: 0.1em 0.4em; border-radius: 0.3em; } @@ -278,20 +278,20 @@ div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus { - background: #3e4451; - color: #abb2bf; + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); } /* Line Highlight plugin overrides */ .line-highlight { - background: #99bbff0c; + background: hsla(220, 100%, 80%, 0.04); } /* Default line numbers in Line Highlight plugin */ .line-highlight:before, .line-highlight[data-end]:after { - background: #3a3f4b; - color: #abb2bf; + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ @@ -299,20 +299,20 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { /* Hovering over a linkable line number (in the gutter area) */ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: #99bbff0c; + background-color: hsla(220, 100%, 80%, 0.04); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ .line-numbers .line-numbers-rows, .command-line-prompt { - border-right-color: #abb2bf26; + border-right-color: hsla(220, 14%, 71%, 0.15); } /* Stuff in the gutter */ .line-numbers-rows > span:before, .command-line-prompt > span:before { - color: #abb2bf; /* would prefer @syntax-gutter but it fails WCAG AA */ + color: hsl(220, 14%, 71%); /* would prefer --syntax-gutter but it fails WCAG AA */ } /* Match Braces plugin overrides */ @@ -320,65 +320,65 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { .rainbow-braces .token.punctuation.brace-level-1, .rainbow-braces .token.punctuation.brace-level-5, .rainbow-braces .token.punctuation.brace-level-9 { - color: #e06c75; + color: hsl(355, 65%, 65%); } .rainbow-braces .token.punctuation.brace-level-2, .rainbow-braces .token.punctuation.brace-level-6, .rainbow-braces .token.punctuation.brace-level-10 { - color: #98c379; + color: hsl(95, 38%, 62%); } .rainbow-braces .token.punctuation.brace-level-3, .rainbow-braces .token.punctuation.brace-level-7, .rainbow-braces .token.punctuation.brace-level-11 { - color: #61afef; + color: hsl(207, 82%, 66%); } .rainbow-braces .token.punctuation.brace-level-4, .rainbow-braces .token.punctuation.brace-level-8, .rainbow-braces .token.punctuation.brace-level-12 { - color: #c678dd; + color: hsl(286, 60%, 67%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ pre.diff-highlight > code .token.deleted:not(.prefix), pre > code.diff-highlight .token.deleted:not(.prefix) { - background-color: #ff526626; + background-color: hsla(353, 100%, 66%, 0.15); } pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { - background-color: #fb566940; + background-color: hsla(353, 95%, 66%, 0.25); } pre.diff-highlight > code .token.deleted:not(.prefix)::selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, pre > code.diff-highlight .token.deleted:not(.prefix)::selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { - background-color: #fb566940; + background-color: hsla(353, 95%, 66%, 0.25); } pre.diff-highlight > code .token.inserted:not(.prefix), pre > code.diff-highlight .token.inserted:not(.prefix) { - background-color: #1aff5b26; + background-color: hsla(137, 100%, 55%, 0.15); } pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { - background-color: #38e06240; + background-color: hsla(135, 73%, 55%, 0.25); } pre.diff-highlight > code .token.inserted:not(.prefix)::selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { - background-color: #38e06240; + background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ @@ -386,7 +386,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { - border-color: #252830; + border-color: hsl(224, 13%, 17%); } /* Angle and time should remain as circles and are hence not included */ @@ -398,30 +398,30 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Triangles pointing to the code */ .prism-previewer:after { - border-top-color: #252830; + border-top-color: hsl(224, 13%, 17%); } .prism-previewer-flipped.after { - border-bottom-color: #252830; + border-bottom-color: hsl(224, 13%, 17%); } /* Background colour within the popup */ .prism-previewer-angle:before, .prism-previewer-time:before, .prism-previewer-easing { - background: #31363f; + background: hsl(219, 13%, 22%); } .prism-previewer-angle circle, .prism-previewer-time circle { - stroke: #abb2bf; + stroke: hsl(220, 14%, 71%); stroke-opacity: 1; } .prism-previewer-easing circle, .prism-previewer-easing path, .prism-previewer-easing line { - stroke: #abb2bf; + stroke: hsl(220, 14%, 71%); } .prism-previewer-easing circle { diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index e87dbdc..21f5cab 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -5,33 +5,33 @@ /** * One Light colours in terms of RGB (accurate as of commit eb064bf on 19 Feb 2021) - * -- From colors.less - * @mono-1: #383a42 - * @mono-2: #696c77 - * @mono-3: #a0a1a7 - * @hue-1: #0184bc <- cyan - * @hue-2: #4078f2 <- blue - * @hue-3: #a626a4 <- purple - * @hue-4: #50a14f <- green - * @hue-5: #e45649 <- red 1 - * @hue-5-2: #ca1243 <- red 2 - * @hue-6: #b76b01 <- orange 1 - * @hue-6-2: #cb7701 <- orange 2 - * @syntax-fg: #383a42 - * @syntax-bg: #fafafa - * @syntax-gutter: #9d9d9f - * @syntax-guide: #383a4240 - * @syntax-accent: #526eff - * -- From syntax-variables.less - * @syntax-selection-color: #e5e5e6 - * @syntax-gutter-background-color-selected: #e5e5e6 - * @syntax-cursor-line: #383a420d + * From colors.less + * --mono-1: hsl(230, 8%, 24%); + * --mono-2: hsl(230, 6%, 44%); + * --mono-3: hsl(230, 4%, 64%) + * --hue-1: hsl(198, 99%, 37%); + * --hue-2: hsl(221, 87%, 60%); + * --hue-3: hsl(301, 63%, 40%); + * --hue-4: hsl(119, 34%, 47%); + * --hue-5: hsl(5, 74%, 59%); + * --hue-5-2: hsl(344, 84%, 43%); + * --hue-6: hsl(35, 99%, 36%); + * --hue-6-2: hsl(35, 99%, 40%); + * --syntax-fg: hsl(230, 8%, 24%); + * --syntax-bg: hsl(230, 1%, 98%); + * --syntax-gutter: hsl(230, 1%, 62%); + * --syntax-guide: hsla(230, 8%, 24%, 0.2); + * --syntax-accent: hsl(230, 100%, 66%); + * From syntax-variables.less + * --syntax-selection-color: hsl(230, 1%, 90%); + * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); + * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); */ code[class*="language-"], pre[class*="language-"] { - background: #fafafa; - color: #383a42; + background: hsl(230, 1%, 98%); + color: hsl(230, 8%, 24%); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; @@ -51,13 +51,13 @@ pre[class*="language-"] { /* Selection */ code[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection { - background: #e5e5e6; + background: hsl(230, 1%, 90%); color: inherit; } code[class*="language-"]::selection, pre[class*="language-"] *::selection { - background: #e5e5e6; + background: hsl(230, 1%, 90%); color: inherit; } @@ -79,13 +79,13 @@ pre[class*="language-"] { .token.comment, .token.prolog, .token.cdata { - color: #a0a1a7; + color: hsl(230, 4%, 64%); } .token.doctype, .token.punctuation, .token.entity { - color: #383a42; + color: hsl(230, 8%, 24%); } .token.attr-name, @@ -94,11 +94,11 @@ pre[class*="language-"] { .token.constant, .token.number, .token.atrule { - color: #b76b01; + color: hsl(35, 99%, 36%); } .token.keyword { - color: #a626a4; + color: hsl(301, 63%, 40%); } .token.property, @@ -106,7 +106,7 @@ pre[class*="language-"] { .token.symbol, .token.deleted, .token.important { - color: #e45649; + color: hsl(5, 74%, 59%); } .token.selector, @@ -117,105 +117,105 @@ pre[class*="language-"] { .token.regex, .token.attr-value, .token.attr-value > .token.punctuation { - color: #50a14f; + color: hsl(119, 34%, 47%); } .token.variable, .token.operator, .token.function { - color: #4078f2; + color: hsl(221, 87%, 60%); } .token.url { - color: #0184bc; + color: hsl(198, 99%, 37%); } /* HTML overrides */ .token.attr-value > .token.punctuation.attr-equals, .token.special-attr > .token.attr-value > .token.value.css { - color: #383a42; + color: hsl(230, 8%, 24%); } /* CSS overrides */ .language-css .token.selector { - color: #e45649; + color: hsl(5, 74%, 59%); } .language-css .token.property { - color: #383a42; + color: hsl(230, 8%, 24%); } .language-css .token.function, .language-css .token.url > .token.function { - color: #0184bc; + color: hsl(198, 99%, 37%); } .language-css .token.url > .token.string.url { - color: #50a14f; + color: hsl(119, 34%, 47%); } .language-css .token.important, .language-css .token.atrule .token.rule { - color: #a626a4; + color: hsl(301, 63%, 40%); } /* JS overrides */ .language-javascript .token.operator { - color: #a626a4; + color: hsl(301, 63%, 40%); } .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { - color: #ca1243; + color: hsl(344, 84%, 43%); } /* JSON overrides */ .language-json .token.operator { - color: #383a42; + color: hsl(230, 8%, 24%); } .language-json .token.null.keyword { - color: #b76b01; + color: hsl(35, 99%, 36%); } /* MD overrides */ .language-markdown .token.url, .language-markdown .token.url > .token.operator, .language-markdown .token.url-reference.url > .token.string { - color: #383a42; + color: hsl(230, 8%, 24%); } .language-markdown .token.url > .token.content { - color: #4078f2; + color: hsl(221, 87%, 60%); } .language-markdown .token.url > .token.url, .language-markdown .token.url-reference.url { - color: #0184bc; + color: hsl(198, 99%, 37%); } .language-markdown .token.blockquote.punctuation, .language-markdown .token.hr.punctuation { - color: #a0a1a7; + color: hsl(230, 4%, 64%); font-style: italic; } .language-markdown .token.code-snippet { - color: #50a14f; + color: hsl(119, 34%, 47%); } .language-markdown .token.bold .token.content { - color: #b76b01; + color: hsl(35, 99%, 36%); } .language-markdown .token.italic .token.content { - color: #a626a4; + color: hsl(301, 63%, 40%); } .language-markdown .token.strike .token.content, .language-markdown .token.strike .token.punctuation, .language-markdown .token.list.punctuation, .language-markdown .token.title.important > .token.punctuation { - color: #e45649; + color: hsl(5, 74%, 59%); } /* General */ @@ -241,7 +241,7 @@ pre[class*="language-"] { .token.cr:before, .token.lf:before, .token.space:before { - color: #383a4240; + color: hsla(230, 8%, 24%, 0.2); } /* Toolbar plugin overrides */ @@ -254,8 +254,8 @@ div.code-toolbar > .toolbar > .toolbar-item { div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > span { - background: #e5e5e6; - color: #696c77; + background: hsl(230, 1%, 90%); + color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } @@ -266,20 +266,20 @@ div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus { - background: #c6c7c7; /* custom: darken(@syntax-bg, 20%) */ - color: #383a42; + background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ + color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ .line-highlight { - background: #383a420d; + background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ .line-highlight:before, .line-highlight[data-end]:after { - background: #e5e5e6; - color: #383a42; + background: hsl(230, 1%, 90%); + color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ @@ -287,20 +287,20 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { /* Hovering over a linkable line number (in the gutter area) */ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: #383a420d; + background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ .line-numbers .line-numbers-rows, .command-line-prompt { - border-right-color: #383a4240; + border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ .line-numbers-rows > span:before, .command-line-prompt > span:before { - color: #383a42; /* would prefer @syntax-gutter but it fails WCAG AA */ + color: hsl(230, 8%, 24%); /* would prefer --syntax-gutter but it fails WCAG AA */ } /* Match Braces plugin overrides */ @@ -308,65 +308,65 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { .rainbow-braces .token.punctuation.brace-level-1, .rainbow-braces .token.punctuation.brace-level-5, .rainbow-braces .token.punctuation.brace-level-9 { - color: #e45649; + color: hsl(5, 74%, 59%); } .rainbow-braces .token.punctuation.brace-level-2, .rainbow-braces .token.punctuation.brace-level-6, .rainbow-braces .token.punctuation.brace-level-10 { - color: #50a14f; + color: hsl(119, 34%, 47%); } .rainbow-braces .token.punctuation.brace-level-3, .rainbow-braces .token.punctuation.brace-level-7, .rainbow-braces .token.punctuation.brace-level-11 { - color: #4078f2; + color: hsl(221, 87%, 60%); } .rainbow-braces .token.punctuation.brace-level-4, .rainbow-braces .token.punctuation.brace-level-8, .rainbow-braces .token.punctuation.brace-level-12 { - color: #a626a4; + color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ pre.diff-highlight > code .token.deleted:not(.prefix), pre > code.diff-highlight .token.deleted:not(.prefix) { - background-color: #ff526626; + background-color: hsla(353, 100%, 66%, 0.15); } pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { - background-color: #fb566940; + background-color: hsla(353, 95%, 66%, 0.25); } pre.diff-highlight > code .token.deleted:not(.prefix)::selection, pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, pre > code.diff-highlight .token.deleted:not(.prefix)::selection, pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { - background-color: #fb566940; + background-color: hsla(353, 95%, 66%, 0.25); } pre.diff-highlight > code .token.inserted:not(.prefix), pre > code.diff-highlight .token.inserted:not(.prefix) { - background-color: #1aff5b26; + background-color: hsla(137, 100%, 55%, 0.15); } pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { - background-color: #38e06240; + background-color: hsla(135, 73%, 55%, 0.25); } pre.diff-highlight > code .token.inserted:not(.prefix)::selection, pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, pre > code.diff-highlight .token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { - background-color: #38e06240; + background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ @@ -374,7 +374,7 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Border around popup */ .prism-previewer:before, .prism-previewer-gradient div { - border-color: #f2f2f2; + border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ @@ -386,30 +386,30 @@ pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { /* Triangles pointing to the code */ .prism-previewer:after { - border-top-color: #f2f2f2; + border-top-color: hsl(0, 0, 95%); } .prism-previewer-flipped.after { - border-bottom-color: #f2f2f2; + border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ .prism-previewer-angle:before, .prism-previewer-time:before, .prism-previewer-easing { - background: #fff; + background: hsl(0, 0%, 100%); } .prism-previewer-angle circle, .prism-previewer-time circle { - stroke: #383a42; + stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } .prism-previewer-easing circle, .prism-previewer-easing path, .prism-previewer-easing line { - stroke: #383a42; + stroke: hsl(230, 8%, 24%); } .prism-previewer-easing circle { From e55b3e85c2be23dc5760e2bc4b860dbe621b15cc Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Wed, 15 Sep 2021 00:46:34 +0800 Subject: [PATCH 21/23] Change gutter text colour --- themes/prism-one-dark.css | 2 +- themes/prism-one-light.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 217167c..0015cab 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -312,7 +312,7 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { /* Stuff in the gutter */ .line-numbers-rows > span:before, .command-line-prompt > span:before { - color: hsl(220, 14%, 71%); /* would prefer --syntax-gutter but it fails WCAG AA */ + color: hsl(220, 14%, 45%); } /* Match Braces plugin overrides */ diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 21f5cab..4c27fe2 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -300,7 +300,7 @@ pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { /* Stuff in the gutter */ .line-numbers-rows > span:before, .command-line-prompt > span:before { - color: hsl(230, 8%, 24%); /* would prefer --syntax-gutter but it fails WCAG AA */ + color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ From d5925985d74a85f3abba6ccae9ac64e51a59f6e2 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Wed, 15 Sep 2021 00:56:43 +0800 Subject: [PATCH 22/23] Increase selector specificity for plugin overrides --- themes/prism-one-dark.css | 149 ++++++++++++++++++++----------------- themes/prism-one-light.css | 147 +++++++++++++++++++----------------- 2 files changed, 157 insertions(+), 139 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index 0015cab..cc5ea7b 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -51,6 +51,7 @@ pre[class*="language-"] { /* Selection */ code[class*="language-"]::-moz-selection, +code[class*="language-"] *::-moz-selection, pre[class*="language-"] *::-moz-selection { background: hsl(220, 13%, 28%); color: inherit; @@ -58,6 +59,7 @@ pre[class*="language-"] *::-moz-selection { } code[class*="language-"]::selection, +code[class*="language-"] *::selection, pre[class*="language-"] *::selection { background: hsl(220, 13%, 28%); color: inherit; @@ -247,11 +249,14 @@ pre[class*="language-"] { opacity: 0.8; } +/* Plugin overrides */ +/* Selectors should have higher specificity than those in the plugins' default stylesheets if overriding is required */ + /* Show Invisibles plugin overrides */ -.token.tab:not(:empty):before, -.token.cr:before, -.token.lf:before, -.token.space:before { +code[class*="language-"] .token.tab:not(:empty):before, +code[class*="language-"] .token.cr:before, +code[class*="language-"] .token.lf:before, +code[class*="language-"] .token.space:before { color: hsla(220, 14%, 71%, 0.15); text-shadow: none; } @@ -263,33 +268,34 @@ div.code-toolbar > .toolbar > .toolbar-item { } /* Styling the buttons */ -div.code-toolbar > .toolbar > .toolbar-item > button, -div.code-toolbar > .toolbar > .toolbar-item > a, -div.code-toolbar > .toolbar > .toolbar-item > span { +div.code-toolbar > div.toolbar > .toolbar-item > button, +div.code-toolbar > div.toolbar > .toolbar-item > a, +div.code-toolbar > div.toolbar > .toolbar-item > span { background: hsl(220, 13%, 26%); color: hsl(220, 9%, 55%); padding: 0.1em 0.4em; border-radius: 0.3em; } -div.code-toolbar > .toolbar > .toolbar-item > button:hover, -div.code-toolbar > .toolbar > .toolbar-item > button:focus, -div.code-toolbar > .toolbar > .toolbar-item > a:hover, -div.code-toolbar > .toolbar > .toolbar-item > a:focus, -div.code-toolbar > .toolbar > .toolbar-item > span:hover, -div.code-toolbar > .toolbar > .toolbar-item > span:focus { +div.code-toolbar > div.toolbar > .toolbar-item > button:hover, +div.code-toolbar > div.toolbar > .toolbar-item > button:focus, +div.code-toolbar > div.toolbar > .toolbar-item > a:hover, +div.code-toolbar > div.toolbar > .toolbar-item > a:focus, +div.code-toolbar > div.toolbar > .toolbar-item > span:hover, +div.code-toolbar > div.toolbar > .toolbar-item > span:focus { background: hsl(220, 13%, 28%); color: hsl(220, 14%, 71%); } /* Line Highlight plugin overrides */ -.line-highlight { +/* The highlighted line itself */ +div.line-highlight { background: hsla(220, 100%, 80%, 0.04); } /* Default line numbers in Line Highlight plugin */ -.line-highlight:before, -.line-highlight[data-end]:after { +div.line-highlight:before, +div.line-highlight[data-end]:after { background: hsl(220, 13%, 26%); color: hsl(220, 14%, 71%); padding: 0.1em 0.6em; @@ -298,132 +304,137 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { } /* Hovering over a linkable line number (in the gutter area) */ -pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { +/* Requires Line Numbers plugin as well */ +pre[id].linkable-line-numbers > code span.line-numbers-rows > span:hover:before { background-color: hsla(220, 100%, 80%, 0.04); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ -.line-numbers .line-numbers-rows, -.command-line-prompt { +.line-numbers span.line-numbers-rows, +pre.command-line .command-line-prompt { border-right-color: hsla(220, 14%, 71%, 0.15); } /* Stuff in the gutter */ -.line-numbers-rows > span:before, -.command-line-prompt > span:before { +.line-numbers span.line-numbers-rows > span:before, +pre.command-line .command-line-prompt > span:before { color: hsl(220, 14%, 45%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.punctuation.brace-level-1, -.rainbow-braces .token.punctuation.brace-level-5, -.rainbow-braces .token.punctuation.brace-level-9 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-1, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-5, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-9 { color: hsl(355, 65%, 65%); } -.rainbow-braces .token.punctuation.brace-level-2, -.rainbow-braces .token.punctuation.brace-level-6, -.rainbow-braces .token.punctuation.brace-level-10 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-2, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-6, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-10 { color: hsl(95, 38%, 62%); } -.rainbow-braces .token.punctuation.brace-level-3, -.rainbow-braces .token.punctuation.brace-level-7, -.rainbow-braces .token.punctuation.brace-level-11 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-3, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-7, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-11 { color: hsl(207, 82%, 66%); } -.rainbow-braces .token.punctuation.brace-level-4, -.rainbow-braces .token.punctuation.brace-level-8, -.rainbow-braces .token.punctuation.brace-level-12 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-4, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-8, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-12 { color: hsl(286, 60%, 67%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre.diff-highlight > code .token.deleted:not(.prefix), -pre > code.diff-highlight .token.deleted:not(.prefix) { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix), +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } -pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre.diff-highlight > code .token.deleted:not(.prefix)::selection, -pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::selection, +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre.diff-highlight > code .token.inserted:not(.prefix), -pre > code.diff-highlight .token.inserted:not(.prefix) { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix), +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } -pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } -pre.diff-highlight > code .token.inserted:not(.prefix)::selection, -pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::selection, +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ /* Border around popup */ -.prism-previewer:before, -.prism-previewer-gradient div { +div.prism-previewer:before, +div.prism-previewer-gradient div { border-color: hsl(224, 13%, 17%); } /* Angle and time should remain as circles and are hence not included */ -.prism-previewer-color:before, -.prism-previewer-gradient div, -.prism-previewer-easing:before { +div.prism-previewer-color:before, +div.prism-previewer-gradient div, +div.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ -.prism-previewer:after { +div.prism-previewer:after { border-top-color: hsl(224, 13%, 17%); } -.prism-previewer-flipped.after { +div.prism-previewer-flipped.after { border-bottom-color: hsl(224, 13%, 17%); } /* Background colour within the popup */ -.prism-previewer-angle:before, -.prism-previewer-time:before, -.prism-previewer-easing { +div.prism-previewer-angle:before, +div.prism-previewer-time:before, +div.prism-previewer-easing { background: hsl(219, 13%, 22%); } -.prism-previewer-angle circle, -.prism-previewer-time circle { +/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ +/* For time, this is the alternate colour */ +div.prism-previewer-angle circle, +div.prism-previewer-time circle { stroke: hsl(220, 14%, 71%); stroke-opacity: 1; } -.prism-previewer-easing circle, -.prism-previewer-easing path, -.prism-previewer-easing line { +/* Stroke colours of the handle, direction point, and vector itself */ +div.prism-previewer-easing circle, +div.prism-previewer-easing path, +div.prism-previewer-easing line { stroke: hsl(220, 14%, 71%); } -.prism-previewer-easing circle { +/* Fill colour of the handle */ +div.prism-previewer-easing circle { fill: transparent; } diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 4c27fe2..266489b 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -4,7 +4,7 @@ */ /** - * One Light colours in terms of RGB (accurate as of commit eb064bf on 19 Feb 2021) + * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) * From colors.less * --mono-1: hsl(230, 8%, 24%); * --mono-2: hsl(230, 6%, 44%); @@ -50,12 +50,14 @@ pre[class*="language-"] { /* Selection */ code[class*="language-"]::-moz-selection, +code[class*="language-"] *::-moz-selection, pre[class*="language-"] *::-moz-selection { background: hsl(230, 1%, 90%); color: inherit; } code[class*="language-"]::selection, +code[class*="language-"] *::selection, pre[class*="language-"] *::selection { background: hsl(230, 1%, 90%); color: inherit; @@ -236,11 +238,14 @@ pre[class*="language-"] { opacity: 0.8; } +/* Plugin overrides */ +/* Selectors should have higher specificity than those in the plugins' default stylesheets if overriding is required */ + /* Show Invisibles plugin overrides */ -.token.tab:not(:empty):before, -.token.cr:before, -.token.lf:before, -.token.space:before { +code[class*="language-"] .token.tab:not(:empty):before, +code[class*="language-"] .token.cr:before, +code[class*="language-"] .token.lf:before, +code[class*="language-"] .token.space:before { color: hsla(230, 8%, 24%, 0.2); } @@ -251,33 +256,34 @@ div.code-toolbar > .toolbar > .toolbar-item { } /* Styling the buttons */ -div.code-toolbar > .toolbar > .toolbar-item > button, -div.code-toolbar > .toolbar > .toolbar-item > a, -div.code-toolbar > .toolbar > .toolbar-item > span { +div.code-toolbar > div.toolbar > .toolbar-item > button, +div.code-toolbar > div.toolbar > .toolbar-item > a, +div.code-toolbar > div.toolbar > .toolbar-item > span { background: hsl(230, 1%, 90%); color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } -div.code-toolbar > .toolbar > .toolbar-item > button:hover, -div.code-toolbar > .toolbar > .toolbar-item > button:focus, -div.code-toolbar > .toolbar > .toolbar-item > a:hover, -div.code-toolbar > .toolbar > .toolbar-item > a:focus, -div.code-toolbar > .toolbar > .toolbar-item > span:hover, -div.code-toolbar > .toolbar > .toolbar-item > span:focus { +div.code-toolbar > div.toolbar > .toolbar-item > button:hover, +div.code-toolbar > div.toolbar > .toolbar-item > button:focus, +div.code-toolbar > div.toolbar > .toolbar-item > a:hover, +div.code-toolbar > div.toolbar > .toolbar-item > a:focus, +div.code-toolbar > div.toolbar > .toolbar-item > span:hover, +div.code-toolbar > div.toolbar > .toolbar-item > span:focus { background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ -.line-highlight { +/* The highlighted line itself */ +div.line-highlight { background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ -.line-highlight:before, -.line-highlight[data-end]:after { +div.line-highlight:before, +div.line-highlight[data-end]:after { background: hsl(230, 1%, 90%); color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; @@ -286,132 +292,133 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { } /* Hovering over a linkable line number (in the gutter area) */ -pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { +/* Requires Line Numbers plugin as well */ +pre[id].linkable-line-numbers > code span.line-numbers-rows > span:hover:before { background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ -.line-numbers .line-numbers-rows, -.command-line-prompt { +.line-numbers span.line-numbers-rows, +pre.command-line .command-line-prompt { border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ -.line-numbers-rows > span:before, -.command-line-prompt > span:before { +.line-numbers span.line-numbers-rows > span:before, +pre.command-line .command-line-prompt > span:before { color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.punctuation.brace-level-1, -.rainbow-braces .token.punctuation.brace-level-5, -.rainbow-braces .token.punctuation.brace-level-9 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-1, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-5, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-9 { color: hsl(5, 74%, 59%); } -.rainbow-braces .token.punctuation.brace-level-2, -.rainbow-braces .token.punctuation.brace-level-6, -.rainbow-braces .token.punctuation.brace-level-10 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-2, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-6, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-10 { color: hsl(119, 34%, 47%); } -.rainbow-braces .token.punctuation.brace-level-3, -.rainbow-braces .token.punctuation.brace-level-7, -.rainbow-braces .token.punctuation.brace-level-11 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-3, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-7, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-11 { color: hsl(221, 87%, 60%); } -.rainbow-braces .token.punctuation.brace-level-4, -.rainbow-braces .token.punctuation.brace-level-8, -.rainbow-braces .token.punctuation.brace-level-12 { +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-4, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-8, +.rainbow-braces .token.punctuation[class*="brace-"].brace-level-12 { color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre.diff-highlight > code .token.deleted:not(.prefix), -pre > code.diff-highlight .token.deleted:not(.prefix) { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix), +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } -pre.diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::-moz-selection { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre.diff-highlight > code .token.deleted:not(.prefix)::selection, -pre.diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.deleted:not(.prefix)::selection, -pre > code.diff-highlight .token.deleted:not(.prefix) *::selection { +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::selection, +pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::selection, +pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre.diff-highlight > code .token.inserted:not(.prefix), -pre > code.diff-highlight .token.inserted:not(.prefix) { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix), +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } -pre.diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::-moz-selection { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::-moz-selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } -pre.diff-highlight > code .token.inserted:not(.prefix)::selection, -pre.diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.inserted:not(.prefix)::selection, -pre > code.diff-highlight .token.inserted:not(.prefix) *::selection { +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::selection, +pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::selection, +pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ /* Border around popup */ -.prism-previewer:before, -.prism-previewer-gradient div { +div.prism-previewer:before, +div.prism-previewer-gradient div { border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ -.prism-previewer-color:before, -.prism-previewer-gradient div, -.prism-previewer-easing:before { +div.prism-previewer-color:before, +div.prism-previewer-gradient div, +div.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ -.prism-previewer:after { +div.prism-previewer:after { border-top-color: hsl(0, 0, 95%); } -.prism-previewer-flipped.after { +div.prism-previewer-flipped.after { border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ -.prism-previewer-angle:before, -.prism-previewer-time:before, -.prism-previewer-easing { +div.prism-previewer-angle:before, +div.prism-previewer-time:before, +div.prism-previewer-easing { background: hsl(0, 0%, 100%); } -.prism-previewer-angle circle, -.prism-previewer-time circle { +div.prism-previewer-angle circle, +div.prism-previewer-time circle { stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } -.prism-previewer-easing circle, -.prism-previewer-easing path, -.prism-previewer-easing line { +div.prism-previewer-easing circle, +div.prism-previewer-easing path, +div.prism-previewer-easing line { stroke: hsl(230, 8%, 24%); } -.prism-previewer-easing circle { +div.prism-previewer-easing circle { fill: transparent; } From fa3b286e6c8f973182a501c7d64c2302f89ce53b Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Wed, 15 Sep 2021 02:15:31 +0800 Subject: [PATCH 23/23] Change strategy for increasing selector specificity --- themes/prism-one-dark.css | 142 ++++++++++++++++++------------------ themes/prism-one-light.css | 146 +++++++++++++++++++------------------ 2 files changed, 146 insertions(+), 142 deletions(-) diff --git a/themes/prism-one-dark.css b/themes/prism-one-dark.css index cc5ea7b..51944e8 100644 --- a/themes/prism-one-dark.css +++ b/themes/prism-one-dark.css @@ -250,52 +250,52 @@ pre[class*="language-"] { } /* Plugin overrides */ -/* Selectors should have higher specificity than those in the plugins' default stylesheets if overriding is required */ +/* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ -code[class*="language-"] .token.tab:not(:empty):before, -code[class*="language-"] .token.cr:before, -code[class*="language-"] .token.lf:before, -code[class*="language-"] .token.space:before { +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { color: hsla(220, 14%, 71%, 0.15); text-shadow: none; } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ -div.code-toolbar > .toolbar > .toolbar-item { +div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ -div.code-toolbar > div.toolbar > .toolbar-item > button, -div.code-toolbar > div.toolbar > .toolbar-item > a, -div.code-toolbar > div.toolbar > .toolbar-item > span { +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(220, 13%, 26%); color: hsl(220, 9%, 55%); padding: 0.1em 0.4em; border-radius: 0.3em; } -div.code-toolbar > div.toolbar > .toolbar-item > button:hover, -div.code-toolbar > div.toolbar > .toolbar-item > button:focus, -div.code-toolbar > div.toolbar > .toolbar-item > a:hover, -div.code-toolbar > div.toolbar > .toolbar-item > a:focus, -div.code-toolbar > div.toolbar > .toolbar-item > span:hover, -div.code-toolbar > div.toolbar > .toolbar-item > span:focus { +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(220, 13%, 28%); color: hsl(220, 14%, 71%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ -div.line-highlight { +.line-highlight.line-highlight { background: hsla(220, 100%, 80%, 0.04); } /* Default line numbers in Line Highlight plugin */ -div.line-highlight:before, -div.line-highlight[data-end]:after { +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { background: hsl(220, 13%, 26%); color: hsl(220, 14%, 71%); padding: 0.1em 0.6em; @@ -305,136 +305,136 @@ div.line-highlight[data-end]:after { /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ -pre[id].linkable-line-numbers > code span.line-numbers-rows > span:hover:before { +pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(220, 100%, 80%, 0.04); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ -.line-numbers span.line-numbers-rows, -pre.command-line .command-line-prompt { +.line-numbers.line-numbers .line-numbers-rows, +.command-line .command-line-prompt { border-right-color: hsla(220, 14%, 71%, 0.15); } /* Stuff in the gutter */ -.line-numbers span.line-numbers-rows > span:before, -pre.command-line .command-line-prompt > span:before { +.line-numbers .line-numbers-rows > span:before, +.command-line .command-line-prompt > span:before { color: hsl(220, 14%, 45%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-1, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-5, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-9 { +.rainbow-braces .token.token.punctuation.brace-level-1, +.rainbow-braces .token.token.punctuation.brace-level-5, +.rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(355, 65%, 65%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-2, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-6, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-10 { +.rainbow-braces .token.token.punctuation.brace-level-2, +.rainbow-braces .token.token.punctuation.brace-level-6, +.rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(95, 38%, 62%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-3, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-7, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-11 { +.rainbow-braces .token.token.punctuation.brace-level-3, +.rainbow-braces .token.token.punctuation.brace-level-7, +.rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(207, 82%, 66%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-4, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-8, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-12 { +.rainbow-braces .token.token.punctuation.brace-level-4, +.rainbow-braces .token.token.punctuation.brace-level-8, +.rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(286, 60%, 67%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix), -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) { +pre.diff-highlight > code .token.token.deleted:not(.prefix), +pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::-moz-selection { +pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::selection, -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::selection { +pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix), -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) { +pre.diff-highlight > code .token.token.inserted:not(.prefix), +pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::-moz-selection { +pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::selection, -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::selection { +pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ /* Border around popup */ -div.prism-previewer:before, -div.prism-previewer-gradient div { +.prism-previewer.prism-previewer:before, +.prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(224, 13%, 17%); } /* Angle and time should remain as circles and are hence not included */ -div.prism-previewer-color:before, -div.prism-previewer-gradient div, -div.prism-previewer-easing:before { +.prism-previewer-color.prism-previewer-color:before, +.prism-previewer-gradient.prism-previewer-gradient div, +.prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ -div.prism-previewer:after { +.prism-previewer.prism-previewer:after { border-top-color: hsl(224, 13%, 17%); } -div.prism-previewer-flipped.after { +.prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(224, 13%, 17%); } /* Background colour within the popup */ -div.prism-previewer-angle:before, -div.prism-previewer-time:before, -div.prism-previewer-easing { +.prism-previewer-angle.prism-previewer-angle:before, +.prism-previewer-time.prism-previewer-time:before, +.prism-previewer-easing.prism-previewer-easing { background: hsl(219, 13%, 22%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ -div.prism-previewer-angle circle, -div.prism-previewer-time circle { +.prism-previewer-angle.prism-previewer-angle circle, +.prism-previewer-time.prism-previewer-time circle { stroke: hsl(220, 14%, 71%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ -div.prism-previewer-easing circle, -div.prism-previewer-easing path, -div.prism-previewer-easing line { +.prism-previewer-easing.prism-previewer-easing circle, +.prism-previewer-easing.prism-previewer-easing path, +.prism-previewer-easing.prism-previewer-easing line { stroke: hsl(220, 14%, 71%); } /* Fill colour of the handle */ -div.prism-previewer-easing circle { +.prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } diff --git a/themes/prism-one-light.css b/themes/prism-one-light.css index 266489b..b99b0e3 100644 --- a/themes/prism-one-light.css +++ b/themes/prism-one-light.css @@ -239,51 +239,51 @@ pre[class*="language-"] { } /* Plugin overrides */ -/* Selectors should have higher specificity than those in the plugins' default stylesheets if overriding is required */ +/* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ -code[class*="language-"] .token.tab:not(:empty):before, -code[class*="language-"] .token.cr:before, -code[class*="language-"] .token.lf:before, -code[class*="language-"] .token.space:before { +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { color: hsla(230, 8%, 24%, 0.2); } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ -div.code-toolbar > .toolbar > .toolbar-item { +div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ -div.code-toolbar > div.toolbar > .toolbar-item > button, -div.code-toolbar > div.toolbar > .toolbar-item > a, -div.code-toolbar > div.toolbar > .toolbar-item > span { +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(230, 1%, 90%); color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } -div.code-toolbar > div.toolbar > .toolbar-item > button:hover, -div.code-toolbar > div.toolbar > .toolbar-item > button:focus, -div.code-toolbar > div.toolbar > .toolbar-item > a:hover, -div.code-toolbar > div.toolbar > .toolbar-item > a:focus, -div.code-toolbar > div.toolbar > .toolbar-item > span:hover, -div.code-toolbar > div.toolbar > .toolbar-item > span:focus { +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ -div.line-highlight { +.line-highlight.line-highlight { background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ -div.line-highlight:before, -div.line-highlight[data-end]:after { +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { background: hsl(230, 1%, 90%); color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; @@ -293,132 +293,136 @@ div.line-highlight[data-end]:after { /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ -pre[id].linkable-line-numbers > code span.line-numbers-rows > span:hover:before { +pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ -.line-numbers span.line-numbers-rows, -pre.command-line .command-line-prompt { +.line-numbers.line-numbers .line-numbers-rows, +.command-line .command-line-prompt { border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ -.line-numbers span.line-numbers-rows > span:before, -pre.command-line .command-line-prompt > span:before { +.line-numbers .line-numbers-rows > span:before, +.command-line .command-line-prompt > span:before { color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-1, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-5, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-9 { +.rainbow-braces .token.token.punctuation.brace-level-1, +.rainbow-braces .token.token.punctuation.brace-level-5, +.rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(5, 74%, 59%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-2, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-6, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-10 { +.rainbow-braces .token.token.punctuation.brace-level-2, +.rainbow-braces .token.token.punctuation.brace-level-6, +.rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(119, 34%, 47%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-3, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-7, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-11 { +.rainbow-braces .token.token.punctuation.brace-level-3, +.rainbow-braces .token.token.punctuation.brace-level-7, +.rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(221, 87%, 60%); } -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-4, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-8, -.rainbow-braces .token.punctuation[class*="brace-"].brace-level-12 { +.rainbow-braces .token.token.punctuation.brace-level-4, +.rainbow-braces .token.token.punctuation.brace-level-8, +.rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix), -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) { +pre.diff-highlight > code .token.token.deleted:not(.prefix), +pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::-moz-selection, -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::-moz-selection { +pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix)::selection, -pre[class*="language-diff"].diff-highlight > code .token.deleted:not(.prefix) *::selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix)::selection, -pre > code[class*="language-diff"].diff-highlight .token.deleted:not(.prefix) *::selection { +pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix), -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) { +pre.diff-highlight > code .token.token.inserted:not(.prefix), +pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::-moz-selection, -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::-moz-selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::-moz-selection { +pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix)::selection, -pre[class*="language-diff"].diff-highlight > code .token.inserted:not(.prefix) *::selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix)::selection, -pre > code[class*="language-diff"].diff-highlight .token.inserted:not(.prefix) *::selection { +pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ /* Border around popup */ -div.prism-previewer:before, -div.prism-previewer-gradient div { +.prism-previewer.prism-previewer:before, +.prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ -div.prism-previewer-color:before, -div.prism-previewer-gradient div, -div.prism-previewer-easing:before { +.prism-previewer-color.prism-previewer-color:before, +.prism-previewer-gradient.prism-previewer-gradient div, +.prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ -div.prism-previewer:after { +.prism-previewer.prism-previewer:after { border-top-color: hsl(0, 0, 95%); } -div.prism-previewer-flipped.after { +.prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ -div.prism-previewer-angle:before, -div.prism-previewer-time:before, -div.prism-previewer-easing { +.prism-previewer-angle.prism-previewer-angle:before, +.prism-previewer-time.prism-previewer-time:before, +.prism-previewer-easing.prism-previewer-easing { background: hsl(0, 0%, 100%); } -div.prism-previewer-angle circle, -div.prism-previewer-time circle { +/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ +/* For time, this is the alternate colour */ +.prism-previewer-angle.prism-previewer-angle circle, +.prism-previewer-time.prism-previewer-time circle { stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } -div.prism-previewer-easing circle, -div.prism-previewer-easing path, -div.prism-previewer-easing line { +/* Stroke colours of the handle, direction point, and vector itself */ +.prism-previewer-easing.prism-previewer-easing circle, +.prism-previewer-easing.prism-previewer-easing path, +.prism-previewer-easing.prism-previewer-easing line { stroke: hsl(230, 8%, 24%); } -div.prism-previewer-easing circle { +/* Fill colour of the handle */ +.prism-previewer-easing.prism-previewer-easing circle { fill: transparent; }