implement custom highlighting theme

scm-ui/ui-styles/src/syntax-highlighting.js

@@ -0,0 +1,195 @@
+/* --- DO NOT EDIT --- */
+/* Auto-generated from syntax-highlighting.css */
+
+export default {
+  'pre[class*="language-"]': {
+    color: "#363636",
+    fontSize: "13px",
+    textShadow: "none",
+    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "4",
+    OTabSize: "4",
+    tabSize: "4",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none",
+    padding: "1em",
+    margin: ".5em 0",
+    overflow: "auto",
+    background: "#ffffff"
+  },
+  'code[class*="language-"]': {
+    color: "#363636",
+    fontSize: "13px",
+    textShadow: "none",
+    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "4",
+    OTabSize: "4",
+    tabSize: "4",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none"
+  },
+  'pre[class*="language-"]::selection': {
+    textShadow: "none",
+    background: "#7fe3cd"
+  },
+  'code[class*="language-"]::selection': {
+    textShadow: "none",
+    background: "#7fe3cd"
+  },
+  'pre[class*="language-"]::mozselection': {
+    textShadow: "none",
+    background: "#7fe3cd"
+  },
+  'code[class*="language-"]::mozselection': {
+    textShadow: "none",
+    background: "#7fe3cd"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    padding: ".1em .3em",
+    borderRadius: ".3em",
+    color: "#ff3860",
+    background: "#fbe7eb"
+  },
+  ".namespace": {
+    Opacity: ".7"
+  },
+  comment: {
+    color: "#9a9a9a"
+  },
+  prolog: {
+    color: "#9a9a9a"
+  },
+  doctype: {
+    color: "#9a9a9a"
+  },
+  cdata: {
+    color: "#9a9a9a"
+  },
+  punctuation: {
+    color: "#9a9a9a"
+  },
+  property: {
+    color: "#2c99c7"
+  },
+  tag: {
+    color: "#2c99c7"
+  },
+  boolean: {
+    color: "#2c99c7"
+  },
+  number: {
+    color: "#2c99c7"
+  },
+  constant: {
+    color: "#2c99c7"
+  },
+  symbol: {
+    color: "#2c99c7"
+  },
+  deleted: {
+    color: "#2c99c7"
+  },
+  selector: {
+    color: "#cca201"
+  },
+  "attr-name": {
+    color: "#cca201"
+  },
+  string: {
+    color: "#cca201"
+  },
+  char: {
+    color: "#cca201"
+  },
+  builtin: {
+    color: "#cca201"
+  },
+  inserted: {
+    color: "#cca201"
+  },
+  operator: {
+    color: "#686868",
+    background: "#ffffff"
+  },
+  entity: {
+    color: "#686868",
+    background: "#ffffff",
+    cursor: "help"
+  },
+  url: {
+    color: "#686868",
+    background: "#ffffff"
+  },
+  ".language-css .token.string": {
+    color: "#686868",
+    background: "#ffffff"
+  },
+  ".style .token.string": {
+    color: "#686868",
+    background: "#ffffff"
+  },
+  atrule: {
+    color: "#00a984"
+  },
+  "attr-value": {
+    color: "#00a984"
+  },
+  keyword: {
+    color: "#00a984"
+  },
+  function: {
+    color: "#ff3860"
+  },
+  regex: {
+    color: "#a74eb2"
+  },
+  important: {
+    color: "#a74eb2",
+    fontWeight: "bold"
+  },
+  variable: {
+    color: "#a74eb2"
+  },
+  bold: {
+    fontWeight: "bold"
+  },
+  italic: {
+    fontStyle: "italic"
+  },
+  "pre[data-line]": {
+    position: "relative"
+  },
+  'pre[class*="language-"] > code[class*="language-"]': {
+    position: "relative",
+    zIndex: "1"
+  },
+  ".line-highlight": {
+    position: "absolute",
+    left: "0",
+    right: "0",
+    padding: "inherit 0",
+    marginTop: "1em",
+    background: "#f5f5f5",
+    boxShadow: "inset 5px 0 0 #99d8f3",
+    zIndex: "0",
+    pointerEvents: "none",
+    lineHeight: "inherit",
+    whiteSpace: "pre"
+  }
+};