feat(editor): setup dark-mode for the code-editor, with automatic switching (#4453)

* feat(editor): Setup dark-mode for the code-editor, with automatic switching

By default this feature is disabled. The feature can be toggled with `document.body.classList.toggle('dark-mode-beta')`

* change the beta class name

* switch codemirror theme over to css variables

packages/design-system/src/css/_tokens.dark.scss

@@ -2,7 +2,7 @@
 
 @mixin theme {
 	--color-primary-h: 7;
-	--color-primary-s: 100%;
+	--color-primary-s: 90%;
 	--color-primary-l: 68%;
 	--color-primary: hsl(
 		var(--color-primary-h),
@@ -177,7 +177,7 @@
 
 	--color-text-xlight-h: 0;
 	--color-text-xlight-s: 0%;
-	--color-text-xlight-l: 100%;
+	--color-text-xlight-l: 10%;
 	--color-text-xlight: hsl(
 		var(--color-text-xlight-h),
 		var(--color-text-xlight-s),
@@ -204,7 +204,7 @@
 
 	--color-foreground-xlight-h: 0;
 	--color-foreground-xlight-s: 0%;
-	--color-foreground-xlight-l: 0%;
+	--color-foreground-xlight-l: 10%;
 	--color-foreground-xlight: hsl(
 		var(--color-foreground-xlight-h),
 		var(--color-foreground-xlight-s),
@@ -230,8 +230,8 @@
 	);
 
 	--color-background-light-h: 220;
-	--color-background-light-s: 27%;
+	--color-background-light-s: 10%;
-	--color-background-light-l: 0%;
+	--color-background-light-l: 15%;
 	--color-background-light: hsl(
 		var(--color-background-light-h),
 		var(--color-background-light-s),
@@ -265,9 +265,9 @@
 		var(--color-canvas-dot-l)
 	);
 
-	--color-canvas-background-h: 90;
+	--color-canvas-background-h: 200;
 	--color-canvas-background-s: 10%;
-	--color-canvas-background-l: 0%;
+	--color-canvas-background-l: 10%;
 	--color-canvas-background: hsl(
 		var(--color-canvas-background-h),
 		var(--color-canvas-background-s),
@@ -303,6 +303,21 @@
 	--color-json-line: #bfcbd9;
 	--color-json-highlight: #dcdfea;
 
+	--color-code-background: #222020;
+	--color-code-foreground: #f8f8f2;
+	--color-code-caret: #f8f8f0;
+	--color-code-selection: #312b25;
+	--color-code-gutterBackground: #2d2a26;
+	--color-code-gutterForeground: #818080;
+	--color-code-lineHighlight: #312b25;
+	--color-code-tags-comment: #6272a4;
+	--color-code-tags-string: #f1fa8c;
+	--color-code-tags-primitive: #bd93f9;
+	--color-code-tags-keyword: #ff79c6;
+	--color-code-tags-operator: #ff79c6;
+	--color-code-tags-variable: #ea6465;
+	--color-code-tags-definition: #368da5;
+
   // Generated Color Shades from 50 to 950
   // Not yet used in design system
   @each $color in ('neutral', 'success', 'warning', 'danger') {
@@ -313,6 +328,8 @@
 	}
 }
 
-body.theme-dark {
+@media (prefers-color-scheme: dark) {
+	body.theme-dark-beta {
 		@include theme;
+	}
 }

packages/design-system/src/css/_tokens.scss

@@ -412,6 +412,21 @@
 		var(--color-sticky-default-border-l)
 	);
 
+	--color-code-background: #ffffff;
+	--color-code-foreground: #4d4d4c;
+	--color-code-caret: #aeafad;
+	--color-code-selection: #d6d6d6;
+	--color-code-gutterBackground: #ffffff;
+	--color-code-gutterForeground: #4d4d4c80;
+	--color-code-lineHighlight: #efefef;
+	--color-code-tags-comment: #8e908c;
+	--color-code-tags-string: #718c00;
+	--color-code-tags-primitive: #f5871f;
+	--color-code-tags-keyword: #8959a8;
+	--color-code-tags-operator: #3e999f;
+	--color-code-tags-variable: #c82829;
+	--color-code-tags-definition: #4271ae;
+
 	// Generated Color Shades from 50 to 950
 	// Not yet used in design system
 	@each $color in ('neutral', 'success', 'warning', 'danger') {

packages/editor-ui/src/components/CodeNodeEditor/theme.ts

@@ -3,20 +3,16 @@ import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 
 /**
- * Based on Tomorrow theme by Chris Kempson
+ * Light theme based on Tomorrow theme by Chris Kempson
  * https://github.com/vadimdemedes/thememirror/blob/main/source/themes/tomorrow.ts
+ *
+ * Dark theme based on Dracula theme by Zeno Rocha
+ * https://github.com/vadimdemedes/thememirror/blob/main/source/themes/dracula.ts
  */
 
 const BASE_STYLING = {
 	fontSize: '0.8em',
 	fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace !important",
-	background: '#FFFFFF',
-	foreground: '#4D4D4C',
-	caret: '#AEAFAD',
-	selection: '#D6D6D6',
-	gutterBackground: '#FFFFFF',
-	gutterForeground: '#4D4D4C80',
-	lineHighlight: '#EFEFEF',
 	maxHeight: '400px',
 	tooltip: {
 		maxWidth: '300px',
@@ -31,80 +27,41 @@ const BASE_STYLING = {
 	},
 };
 
-const HIGHLIGHT_STYLING = [
-	{
-		tag: tags.comment,
-		color: '#8E908C',
-	},
-	{
-		tag: [tags.variableName, tags.self, tags.propertyName, tags.attributeName, tags.regexp],
-		color: '#C82829',
-	},
-	{
-		tag: [tags.number, tags.bool, tags.null],
-		color: '#F5871F',
-	},
-	{
-		tag: [tags.className, tags.typeName, tags.definition(tags.typeName)],
-		color: '#C99E00',
-	},
-	{
-		tag: [tags.string, tags.special(tags.brace)],
-		color: '#718C00',
-	},
-	{
-		tag: tags.operator,
-		color: '#3E999F',
-	},
-	{
-		tag: [tags.definition(tags.propertyName), tags.function(tags.variableName)],
-		color: '#4271AE',
-	},
-	{
-		tag: tags.keyword,
-		color: '#8959A8',
-	},
-	{
-		tag: tags.derefOperator,
-		color: '#4D4D4C',
-	},
-];
-
 const cssStyleDeclaration = getComputedStyle(document.documentElement);
 
 export const CODE_NODE_EDITOR_THEME = [
 	EditorView.theme({
 		'&': {
-			backgroundColor: BASE_STYLING.background,
-			color: BASE_STYLING.foreground,
 			'font-size': BASE_STYLING.fontSize,
 			border: cssStyleDeclaration.getPropertyValue('--border-base'),
 			borderRadius: cssStyleDeclaration.getPropertyValue('--border-radius-base'),
+			backgroundColor: 'var(--color-code-background)',
+			color: 'var(--color-code-foreground)',
 		},
 		'.cm-content': {
 			fontFamily: BASE_STYLING.fontFamily,
-			caretColor: BASE_STYLING.caret,
+			caretColor: 'var(--color-code-caret)',
 		},
 		'.cm-cursor, .cm-dropCursor': {
-			borderLeftColor: BASE_STYLING.caret,
+			borderLeftColor: 'var(--color-code-caret)',
+		},
+		'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+			backgroundColor: 'var(--color-code-selection)',
+		},
+		'.cm-activeLine': {
+			backgroundColor: 'var(--color-code-lineHighlight)',
+		},
+		'.cm-activeLineGutter': {
+			backgroundColor: 'var(--color-code-lineHighlight)',
+		},
+		'.cm-gutters': {
+			backgroundColor: 'var(--color-code-gutterBackground)',
+			color: 'var(--color-code-gutterForeground)',
 		},
 		'.cm-tooltip': {
 			maxWidth: BASE_STYLING.tooltip.maxWidth,
 			lineHeight: BASE_STYLING.tooltip.lineHeight,
 		},
-		'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
-			backgroundColor: BASE_STYLING.selection,
-		},
-		'.cm-activeLine': {
-			backgroundColor: BASE_STYLING.lineHighlight,
-		},
-		'.cm-gutters': {
-			backgroundColor: BASE_STYLING.gutterBackground,
-			color: BASE_STYLING.gutterForeground,
-		},
-		'.cm-activeLineGutter': {
-			backgroundColor: BASE_STYLING.lineHighlight,
-		},
 		'.cm-scroller': {
 			overflow: 'auto',
 			maxHeight: BASE_STYLING.maxHeight,
@@ -118,5 +75,34 @@ export const CODE_NODE_EDITOR_THEME = [
 			cursor: BASE_STYLING.diagnosticButton.cursor,
 		},
 	}),
-	syntaxHighlighting(HighlightStyle.define(HIGHLIGHT_STYLING)),
+	syntaxHighlighting(HighlightStyle.define([
+		{
+			tag: tags.comment,
+			color: 'var(--color-code-tags-comment)',
+		},
+		{
+			tag: [tags.string, tags.special(tags.brace)],
+			color: 'var(--color-code-tags-string)',
+		},
+		{
+			tag: [tags.number, tags.self, tags.bool, tags.null],
+			color: 'var(--color-code-tags-primitive)',
+		},
+		{
+			tag: tags.keyword,
+			color: 'var(--color-code-tags-keyword)',
+		},
+		{
+			tag: tags.operator,
+			color: 'var(--color-code-tags-operator)',
+		},
+		{
+			tag: [tags.variableName, tags.propertyName, tags.attributeName, tags.regexp, tags.className, tags.typeName],
+			color: 'var(--color-code-tags-variable)',
+		},
+		{
+			tag: [tags.definition(tags.typeName), tags.definition(tags.propertyName), tags.function(tags.variableName)],
+			color: 'var(--color-code-tags-definition)',
+		},
+	])),
 ];