Change:
This seems really aggressive and probably not intentional <img width="406" alt="image" src="https://user-"
I think this rule references a css variable that isn't defined <img width="501" alt="image" src="https://user-" it looks like you were in this area recently, it looks like there is a default that we don't fall back to, do you know what's going on?

Discussion:
*--------------------------------------------------------------------------------------------*/ import { IDragAndDropData } from 'vs/base/browser/dnd'; <del> import { createStyleSheet, Dimension, EventHelper } from 'vs/base/browser/dom'; </del> <ins> import { asCssValueWithDefault, createStyleSheet, Dimension, EventHelper } from 'vs/base/browser/dom'; </ins> import { DomEmitter } from 'vs/base/browser/event'; import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { Gesture } from 'vs/base/browser/touch';

content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected .codicon { color: ${styles.listActiveSelectionIconForeground}; }`); } <del> if (styles.listFocusAndSelectionOutline) { content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected { outline-color: ${styles.listFocusAndSelectionOutline} !important; }`); } </del> if (styles.listFocusAndSelectionBackground) { content.push(` .monaco-drag-image,

content.push(`.monaco-list${suffix}:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { color:  ${styles.listHoverForeground}; }`); } <del> if (styles.listSelectionOutline) { content.push(`.monaco-list${suffix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`); </del> <ins> /** * Outlines */ const focusAndSelectionOutline = asCssValueWithDefault(styles.listFocusAndSelectionOutline, asCssValueWithDefault(styles.listSelectionOutline, styles.listFocusOutline ?? '')); if (focusAndSelectionOutline) { // default: listFocusOutline content.push(`.monaco-list${suffix}:focus .monaco-list-row.focused.selected { outline: 1px solid ${focusAndSelectionOutline}; outline-offset: -1px;}`); </ins> } <del> if (styles.listFocusOutline) { </del> <ins> if (styles.listFocusOutline) { // default: set </ins> content.push(` .monaco-drag-image, .monaco-list${suffix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }

`); } <del> if (styles.listInactiveFocusOutline) { </del> <ins> const inactiveFocusAndSelectionOutline = asCssValueWithDefault(styles.listSelectionOutline, styles.listInactiveFocusOutline ?? ''); if (inactiveFocusAndSelectionOutline) { content.push(`.monaco-list${suffix} .monaco-list-row.focused.selected { outline: 1px dotted ${inactiveFocusAndSelectionOutline}; outline-offset: -1px; }`); } if (styles.listSelectionOutline) { // default: activeContrastBorder content.push(`.monaco-list${suffix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`); } if (styles.listInactiveFocusOutline) { // default: null </ins> content.push(`.monaco-list${suffix} .monaco-list-row.focused { outline: 1px dotted ${styles.listInactiveFocusOutline}; outline-offset: -1px; }`); } <del> if (styles.listHoverOutline) { </del> <ins> if (styles.listHoverOutline) {  // default: activeContrastBorder </ins> content.push(`.monaco-list${suffix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`); }