elements icon indicating copy to clipboard operation
elements copied to clipboard

vscode-tabs - CSS variables update

Open wfabr opened this issue 4 months ago • 0 comments

Enhancement: Allow styling of default VSCode-Tabs (not panel type) using theme variables.

Current styles (non-specific to element state)

https://github.com/vscode-elements/elements/blob/main/src/vscode-tab-header/vscode-tab-header.styles.ts#L43

    .wrapper {
      color: var(--vscode-foreground, #cccccc);
    }

https://github.com/vscode-elements/elements/blob/main/src/vscode-tab-header/vscode-tab-header.styles.ts#L26

    :host([active]) .wrapper {
      border-bottom-color: var(--vscode-panelTitle-activeForeground, #cccccc);
      color: var(--vscode-panelTitle-activeForeground, #cccccc);
    }

proposed change (dedicated CSS variables)

    .wrapper {
      color: var(--vscode-panelTitle-inactiveForeground, #9d9d9d);
    }

    :host([active]) .wrapper {
      border-bottom-color: var(--vscode-panelTitle-activeBorder, #cccccc);
      color: var(--vscode-panelTitle-activeForeground, #cccccc);
    }

wfabr avatar Sep 16 '25 12:09 wfabr