@yuntijs/ui/es/Highlighter/SyntaxHighlighter/style.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3;
import { createStyles } from 'antd-style';
export var useStyles = createStyles(function (_ref, _ref2) {
  var css = _ref.css,
    token = _ref.token,
    cx = _ref.cx,
    prefixCls = _ref.prefixCls,
    stylish = _ref.stylish;
  var theme = _ref2.theme;
  var prefix = "".concat(prefixCls, "-highlighter");
  return {
    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 10;\n          inset-block-start: 0;\n          inset-inline-end: 0;\n\n          height: 34px;\n          padding-block: 0;\n          padding-inline: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          border-radius: ", ";\n        "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n\n          & > pre {\n            height: 100%;\n            overflow: auto;\n            margin: 0;\n            padding: 0;\n            ", "\n\n            code {\n              display: block;\n\n              .line {\n                display: inline-block;\n\n                width: calc(100% + 32px);\n                margin-block: 0;\n                margin-inline: -16px;\n                padding-block: 0;\n                padding-inline: 16px;\n              }\n            }\n\n            &.has-focused {\n              .line:not(.focused) {\n                opacity: 0.5;\n              }\n            }\n\n            .highlighted {\n              background: ", ";\n\n              &.warning {\n                background: ", ";\n              }\n\n              &.error {\n                background: ", ";\n              }\n            }\n\n            .highlighted-word {\n              padding-block: 0.1em;\n              padding-inline: 0.2em;\n\n              background: ", ";\n              border: 1px solid ", ";\n              border-radius: ", "px;\n            }\n\n            .diff {\n              &.remove {\n                background: ", ";\n\n                &::before {\n                  content: '-';\n\n                  position: absolute;\n                  inset-inline-start: 4px;\n\n                  display: inline-block;\n\n                  color: ", ";\n                }\n              }\n\n              &.add {\n                background: ", ";\n\n                &::before {\n                  content: '+';\n\n                  position: absolute;\n                  inset-inline-start: 4px;\n\n                  display: inline-block;\n\n                  color: ", ";\n                }\n              }\n            }\n          }\n        "])), !theme && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              background: none !important;\n            "]))), token.colorFillTertiary, token.colorWarningBg, token.colorErrorBg, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadius, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText))
  };
});