@patternfly/react-code-editor
Version:
This package provides a PatternFly wrapper for the Monaco code editor
72 lines • 4.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defineThemes = void 0;
const themeTokenMapping_1 = require("./themeTokenMapping");
const createTheme = (mode) => ({
base: mode === 'light' ? 'vs' : 'vs-dark',
inherit: true,
colors: {
'editor.background': themeTokenMapping_1.colors.background[mode],
'editor.foreground': themeTokenMapping_1.colors.foreground[mode],
'editorLineNumber.activeForeground': themeTokenMapping_1.colors.foreground[mode],
'editorLineNumber.foreground': themeTokenMapping_1.colors.secondaryForeground[mode]
},
rules: [
{ token: '', foreground: themeTokenMapping_1.colors.foreground[mode], background: themeTokenMapping_1.colors.background[mode] },
{ token: 'invalid', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'emphasis', fontStyle: 'italic' },
{ token: 'strong', fontStyle: 'bold' },
{ token: 'variable', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'variable.predefined', foreground: themeTokenMapping_1.colors.teal[mode] },
{ token: 'constant', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'comment', foreground: themeTokenMapping_1.colors.gray[mode] },
{ token: 'number', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'number.hex', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'regexp', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'annotation', foreground: themeTokenMapping_1.colors.purple[mode] },
{ token: 'type', foreground: themeTokenMapping_1.colors.yellow[mode] },
{ token: 'delimiter', foreground: themeTokenMapping_1.colors.foreground[mode] },
{ token: 'delimiter.html', foreground: themeTokenMapping_1.colors.gray[mode] },
{ token: 'delimiter.xml', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'tag', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'tag.id.jade', foreground: themeTokenMapping_1.colors.teal[mode] },
{ token: 'tag.class.jade', foreground: themeTokenMapping_1.colors.teal[mode] },
{ token: 'meta.scss', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'metatag', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'metatag.content.html', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'metatag.html', foreground: themeTokenMapping_1.colors.gray[mode] },
{ token: 'metatag.xml', foreground: themeTokenMapping_1.colors.gray[mode] },
{ token: 'metatag.php', fontStyle: 'bold' },
{ token: 'key', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'string.key.json', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'string.value.json', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'attribute.name', foreground: themeTokenMapping_1.colors.red[mode] },
{ token: 'attribute.value', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'attribute.value.number', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'attribute.value.unit', foreground: themeTokenMapping_1.colors.orange[mode] },
{ token: 'attribute.value.html', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'attribute.value.xml', foreground: themeTokenMapping_1.colors.blue[mode] },
{ token: 'string', foreground: themeTokenMapping_1.colors.green[mode] },
{ token: 'string.html', foreground: themeTokenMapping_1.colors.green[mode] },
{ token: 'string.sql', foreground: themeTokenMapping_1.colors.green[mode] },
{ token: 'string.yaml', foreground: themeTokenMapping_1.colors.green[mode] },
{ token: 'keyword', foreground: themeTokenMapping_1.colors.purple[mode] },
{ token: 'keyword.json', foreground: themeTokenMapping_1.colors.purple[mode] },
{ token: 'keyword.flow', foreground: themeTokenMapping_1.colors.purple[mode] },
{ token: 'keyword.flow.scss', foreground: themeTokenMapping_1.colors.purple[mode] },
{ token: 'operator.scss', foreground: themeTokenMapping_1.colors.foreground[mode] },
{ token: 'operator.sql', foreground: themeTokenMapping_1.colors.foreground[mode] },
{ token: 'operator.swift', foreground: themeTokenMapping_1.colors.foreground[mode] },
{ token: 'predefined.sql', foreground: themeTokenMapping_1.colors.purple[mode] }
]
});
/**
* Define the themes `pf-v6-theme-light` and
* `pf-v6-theme-dark` for an instance of Monaco editor.
*/
const defineThemes = (editor) => {
editor.defineTheme('pf-v6-theme-light', createTheme('light'));
editor.defineTheme('pf-v6-theme-dark', createTheme('dark'));
};
exports.defineThemes = defineThemes;
//# sourceMappingURL=CodeEditorTheme.js.map