1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-25 16:22:43 +01:00

Improve remarkup codeblock syntax highlighting when using Dark Mode

Summary:
PhabricatorDefaultSyntaxStyle works now with 'CSS-color-aliases' instead of fixed colors.

The aliases are translated in the corresponding themes CelerityPostprocessor.

| Before    | After     |
|-----------|-----------|
| {F709419} | {F709421} |

Ref T15056

Test Plan:
1) bin/celerity syntax
2) bin/celerity map
3) bin/cache purge --all
4) sign in
5) go to user's Settings > Display Preferences and select the Accessibility (user interface) "Dark Mode".
6) go to Phriction or Maniphest and add a codeblock.

Example:

``` lang=php
<?php
final class Example extends PhabricatorApplication {
}
```

7) verify that codeblock content is readable
8) also check that with/without this, nothing changes in "normal" theme

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15056

Differential Revision: https://we.phorge.it/D25509
This commit is contained in:
Merula Turdus 2024-01-09 22:44:56 +01:00
parent bf15a2d98c
commit 892f527b9f
5 changed files with 350 additions and 130 deletions

View file

@ -10,6 +10,7 @@ return array(
'conpherence.pkg.css' => '2f25eb4f', 'conpherence.pkg.css' => '2f25eb4f',
'conpherence.pkg.js' => '020aebcf', 'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => '7f47b2ac', 'core.pkg.css' => '7f47b2ac',
'core.pkg.css' => '41cc201d',
'core.pkg.js' => '2eeda9e0', 'core.pkg.js' => '2eeda9e0',
'dark-console.pkg.js' => '187792c2', 'dark-console.pkg.js' => '187792c2',
'differential.pkg.css' => '6d3700f0', 'differential.pkg.css' => '6d3700f0',
@ -186,7 +187,7 @@ return array(
'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022', 'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022',
'rsrc/css/sprite-login.css' => '07052ee0', 'rsrc/css/sprite-login.css' => '07052ee0',
'rsrc/css/sprite-tokens.css' => 'f1896dc5', 'rsrc/css/sprite-tokens.css' => 'f1896dc5',
'rsrc/css/syntax/syntax-default.css' => '055fc231', 'rsrc/css/syntax/syntax-default.css' => 'c0307dc6',
'rsrc/externals/d3/d3.min.js' => '9d068042', 'rsrc/externals/d3/d3.min.js' => '9d068042',
'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '23f8c698', 'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '23f8c698',
'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => '70983df0', 'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => '70983df0',
@ -907,7 +908,7 @@ return array(
'setup-issue-css' => '93231115', 'setup-issue-css' => '93231115',
'sprite-login-css' => '07052ee0', 'sprite-login-css' => '07052ee0',
'sprite-tokens-css' => 'f1896dc5', 'sprite-tokens-css' => 'f1896dc5',
'syntax-default-css' => '055fc231', 'syntax-default-css' => 'c0307dc6',
'syntax-highlighting-css' => '548567f6', 'syntax-highlighting-css' => '548567f6',
'tokens-css' => 'ce5a50bd', 'tokens-css' => 'ce5a50bd',
'trigger-rule' => '41b7b4f6', 'trigger-rule' => '41b7b4f6',

View file

@ -218,6 +218,67 @@ final class CelerityDarkModePostprocessor
'grey.button.gradient' => 'linear-gradient(to bottom, #223246, #223246)', 'grey.button.gradient' => 'linear-gradient(to bottom, #223246, #223246)',
'grey.button.hover' => 'linear-gradient(to bottom, #1c293b, #1c293b)', 'grey.button.hover' => 'linear-gradient(to bottom, #1c293b, #1c293b)',
// Codeblock syntax highlighting
'syntax.highlighted-line' => '#fa8',
'syntax.comment' => '#6d6',
'syntax.comment-multiline' => '#6d6',
'syntax.comment-single' => '#6d6',
'syntax.comment-special' => '#6d6',
'syntax.string-doc' => '#fff',
'syntax.string-heredoc' => '#fff',
'syntax.string' => '#f88',
'syntax.string-backtick' => '#f88',
'syntax.literal-string-char' => '#f88',
'syntax.string-double' => '#f88',
'syntax.string-single' => '#f88',
'syntax.string-other' => '#f88',
'syntax.string-regex' => '#f88',
'syntax.name-variable' => '#8ff',
'syntax.variable-instance' => '#8ff',
'syntax.variable-global' => '#8ff',
'syntax.name-attribute' => '#4cf',
'syntax.keyword-constant' => '#0cf',
'syntax.name-operator' => '#0cf',
'syntax.keyword' => '#e8e',
'syntax.keyword-declaration' => '#e8e',
'syntax.keyword-namespace' => '#e8e',
'syntax.keyword-type' => '#e8e',
'syntax.comment-preproc' => '#08f',
'syntax.keyword-preproc' => '#08f',
'syntax.keyword-reserved' => '#08f',
'syntax.name-builtin' => '#08f',
'syntax.builtin-pseudo' => '#08f',
'syntax.name-class' => '#4ff',
'syntax.name-tag' => '#dc0',
'syntax.name-variable-class' => '#4ff',
'syntax.name-function' => '#8af',
'syntax.name-exception' => '#ed8',
'syntax.operator' => '#aaa',
'syntax.punctuation' => '#aaa',
'syntax.literal-string-symbol' => '#aaa',
'syntax.literal-number' => '#fa4',
'syntax.literal-number-float' => '#fa4',
'syntax.literal-number-hex' => '#fa4',
'syntax.literal-number-integer' => '#fa4',
'syntax.literal-number-octal' => '#fa4',
'syntax.literal-number-integer-long' => '#fa4',
'syntax.generic-deleted' => '#f55',
'syntax.generic-red' => '#f52',
'syntax.generic-heading' => '#fff',
'syntax.generic-inserted' => '#4f4',
'syntax.generic-output' => '#ccc',
'syntax.generic-prompt' => '#fff',
'syntax.generic-underline' => '#f4f',
'syntax.generic-traceback' => '#07f',
'syntax.name-decorator' => '#c7f',
'syntax.name-identifier' => '#92969d',
'syntax.name-entity' => '#f44',
'syntax.name-label' => '#aa0',
'syntax.name-namespace' => '#48f',
'syntax.operator-word' => '#c7f',
'syntax.text-whitespace' => '#bbb',
'syntax.literal-string-escape' => '#d84',
'syntax.literal-string-interpol' => '#b6b',
); );
} }

