Skip to content

Commit a04f481

Browse files
didimmovadidimmova
authored
feat(list): improve list theme (#15654)
1 parent ed6244d commit a04f481

File tree

1 file changed

+40
-64
lines changed

1 file changed

+40
-64
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 40 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -94,160 +94,140 @@
9494
}
9595

9696
$theme: digest-schema($list-schema);
97-
$meta: map.get($theme, '_meta');
97+
$variant: map.get($theme, '_meta', 'theme');
9898

9999
@if not($header-background) and $background {
100-
$header-background: $background;
100+
$header-background: var(--background);
101101
}
102102

103103
@if not($header-background) and $item-background {
104-
$header-background: $item-background;
104+
$header-background: var(--item-background);
105105
}
106106

107107
@if not($item-background) and $background {
108-
$item-background: $background;
108+
$item-background: var(--background);
109109
}
110110

111111
@if not($background) and $item-background {
112-
$background: $item-background;
112+
$background: var(--item-background);
113113
}
114114

115115
@if not($item-background-hover) and $item-background {
116-
@if meta.type-of($item-background) == 'color' {
117-
@if luminance($item-background) < .5 {
118-
$item-background-hover: color.scale($item-background, $lightness: 8%);
119-
} @else {
120-
$item-background-hover: color.scale($item-background, $lightness: -8%);
121-
}
122-
}
116+
$item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
123117
}
124118

125119
@if not($item-background-active) and $item-background {
126-
@if meta.type-of($item-background) == 'color' {
127-
@if luminance($item-background) < .5 {
128-
$item-background-active: color.scale($item-background, $lightness: 8%);
129-
} @else {
130-
$item-background-active: color.scale($item-background, $lightness: -8%);
131-
}
132-
}
120+
$item-background-active: hsl(from var(--item-background) h s calc(l * 0.9));
133121
}
134122

135123
@if not($item-background-selected) and $item-background {
136-
@if meta.type-of($item-background) == 'color' {
137-
@if luminance($item-background) < .5 {
138-
$item-background-selected: color.scale($item-background, $lightness: 8%);
139-
} @else {
140-
$item-background-selected: color.scale($item-background, $lightness: -8%);
141-
}
142-
}
124+
$item-background-selected: hsl(from var(--item-background) h s calc(l * 0.9));
143125
}
144126

145127
@if not($header-text-color) and $header-background {
146-
$header-text-color: text-contrast($header-background);
128+
$header-text-color: adaptive-contrast(var(--header-background));
147129
}
148130

149131
@if not($item-text-color) and $item-background {
150-
$item-text-color: text-contrast($item-background);
132+
$item-text-color: adaptive-contrast(var(--item-background));
151133
}
152134

153135
@if not($item-title-color) and $item-background {
154-
$item-title-color: text-contrast($item-background);
136+
$item-title-color: adaptive-contrast(var(--item-background));
155137
}
156138

157139
@if not($item-action-color) and $item-background {
158-
$item-action-color: text-contrast($item-background);
140+
$item-action-color: adaptive-contrast(var(--item-background));
159141
}
160142

161143
@if not($item-thumbnail-color) and $item-background {
162-
$item-thumbnail-color: text-contrast($item-background);
144+
$item-thumbnail-color: adaptive-contrast(var(--item-background));
163145
}
164146

165147
@if not($item-subtitle-color) and $item-background {
166-
@if meta.type-of($item-background) == 'color' {
167-
$item-subtitle-color: rgba(text-contrast($item-background), .74);
168-
}
148+
$item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .74);
169149
}
170150

171151
@if not($item-subtitle-color) and $item-text-color {
172-
$item-subtitle-color: $item-text-color;
152+
$item-subtitle-color: var(--item-text-color);
173153
}
174154

175155
@if not($item-text-color-hover) and $item-background-hover {
176-
$item-text-color-hover: text-contrast($item-background-hover);
156+
$item-text-color-hover: adaptive-contrast(var(--item-background-hover));
177157
}
178158

179159
@if not($item-title-color-hover) and $item-background-hover {
180-
$item-title-color-hover: text-contrast($item-background-hover);
160+
$item-title-color-hover: adaptive-contrast(var(--item-background-hover));
181161
}
182162

183163
@if not($item-action-color-hover) and $item-background-hover {
184-
$item-action-color-hover: text-contrast($item-background-hover);
164+
$item-action-color-hover: adaptive-contrast(var(--item-background-hover));
185165
}
186166

