chrome-devtools-frontend
Version:
Chrome DevTools UI
229 lines (195 loc) • 5.75 kB
text/typescript
// 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(--sys-color-on-subtle)',
cursor: 'auto',
'&.cm-focused': {
outline: 'none',
},
},
'.cm-scroller': {
lineHeight: '1.4em',
fontFamily: 'var(--source-code-font-family)',
fontSize: 'var(--source-code-font-size)',
},
'.cm-content': {
lineHeight: '1.4em',
},
'.cm-panels': {
backgroundColor: 'var(--sys-color-cdt-base-container)',
},
'.cm-panels-bottom': {
borderTop: '1px solid var(--sys-color-divider)',
},
'.cm-selectionMatch': {
backgroundColor: 'var(--sys-color-yellow-container)',
},
'.cm-cursor': {
borderLeft: '1px solid var(--sys-color-inverse-surface)',
},
'&.cm-readonly .cm-cursor': {
display: 'none',
},
'.cm-cursor-secondary': {
borderLeft: '1px solid var(--sys-color-neutral-outline)',
},
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
background: 'var(--sys-color-tonal-container)',
},
'.cm-line::selection': {
color: 'currentColor',
},
'.cm-selectionBackground': {
background: 'var(--sys-color-neutral-container)',
},
'.cm-gutters': {
borderRight: 'none',
whiteSpace: 'nowrap',
backgroundColor: 'var(--sys-color-cdt-base-container)',
},
'.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(--sys-color-outline)',
padding: '0 3px 0 9px',
},
'.cm-foldPlaceholder': {
background: 'transparent',
border: 'none',
color: 'var(--sys-color-token-subtle)',
},
'.cm-matchingBracket, .cm-nonmatchingBracket': {
background: 'transparent',
borderBottom: 'none',
},
'&:focus-within .cm-matchingBracket': {
color: 'inherit',
backgroundColor: 'var(--sys-color-surface-variant)',
borderBottom: '1px solid var(--sys-color-outline)',
},
'&:focus-within .cm-nonmatchingBracket': {
backgroundColor: 'var(--sys-color-error-container)',
borderBottom: '1px solid var(--sys-color-error)',
},
'.cm-trailingWhitespace': {
backgroundColor: 'var(--sys-color-error-container)',
},
'.cm-highlightedTab': {
display: 'inline-block',
position: 'relative',
'&:before': {
content: '""',
borderBottom: '1px solid var(--sys-color-token-subtle)',
position: 'absolute',
left: '5%',
bottom: '50%',
width: '90%',
pointerEvents: 'none',
},
},
'.cm-highlightedSpaces:before': {
color: 'var(--sys-color-token-subtle)',
content: 'attr(data-display)',
position: 'absolute',
pointerEvents: 'none',
},
'.cm-placeholder': {
color: 'var(--sys-color-token-subtle)',
},
'.cm-completionHint': {
color: 'var(--sys-color-token-subtle)',
},
'.cm-tooltip': {
boxShadow: 'var(--drop-shadow)',
backgroundColor: 'var(--sys-color-neutral-container)',
},
'.cm-argumentHints': {
pointerEvents: 'none',
padding: '0 4px',
whiteSpace: 'nowrap',
lineHeight: '20px',
marginBottom: '4px',
width: 'fit-content',
},
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
backgroundColor: 'var(--sys-color-cdt-base-container)',
maxHeight: '25em',
minWidth: '16em',
'& > li': {
display: 'flex',
justifyContent: 'space-between',
border: '1px solid var(--sys-color-cdt-base-container)',
},
'& > li.cm-secondaryCompletion': {
display: 'flex',
backgroundColor: 'var(--sys-color-neutral-container)',
borderColor: 'var(--sys-color-neutral-container)',
justifyContent: 'space-between',
'&::before': {
content: '">"',
fontWeight: 'bold',
color: 'var(--sys-color-primary-bright)',
marginRight: '5px',
},
},
'& > li:hover': {
backgroundColor: 'var(--sys-color-state-hover-on-subtle)',
},
'& > li[aria-selected]': {
backgroundColor: 'var(--sys-color-tonal-container)',
borderColor: 'var(--sys-color-tonal-container)',
'&, &.cm-secondaryCompletion::before': {
color: 'var(--sys-color-on-tonal-container)',
},
'&::after': {
content: '"tab"',
color: 'var(--sys-color-primary-bright)',
border: '1px solid var(--sys-color-primary-bright)',
borderRadius: '2px',
marginLeft: '5px',
padding: '1px 3px',
fontSize: '10px',
lineHeight: '10px',
},
},
},
'.cm-tooltip.cm-tooltip-autocomplete.cm-conservativeCompletion > ul > li[aria-selected]': {
backgroundColor: 'var(--sys-color-cdt-base-container)',
border: '1px dotted var(--sys-color-on-surface)',
'&, &.cm-secondaryCompletion::before': {
color: 'var(--sys-color-on-surface)',
},
'&::after': {
border: '1px solid var(--sys-color-neutral-outline)',
color: 'var(--sys-color-token-subtle)',
},
},
'.cm-completionMatchedText': {
textDecoration: 'none',
fontWeight: 'bold',
},
'.cm-highlightedLine': {
animation: 'cm-fading-highlight 2s 0s',
},
'@keyframes cm-fading-highlight': {
from: {
backgroundColor: 'var(--sys-color-yellow-container)',
},
to: {
backgroundColor: 'transparent',
},
},
});