View file

@ -247,6 +247,67 @@ final class CelerityDefaultPostprocessor
'delete-color' => '#c0392b', 'delete-color' => '#c0392b',
'create-color' => '#139543', 'create-color' => '#139543',
// Codeblock syntax highlighting
'syntax.highlighted-line' => '#ffffcc',
'syntax.comment' => '#74777d',
'syntax.comment-multiline' => '#74777d',
'syntax.comment-single' => '#74777d',
'syntax.comment-special' => '#74777d',
'syntax.string-doc' => '#000000',
'syntax.string-heredoc' => '#000000',
'syntax.string' => '#766510',
'syntax.string-backtick' => '#766510',
'syntax.literal-string-char' => '#766510',
'syntax.string-double' => '#766510',
'syntax.string-single' => '#766510',
'syntax.string-other' => '#766510',
'syntax.string-regex' => '#bb6688',
'syntax.name-variable' => '#001294',
'syntax.variable-instance' => '#001294',
'syntax.variable-global' => '#001294',
'syntax.name-attribute' => '#354bb3',
'syntax.keyword-constant' => '#000a65',
'syntax.name-operator' => '#000a65',
'syntax.keyword' => '#aa4000',
'syntax.keyword-declaration' => '#aa4000',
'syntax.keyword-namespace' => '#aa4000',
'syntax.keyword-type' => '#aa4000',
'syntax.comment-preproc' => '#304a96',
'syntax.keyword-preproc' => '#304a96',
'syntax.keyword-reserved' => '#304a96',
'syntax.name-builtin' => '#304a96',
'syntax.builtin-pseudo' => '#304a96',
'syntax.name-class' => '#00702a',
'syntax.name-tag' => '#00702a',
'syntax.name-variable-class' => '#00702a',
'syntax.name-function' => '#004012',
'syntax.name-exception' => '#004012',
'syntax.operator' => '#aa2211',
'syntax.punctuation' => '#000000',
'syntax.literal-string-symbol' => '#aa2211',
'syntax.literal-number' => '#601200',
'syntax.literal-number-float' => '#601200',
'syntax.literal-number-hex' => '#601200',
'syntax.literal-number-integer' => '#601200',
'syntax.literal-number-octal' => '#601200',
'syntax.literal-number-integer-long' => '#601200',
'syntax.generic-deleted' => '#a00000',
'syntax.generic-red' => '#ff0000',
'syntax.generic-heading' => '#000080',
'syntax.generic-inserted' => '#00a000',
'syntax.generic-output' => '#808080',
'syntax.generic-prompt' => '#000080',
'syntax.generic-underline' => '#800080',
'syntax.generic-traceback' => '#0040d0',
'syntax.name-decorator' => '#aa22ff',
'syntax.name-identifier' => '#92969d',
'syntax.name-entity' => '#d2413a',
'syntax.name-label' => '#a0a000',
'syntax.name-namespace' => '#0000ff',
'syntax.operator-word' => '#aa22ff',
'syntax.text-whitespace' => '#bbbbbb',
'syntax.literal-string-escape' => '#bb6622',
'syntax.literal-string-interpol' => '#bb66bb',
); );
} }