187167
@if not($item-thumbnail-color-hover) and $item-background-hover {
188-
$item-thumbnail-color-hover: text-contrast($item-background-hover);
168+
$item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover));
189169
}
190170

191171
@if not($item-subtitle-color-hover) and $item-background-hover {
192-
@if meta.type-of($item-background-hover) == 'color' {
193-
$item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
194-
}
172+
$item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / .74);
195173
}
196174

197175
@if not($item-subtitle-color-hover) and $item-text-color-hover {
198-
$item-subtitle-color-hover: $item-text-color-hover;
176+
$item-subtitle-color-hover: var(--item-text-color-hover);
199177
}
200178

201179
@if not($item-text-color-active) and $item-background-active {
202-
$item-text-color-active: text-contrast($item-background-active);
180+
$item-text-color-active: adaptive-contrast(var(--item-background-active));
203181
}
204182

205183
@if not($item-text-color-selected) and $item-background-selected {
206-
$item-text-color-selected: text-contrast($item-background-selected);
184+
$item-text-color-selected: adaptive-contrast(var(--item-background-selected));
207185
}
208186

209187
@if not($item-title-color-active) and $item-background-active {
210-
$item-title-color-active: text-contrast($item-background-active);
188+
$item-title-color-active: adaptive-contrast(var(--item-background-active));
211189
}
212190

213191
@if not($item-title-color-selected) and $item-background-selected {
214-
$item-title-color-selected: text-contrast($item-background-selected);
192+
$item-title-color-selected: adaptive-contrast(var(--item-background-selected));
215193
}
216194

217195
@if not($item-action-color-active) and $item-background-active {
218-
$item-action-color-active: text-contrast($item-background-active);
196+
$item-action-color-active: adaptive-contrast(var(--item-background-active));
219197
}
220198

221199
@if not($item-action-color-selected) and $item-background-selected {
222-
$item-action-color-selected: text-contrast($item-background-selected);
200+
$item-action-color-selected: adaptive-contrast(var(--item-background-selected));
223201
}
224202

225203
@if not($item-thumbnail-color-active) and $item-background-active {
226-
$item-thumbnail-color-active: text-contrast($item-background-active);
204+
$item-thumbnail-color-active: adaptive-contrast(var(--item-background-active));
227205
}
228206

229207
@if not($item-thumbnail-color-selected) and $item-background-selected {
230-
$item-thumbnail-color-selected: text-contrast($item-background-selected);
208+
$item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected));
231209
}
232210

233211
@if not($item-subtitle-color-active) and $item-background-active {
234-
@if meta.type-of($item-background-active) == 'color' {
235-
$item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
236-
}
212+
$item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / .74);
237213
}
238214

239215
@if not($item-subtitle-color-selected) and $item-background-selected {
240-
@if meta.type-of($item-background-selected) == 'color' {
241-
$item-subtitle-color-selected: rgba(text-contrast($item-background-selected), .74);
242-
}
216+
$item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / .74);
243217
}
244218

245219
@if not($item-subtitle-color-active) and $item-text-color-active {
246-
$item-subtitle-color-active: $item-text-color-active;
220+
$item-subtitle-color-active: var(--item-text-color-active);
247221
}
248222

249223
@if not($item-subtitle-color-selected) and $item-text-color-selected {
250-
$item-subtitle-color-selected: $item-text-color-selected;
224+
$item-subtitle-color-selected: var(--item-text-color-selected);
225+
}
226+
227+
@if $variant == 'fluent' or $variant == 'bootstrap'{
228+
@if not($border-color) and $item-background {
229+
$border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .15);
230+
}
251231
}
252232

253233
@return extend($theme, (
@@ -283,10 +263,6 @@
283263
item-thumbnail-color-selected: $item-thumbnail-color-selected,
284264
border-color: $border-color,
285265
border-width: $border-width,
286-
theme: map.get($schema, '_meta', 'theme'),
287-
_meta: map.merge(if($meta, $meta, ()), (
288-
variant: map.get($schema, '_meta', 'theme')
289-
)),
290266
));
291267
}
292268

@@ -296,7 +272,7 @@
296272
@mixin list($theme) {
297273
@include css-vars($theme);
298274

299-
$variant: map.get($theme, '_meta', 'variant');
275+
$variant: map.get($theme, '_meta', 'theme');
300276
$bootstrap-theme: $variant == 'bootstrap';
301277

302278
$theme-padding-block-l: map.get((

0 commit comments

Comments
 (0)