Skip to content

Commit

Permalink
fix(styles): add covalent theming to angular code editor (#2241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsahitya
bsahitya authored Sep 6, 2024
1 parent 696ca8d commit 5ed320e
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 17 deletions.
2 changes: 1 addition & 1 deletion ...nent-demos/code-editor/demos/code-editor-demo-basic/code-editor-demo-basic.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<td-code-editor
#editor
class="editor"
theme="vs"
theme="cv-light"
[language]="editorLanguage"
[(ngModel)]="editorVal"
flex
Expand Down
2 changes: 2 additions & 0 deletions ...nt-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<span flex="none" hide-xs class="push-right mat-body-1">Editor Theme</span>
<mat-form-field>
<mat-select [(ngModel)]="editorTheme" placeholder="Editor Theme">
<mat-option value="cv-dark">Covalent Dark</mat-option>
<mat-option value="cv-light">Covalent Light</mat-option>
<mat-option value="vs-dark">Dark</mat-option>
<mat-option value="hc-black">High Contrast</mat-option>
<mat-option value="vs">Light</mat-option>
Expand Down
2 changes: 1 addition & 1 deletion ...nent-demos/code-editor/demos/code-editor-demo-monaco/code-editor-demo-monaco.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
20 changes: 18 additions & 2 deletions libs/angular-code-editor/src/lib/code-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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<string> = new Subject();
private _editorInnerContainer: string =
Expand Down Expand Up @@ -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(
Expand Down
200 changes: 200 additions & 0 deletions libs/angular-code-editor/src/lib/editor.theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import * as tokens from '@covalent/tokens';

export const covalentThemeName = 'tdaa-lite';

export const covalentThemeConf = {
Expand Down Expand Up @@ -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');
4 changes: 3 additions & 1 deletion libs/components/src/code-editor/code-editor.theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
20 changes: 8 additions & 12 deletions libs/components/src/code-editor/code-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 5ed320e

Please sign in to comment.