github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/pages/graph/CMTheme.tsx (about)

     1  /* THIS FILE WAS COPIED INTO THANOS FROM PROMETHEUS 
     2     (LIVING AT https://github.com/prometheus/prometheus/blob/main/web/ui/react-app/src/pages/graph/CMTheme.tsx),
     3     PROMETHEUS CODE WAS LICENSED UNDER AN APACHE 2.0 LICENSE, SEE
     4     https://github.com/prometheus/prometheus/blob/main/LICENSE.
     5  */
     6  
     7  import { EditorView } from '@codemirror/view';
     8  import { HighlightStyle } from '@codemirror/language';
     9  import { tags } from '@lezer/highlight';
    10  
    11  export const baseTheme = EditorView.theme({
    12    '&': {
    13      '&.cm-focused': {
    14        outline: 'none',
    15        outline_fallback: 'none',
    16      },
    17    },
    18    '.cm-scroller': {
    19      overflow: 'hidden',
    20      fontFamily: '"DejaVu Sans Mono", monospace',
    21    },
    22    '.cm-placeholder': {
    23      fontFamily:
    24        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
    25    },
    26  
    27    '.cm-matchingBracket': {
    28      color: '#000',
    29      backgroundColor: '#dedede',
    30      fontWeight: 'bold',
    31      outline: '1px dashed transparent',
    32    },
    33    '.cm-nonmatchingBracket': { borderColor: 'red' },
    34  
    35    '.cm-tooltip.cm-tooltip-autocomplete': {
    36      '& > ul': {
    37        maxHeight: '350px',
    38        fontFamily: '"DejaVu Sans Mono", monospace',
    39        maxWidth: 'unset',
    40      },
    41      '& > ul > li': {
    42        padding: '2px 1em 2px 3px',
    43      },
    44      minWidth: '30%',
    45    },
    46  
    47    '.cm-completionDetail': {
    48      float: 'right',
    49      color: '#999',
    50    },
    51  
    52    '.cm-tooltip.cm-completionInfo': {
    53      marginTop: '-11px',
    54      padding: '10px',
    55      fontFamily: "'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;",
    56      border: 'none',
    57      minWidth: '250px',
    58      maxWidth: 'min-content',
    59    },
    60  
    61    '.cm-completionInfo.cm-completionInfo-right': {
    62      '&:before': {
    63        content: "' '",
    64        height: '0',
    65        position: 'absolute',
    66        width: '0',
    67        left: '-20px',
    68        borderWidth: '10px',
    69        borderStyle: 'solid',
    70        borderColor: 'transparent',
    71      },
    72      marginLeft: '12px',
    73    },
    74    '.cm-completionInfo.cm-completionInfo-left': {
    75      '&:before': {
    76        content: "' '",
    77        height: '0',
    78        position: 'absolute',
    79        width: '0',
    80        right: '-20px',
    81        borderWidth: '10px',
    82        borderStyle: 'solid',
    83        borderColor: 'transparent',
    84      },
    85      marginRight: '12px',
    86    },
    87  
    88    '.cm-completionMatchedText': {
    89      textDecoration: 'none',
    90      fontWeight: 'bold',
    91      color: '#0066bf',
    92    },
    93  
    94    '.cm-selectionMatch': {
    95      backgroundColor: '#e6f3ff',
    96    },
    97  
    98    '.cm-diagnostic': {
    99      '&.cm-diagnostic-error': {
   100        borderLeft: '3px solid #e65013',
   101      },
   102    },
   103  
   104    '.cm-completionIcon': {
   105      boxSizing: 'content-box',
   106      fontSize: '16px',
   107      lineHeight: '1',
   108      marginRight: '10px',
   109      verticalAlign: 'top',
   110      '&:after': { content: "'\\ea88'" },
   111      fontFamily: 'codicon',
   112      paddingRight: '0',
   113      opacity: '1',
   114      color: '#007acc',
   115    },
   116  
   117    '.cm-completionIcon-function, .cm-completionIcon-method': {
   118      '&:after': { content: "'\\ea8c'" },
   119      color: '#652d90',
   120    },
   121    '.cm-completionIcon-class': {
   122      '&:after': { content: "'○'" },
   123    },
   124    '.cm-completionIcon-interface': {
   125      '&:after': { content: "'◌'" },
   126    },
   127    '.cm-completionIcon-variable': {
   128      '&:after': { content: "'𝑥'" },
   129    },
   130    '.cm-completionIcon-constant': {
   131      '&:after': { content: "'\\eb5f'" },
   132      color: '#007acc',
   133    },
   134    '.cm-completionIcon-type': {
   135      '&:after': { content: "'𝑡'" },
   136    },
   137    '.cm-completionIcon-enum': {
   138      '&:after': { content: "'∪'" },
   139    },
   140    '.cm-completionIcon-property': {
   141      '&:after': { content: "'□'" },
   142    },
   143    '.cm-completionIcon-keyword': {
   144      '&:after': { content: "'\\eb62'" },
   145      color: '#616161',
   146    },
   147    '.cm-completionIcon-namespace': {
   148      '&:after': { content: "'▢'" },
   149    },
   150    '.cm-completionIcon-text': {
   151      '&:after': { content: "'\\ea95'" },
   152      color: '#ee9d28',
   153    },
   154  });
   155  
   156  export const lightTheme = EditorView.theme(
   157    {
   158      '.cm-tooltip': {
   159        backgroundColor: '#f8f8f8',
   160        borderColor: 'rgba(52, 79, 113, 0.2)',
   161      },
   162  
   163      '.cm-tooltip.cm-tooltip-autocomplete': {
   164        '& li:hover': {
   165          backgroundColor: '#ddd',
   166        },
   167        '& > ul > li[aria-selected]': {
   168          backgroundColor: '#d6ebff',
   169          color: 'unset',
   170        },
   171      },
   172  
   173      '.cm-tooltip.cm-completionInfo': {
   174        backgroundColor: '#d6ebff',
   175      },
   176  
   177      '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
   178        '&:before': {
   179          borderRightColor: '#d6ebff',
   180        },
   181      },
   182      '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
   183        '&:before': {
   184          borderLeftColor: '#d6ebff',
   185        },
   186      },
   187  
   188      '.cm-line': {
   189        '&::selection': {
   190          backgroundColor: '#add6ff',
   191        },
   192        '& > span::selection': {
   193          backgroundColor: '#add6ff',
   194        },
   195      },
   196    },
   197    { dark: false }
   198  );
   199  
   200  export const darkTheme = EditorView.theme(
   201    {
   202      '.cm-content': {
   203        caretColor: '#fff',
   204      },
   205  
   206      '.cm-tooltip.cm-completionInfo': {
   207        backgroundColor: '#333338',
   208      },
   209  
   210      '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
   211        '&:before': {
   212          borderRightColor: '#333338',
   213        },
   214      },
   215      '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
   216        '&:before': {
   217          borderLeftColor: '#333338',
   218        },
   219      },
   220  
   221      '.cm-line': {
   222        '&::selection': {
   223          backgroundColor: '#767676',
   224        },
   225        '& > span::selection': {
   226          backgroundColor: '#767676',
   227        },
   228      },
   229    },
   230    { dark: true }
   231  );
   232  
   233  export const promqlHighlighter = HighlightStyle.define([
   234    { tag: tags.name, color: '#000' },
   235    { tag: tags.number, color: '#09885a' },
   236    { tag: tags.string, color: '#a31515' },
   237    { tag: tags.keyword, color: '#008080' },
   238    { tag: tags.function(tags.variableName), color: '#008080' },
   239    { tag: tags.labelName, color: '#800000' },
   240    { tag: tags.operator },
   241    { tag: tags.modifier, color: '#008080' },
   242    { tag: tags.paren },
   243    { tag: tags.squareBracket },
   244    { tag: tags.brace },
   245    { tag: tags.invalid, color: 'red' },
   246    { tag: tags.comment, color: '#888', fontStyle: 'italic' },
   247  ]);