[themes] Expose more styles for borders (editorBracketMatch.border)

[ghost]

• VSCode Version: 1.21.1
• OS Version: macOS

Hi, currently you can set editorBracketMatch.border from all angles. My suggestion is to add the ability to border - bottom, top, right or left.

For e.g.

"editorBracketMatch.border": ["bottom", "#fff"]

I like, like it's in Atom where editorBracketMatch.border by default is to the bottom, I know we have HC themes and we need to keep it from all angles. But what about this idea?

[alexdima]

This covers the problem of how to expose border customizations. Color is just one aspect, but then there are other aspects:

• border style: dashed, dotted, solid
• border width
• having only one side of the border (like the OP mentions)
  etc.

[ghost]

@alexandrudima Amazing idea. This will reduce issues for other users because you can define these styles by yourself how you want it to look like. Also, I guess it's a good idea to let ppl decide how much px they want it to be.

So I believe something like this will be amazing (just brainstormed these):

"editorBracketMatch.border": ["1px", "solid", "bottom", "#fff"]
"editorBracketMatch.border": "1px solid bottom #fff"
"editorBracketMatch.border": {
  height: '1px',
  style: 'solid',
  position: 'bottom',
  color: '#fff'
}

[aeschli]

I like

"editorBracketMatch.border": {
  height: '1px',
  style: 'solid',
  position: 'bottom',
  color: '#fff'
}

with all properties not listed use (solid, 1px, box) or the settings from the default/overwritten settings.

[usernamehw]

How should it look assigning different border color, style and width for sides?

Does this issue cover other borders like "editor.findMatchBorder" (example in this comment #30793 (comment)) ?

[svipas]

@usernamehw I believe this should assign only to one side, though it can support array in position to apply for more sides.

"editorBracketMatch.border": {
  height: '1px',
  style: 'solid',
  position: ['bottom', 'top'], // array
  color: '#fff'
}

[usernamehw]

So, different size/style/position/color would look like that?

"editorBracketMatch.border": {
  height: ['1px', '2px'],
  style: ['solid', 'dotted'],
  position: ['bottom', 'top'],
  color: ['#fff', '#ddd']
}

[ghost]

@usernamehw No, I see no point to use different border styles and colors for different positions.

[aeschli]

I also would suggest to keep things simple and support a fixed set of border styles with single colour and width.

[timdmackey]

Glad to see this addresses my previous issue! This theme customization will be really welcome.

[kanlukasz]

Maybe it could work with https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions ?

[alexdima]

Let's track in #19534