Skip to content

Commit 530cd35

Browse files
benderabendera
committed
Add Tree fallback styles
1 parent d75c89f commit 530cd35

4 files changed

Lines changed: 108 additions & 15 deletions

File tree

‎dev/vscode-tree/fallback-styles.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script type="module" src="/dist/main.js"></script>
13+
<script>
14+
const logEvents = (selector, eventType) => {
15+
document.querySelector(selector).addEventListener(eventType, (ev) => {
16+
console.log(ev);
17+
});
18+
};
19+
</script>
20+
</head>
21+
22+
<body style="background-color: #1f1f1f">
23+
<main>
24+
<vscode-tree>
25+
<vscode-tree-item>Home</vscode-tree-item>
26+
<vscode-tree-item>
27+
About
28+
<vscode-tree-item>Overview</vscode-tree-item>
29+
<vscode-tree-item>Administration</vscode-tree-item>
30+
<vscode-tree-item>
31+
Facts
32+
<vscode-tree-item>History</vscode-tree-item>
33+
<vscode-tree-item>Current Statistics</vscode-tree-item>
34+
<vscode-tree-item>Awards</vscode-tree-item>
35+
</vscode-tree-item>
36+
<vscode-tree-item>
37+
Campus Tours
38+
<vscode-tree-item>For Prospective Students</vscode-tree-item>
39+
<vscode-tree-item>For Alumni</vscode-tree-item>
40+
<vscode-tree-item>For Visitors</vscode-tree-item>
41+
</vscode-tree-item>
42+
</vscode-tree-item>
43+
<vscode-tree-item>
44+
Admissions
45+
<vscode-tree-item>Apply</vscode-tree-item>
46+
<vscode-tree-item>
47+
Tuition
48+
<vscode-tree-item>Undergraduate</vscode-tree-item>
49+
<vscode-tree-item>Graduate</vscode-tree-item>
50+
<vscode-tree-item branch open
51+
>Professional Schools</vscode-tree-item
52+
>
53+
</vscode-tree-item>
54+
<vscode-tree-item>Sign Up</vscode-tree-item>
55+
<vscode-tree-item>Visit</vscode-tree-item>
56+
<vscode-tree-item>Photo Tour</vscode-tree-item>
57+
<vscode-tree-item>Connect</vscode-tree-item>
58+
</vscode-tree-item>
59+
<vscode-tree-item>
60+
Academics
61+
<vscode-tree-item>Colleges &amp; Schools</vscode-tree-item>
62+
<vscode-tree-item>Programs of Study</vscode-tree-item>
63+
<vscode-tree-item>Honors Programs</vscode-tree-item>
64+
<vscode-tree-item>Online Courses</vscode-tree-item>
65+
<vscode-tree-item>Course Explorer</vscode-tree-item>
66+
<vscode-tree-item>Register for Classes</vscode-tree-item>
67+
<vscode-tree-item>Academic Calendar</vscode-tree-item>
68+
<vscode-tree-item>Transcripts</vscode-tree-item>
69+
</vscode-tree-item>
70+
</vscode-tree>
71+
</main>
72+
</body>
73+
</html>

