Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-08 15:55:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

extract border radius variable

Browse Source
This commit is contained in:
BeniBenj
2025-12-12 17:02:33 +01:00
parent dcfef6c3ea
commit f3c19dd858
11 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/lib/stylelint/vscode-known-variables.json
+2 -1
View File
@@ -993,6 +993,7 @@
"--comment-thread-editor-font-family",
"--comment-thread-editor-font-weight",
"--comment-thread-state-color",
"--comment-thread-state-background-color"
"--comment-thread-state-background-color",
"--inline-edit-border-radius"
]
}
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts
+3 -3
View File
@@ -24,7 +24,7 @@ import { LineRange } from '../../../../../../common/core/ranges/lineRange.js';
import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
import { StickyScrollController } from '../../../../../stickyScroll/browser/stickyScrollController.js';
import { InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getEditorBlendedColor, inlineEditIndicatorBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorSecondaryBackground, inlineEditIndicatorSecondaryBorder, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorSuccessfulBackground, inlineEditIndicatorSuccessfulBorder, inlineEditIndicatorSuccessfulForeground } from '../theme.js';
import { getEditorBlendedColor, INLINE_EDITS_BORDER_RADIUS, inlineEditIndicatorBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorSecondaryBackground, inlineEditIndicatorSecondaryBorder, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorSuccessfulBackground, inlineEditIndicatorSuccessfulBorder, inlineEditIndicatorSuccessfulForeground } from '../theme.js';
import { mapOutFalsy, rectToProps } from '../utils/utils.js';
import { GutterIndicatorMenuContent } from './gutterIndicatorMenu.js';
import { assertNever } from '../../../../../../../base/common/assert.js';
@@ -492,7 +492,7 @@ export class InlineEditsGutterIndicator extends Disposable {
style: {
position: 'absolute',
background: asCssVariable(inlineEditIndicatorBackground),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
...rectToProps(reader => layout.read(reader).gutterEditArea),
}
}),
@@ -529,7 +529,7 @@ export class InlineEditsGutterIndicator extends Disposable {
['--vscodeIconForeground' as any]: this._gutterIndicatorStyles.map(v => v.foreground),
border: this._gutterIndicatorStyles.map(v => `1px solid ${v.border}`),
boxSizing: 'border-box',
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
display: 'flex',
justifyContent: 'flex-end',
transition: this._modifierPressed.map(m => m ? '' : 'background-color 0.2s ease-in-out, width 0.2s ease-in-out'),
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts
+2 -2
View File
@@ -20,7 +20,7 @@ import { ILanguageService } from '../../../../../../common/languages/language.js
import { LineTokens, TokenArray } from '../../../../../../common/tokens/lineTokens.js';
import { InlineSuggestHint } from '../../../model/inlineSuggestionItem.js';
import { IInlineEditsView, InlineEditClickEvent, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getEditorBlendedColor, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBackground, inlineEditIndicatorSuccessfulBackground } from '../theme.js';
import { getEditorBlendedColor, INLINE_EDITS_BORDER_RADIUS, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBackground, inlineEditIndicatorSuccessfulBackground } from '../theme.js';
import { getContentRenderWidth, maxContentWidthInRange, rectToProps } from '../utils/utils.js';
const MIN_END_OF_LINE_PADDING = 14;
@@ -248,7 +248,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
boxSizing: 'border-box',
cursor: 'pointer',
border: styles.map(s => `1px solid ${s.border}`),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
backgroundColor: styles.map(s => s.background),
display: 'flex',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsDeletionView.ts
+2 -2
View File
@@ -18,7 +18,7 @@ import { Position } from '../../../../../../common/core/position.js';
import { Range } from '../../../../../../common/core/range.js';
import { IInlineEditsView, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { InlineEditWithChanges } from '../inlineEditWithChanges.js';
import { getOriginalBorderColor, originalBackgroundColor } from '../theme.js';
import { getOriginalBorderColor, INLINE_EDITS_BORDER_RADIUS, originalBackgroundColor } from '../theme.js';
import { getPrefixTrim, mapOutFalsy, maxContentWidthInRange } from '../utils/utils.js';
const HORIZONTAL_PADDING = 0;
@@ -26,7 +26,7 @@ const VERTICAL_PADDING = 0;
const BORDER_WIDTH = 1;
const WIDGET_SEPARATOR_WIDTH = 1;
const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
const BORDER_RADIUS = 4;
const BORDER_RADIUS = INLINE_EDITS_BORDER_RADIUS;
export class InlineEditsDeletionView extends Disposable implements IInlineEditsView {
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts
+2 -2
View File
@@ -23,13 +23,13 @@ import { InlineDecoration, InlineDecorationType } from '../../../../../../common
import { GhostText, GhostTextPart } from '../../../model/ghostText.js';
import { GhostTextView, IGhostTextWidgetData } from '../../ghostText/ghostTextView.js';
import { IInlineEditsView, InlineEditClickEvent, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getModifiedBorderColor, modifiedBackgroundColor } from '../theme.js';
import { getModifiedBorderColor, INLINE_EDITS_BORDER_RADIUS, modifiedBackgroundColor } from '../theme.js';
import { getPrefixTrim, mapOutFalsy } from '../utils/utils.js';
const BORDER_WIDTH = 1;
const WIDGET_SEPARATOR_WIDTH = 1;
const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
const BORDER_RADIUS = 3;
const BORDER_RADIUS = INLINE_EDITS_BORDER_RADIUS;
export class InlineEditsInsertionView extends Disposable implements IInlineEditsView {
private readonly _editorObs: ObservableCodeEditor;
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts
+5 -5
View File
@@ -24,7 +24,7 @@ import { ILanguageService } from '../../../../../../common/languages/language.js
import { LineTokens, TokenArray } from '../../../../../../common/tokens/lineTokens.js';
import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel/inlineDecorations.js';
import { IInlineEditsView, InlineEditClickEvent, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getEditorBlendedColor, getModifiedBorderColor, getOriginalBorderColor, modifiedChangedLineBackgroundColor, originalBackgroundColor } from '../theme.js';
import { getEditorBlendedColor, getModifiedBorderColor, getOriginalBorderColor, INLINE_EDITS_BORDER_RADIUS, modifiedChangedLineBackgroundColor, originalBackgroundColor } from '../theme.js';
import { getEditorValidOverlayRect, getPrefixTrim, mapOutFalsy, rectToProps } from '../utils/utils.js';
export class InlineEditsLineReplacementView extends Disposable implements IInlineEditsView {
@@ -232,7 +232,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft).withMargin(separatorWidth)),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
border: `${separatorWidth + 1}px solid ${asCssVariable(editorBackground)}`,
boxSizing: 'border-box',
@@ -244,7 +244,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
border: getEditorBlendedColor(originalBorderColor, this._themeService).map(c => `1px solid ${c.toString()}`),
pointerEvents: 'none',
@@ -257,7 +257,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).lowerBackground.translateX(-contentLeft)),
borderRadius: '0 0 3px 3px',
borderRadius: `0 0 ${INLINE_EDITS_BORDER_RADIUS}px ${INLINE_EDITS_BORDER_RADIUS}px`,
background: asCssVariable(editorBackground),
boxShadow: `${asCssVariable(scrollbarShadow)} 0 6px 6px -6px`,
border: `1px solid ${asCssVariable(modifiedBorderColor)}`,
@@ -289,7 +289,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
fontWeight: this._editor.getOption(EditorOption.fontWeight),
pointerEvents: 'none',
whiteSpace: 'nowrap',
borderRadius: '0 0 3px 3px',
borderRadius: `0 0 ${INLINE_EDITS_BORDER_RADIUS}px ${INLINE_EDITS_BORDER_RADIUS}px`,
overflow: 'hidden',
}
}, [...modifiedLineElements.lines]),
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsSideBySideView.ts
+2 -2
View File
@@ -23,7 +23,7 @@ import { StickyScrollController } from '../../../../../stickyScroll/browser/stic
import { InlineCompletionContextKeys } from '../../../controller/inlineCompletionContextKeys.js';
import { IInlineEditsView, InlineEditClickEvent, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { InlineEditWithChanges } from '../inlineEditWithChanges.js';
import { getEditorBlendedColor, getModifiedBorderColor, getOriginalBorderColor, modifiedBackgroundColor, originalBackgroundColor } from '../theme.js';
import { getEditorBlendedColor, getModifiedBorderColor, getOriginalBorderColor, INLINE_EDITS_BORDER_RADIUS, modifiedBackgroundColor, originalBackgroundColor } from '../theme.js';
import { PathBuilder, getContentRenderWidth, getOffsetForPos, mapOutFalsy, maxContentWidthInRange, observeEditorBoundingClientRect } from '../utils/utils.js';
const HORIZONTAL_PADDING = 0;
@@ -33,7 +33,7 @@ const ENABLE_OVERFLOW = false;
const BORDER_WIDTH = 1;
const WIDGET_SEPARATOR_WIDTH = 1;
const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
const BORDER_RADIUS = 4;
const BORDER_RADIUS = INLINE_EDITS_BORDER_RADIUS;
const ORIGINAL_END_PADDING = 20;
const MODIFIED_END_PADDING = 12;
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts
+4 -4
View File
@@ -15,7 +15,7 @@ import { EditorOption } from '../../../../../../common/config/editorOptions.js';
import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
import { TextReplacement } from '../../../../../../common/core/edits/textEdit.js';
import { IInlineEditsView, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getModifiedBorderColor } from '../theme.js';
import { getModifiedBorderColor, INLINE_EDITS_BORDER_RADIUS } from '../theme.js';
import { mapOutFalsy, rectToProps } from '../utils/utils.js';
export class InlineEditsWordInsertView extends Disposable implements IInlineEditsView {
@@ -77,7 +77,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).lowerBackground),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
background: 'var(--vscode-editor-background)'
}
}, []),
@@ -85,7 +85,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).modified),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
padding: '0px',
textAlign: 'center',
background: 'var(--vscode-inlineEdit-modifiedChangedTextBackground)',
@@ -100,7 +100,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background),
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
border: `1px solid ${modifiedBorderColor}`,
//background: 'rgba(122, 122, 122, 0.12)', looks better
background: 'var(--vscode-inlineEdit-wordReplacementView-background)',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts
+5 -5
View File
@@ -31,7 +31,7 @@ import { LineTokens, TokenArray } from '../../../../../../common/tokens/lineToke
import { inlineSuggestCommitAlternativeActionId } from '../../../controller/commandIds.js';
import { InlineSuggestAlternativeAction } from '../../../model/InlineSuggestAlternativeAction.js';
import { IInlineEditsView, InlineEditClickEvent, InlineEditTabAction } from '../inlineEditsViewInterface.js';
import { getModifiedBorderColor, getOriginalBorderColor, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, modifiedChangedTextOverlayColor, observeColor, originalChangedTextOverlayColor } from '../theme.js';
import { getModifiedBorderColor, getOriginalBorderColor, INLINE_EDITS_BORDER_RADIUS, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, modifiedChangedTextOverlayColor, observeColor, originalChangedTextOverlayColor } from '../theme.js';
import { getEditorValidOverlayRect, mapOutFalsy, rectToProps } from '../utils/utils.js';
export class WordReplacementsViewData implements IEquatable<WordReplacementsViewData> {
@@ -241,7 +241,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
width: undefined,
pointerEvents: 'auto',
boxSizing: 'border-box',
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
background: asCssVariable(editorBackground),
display: 'flex',
@@ -258,7 +258,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
fontSize: this._editor.getOption(EditorOption.fontSize),
fontWeight: this._editor.getOption(EditorOption.fontWeight),
width: rectToProps(reader => layout.read(reader).codeLine.withMargin(BORDER_WIDTH, 2 * BORDER_WIDTH)).width,
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
border: primaryActionStyles.map(s => `${BORDER_WIDTH}px solid ${s.borderColor}`),
boxSizing: 'border-box',
padding: `${BORDER_WIDTH}px`,
@@ -287,7 +287,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
id: DOM_ID_RENAME,
style: {
position: 'relative',
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
borderTop: `${BORDER_WIDTH}px solid`,
borderRight: `${BORDER_WIDTH}px solid`,
borderBottom: `${BORDER_WIDTH}px solid`,
@@ -326,7 +326,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
position: 'absolute',
...rectToProps(reader => layout.read(reader).originalLine.withMargin(BORDER_WIDTH)),
boxSizing: 'border-box',
borderRadius: '3px',
borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
border: `${BORDER_WIDTH}px solid ${originalBorderColor}`,
background: asCssVariable(originalChangedTextOverlayColor),
pointerEvents: 'none',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/theme.ts
+3
View File
@@ -208,3 +208,6 @@ export function observeColor(colorIdentifier: ColorIdentifier, themeService: ITh
}
);
}
// Styles
export const INLINE_EDITS_BORDER_RADIUS = 3; // also used in CSS file
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css
+7 -5
View File
@@ -8,6 +8,8 @@
*/
.monaco-editor {
--inline-edit-border-radius: 3px;
.inline-edits-view-indicator {
display: flex;
@@ -17,7 +19,7 @@
color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
background-color: var(--vscode-inlineEdit-gutterIndicator-background);
border: 1px solid var(--vscode-inlineEdit-gutterIndicator-primaryBorder);
border-radius: 3px;
border-radius: var(--inline-edit-border-radius);
align-items: center;
padding: 2px;
@@ -132,13 +134,13 @@
border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}
.inlineCompletions-char-insert.single-line-inline.start {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: var(--inline-edit-border-radius);
border-bottom-left-radius: var(--inline-edit-border-radius);
border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}
.inlineCompletions-char-insert.single-line-inline.end {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: var(--inline-edit-border-radius);
border-bottom-right-radius: var(--inline-edit-border-radius);
border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}