@elastic/eui/lib/components/code/code_syntax.styles.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.euiCodeTextColors = exports.euiCodeSyntaxVariables = void 0;
/*
 * 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.
 */

var euiCodeTextColors = exports.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`
 */
var euiCodeSyntaxVariables = exports.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  }");
    }
  };
};