Skip to content

Commit 189c997

Browse files
nzaytsevd13
nzaytsev
authored and
d13
committed
Improves theme following on webviews
1 parent 3180507 commit 189c997

File tree

20 files changed

+157
-106
lines changed

20 files changed

+157
-106
lines changed

‎src/webviews/apps/commitDetails/commitDetails.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@use '../shared/styles/details-base';
2+
@import '../shared/utils';
23

3-
.vscode-high-contrast,
4-
.vscode-dark {
4+
@include dark-theme {
55
--gl-color-background-counter: #fff;
66
}
77

8-
.vscode-high-contrast-light,
9-
.vscode-light {
8+
@include light-theme {
109
--gl-color-background-counter: #000;
1110
}
1211

‎src/webviews/apps/commitDetails/components/commit-action.css.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,21 @@ export const commitActionStyles = css`
2828
text-decoration: none;
2929
}
3030
31-
:host-context(.vscode-dark) .commit-action:hover {
31+
:host-context(.vscode-dark) .commit-action:hover,
32+
:host-context(.vscode-high-contrast:not(.vscode-high-contrast-light)) .commit-action:hover {
3233
background-color: var(--color-background--lighten-15);
3334
}
34-
:host-context(.vscode-light) .commit-action:hover {
35+
:host-context(.vscode-light) .commit-action:hover,
36+
:host-context(.vscode-high-contrast-light) .commit-action:hover {
3537
background-color: var(--color-background--darken-15);
3638
}
3739
38-
:host-context(.vscode-dark) .commit-action.is-active {
40+
:host-context(.vscode-dark) .commit-action.is-active,
41+
:host-context(.vscode-high-contrast:not(.vscode-high-contrast-light)) .commit-action.is-active {
3942
background-color: var(--color-background--lighten-10);
4043
}
41-
:host-context(.vscode-light) .commit-action.is-active {
44+
:host-context(.vscode-light) .commit-action.is-active,
45+
:host-context(.vscode-high-contrast-light) .commit-action.is-active {
4246
background-color: var(--color-background--darken-10);
4347
}
4448

‎src/webviews/apps/home/home.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
@use '../shared/styles/properties';
22
@use '../shared/styles/theme';
33
@use '../shared/styles/scrollbars';
4+
@import '../shared/utils.scss';
45

5-
.vscode-high-contrast,
6-
.vscode-dark {
6+
@include dark-theme {
77
--popover-bg: var(--color-background--lighten-15);
88
--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
99
}
1010

11-
.vscode-high-contrast-light,
12-
.vscode-light {
11+
@include light-theme {
1312
--popover-bg: var(--color-background--darken-15);
1413
--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
1514
}

‎src/webviews/apps/plus/graph/graph.scss

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../../shared/base';
33
@import '../../shared/codicons';
44
@import '../../shared/glicons';
5+
@import '../../shared/utils';
56
@import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
67

78
@mixin focusStyles() {
@@ -18,14 +19,12 @@ menu-list {
1819
}
1920
}
2021

21-
.vscode-high-contrast,
22-
.vscode-dark {
22+
@include dark-theme {
2323
--popover-bg: var(--color-background--lighten-15);
2424
--titlebar-bg: var(--color-background--lighten-075);
2525
}
2626

27-
.vscode-high-contrast-light,
28-
.vscode-light {
27+
@include light-theme {
2928
--popover-bg: var(--color-background--darken-15);
3029
--titlebar-bg: var(--color-background--darken-075);
3130
}
@@ -120,15 +119,15 @@ menu-list {
120119
--graph-column-scrollbar-thickness: 14px;
121120
}
122121

123-
:root:has(.vscode-dark, .vscode-high-contrast) {
122+
@include dark-theme($selectorPrefix: ":root:has(", $selectorPostfix: ")") {
124123
--graph-theme-opacity-factor: '1';
125124

126125
--color-graph-actionbar-background: color-mix(in srgb, #fff 5%, var(--color-background));
127126
--color-graph-background: color-mix(in srgb, #fff 5%, var(--color-background));
128127
--color-graph-background2: color-mix(in srgb, #fff 10%, var(--color-background));
129128
}
130129

131-
:root:has(.vscode-light, .vscode-high-contrast-light) {
130+
@include light-theme($selectorPrefix: ":root:has(", $selectorPostfix: ")") {
132131
--graph-theme-opacity-factor: '0.5';
133132

134133
--color-graph-actionbar-background: color-mix(in srgb, #000 5%, var(--color-background));

‎src/webviews/apps/plus/patchDetails/patchDetails.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../../shared/styles/details-base';
2+
@import '../../shared/utils';
23

34
body {
45
--gk-menu-border-color: var(--vscode-menu-border);
@@ -48,19 +49,19 @@ gk-menu-item {
4849
color: var(--vscode-foreground);
4950
text-decoration: none;
5051

51-
.vscode-dark & {
52+
@include dark-theme($selectorPostfix: " &") {
5253
background-color: var(--color-background--lighten-15);
5354
}
54-
.vscode-light & {
55+
@include light-theme($selectorPostfix: " &") {
5556
background-color: var(--color-background--darken-15);
5657
}
5758
}
5859

5960
&.is-active {
60-
.vscode-dark & {
61+
@include dark-theme($selectorPostfix: " &") {
6162
background-color: var(--color-background--lighten-10);
6263
}
63-
.vscode-light & {
64+
@include light-theme($selectorPostfix: " &") {
6465
background-color: var(--color-background--darken-10);
6566
}
6667
}

‎src/webviews/apps/plus/shared/components/home-account-content.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ export class GLHomeAccountContent extends LitElement {
3737
:host {
3838
display: block;
3939
margin-bottom: 1.3rem;
40+
--gl-accordion-content-background: var(--vscode-sideBar-background);
41+
--gl-accordion-header-background: var(--vscode-sideBarSectionHeader-background);
4042
}
4143
4244
:host > * {
@@ -47,6 +49,10 @@ export class GLHomeAccountContent extends LitElement {
4749
margin-bottom: 1.3rem;
4850
}
4951
52+
gl-accordion {
53+
border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
54+
}
55+
5056
.header {
5157
display: flex;
5258
align-items: center;

‎src/webviews/apps/plus/timeline/chart.scss

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../shared/utils';
2+
13
.bb {
24
svg {
35
// font-size: 12px;
@@ -14,11 +16,11 @@
1416
}
1517

1618
path.domain {
17-
.vscode-dark & {
19+
@include dark-theme($selectorPostfix: " &") {
1820
stroke: var(--color-background--lighten-15);
1921
}
2022

21-
.vscode-light & {
23+
@include light-theme($selectorPostfix: " &") {
2224
stroke: var(--color-background--darken-15);
2325
}
2426
}
@@ -93,15 +95,15 @@
9395
pointer-events: none;
9496

9597
line {
96-
.vscode-dark & {
98+
@include dark-theme($selectorPostfix: " &") {
9799
stroke: var(--color-background--lighten-05);
98100

99101
&.bb-ygrid {
100102
stroke: var(--color-background--lighten-05);
101103
}
102104
}
103105

104-
.vscode-light & {
106+
@include light-theme($selectorPostfix: " &") {
105107
stroke: var(--color-background--darken-05);
106108

107109
&.bb-ygrid {
@@ -126,10 +128,10 @@
126128

127129
.bb-xgrid-focus {
128130
line {
129-
.vscode-dark & {
131+
@include dark-theme($selectorPostfix: " &") {
130132
stroke: var(--color-background--lighten-30);
131133
}
132-
.vscode-light & {
134+
@include light-theme($selectorPostfix: " &") {
133135
stroke: var(--color-background--darken-30);
134136
}
135137
}
@@ -173,11 +175,11 @@
173175
// .bb-selected-circle {
174176
// stroke-width: 2px;
175177

176-
// .vscode-dark & {
178+
// @include dark-theme($selectorPostfix: " &") {
177179
// fill: rgba(255, 255, 255, 0.2);
178180
// }
179181

180-
// .vscode-light & {
182+
// @include light-theme($selectorPostfix: " &") {
181183
// fill: rgba(0, 0, 0, 0.1);
182184
// }
183185
// }
@@ -233,12 +235,12 @@
233235

234236
/*-- Zoom region --*/
235237
.bb-zoom-brush {
236-
.vscode-dark & {
238+
@include dark-theme($selectorPostfix: " &") {
237239
fill: white;
238240
fill-opacity: 0.2;
239241
}
240242

241-
.vscode-light & {
243+
@include light-theme($selectorPostfix: " &") {
242244
fill: black;
243245
fill-opacity: 0.1;
244246
}

‎src/webviews/apps/plus/timeline/timeline.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
@use '../../shared/styles/properties';
22
@use '../../shared/styles/theme';
3+
@import '../../shared/utils';
34

45
* {
56
box-sizing: border-box;
67
}
78

8-
.vscode-high-contrast,
9-
.vscode-dark {
9+
@include dark-theme {
1010
--progress-bar-color: var(--color-background--lighten-15);
1111
--card-background: var(--color-background--lighten-075);
1212
--card-hover-background: var(--color-background--lighten-10);
1313
--popover-bg: var(--color-background--lighten-15);
1414
}
1515

16-
.vscode-high-contrast-light,
17-
.vscode-light {
16+
@include light-theme {
1817
--progress-bar-color: var(--color-background--darken-15);
1918
--card-background: var(--color-background--darken-075);
2019
--card-hover-background: var(--color-background--darken-10);

‎src/webviews/apps/rebase/rebase.scss

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ body {
88
overflow: overlay;
99
}
1010

11-
.vscode-dark {
11+
@include dark-theme {
1212
--avatar-bg: var(--color-background--lighten-30);
1313
}
1414
.vscode-light {
1515
--avatar-bg: var(--color-background--darken-30);
1616
}
17+
.vscode-high-contrast-light {
18+
--avatar-bg: var(--color-foreground--50);
19+
}
1720

1821
.container {
1922
display: grid;
@@ -163,10 +166,10 @@ $entry-padding: 7px;
163166
top: 0;
164167
transform: translateX(-50%);
165168

166-
.vscode-dark & {
169+
@include dark-theme($selectorPostfix: " &") {
167170
border-right-color: var(--color-background--lighten-15);
168171
}
169-
.vscode-light & {
172+
@include light-theme($selectorPostfix: " &") {
170173
border-right-color: var(--color-background--darken-15);
171174
}
172175
}
@@ -313,12 +316,12 @@ $entry-padding: 7px;
313316
.entry-blocked {
314317
width: 100%;
315318

316-
.vscode-dark & {
319+
@include dark-theme($selectorPostfix: " &") {
317320
background: rgba(255, 255, 255, 0.1);
318321
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
319322
}
320323

321-
.vscode-light & {
324+
@include light-theme($selectorPostfix: " &") {
322325
background: rgba(0, 0, 0, 0.1);
323326
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
324327
}
@@ -342,11 +345,11 @@ $entry-padding: 7px;
342345
margin-left: 10px;
343346
cursor: ns-resize;
344347

345-
.vscode-dark & {
348+
@include dark-theme($selectorPostfix: " &") {
346349
border-color: var(--color-foreground--75);
347350
}
348351

349-
.vscode-light & {
352+
@include light-theme($selectorPostfix: " &") {
350353
border-color: var(--color-foreground--75);
351354
}
352355
}
@@ -416,7 +419,7 @@ $entry-padding: 7px;
416419
margin: 0 10px;
417420
opacity: 0.5;
418421

419-
.vscode-light & {
422+
@include light-theme($selectorPostfix: " &") {
420423
opacity: 0.6;
421424
}
422425

@@ -475,8 +478,18 @@ $entry-padding: 7px;
475478
display: block;
476479
flex: none;
477480
border-radius: 1em;
478-
background-color: var(--color-background--lighten-075);
479-
border: 1px solid var(--color-background--lighten-075);
481+
.vscode-dark & {
482+
background-color: var(--color-background--lighten-075);
483+
border: 1px solid var(--color-background--lighten-075);
484+
}
485+
.vscode-light & {
486+
background-color: var(--color-background--darken-075);
487+
border: 1px solid var(--color-background--darken-075);
488+
}
489+
.vscode-high-contrast & {
490+
background-color: none;
491+
border: 1px solid var(--color-foreground);
492+
}
480493

481494
&::before {
482495
content: '';
@@ -487,6 +500,9 @@ $entry-padding: 7px;
487500
height: 1.2em;
488501
border-radius: 100%;
489502
background-color: var(--color-button-foreground);
503+
.vscode-high-contrast-light :not(:checked) ~ & {
504+
background-color: var(--color-foreground);
505+
}
490506

491507
:checked ~ & {
492508
transform: translateX(1em);

0 commit comments

Comments
 (0)