From a1fd53e54324026d1f472e40f026009561e80154 Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 8 Feb 2025 20:41:04 +0100 Subject: [PATCH] Add fallback styles for Button --- dev/vscode-button/fallback-styles.html | 28 ++++++++++++++++ src/vscode-button/vscode-button.styles.ts | 41 ++++++++++++----------- src/vscode-button/vscode-button.ts | 22 ++++++------ 3 files changed, 61 insertions(+), 30 deletions(-) create mode 100644 dev/vscode-button/fallback-styles.html diff --git a/dev/vscode-button/fallback-styles.html b/dev/vscode-button/fallback-styles.html new file mode 100644 index 000000000..0c599c171 --- /dev/null +++ b/dev/vscode-button/fallback-styles.html @@ -0,0 +1,28 @@ + + + + + + VSCode Elements + + + + + + +
+

Button

+

Secondary

+
+ + diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 464fef393..5136f45e7 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -1,24 +1,27 @@ -import {css, CSSResultGroup} from 'lit'; +import {css, CSSResultGroup, unsafeCSS} from 'lit'; import defaultStyles from '../includes/default.styles.js'; +import {getDefaultFontStack} from '../includes/helpers.js'; + +const defaultFontStack = unsafeCSS(getDefaultFontStack()); const styles: CSSResultGroup = [ defaultStyles, css` :host { - background-color: var(--vscode-button-background); + background-color: var(--vscode-button-background, #0078d4); border-color: var( --vscode-button-border, - var(--vscode-button-background) + var(--vscode-button-background, rgba(255, 255, 255, 0.07)) ); border-style: solid; border-radius: 2px; border-width: 1px; - color: var(--vscode-button-foreground); + color: var(--vscode-button-foreground, #ffffff); cursor: pointer; display: inline-block; - font-family: var(--vscode-font-family); - font-size: var(--vscode-font-size); - font-weight: var(--vscode-font-weight); + font-family: var(--vscode-font-family, ${defaultFontStack}); + font-size: var(--vscode-font-size, 13px); + font-weight: var(--vscode-font-weight, normal); line-height: 22px; overflow: hidden; padding: 1px 13px; @@ -27,11 +30,11 @@ const styles: CSSResultGroup = [ } :host([secondary]) { - color: var(--vscode-button-secondaryForeground); - background-color: var(--vscode-button-secondaryBackground); + color: var(--vscode-button-secondaryForeground, #cccccc); + background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, - var(--vscode-button-secondaryBackground) + var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } @@ -42,19 +45,19 @@ const styles: CSSResultGroup = [ } :host(:hover) { - background-color: var(--vscode-button-hoverBackground); + background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) { - background-color: var(--vscode-button-background); + background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) { - background-color: var(--vscode-button-secondaryHoverBackground); + background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) { - background-color: var(--vscode-button-secondaryBackground); + background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), @@ -63,22 +66,22 @@ const styles: CSSResultGroup = [ } :host(:focus) { - background-color: var(--vscode-button-hoverBackground); - outline: 1px solid var(--vscode-focusBorder); + background-color: var(--vscode-button-hoverBackground, #026ec1); + outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) { - background-color: var(--vscode-button-background); + background-color: var(--vscode-button-background,#0078d4); outline: 0; } :host([secondary]:focus) { - background-color: var(--vscode-button-secondaryHoverBackground); + background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) { - background-color: var(--vscode-button-secondaryBackground); + background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts index 8069671ee..77e67bbb3 100644 --- a/src/vscode-button/vscode-button.ts +++ b/src/vscode-button/vscode-button.ts @@ -13,17 +13,17 @@ import {ifDefined} from 'lit/directives/if-defined.js'; * * @fires vsc-click Dispatched only when button is not in disabled state. * - * @cssprop --vscode-button-background - * @cssprop --vscode-button-foreground - * @cssprop [--vscode-button-border=var(--vscode-button-background)] - * @cssprop --vscode-button-hoverBackground - * @cssprop --vscode-font-family - * @cssprop --vscode-font-size - * @cssprop --vscode-font-weight - * @cssprop --vscode-button-secondaryForeground - * @cssprop --vscode-button-secondaryBackground - * @cssprop --vscode-button-secondaryHoverBackground - * @cssprop --vscode-focusBorder + * @cssprop [--vscode-button-background=#0078d4] + * @cssprop [--vscode-button-foreground=#ffffff] + * @cssprop [--vscode-button-border=var(--vscode-button-background, rgba(255, 255, 255, 0.07))] + * @cssprop [--vscode-button-hoverBackground=#026ec1] + * @cssprop [--vscode-font-family=sans-serif] - A sans-serif font type depends on the host OS. + * @cssprop [--vscode-font-size=13px] + * @cssprop [--vscode-font-weight=normal] + * @cssprop [--vscode-button-secondaryForeground=#cccccc] + * @cssprop [--vscode-button-secondaryBackground=#313131] + * @cssprop [--vscode-button-secondaryHoverBackground=#3c3c3c] + * @cssprop [--vscode-focusBorder=#0078d4] */ @customElement('vscode-button') export class VscodeButton extends VscElement {