Skip to content

Commit f5c1710

Browse files
raclimraclim
authored
Merge pull request #3783 from processing/cm6-themes-v2
Cm6 themes v2
2 parents 1b095e9 + 1892d92 commit f5c1710

10 files changed

Lines changed: 17363 additions & 21192 deletions

File tree

‎client/modules/IDE/components/Editor/highlightStyle.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { HighlightStyle } from '@codemirror/language';
2+
import { tags } from '@lezer/highlight';
3+
4+
export const highlightStyle = HighlightStyle.define([
5+
{ tag: tags.comment, class: 'cm-comment' },
6+
{ tag: tags.lineComment, class: 'cm-comment' },
7+
{ tag: tags.blockComment, class: 'cm-comment' },
8+
{ tag: tags.docComment, class: 'cm-comment' },
9+
{ tag: tags.docString, class: 'cm-comment' },
10+
{ tag: tags.name, class: 'cm-variable' },
11+
{ tag: tags.variableName, class: 'cm-variable' },
12+
{ tag: tags.typeName, class: 'cm-variable' },
13+
{ tag: tags.className, class: 'cm-variable' },
14+
{ tag: tags.string, class: 'cm-string' },
15+
{ tag: tags.character, class: 'cm-string' },
16+
{ tag: tags.attributeName, class: 'cm-string' },
17+
{ tag: tags.regexp, class: 'cm-regexp' },
18+
{ tag: tags.number, class: 'cm-number' },
19+
{ tag: tags.integer, class: 'cm-number' },
20+
{ tag: tags.float, class: 'cm-number' },
21+
{ tag: tags.atom, class: 'cm-atom' },
22+
{ tag: tags.bool, class: 'cm-atom' },
23+
{ tag: tags.null, class: 'cm-atom' },
24+
{ tag: tags.keyword, class: 'cm-keyword' },
25+
{ tag: tags.self, class: 'cm-keyword' },
26+
{ tag: tags.function, class: 'cm-keyword' },
27+
{ tag: tags.operator, class: 'cm-operator' },
28+
{ tag: tags.operatorKeyword, class: 'cm-operator' },
29+
{ tag: tags.controlKeyword, class: 'cm-operator' },
30+
{ tag: tags.derefOperator, class: 'cm-operator' },
31+
{ tag: tags.arithmeticOperator, class: 'cm-operator' },
32+
{ tag: tags.logicOperator, class: 'cm-operator' },
33+
{ tag: tags.bitwiseOperator, class: 'cm-operator' },
34+
{ tag: tags.compareOperator, class: 'cm-operator' },
35+
{ tag: tags.updateOperator, class: 'cm-operator' },
36+
{ tag: tags.typeOperator, class: 'cm-operator' },
37+
{ tag: tags.controlOperator, class: 'cm-operator' },
38+
{ tag: tags.definitionKeyword, class: 'cm-keyword' },
39+
{ tag: tags.tagName, class: 'cm-tag' },
40+
{ tag: tags.heading, class: 'cm-tag' },
41+
{ tag: tags.heading1, class: 'cm-tag' },
42+
{ tag: tags.heading2, class: 'cm-tag' },
43+
{ tag: tags.heading3, class: 'cm-tag' },
44+
{ tag: tags.heading4, class: 'cm-tag' },
45+
{ tag: tags.heading5, class: 'cm-tag' },
46+
{ tag: tags.heading6, class: 'cm-tag' },
47+
{ tag: tags.list, class: 'cm-tag' },
48+
{ tag: tags.quote, class: 'cm-tag' },
49+
{ tag: tags.emphasis, class: 'cm-tag' },
50+
{ tag: tags.strong, class: 'cm-tag' },
51+
{ tag: tags.link, class: 'cm-tag' },
52+
{ tag: tags.propertyName, class: 'cm-property' },
53+
{ tag: tags.attributeName, class: 'cm-attribute' }
54+
55+
// TODO(connie): Add p5 specific highlighting, like .p5-variable
56+
// There might be a way to do this with Lezer's special tags like
57+
// special(), definition(), const(), local()
58+
]);

