Skip to content

Commit 85ee24f

Browse files
authored
feat(tree): improve tree theme (#15717)
* feat(tree): improve tree theme * feat(tree): add logic for disabled state
1 parent 563b70d commit 85ee24f

File tree

1 file changed

+33
-10
lines changed

1 file changed

+33
-10
lines changed

projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -62,22 +62,49 @@
6262
}
6363

6464
$theme: digest-schema($tree-schema);
65-
$meta: map.get($theme, '_meta');
6665

6766
@if not($foreground) and $background {
68-
$foreground: text-contrast($background);
67+
$foreground: adaptive-contrast(var(--background));
68+
}
69+
70+
@if not($background-selected) and $background {
71+
$background-selected: hsl(from var(--background) h s calc(l * 0.9));
72+
}
73+
74+
@if not($hover-color) and $background {
75+
$hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1);
76+
}
77+
78+
@if not($hover-selected-color) and $background-selected {
79+
$hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
6980
}
7081

7182
@if not($foreground-selected) and $background-selected {
72-
$foreground-selected: text-contrast($background-selected);
83+
$foreground-selected: adaptive-contrast(var(--background-selected));
84+
}
85+
86+
@if not($background-active) and $background {
87+
$background-active: hsl(from var(--background) h s calc(l * 0.9));
7388
}
7489

7590
@if not($foreground-active) and $background-active {
76-
$foreground-active: text-contrast($background-active);
91+
$foreground-active: adaptive-contrast(var(--background-active));
92+
}
93+
94+
@if not($background-active-selected) and $background-active {
95+
$background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
7796
}
7897

7998
@if not($foreground-active-selected) and $background-active-selected {
80-
$foreground-active-selected: text-contrast($background-active-selected);
99+
$foreground-active-selected: adaptive-contrast(var(--background-active-selected));
100+
}
101+
102+
@if not($background-disabled) and $background {
103+
$background-disabled: color-mix(in hsl, var(--background), transparent 50%);
104+
}
105+
106+
@if not($foreground-disabled) and $background-disabled {
107+
$foreground-disabled: adaptive-contrast(var(--background-disabled));
81108
}
82109

83110
@return extend($theme, (
@@ -98,10 +125,6 @@
98125
border-color: $border-color,
99126
hover-color: $hover-color,
100127
hover-selected-color: $hover-selected-color,
101-
theme: map.get($schema, '_meta', 'theme'),
102-
_meta: map.merge(if($meta, $meta, ()), (
103-
variant: map.get($schema, '_meta', 'theme')
104-
)),
105128
size: $size,
106129
));
107130
}
@@ -112,7 +135,7 @@
112135
@mixin tree($theme) {
113136
@include css-vars($theme);
114137

115-
$variant: map.get($theme, '_meta', 'variant');
138+
$variant: map.get($theme, '_meta', 'theme');
116139
$indigo-theme: $variant == 'indigo';
117140

118141
$node-indent-default: (

0 commit comments

Comments
 (0)