View file

@ -11,65 +11,67 @@ final class PhabricatorDefaultSyntaxStyle
public function getStyleMap() { public function getStyleMap() {
return array( return array(
'hll' => 'color: #ffffcc', 'hll' => 'color: {$syntax.highlighted-line}',
'c' => 'color: #74777d', 'c' => 'color: {$syntax.comment}',
'cm' => 'color: #74777d', 'cm' => 'color: {$syntax.comment-multiline}',
'c1' => 'color: #74777d', 'dc' => 'color: {$syntax.comment-multiline}',
'cs' => 'color: #74777d', 'c1' => 'color: {$syntax.comment-single}',
'sd' => 'color: #000000', 'cs' => 'color: {$syntax.comment-special}',
'sh' => 'color: #000000', 'sd' => 'color: {$syntax.string-doc}',
's' => 'color: #766510', 'sh' => 'color: {$syntax.string-heredoc}',
'sb' => 'color: #766510', 's' => 'color: {$syntax.string}',
'sc' => 'color: #766510', 'sb' => 'color: {$syntax.string-backtick}',
's2' => 'color: #766510', 'sc' => 'color: {$syntax.literal-string-char}',
's1' => 'color: #766510', 's2' => 'color: {$syntax.string-double}',
'sx' => 'color: #766510', 's1' => 'color: {$syntax.string-single}',
'sr' => 'color: #bb6688', 'sx' => 'color: {$syntax.string-other}',
'nv' => 'color: #001294', 'sr' => 'color: {$syntax.string-regex}',
'vi' => 'color: #001294', 'nv' => 'color: {$syntax.name-variable}',
'vg' => 'color: #001294', 'vi' => 'color: {$syntax.variable-instance}',
'na' => 'color: #354bb3', 'vg' => 'color: {$syntax.variable-global}',
'kc' => 'color: #000a65', 'na' => 'color: {$syntax.name-attribute}',
'no' => 'color: #000a65', 'kc' => 'color: {$syntax.keyword-constant}',
'k' => 'color: #aa4000', 'no' => 'color: {$syntax.name-operator}',
'kd' => 'color: #aa4000', 'k' => 'color: {$syntax.keyword}',
'kn' => 'color: #aa4000', 'kd' => 'color: {$syntax.keyword-declaration}',
'kt' => 'color: #aa4000', 'kn' => 'color: {$syntax.keyword-namespace}',
'cp' => 'color: #304a96', 'kt' => 'color: {$syntax.keyword-type}',
'kp' => 'color: #304a96', 'cp' => 'color: {$syntax.comment-preproc}',
'kr' => 'color: #304a96', 'kp' => 'color: {$syntax.keyword-preproc}',
'nb' => 'color: #304a96', 'kr' => 'color: {$syntax.keyword-reserved}',
'bp' => 'color: #304a96', 'nb' => 'color: {$syntax.name-builtin}',
'nc' => 'color: #00702a', 'bp' => 'color: {$syntax.builtin-pseudo}',
'nt' => 'color: #00702a', 'nc' => 'color: {$syntax.name-class}',
'vc' => 'color: #00702a', 'nt' => 'color: {$syntax.name-tag}',
'nf' => 'color: #004012', 'vc' => 'color: {$syntax.name-variable-class}',
'nx' => 'color: #004012', 'nf' => 'color: {$syntax.name-function}',
'o' => 'color: #aa2211', 'nx' => 'color: {$syntax.name-exception}',
'ss' => 'color: #aa2211', 'o' => 'color: {$syntax.operator}',
'm' => 'color: #601200', 'p' => 'color: {$syntax.punctuation}',
'mf' => 'color: #601200', 'ss' => 'color: {$syntax.literal-string-symbol}',
'mh' => 'color: #601200', 'm' => 'color: {$syntax.literal-number}',
'mi' => 'color: #601200', 'mf' => 'color: {$syntax.literal-number-float}',
'mo' => 'color: #601200', 'mh' => 'color: {$syntax.literal-number-hex}',
'il' => 'color: #601200', 'mi' => 'color: {$syntax.literal-number-integer}',
'gd' => 'color: #a00000', 'mo' => 'color: {$syntax.literal-number-octal}',
'gr' => 'color: #ff0000', 'il' => 'color: {$syntax.literal-number-integer-long}',
'gh' => 'color: #000080', 'gd' => 'color: {$syntax.generic-deleted}',
'gi' => 'color: #00a000', 'gr' => 'color: {$syntax.generic-red}',
'go' => 'color: #808080', 'gh' => 'color: {$syntax.generic-heading}',
'gp' => 'color: #000080', 'gi' => 'color: {$syntax.generic-inserted}',
'gu' => 'color: #800080', 'go' => 'color: {$syntax.generic-output}',
'gt' => 'color: #0040d0', 'gp' => 'color: {$syntax.generic-prompt}',
'nd' => 'color: #aa22ff', 'gu' => 'color: {$syntax.generic-underline}',
'ni' => 'color: #92969d', 'gt' => 'color: {$syntax.generic-traceback}',
'ne' => 'color: #d2413a', 'nd' => 'color: {$syntax.name-decorator}',
'nl' => 'color: #a0a000', 'ni' => 'color: {$syntax.name-identifier}',
'nn' => 'color: #0000ff', 'ne' => 'color: {$syntax.name-entity}',
'ow' => 'color: #aa22ff', 'nl' => 'color: {$syntax.name-label}',
'w' => 'color: #bbbbbb', 'nn' => 'color: {$syntax.name-namespace}',
'se' => 'color: #bb6622', 'ow' => 'color: {$syntax.operator-word}',
'si' => 'color: #bb66bb', 'w' => 'color: {$syntax.text-whitespace}',
'se' => 'color: {$syntax.literal-string-escape}',
'si' => 'color: {$syntax.literal-string-interpol}',
); );
} }