‎client/modules/IDE/components/Editor/stateUtils.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import {
1717
foldKeymap,
1818
bracketMatching,
1919
indentOnInput,
20-
syntaxHighlighting,
21-
defaultHighlightStyle
20+
syntaxHighlighting
2221
} from '@codemirror/language';
2322
import {
2423
autocompletion,
@@ -56,6 +55,7 @@ import { emmetConfig } from '@emmetio/codemirror6-plugin';
5655

5756
import p5JavaScript from './p5JavaScript';
5857
import tidyCodeWithPrettier from './tidier';
58+
import { highlightStyle } from './highlightStyle';
5959

6060
// ----- TODOS -----
6161
// - JSON linter
@@ -323,7 +323,7 @@ export function createNewFileState(filename, document, settings) {
323323
highlightActiveLineGutter(),
324324
highlightSpecialChars(),
325325
highlightSelectionMatches(),
326-
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // Might need to replace highlight style
326+
syntaxHighlighting(highlightStyle),
327327
// Selection extensions
328328
drawSelection(),
329329
rectangularSelection(),

‎client/styles/abstracts/_variables.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,40 @@ $dark: #333; // primary
2929
$darker: #1C1C1C;
3030
$darkest: #000;
3131

32+
// Light highlight styles
33+
$p5-light-selected: $medium-light;
34+
$p5-light-activeline: #cfcfcf44;
35+
$p5-light-brown: #7A5A3A;
36+
$p5-light-black: #333333;
37+
$p5-light-pink: #D52889;
38+
$p5-light-gray: #666;
39+
$p5-light-blue: #0B7CA9;
40+
$p5-light-orange: #A06801;
41+
$p5-light-lightgray: $middle-gray;
42+
$p5-light-green: #47820A;
43+
44+
// Dark highlight styles
45+
$p5-dark-selected: $medium-dark;
46+
$p5-dark-activeline: #cfcfcf22;
47+
$p5-dark-pink: #DE4A9B;
48+
$p5-dark-gray: #9B9B9B;
49+
$p5-dark-lightblue: #0F9DD7;
50+
$p5-dark-white: #FDFDFD;
51+
$p5-dark-orange: #EE9900;
52+
$p5-dark-green: #58a10b;
53+
$p5-dark-goldbrown: #b58318;
54+
55+
// Contrast highlight styles
56+
$p5-contrast-selected: $middle-dark;
57+
$p5-contrast-activeline: #333333AA;
58+
$p5-contrast-white: #FDFDFD;
59+
$p5-contrast-lightgray: #C1C1C1;
60+
$p5-contrast-blue: #00FFFF;
61+
$p5-contrast-green: #2DE9B6;
62+
$p5-contrast-yellow: #F5DC23;
63+
$p5-contrast-orange: #FFA95D;
64+
$p5-contrast-pink: #FFA9D9;
65+
3266
$themes: (
3367
light: (
3468
logo-color: $p5js-pink,
@@ -130,6 +164,23 @@ $themes: (
130164
admonition-border: #22C8ED,
131165
admonition-background: #E4F8FF,
132166
admonition-text: #075769,
167+
168+
selected-background-color: $p5-light-selected,
169+
activeline-background-color: $p5-light-activeline,
170+
171+
highlight-style-comment-color: $p5-light-lightgray,
172+
highlight-style-variable-color: $p5-light-blue,
173+
highlight-style-string-color: $p5-light-green,
174+
highlight-style-regexp-color: $p5-light-orange,
175+
highlight-style-number-color: $p5-light-black,
176+
highlight-style-atom-color: $p5-light-pink,
177+
highlight-style-keyword-color: $p5-light-brown,
178+
highlight-style-operator-color: $p5-light-brown,
179+
highlight-style-def-color: $p5-light-blue,
180+
highlight-style-tag-color: $p5-light-pink,
181+
highlight-style-property-color: $p5-light-black,
182+
highlight-style-attribute-color: $p5-light-black,
183+
highlight-style-matching-selection-background-color: $p5js-pink-opacity,
133184
),
134185
dark: (
135186
logo-color: $p5js-pink,
@@ -229,6 +280,23 @@ $themes: (
229280
admonition-border: #22C8ED,
230281
admonition-background: #105A7F,
231282
admonition-text: #FFFFFF,
283+
284+
selected-background-color: $p5-dark-selected,
285+
activeline-background-color: $p5-dark-activeline,
286+
287+
highlight-style-comment-color: $p5-dark-gray,
288+
highlight-style-variable-color: $p5-dark-lightblue,
289+
highlight-style-string-color: $p5-dark-green,
290+
highlight-style-regexp-color: $p5-dark-orange,
291+
highlight-style-number-color: $p5-dark-white,
292+
highlight-style-atom-color: $p5-dark-pink,
293+
highlight-style-keyword-color: $p5-dark-goldbrown,
294+
highlight-style-operator-color: $p5-dark-goldbrown,
295+
highlight-style-def-color: $p5-dark-lightblue,
296+
highlight-style-tag-color: $p5-dark-pink,
297+
highlight-style-property-color: $p5-dark-white,
298+
highlight-style-attribute-color: $p5-dark-lightblue,
299+
highlight-style-matching-selection-background-color: $p5js-pink-opacity,
232300
),
233301
contrast: (
234302
logo-color: $yellow,
@@ -328,6 +396,23 @@ $themes: (
328396
admonition-border: #22C8ED,
329397
admonition-background: #000000,
330398
admonition-text: #ffffff,
399+
400+
selected-background-color: $p5-contrast-selected,
401+
activeline-background-color: $p5-contrast-activeline,
402+
403+
highlight-style-comment-color: $p5-contrast-lightgray,
404+
highlight-style-variable-color: $p5-contrast-blue,
405+
highlight-style-string-color: $p5-contrast-green,
406+
highlight-style-regexp-color: $p5-contrast-green,
407+
highlight-style-number-color: $p5-contrast-pink,
408+
highlight-style-atom-color: $p5-contrast-pink,
409+
highlight-style-keyword-color: $p5-contrast-yellow,
410+
highlight-style-operator-color: $p5-contrast-lightgray,
411+
highlight-style-def-color: $p5-contrast-blue,
412+
highlight-style-tag-color: $p5-contrast-orange,
413+
highlight-style-property-color: $p5-contrast-white,
414+
highlight-style-attribute-color: $p5-contrast-white,
415+
highlight-style-matching-selection-background-color: $medium-dark,
331416
)
332417
);
333418

0 commit comments

Comments
 (0)