diff --git a/dev/vscode-badge/fallback-styles.html b/dev/vscode-badge/fallback-styles.html
new file mode 100644
index 000000000..7d1efc067
--- /dev/null
+++ b/dev/vscode-badge/fallback-styles.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ VSCode Elements
+
+
+
+
+
+
+
+ 308 Settings Found
+ 6
+ 6
+ 6
+
+
+
diff --git a/src/includes/helpers.ts b/src/includes/helpers.ts
index f8385b9e1..366087d27 100644
--- a/src/includes/helpers.ts
+++ b/src/includes/helpers.ts
@@ -4,3 +4,27 @@ const DEFAULT_FONT_SIZE = 13;
export const INPUT_LINE_HEIGHT_RATIO = DEFAULT_LINE_HEIGHT / DEFAULT_FONT_SIZE;
export const DEFUALT_INPUT_WIDGET_WIDTH = 320;
+
+export function getDefaultFontStack() {
+ if (navigator.userAgent.indexOf("Linux") > -1) {
+ return 'system-ui, "Ubuntu", "Droid Sans", sans-serif';
+ } else if (navigator.userAgent.indexOf("Mac") > -1) {
+ return "-apple-system, BlinkMacSystemFont, sans-serif";
+ } else if (navigator.userAgent.indexOf("Windows") > -1) {
+ return '"Segoe WPC", "Segoe UI", sans-serif';
+ } else {
+ return "sans-serif";
+ }
+}
+
+export function getDefaultEditorFontStack() {
+ if (navigator.userAgent.indexOf("Linux") > -1) {
+ return '"Droid Sans Mono", "monospace", monospace';
+ } else if (navigator.userAgent.indexOf("Mac") > -1) {
+ return 'Menlo, Monaco, "Courier New", monospace';
+ } else if (navigator.userAgent.indexOf("Windows") > -1) {
+ return 'Consolas, "Courier New", monospace';
+ } else {
+ return "monospace";
+ }
+}
diff --git a/src/vscode-badge/vscode-badge.styles.ts b/src/vscode-badge/vscode-badge.styles.ts
index 3936ff991..ac880e2f0 100644
--- a/src/vscode-badge/vscode-badge.styles.ts
+++ b/src/vscode-badge/vscode-badge.styles.ts
@@ -1,17 +1,20 @@
-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-badge-background);
+ background-color: var(--vscode-badge-background, #616161);
border: 1px solid var(--vscode-contrastBorder, transparent);
border-radius: 2px;
box-sizing: border-box;
- color: var(--vscode-badge-foreground);
+ color: var(--vscode-badge-foreground, #f8f8f8);
display: inline-block;
- font-family: var(--vscode-font-family);
+ font-family: var(--vscode-font-family, ${defaultFontStack});
font-size: 11px;
font-weight: 400;
line-height: 14px;
@@ -30,9 +33,9 @@ const styles: CSSResultGroup = [
}
:host([variant='activity-bar-counter']) {
- background-color: var(--vscode-activityBarBadge-background);
+ background-color: var(--vscode-activityBarBadge-background, #0078d4);
border-radius: 20px;
- color: var(--vscode-activityBarBadge-foreground);
+ color: var(--vscode-activityBarBadge-foreground, #ffffff);
font-size: 9px;
font-weight: 600;
line-height: 16px;
@@ -40,9 +43,9 @@ const styles: CSSResultGroup = [
}
:host([variant='tab-header-counter']) {
- background-color: var(--vscode-activityBarBadge-background);
+ background-color: var(--vscode-activityBarBadge-background, #0078d4);
border-radius: 10px;
- color: var(--vscode-activityBarBadge-foreground);
+ color: var(--vscode-activityBarBadge-foreground, #ffffff);
line-height: 10px;
min-height: 16px;
min-width: 16px;
diff --git a/src/vscode-badge/vscode-badge.ts b/src/vscode-badge/vscode-badge.ts
index 5a767ff29..4f264b817 100644
--- a/src/vscode-badge/vscode-badge.ts
+++ b/src/vscode-badge/vscode-badge.ts
@@ -8,11 +8,12 @@ import styles from './vscode-badge.styles.js';
*
* @tag vscode-badge
*
- * @cssprop --vscode-font-family
- * @cssprop --vscode-badge-background - default and counter variant background color
- * @cssprop --vscode-badge-foreground - default and counter variant foreground color
- * @cssprop --vscode-activityBarBadge-background - activity bar variant background color
- * @cssprop --vscode-activityBarBadge-foreground - activity bar variant foreground color
+ * @cssprop [--vscode-font-family=sans-serif] - A sans-serif font type depends on the host OS.
+ * @cssprop [--vscode-contrastBorder=transparent]
+ * @cssprop [--vscode-badge-background=#616161] - default and counter variant background color
+ * @cssprop [--vscode-badge-foreground=#f8f8f8] - default and counter variant foreground color
+ * @cssprop [--vscode-activityBarBadge-background=#0078d4] - activity bar variant background color
+ * @cssprop [--vscode-activityBarBadge-foreground=#ffffff] - activity bar variant foreground color
*/
@customElement('vscode-badge')
export class VscodeBadge extends VscElement {