From f200b1491371ab01f4a122cd1d72fafd155fccce Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju <148156994+bsahitya@users.noreply.github.com> Date: Fri, 6 Sep 2024 12:49:15 -0500 Subject: [PATCH] fix(styles): add covalent theming to angular code editor (#2241) --- .../code-editor-demo-basic.component.html | 2 +- .../code-editor-demo-monaco.component.html | 2 + .../code-editor-demo-monaco.component.ts | 2 +- .../src/lib/code-editor.component.ts | 20 +- .../src/lib/editor.theme.ts | 200 ++++++++++++++++++ .../src/code-editor/code-editor.theme.ts | 4 +- .../components/src/code-editor/code-editor.ts | 20 +- 7 files changed, 233 insertions(+), 17 deletions(-) diff --git a/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.html b/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.html index 8334d7cb4f..4f8476ab19 100644 --- a/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.html +++ b/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.html @@ -3,7 +3,7 @@ Editor Theme + Covalent Dark + Covalent Light Dark High Contrast Light diff --git a/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts b/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts index c1dfb3e086..5548009b84 100644 --- a/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts +++ b/apps/docs-app/src/app/content/components/component-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts @@ -9,7 +9,7 @@ import { editor } from 'monaco-editor'; export class CodeEditorDemoMonacoComponent { private _editor: any; - editorTheme = 'vs'; + editorTheme = 'cv-light'; editorVal = `var rows = prompt("How many rows for your multiplication table?"); var cols = prompt("How many columns for your multiplication table?"); if(rows == "" || rows == null) diff --git a/libs/angular-code-editor/src/lib/code-editor.component.ts b/libs/angular-code-editor/src/lib/code-editor.component.ts index a6e6a31b24..3d5a51981d 100644 --- a/libs/angular-code-editor/src/lib/code-editor.component.ts +++ b/libs/angular-code-editor/src/lib/code-editor.component.ts @@ -20,12 +20,17 @@ import { fromEvent, merge, timer } from 'rxjs'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; // Use esm version to support shipping subset of languages and features -import { editor, languages, IDisposable } from 'monaco-editor/esm/vs/editor/editor.api'; +import { + editor, + languages, + IDisposable, +} from 'monaco-editor/esm/vs/editor/editor.api'; import { mixinControlValueAccessor, mixinDisabled, } from '@covalent/core/common'; +import { cvEditorDarkTheme, cvEditorLightTheme } from './editor.theme'; const noop = () => { // empty method @@ -65,7 +70,7 @@ export class TdCodeEditorComponent private _editorStyle = 'width:100%;height:100%;'; private _value = ''; - private _theme = 'vs'; + private _theme = 'cv-light'; private _language = 'javascript'; private _subject: Subject = new Subject(); private _editorInnerContainer: string = @@ -327,6 +332,17 @@ export class TdCodeEditorComponent const containerDiv: HTMLDivElement = this._editorContainer.nativeElement; containerDiv.id = this._editorInnerContainer; + // Add teradata branded themes + editor.defineTheme( + 'cv-light', + cvEditorLightTheme as editor.IStandaloneThemeData + ); + + editor.defineTheme( + 'cv-dark', + cvEditorDarkTheme as editor.IStandaloneThemeData + ); + this._editor = editor.create( containerDiv, Object.assign( diff --git a/libs/angular-code-editor/src/lib/editor.theme.ts b/libs/angular-code-editor/src/lib/editor.theme.ts index 9056dd7e86..1e568d86f2 100644 --- a/libs/angular-code-editor/src/lib/editor.theme.ts +++ b/libs/angular-code-editor/src/lib/editor.theme.ts @@ -1,3 +1,5 @@ +import * as tokens from '@covalent/tokens'; + export const covalentThemeName = 'tdaa-lite'; export const covalentThemeConf = { @@ -56,3 +58,201 @@ export const covalentThemeConf = { 'inputValidation.errorBorder': 'rgba(229, 115, 115, 0.1)', }, }; + +const getTheme = (theme: 'Light' | 'Dark') => { + return { + base: theme === 'Light' ? 'vs' : 'vs-dark', + inherit: true, + rules: [ + { + token: '', + foreground: tokens[`Cv${theme}CodeSnippetColor`], + background: tokens[`Cv${theme}Surface`], + }, + { + token: 'arbitration-variable', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'arbitration-variable.invalid', + foreground: tokens[`Cv${theme}Negative`], + }, + { + token: 'attribute.name', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'attribute.value', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'attribute.value.number', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'attribute.value.unit', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'attribute.value.html', + foreground: tokens[`Cv${theme}CodeSnippetString`], + }, + { + token: 'attribute.value.xml', + foreground: tokens[`Cv${theme}CodeSnippetLiteral`], + }, + { + token: 'builtins', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'class', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'comment', + foreground: tokens[`Cv${theme}CodeSnippetComment`], + fontStyle: 'italic', + }, + { + token: 'constant', + foreground: tokens[`Cv${theme}CodeSnippetLiteral`], + }, + { + token: 'delimiter', + foreground: tokens[`CvTheme${theme}ColorsOnSurface`], + }, + { + token: 'delimiter.html', + foreground: tokens[`Cv${theme}CodeSnippetSelector`], + }, + { + token: 'delimiter.xml', + foreground: tokens[`Cv${theme}CodeSnippetSelector`], + }, + { + token: 'doctag', + foreground: tokens[`Cv${theme}CodeSnippetKeyword`], + }, + { + token: 'emphasis', + fontStyle: 'italic', + }, + { + token: 'formula', + foreground: tokens[`Cv${theme}CodeSnippetKeyword`], + }, + { + token: 'function', + foreground: tokens[`Cv${theme}CodeSnippetTitle`], + }, + { + token: 'invalid', + foreground: tokens[`Cv${theme}Negative`], + }, + { token: 'key', foreground: tokens[`Cv${theme}CodeSnippetString`] }, + { + token: 'keyword', + foreground: tokens[`Cv${theme}CodeSnippetKeyword`], + }, + { + token: 'keyword.json', + foreground: tokens[`Cv${theme}CodeSnippetTitle`], + fontStyle: 'bold italic', + }, + { + token: 'link', + foreground: tokens[`Cv${theme}CodeSnippetTitle`], + fontStyle: 'underline', + }, + { + token: 'literal', + foreground: tokens[`Cv${theme}CodeSnippetLiteral`], + }, + { + token: 'meta', + foreground: tokens[`Cv${theme}CodeSnippetTitle`], + }, + { + token: 'number', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + { + token: 'operator', + foreground: tokens[`Cv${theme}CodeSnippetLiteral`], + }, + { token: 'predefined', foreground: tokens[`Cv${theme}CodeSnippetTitle`] }, + { + token: 'predefined.sql', + foreground: tokens[`Cv${theme}CodeSnippetTitle`], + }, + { + token: 'predefined.python', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'punctuation', + foreground: tokens[`Cv${theme}CodeSnippetColor`], + }, + { + token: 'string', + foreground: tokens[`Cv${theme}CodeSnippetString`], + }, + { + token: 'string.sql', + foreground: tokens[`Cv${theme}CodeSnippetString`], + }, + { + token: 'string.key.json', + foreground: tokens[`Cv${theme}CodeSnippetString`], + }, + { + token: 'string.value.json', + foreground: tokens[`Cv${theme}CodeSnippetString`], + }, + { + token: 'strong', + fontStyle: 'bold', + }, + { + token: 'tag', + foreground: tokens[`Cv${theme}CodeSnippetSelector`], + }, + { + token: 'tag.id.jade', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'tag.class.jade', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'type', + foreground: tokens[`Cv${theme}CodeSnippetClass`], + }, + { + token: 'variable', + foreground: tokens[`Cv${theme}CodeSnippetVariable`], + }, + ], + colors: { + comment: tokens[`Cv${theme}CodeSnippetComment`], + 'editor.background': tokens[`Cv${theme}Surface`], + 'editor.foreground': tokens[`CvTheme${theme}ColorsOnSurface`], + 'editorCursor.foreground': tokens[`Cv${theme}TextSecondaryOnBackground`], + 'editorLineNumber.activeForeground': + tokens[`CvTheme${theme}ColorsOnSurface74`], + 'editorLineNumber.foreground': tokens[`CvTheme${theme}ColorsOnSurface38`], + 'editor.lineHighlightBackground': + tokens[`CvTheme${theme}ColorsSurfaceContainerLow`], + 'inputValidation.errorBackground': tokens[`Cv${theme}Negative`], + 'inputValidation.errorBorder': + tokens[`CvTheme${theme}PalettesNegative95`], + }, + }; +}; + +// Any changes to these themes should also be reflected in the components/code-editor theme. +export const cvEditorDarkTheme = getTheme('Dark'); + +export const cvEditorLightTheme = getTheme('Light'); diff --git a/libs/components/src/code-editor/code-editor.theme.ts b/libs/components/src/code-editor/code-editor.theme.ts index 28fd4caf86..4d4ecb8c10 100644 --- a/libs/components/src/code-editor/code-editor.theme.ts +++ b/libs/components/src/code-editor/code-editor.theme.ts @@ -187,11 +187,13 @@ const getTheme = (theme: 'Light' | 'Dark') => { 'editor.lineHighlightBackground': tokens[`CvTheme${theme}ColorsSurfaceContainerLow`], 'inputValidation.errorBackground': tokens[`Cv${theme}Negative`], - 'inputValidation.errorBorder': 'rgba(229, 115, 115, 0.1)', + 'inputValidation.errorBorder': + tokens[`CvTheme${theme}PalettesNegative95`], }, }; }; +// Any changes to these themes should also be reflected in the angular-code-editor theme. export const cvEditorDarkTheme = getTheme('Dark'); export const cvEditorLightTheme = getTheme('Light'); diff --git a/libs/components/src/code-editor/code-editor.ts b/libs/components/src/code-editor/code-editor.ts index 11618c9f8d..8c936cc830 100644 --- a/libs/components/src/code-editor/code-editor.ts +++ b/libs/components/src/code-editor/code-editor.ts @@ -92,20 +92,16 @@ export class CovalentCodeEditor extends LitElement { createEditor(container: HTMLElement) { // uses covalent light colors - editor.defineTheme('cv-light', { - base: 'vs', - inherit: true, - rules: cvEditorLightTheme.rules, - colors: cvEditorLightTheme.colors, - }); + editor.defineTheme( + 'cv-light', + cvEditorLightTheme as editor.IStandaloneThemeData + ); // uses covalent dark colors - editor.defineTheme('cv-dark', { - base: 'vs-dark', - inherit: true, - rules: cvEditorDarkTheme.rules, - colors: cvEditorDarkTheme.colors, - }); + editor.defineTheme( + 'cv-dark', + cvEditorDarkTheme as editor.IStandaloneThemeData + ); this.editor = editor.create(container, { ...this.options,