@elastic/eui
Version:
Elastic UI Component Library
56 lines (54 loc) • 5.17 kB
JavaScript
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
export var euiCodeTextColors = function euiCodeTextColors(_ref) {
var euiTheme = _ref.euiTheme;
return {
backgroundColor: euiTheme.components.codeBackground,
color: euiTheme.components.codeColor
};
};
/**
* These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
*/
export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
backgroundColor = _euiCodeTextColors.backgroundColor,
color = _euiCodeTextColors.color;
return {
backgroundColor: backgroundColor,
color: color,
inlineBackgroundColor: euiTheme.components.codeInlineBackground,
inlineCodeColor: euiTheme.components.codeInlineColor,
selectedBackgroundColor: euiTheme.components.codeBackgroundSelected,
commentColor: euiTheme.components.codeCommentColor,
selectorTagColor: euiTheme.components.codeSelectorColor,
stringColor: euiTheme.components.codeStringColor,
tagColor: euiTheme.components.codeTagColor,
nameColor: euiTheme.components.codeNameColor,
numberColor: euiTheme.components.codeNumberColor,
keywordColor: euiTheme.components.codeKeywordColor,
inlineCodeKeywordColor: euiTheme.components.codeInlineCodeKeywordColor,
functionTitleColor: euiTheme.components.codeFunctionTitleColor,
typeColor: euiTheme.components.codeTypeColor,
attributeColor: euiTheme.components.codeAttributeColor,
symbolColor: euiTheme.components.codeSymbolColor,
paramsColor: euiTheme.components.codeParamsColor,
metaColor: euiTheme.components.codeMetaColor,
titleColor: euiTheme.components.codeTitleColor,
sectionColor: euiTheme.components.codeSectionColor,
additionColor: euiTheme.components.codeAdditionColor,
deletionColor: euiTheme.components.codeDeletionColor,
selectorClassColor: euiTheme.components.codeSelectorClassColor,
selectorIdColor: euiTheme.components.codeSelectorIdColor,
get tokensCss() {
return "\n .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n opacity: ".concat(highContrastMode ? '1' : '.7', ";\n }\n\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata,\n .token.coord,\n .token.blockquote {\n color: ").concat(this.commentColor, ";\n font-style: italic;\n }\n\n .token.selector {\n color: ").concat(this.selectorTagColor, ";\n }\n\n .token.string,\n .token.interpolation,\n .token.interpolation-punctuation,\n .token.doc-comment .token.keyword,\n .token.attr-value,\n .token.url .token.content {\n color: ").concat(this.stringColor, ";\n }\n\n .token.number,\n .token.boolean,\n .token.keyword.nil,\n .token.regex,\n .token.variable,\n .token.unit,\n .token.hexcode,\n .token.attr-name,\n .token.attr-equals {\n color: ").concat(this.numberColor, ";\n }\n\n .token.atrule .token.rule,\n .token.key.atrule,\n .token.keyword {\n color: ").concat(this.keywordColor, ";\n }\n\n .token.function {\n color: ").concat(this.functionTitleColor, ";\n }\n\n .token.tag {\n color: ").concat(this.tagColor, ";\n }\n\n .token.class-name {\n color: ").concat(this.typeColor, ";\n }\n\n .token.property {\n color: ").concat(this.attributeColor, ";\n }\n\n .token.console,\n .token.list-punctuation,\n .token.url-reference,\n .token.url .token.url {\n color: ").concat(this.symbolColor, ";\n }\n\n .token.paramater {\n color: ").concat(this.paramsColor, ";\n }\n\n .token.meta,\n .token.important {\n color: ").concat(this.metaColor, ";\n }\n\n .token.title {\n color: ").concat(this.titleColor, ";\n }\n\n .token.section {\n color: ").concat(this.sectionColor, ";\n }\n\n .token.prefix.inserted,\n .token.prefix.deleted {\n padding-inline-start: -").concat(euiTheme.size.xs, ";\n margin-inline-start: -").concat(euiTheme.size.xs, ";\n }\n\n .token.prefix.inserted {\n box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n color: ").concat(this.additionColor, ";\n }\n\n .token.prefix.deleted {\n box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n color: ").concat(this.deletionColor, ";\n }\n\n .token.selector .token.class {\n color: ").concat(this.selectorClassColor, ";\n }\n\n .token.selector .token.id {\n color: ").concat(this.selectorIdColor, ";\n }\n\n .token.italic {\n font-style: italic;\n }\n\n .token.important,\n .token.bold {\n font-weight: ").concat(euiTheme.font.weight.bold, ";\n }\n\n .token.url-reference,\n .token.url .token.url {\n text-decoration: underline;\n }\n\n .token.entity {\n cursor: help;\n }");
}
};
};