UNPKG

chrome-devtools-frontend

Version:
217 lines (186 loc) • 5.53 kB
// Copyright 2021 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as CM from '../../../third_party/codemirror.next/codemirror.next.js'; export const editorTheme = CM.EditorView.theme({ '&.cm-editor': { color: 'color: var(--color-text-primary)', cursor: 'auto', '&.cm-focused': { outline: 'none', }, }, '.cm-scroller': { lineHeight: '1.2em', fontFamily: 'var(--source-code-font-family)', fontSize: 'var(--source-code-font-size)', }, '.cm-panels': { backgroundColor: 'var(--color-background-elevation-1)', }, '.cm-selectionMatch': { backgroundColor: 'var(--color-selection-highlight)', }, '.cm-cursor': { borderLeft: '1px solid var(--color-background-inverted)', }, '&.cm-readonly .cm-cursor': { display: 'none', }, '.cm-cursor-secondary': { borderLeft: '1px solid var(--color-secondary-cursor)', }, '.cm-selectionBackground': { background: 'var(--color-editor-selection)', }, '&.cm-focused .cm-selectionBackground': { background: 'var(--color-editor-selection)', }, '.cm-gutters': { borderRight: '1px solid var(--color-details-hairline)', whiteSpace: 'nowrap', backgroundColor: 'var(--color-background)', }, '.cm-gutters .cm-foldGutterElement': { cursor: 'pointer', opacity: '0%', transition: 'opacity 0.2s', }, '.cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement': { opacity: '100%', }, '.cm-lineNumbers': { overflow: 'visible', minWidth: '40px', }, '.cm-lineNumbers .cm-gutterElement': { color: 'var(--color-line-number)', padding: '0 3px 0 9px', }, '.cm-foldPlaceholder': { background: 'transparent', border: 'none', color: 'var(--color-text-secondary)', }, '.cm-matchingBracket, .cm-nonmatchingBracket': { background: 'transparent', borderBottom: 'none', }, '&:focus-within .cm-matchingBracket': { color: 'inherit', backgroundColor: 'var(--color-matching-bracket-background)', borderBottom: '1px solid var(--color-matching-bracket-underline)', }, '&:focus-within .cm-nonmatchingBracket': { backgroundColor: 'var(--color-nonmatching-bracket-background)', borderBottom: '1px solid var(--color-nonmatching-bracket-underline)', }, '.cm-trailingWhitespace': { backgroundColor: 'var(--color-trailing-whitespace)', }, '.cm-highlightedTab': { display: 'inline-block', position: 'relative', '&:before': { content: '""', borderBottom: '1px solid var(--color-text-secondary)', position: 'absolute', left: '5%', bottom: '50%', width: '90%', pointerEvents: 'none', }, }, '.cm-highlightedSpaces:before': { color: 'var(--color-text-secondary)', content: 'attr(data-display)', position: 'absolute', pointerEvents: 'none', }, '.cm-placeholder': { color: 'var(--color-text-secondary)', }, '.cm-completionHint': { color: 'var(--color-text-secondary)', }, '.cm-tooltip': { boxShadow: 'var(--drop-shadow)', backgroundColor: 'var(--color-background-elevation-1)', }, '.cm-argumentHints': { pointerEvents: 'none', padding: '0 4px', whiteSpace: 'nowrap', lineHeight: '20px', marginBottom: '4px', width: 'fit-content', }, '.cm-tooltip.cm-tooltip-autocomplete > ul': { backgroundColor: 'var(--color-background)', maxHeight: '25em', minWidth: '16em', '& > li': { display: 'flex', justifyContent: 'space-between', border: '1px solid var(--color-background)', }, '& > li.cm-secondaryCompletion': { display: 'flex', backgroundColor: 'var(--color-background-elevation-1)', borderColor: 'var(--color-background-elevation-1)', justifyContent: 'space-between', '&::before': { content: '">"', fontWeight: 'bold', color: 'var(--color-primary-variant)', marginRight: '5px', }, }, '& > li:hover': { backgroundColor: 'var(--item-hover-color)', }, '& > li[aria-selected]': { backgroundColor: 'var(--color-selected-option-background)', borderColor: 'var(--color-selected-option-background)', '&, &.cm-secondaryCompletion::before': { color: 'var(--color-selected-option)', }, '&::after': { content: '"tab"', color: 'var(--color-button-primary-text)', border: '1px solid var(--color-selected-option-outline)', borderRadius: '2px', marginLeft: '5px', padding: '1px 3px', fontSize: '10px', lineHeight: '10px', }, }, }, '.cm-tooltip.cm-tooltip-autocomplete.cm-conservativeCompletion > ul > li[aria-selected]': { backgroundColor: 'var(--color-background)', border: '1px dotted var(--color-text-primary)', '&, &.cm-secondaryCompletion::before': { color: 'var(--color-text-primary)', }, '&::after': { border: '1px solid var(--color-button-secondary-border)', color: 'var(--color-text-secondary)', }, }, '.cm-completionMatchedText': { textDecoration: 'none', fontWeight: 'bold', }, '.cm-highlightedLine': { animation: 'cm-fading-highlight 2s 0s', }, '@keyframes cm-fading-highlight': { from: { backgroundColor: 'var(--color-highlighted-line)', }, to: { backgroundColor: 'transparent', }, }, });