Skip to content

Commit 66c061e

Browse files
desig9steinsimeonoff
desig9stein
and
simeonoff
authored
fix(tree): fix disabled colors (#949)
Closes #946 --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent ae92f78 commit 66c061e

File tree

5 files changed

+82
-62
lines changed

5 files changed

+82
-62
lines changed

‎src/components/tree/themes/light/tree-item.base.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
display: flex;
88
flex-direction: column;
99
font-family: inherit;
10-
10+
1111
igc-circular-progress {
1212
--diameter: #{sizable(rem(18px), rem(20px), rem(24px))};
1313
}
@@ -34,10 +34,13 @@
3434
align-items: center;
3535
position: relative;
3636
padding: 0 pad(12px, 16px, 24px);
37+
background: inherit;
38+
color: inherit;
3739

3840
&::after {
3941
content: '';
4042
position: absolute;
43+
background: transparent;
4144
top: 0;
4245
left: 0;
4346
width: 100%;
@@ -94,5 +97,7 @@
9497
}
9598

9699
:host([disabled]) {
97-
pointer-events: none;
100+
[part~='wrapper'] {
101+
pointer-events: none;
102+
}
98103
}

‎src/components/tree/themes/light/tree-item.bootstrap.scss‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@ $theme: $bootstrap;
66

77
:host {
88
@include css-vars-from-theme($theme, 'ig-tree');
9+
10+
background: var(--node-disabled-background, var-get($theme, 'background'));
11+
color: var(--node-disabled-foreground, var-get($theme, 'foreground'));
912
}
1013

1114
[part~='wrapper'] {
1215
min-height: var-get($theme, 'size');
13-
background: var-get($theme, 'background');
14-
color: var-get($theme, 'foreground');
15-
16-
&::after {
17-
background: transparent;
18-
}
1916

2017
&:hover {
2118
&::after {
@@ -28,23 +25,29 @@ $theme: $bootstrap;
2825
max-height: var-get($theme, 'size');
2926
}
3027

31-
[part~='active'] {
32-
background: var-get($theme, 'background-active');
33-
color: var-get($theme, 'foreground-active');
28+
:host(:not([disabled])[active]) {
29+
background: var(--node-disabled-background, var-get($theme, 'background-active'));
30+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active'));
3431
}
3532

36-
[part~='selected'] {
37-
background: var-get($theme, 'background-selected');
33+
:host(:not([disabled])[selected]) {
34+
background:var-get($theme, 'background-selected');
3835
color: var-get($theme, 'foreground-selected');
3936
}
4037

41-
[part~='selected'][part~='focused'][part~='active'],
42-
[part~='selected'][part~='focused'],
43-
[part~='selected'][part~='active'] {
38+
:host(:not([disabled])[selected][active]) {
4439
background: var-get($theme, 'background-active-selected');
4540
color: var-get($theme, 'foreground-active-selected');
4641
}
4742

43+
:host(:not([disabled])[selected]),
44+
:host(:not([disabled])[selected][active]) {
45+
[part~='focused'] {
46+
background: var-get($theme, 'background-active-selected');
47+
color: var-get($theme, 'foreground-active-selected');
48+
}
49+
}
50+
4851
[part~='select'] {
4952
margin-inline-end: rem(8px);
5053
}
@@ -54,7 +57,7 @@ $theme: $bootstrap;
5457
}
5558

5659
:host([disabled]) {
57-
[part~='label'] {
60+
[part~='wrapper'] {
5861
color: var-get($theme, 'foreground-disabled');
5962
background: var-get($theme, 'background-disabled');
6063
}

‎src/components/tree/themes/light/tree-item.fluent.scss‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,14 @@ $theme: $fluent;
66

77
:host {
88
@include css-vars-from-theme($theme, 'ig-tree');
9+
10+
background: var(--node-disabled-background, var-get($theme, 'background'));
11+
color: var(--node-disabled-foreground, var-get($theme, 'foreground'));
12+
913
}
1014

1115
[part~='wrapper'] {
1216
min-height: var-get($theme, 'size');
13-
background: var-get($theme, 'background');
14-
color: var-get($theme, 'foreground');
15-
16-
&::after {
17-
background: transparent;
18-
}
1917

2018
&:hover {
2119
&::after {
@@ -28,21 +26,27 @@ $theme: $fluent;
2826
max-height: var-get($theme, 'size');
2927
}
3028

31-
[part~='active'] {
32-
background: var-get($theme, 'background-active');
33-
color: var-get($theme, 'foreground-active');
29+
:host(:not([disabled])[active]) {
30+
background: var(--node-disabled-background, var-get($theme, 'background-active'));
31+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active'));
3432
}
3533

36-
[part~='selected'] {
37-
background: var-get($theme, 'background-selected');
38-
color: var-get($theme, 'foreground-selected');
34+
:host(:not([disabled])[selected]) {
35+
background: var(--node-disabled-background, var-get($theme, 'background-selected'));
36+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-selected'));
3937
}
4038

41-
[part~='selected'][part~='focused'][part~='active'],
42-
[part~='selected'][part~='focused'],
43-
[part~='selected'][part~='active'] {
44-
background: var-get($theme, 'background-active-selected');
45-
color: var-get($theme, 'foreground-active-selected');
39+
:host(:not([disabled])[selected][active]) {
40+
background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
41+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
42+
}
43+
44+
:host(:not([disabled])[selected]),
45+
:host(:not([disabled])[selected][active]) {
46+
[part~='focused'] {
47+
background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
48+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
49+
}
4650
}
4751

4852
[part~='select'] {
@@ -54,8 +58,9 @@ $theme: $fluent;
5458
}
5559

5660
:host([disabled]) {
57-
[part~='label'] {
58-
color: var-get($theme, 'foreground-disabled');
59-
background: var-get($theme, 'background-disabled');
60-
}
61+
--node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
62+
--node-disabled-background: #{var-get($theme, 'background-disabled')};
63+
64+
color: var(--node-disabled-foreground);
65+
background: var(--node-disabled-background);
6166
}

‎src/components/tree/themes/light/tree-item.indigo.scss‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,14 @@ $theme: $indigo;
66

77
:host {
88
@include css-vars-from-theme($theme, 'ig-tree');
9+
10+
background: var(--node-disabled-background, var-get($theme, 'background'));
11+
color: var(--node-disabled-foreground, var-get($theme, 'foreground'));
12+
913
}
1014

1115
[part~='wrapper'] {
1216
min-height: var-get($theme, 'size');
13-
background: var-get($theme, 'background');
14-
color: var-get($theme, 'foreground');
15-
16-
&::after {
17-
background: transparent;
18-
}
1917

2018
&:hover {
2119
&::after {
@@ -29,7 +27,7 @@ $theme: $indigo;
2927
max-height: var-get($theme, 'size');
3028
}
3129

32-
[part~='active'] {
30+
:host(:not([disabled])[active]) {
3331
background: var-get($theme, 'background-active');
3432
color: var-get($theme, 'foreground-active');
3533

@@ -38,16 +36,28 @@ $theme: $indigo;
3836
}
3937
}
4038

41-
[part~='selected'] {
39+
[part~='active'] {
40+
&:hover {
41+
color: var-get($theme, 'foreground-active');
42+
}
43+
}
44+
45+
:host(:not([disabled])[selected]) {
4246
background: var-get($theme, 'background-selected');
4347
color: var-get($theme, 'foreground-selected');
4448
}
4549

46-
[part~='selected'][part~='focused'][part~='active'],
47-
[part~='selected'][part~='focused'],
48-
[part~='selected'][part~='active'] {
49-
background: var-get($theme, 'background-active-selected');
50-
color: var-get($theme, 'foreground-active-selected');
50+
:host(:not([disabled])[selected][active]) {
51+
background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
52+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
53+
}
54+
55+
:host(:not([disabled])[selected]),
56+
:host(:not([disabled])[selected][active]) {
57+
[part~='focused'] {
58+
background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
59+
color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
60+
}
5161
}
5262

5363
[part~='select'] {
@@ -59,8 +69,10 @@ $theme: $indigo;
5969
}
6070

6171
:host([disabled]) {
62-
[part~='label'] {
63-
color: var-get($theme, 'foreground-disabled');
64-
background: var-get($theme, 'background-disabled');
65-
}
72+
--node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
73+
--node-disabled-background: #{var-get($theme, 'background-disabled')};
74+
75+
color: var(--node-disabled-foreground);
76+
background: var(--node-disabled-background);
6677
}
78+

‎src/components/tree/themes/light/tree-item.material.scss‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@ $theme: $material;
1010

1111
[part~='wrapper'] {
1212
min-height: var-get($theme, 'size');
13-
background: var-get($theme, 'background');
14-
color: var-get($theme, 'foreground');
15-
16-
&::after {
17-
background: transparent;
18-
}
1913

2014
&:hover {
2115
&::after {
@@ -50,8 +44,9 @@ $theme: $material;
5044
}
5145

5246
:host([disabled]) {
53-
[part~='label'] {
47+
[part~='wrapper'] {
5448
color: var-get($theme, 'foreground-disabled');
5549
background: var-get($theme, 'background-disabled');
5650
}
5751
}
52+

0 commit comments

Comments
 (0)