‎src/vscode-tree-item/vscode-tree-item.styles.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,18 @@ const styles: CSSResultGroup = [
2828
2929
.wrapper {
3030
align-items: flex-start;
31+
color: var(--vscode-foreground, #cccccc);
3132
display: flex;
32-
font-family: var(--vscode-font-family);
33-
font-size: var(--vscode-font-size);
34-
font-weight: var(--vscode-font-weight);
33+
font-family: var(--vscode-font-family, sans-serif);
34+
font-size: var(--vscode-font-size, 13px);
35+
font-weight: var(--vscode-font-weight, normal);
3536
outline-offset: -1px;
3637
padding-right: 12px;
3738
}
3839
3940
.wrapper:hover {
40-
background-color: var(--vscode-list-hoverBackground);
41-
color: var(--vscode-list-hoverForeground);
41+
background-color: var(--vscode-list-hoverBackground, #2a2d2e);
42+
color: var(--vscode-list-hoverForeground, #cccccc);
4243
}
4344
4445
:host([selected]) .wrapper {
@@ -57,7 +58,7 @@ const styles: CSSResultGroup = [
5758
:host(:focus) .wrapper.active {
5859
outline-color: var(
5960
--vscode-list-focusAndSelectionOutline,
60-
var(--vscode-list-focusOutline)
61+
var(--vscode-list-focusOutline, #0078d4)
6162
);
6263
outline-style: solid;
6364
outline-width: 1px;
@@ -75,7 +76,7 @@ const styles: CSSResultGroup = [
7576
7677
.arrow-container svg {
7778
display: block;
78-
fill: var(--vscode-icon-foreground);
79+
fill: var(--vscode-icon-foreground, #cccccc);
7980
}
8081
8182
.arrow-container.icon-rotated svg {
@@ -109,7 +110,7 @@ const styles: CSSResultGroup = [
109110
}
110111
111112
.children.guide:before {
112-
background-color: var(--vscode-tree-inactiveIndentGuidesStroke);
113+
background-color: var(--vscode-tree-inactiveIndentGuidesStroke, rgba(88, 88, 88, 0.4));
113114
content: '';
114115
display: none;
115116
height: 100%;
@@ -126,7 +127,7 @@ const styles: CSSResultGroup = [
126127
127128
.children.guide.highlighted-guide:before {
128129
display: var(--internal-highlightedIndentGuideDisplay);
129-
background-color: var(--vscode-tree-indentGuidesStroke);
130+
background-color: var(--vscode-tree-indentGuidesStroke, #585858);
130131
}
131132
132133
.content {

‎src/vscode-tree/vscode-tree.styles.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ const styles: CSSResultGroup = [
77
:host {
88
--vsc-tree-item-arrow-display: flex;
99
--internal-selectionBackground: var(
10-
--vscode-list-inactiveSelectionBackground
10+
--vscode-list-inactiveSelectionBackground,
11+
#37373d
12+
);
13+
--internal-selectionForeground: var(--vscode-foreground, #cccccc);
14+
--internal-selectionIconForeground: var(
15+
--vscode-icon-foreground,
16+
#cccccc
1117
);
12-
--internal-selectionForeground: var(--vscode-foreground);
13-
--internal-selectionIconForeground: var(--vscode-icon-foreground);
1418
--internal-defaultIndentGuideDisplay: none;
1519
--internal-highlightedIndentGuideDisplay: block;
1620
@@ -24,13 +28,16 @@ const styles: CSSResultGroup = [
2428
2529
:host(:focus-within) {
2630
--internal-selectionBackground: var(
27-
--vscode-list-activeSelectionBackground
31+
--vscode-list-activeSelectionBackground,
32+
#04395e
2833
);
2934
--internal-selectionForeground: var(
30-
--vscode-list-activeSelectionForeground
35+
--vscode-list-activeSelectionForeground,
36+
#ffffff
3137
);
3238
--internal-selectionIconForeground: var(
33-
--vscode-list-activeSelectionIconForeground
39+
--vscode-list-activeSelectionIconForeground,
40+
#ffffff
3441
);
3542
}
3643

‎src/vscode-tree/vscode-tree.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,18 @@ const listenedKeys: ListenedKey[] = [
5858

5959
/**
6060
* @tag vscode-tree
61+
*
62+
* @cssprop [--vscode-font-family=sans-serif]
63+
* @cssprop [--vscode-font-size=13px]
64+
* @cssprop [--vscode-font-weight=normal]
65+
* @cssprop [--vscode-foreground=#cccccc]
66+
* @cssprop [--vscode-icon-foreground=#cccccc]
67+
* @cssprop [--vscode-list-focusAndSelectionOutline=#0078d4]
68+
* @cssprop [--vscode-list-focusOutline=#0078d4]
69+
* @cssprop [--vscode-list-hoverBackground=#2a2d2e]
70+
* @cssprop [--vscode-list-hoverForeground=#cccccc]
71+
* @cssprop [--vscode-tree-inactiveIndentGuidesStroke=rgba(88, 88, 88, 0.4)]
72+
* @cssprop [--vscode-tree-indentGuidesStroke=#585858]
6173
*/
6274
@customElement('vscode-tree')
6375
export class VscodeTree extends VscElement {

0 commit comments

Comments
 (0)