1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 06:42:42 +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.js' => '020aebcf',
'core.pkg.css' => '7f47b2ac',
'core.pkg.css' => '41cc201d',
'core.pkg.js' => '2eeda9e0',
'dark-console.pkg.js' => '187792c2',
'differential.pkg.css' => '6d3700f0',
@ -186,7 +187,7 @@ return array(
'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022',
'rsrc/css/sprite-login.css' => '07052ee0',
'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/font/fontawesome/fontawesome-webfont.eot' => '23f8c698',
'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => '70983df0',
@ -907,7 +908,7 @@ return array(
'setup-issue-css' => '93231115',
'sprite-login-css' => '07052ee0',
'sprite-tokens-css' => 'f1896dc5',
'syntax-default-css' => '055fc231',
'syntax-default-css' => 'c0307dc6',
'syntax-highlighting-css' => '548567f6',
'tokens-css' => 'ce5a50bd',
'trigger-rule' => '41b7b4f6',

View file

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

View file

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