View file

@ -3,148 +3,243 @@
* @generated * @generated
*/ */
.remarkup-code .bp, .remarkup-code .bp {
.remarkup-code .cp, color: {$syntax.builtin-pseudo}
.remarkup-code .kp, }
.remarkup-code .kr,
.remarkup-code .nb { .remarkup-code .c {
color: #304a96 color: {$syntax.comment}
}
.remarkup-code .c1 {
color: {$syntax.comment-single}
} }
.remarkup-code .c,
.remarkup-code .c1,
.remarkup-code .cm, .remarkup-code .cm,
.remarkup-code .dc {
color: {$syntax.comment-multiline}
}
.remarkup-code .cp {
color: {$syntax.comment-preproc}
}
.remarkup-code .cs { .remarkup-code .cs {
color: #74777d color: {$syntax.comment-special}
} }
.remarkup-code .gd { .remarkup-code .gd {
color: #a00000 color: {$syntax.generic-deleted}
} }
.remarkup-code .gh, .remarkup-code .gh {
.remarkup-code .gp { color: {$syntax.generic-heading}
color: #000080
} }
.remarkup-code .gi { .remarkup-code .gi {
color: #00a000 color: {$syntax.generic-inserted}
} }
.remarkup-code .go { .remarkup-code .go {
color: #808080 color: {$syntax.generic-output}
}
.remarkup-code .gp {
color: {$syntax.generic-prompt}
} }
.remarkup-code .gr { .remarkup-code .gr {
color: #ff0000 color: {$syntax.generic-red}
} }
.remarkup-code .gt { .remarkup-code .gt {
color: #0040d0 color: {$syntax.generic-traceback}
} }
.remarkup-code .gu { .remarkup-code .gu {
color: #800080 color: {$syntax.generic-underline}
} }
.remarkup-code .hll { .remarkup-code .hll {
color: #ffffcc color: {$syntax.highlighted-line}
} }
.remarkup-code .il, .remarkup-code .il {
.remarkup-code .m, color: {$syntax.literal-number-integer-long}
.remarkup-code .mf, }
.remarkup-code .mh,
.remarkup-code .mi, .remarkup-code .k {
.remarkup-code .mo { color: {$syntax.keyword}
color: #601200 }
.remarkup-code .kc {
color: {$syntax.keyword-constant}
}
.remarkup-code .kd {
color: {$syntax.keyword-declaration}
}
.remarkup-code .kn {
color: {$syntax.keyword-namespace}
}
.remarkup-code .kp {
color: {$syntax.keyword-preproc}
}
.remarkup-code .kr {
color: {$syntax.keyword-reserved}
} }
.remarkup-code .k,
.remarkup-code .kd,
.remarkup-code .kn,
.remarkup-code .kt { .remarkup-code .kt {
color: #aa4000 color: {$syntax.keyword-type}
} }
.remarkup-code .kc, .remarkup-code .m {
.remarkup-code .no { color: {$syntax.literal-number}
color: #000a65 }
.remarkup-code .mf {
color: {$syntax.literal-number-float}
}
.remarkup-code .mh {
color: {$syntax.literal-number-hex}
}
.remarkup-code .mi {
color: {$syntax.literal-number-integer}
}
.remarkup-code .mo {
color: {$syntax.literal-number-octal}
} }
.remarkup-code .na { .remarkup-code .na {
color: #354bb3 color: {$syntax.name-attribute}
} }
.remarkup-code .nc, .remarkup-code .nb {
.remarkup-code .nt, color: {$syntax.name-builtin}
.remarkup-code .vc {
color: #00702a
} }
.remarkup-code .nd, .remarkup-code .nc {
.remarkup-code .ow { color: {$syntax.name-class}
color: #aa22ff }
.remarkup-code .nd {
color: {$syntax.name-decorator}
} }
.remarkup-code .ne { .remarkup-code .ne {
color: #d2413a color: {$syntax.name-entity}
} }
.remarkup-code .nf, .remarkup-code .nf {
.remarkup-code .nx { color: {$syntax.name-function}
color: #004012
} }
.remarkup-code .ni { .remarkup-code .ni {
color: #92969d color: {$syntax.name-identifier}
} }
.remarkup-code .nl { .remarkup-code .nl {
color: #a0a000 color: {$syntax.name-label}
} }
.remarkup-code .nn { .remarkup-code .nn {
color: #0000ff color: {$syntax.name-namespace}
} }
.remarkup-code .nv, .remarkup-code .no {
.remarkup-code .vg, color: {$syntax.name-operator}
.remarkup-code .vi {
color: #001294
} }
.remarkup-code .o, .remarkup-code .nt {
.remarkup-code .ss { color: {$syntax.name-tag}
color: #aa2211
} }
.remarkup-code .s, .remarkup-code .nv {
.remarkup-code .s1, color: {$syntax.name-variable}
.remarkup-code .s2,
.remarkup-code .sb,
.remarkup-code .sc,
.remarkup-code .sx {
color: #766510
} }
.remarkup-code .sd, .remarkup-code .nx {
.remarkup-code .sh { color: {$syntax.name-exception}
color: #000000 }
.remarkup-code .o {
color: {$syntax.operator}
}
.remarkup-code .ow {
color: {$syntax.operator-word}
}
.remarkup-code .p {
color: {$syntax.punctuation}
}
.remarkup-code .s {
color: {$syntax.string}
}
.remarkup-code .s1 {
color: {$syntax.string-single}
}
.remarkup-code .s2 {
color: {$syntax.string-double}
}
.remarkup-code .sb {
color: {$syntax.string-backtick}
}
.remarkup-code .sc {
color: {$syntax.literal-string-char}
}
.remarkup-code .sd {
color: {$syntax.string-doc}
} }
.remarkup-code .se { .remarkup-code .se {
color: #bb6622 color: {$syntax.literal-string-escape}
}
.remarkup-code .sh {
color: {$syntax.string-heredoc}
} }
.remarkup-code .si { .remarkup-code .si {
color: #bb66bb color: {$syntax.literal-string-interpol}
} }
.remarkup-code .sr { .remarkup-code .sr {
color: #bb6688 color: {$syntax.string-regex}
}
.remarkup-code .ss {
color: {$syntax.literal-string-symbol}
}
.remarkup-code .sx {
color: {$syntax.string-other}
}
.remarkup-code .vc {
color: {$syntax.name-variable-class}
}
.remarkup-code .vg {
color: {$syntax.variable-global}
}
.remarkup-code .vi {
color: {$syntax.variable-instance}
} }
.remarkup-code .w { .remarkup-code .w {
color: #bbbbbb color: {$syntax.text-whitespace}
} }