Skip to content

Commit f83cc06

Browse files
adrianptrvadrianptrv
authored
fix(themes): update component properties to use 'elevation' variables instead of 'shadow' (#16455)
1 parent 7141760 commit f83cc06

File tree

21 files changed

+78
-59
lines changed

21 files changed

+78
-59
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@types/source-map": "0.5.2",
7676
"express": "^5.1.0",
7777
"fflate": "^0.8.1",
78-
"igniteui-theming": "^22.0.0",
78+
"igniteui-theming": "^23.0.0",
7979
"igniteui-trial-watermark": "^3.1.0",
8080
"lodash-es": "^4.17.21",
8181
"rxjs": "^7.8.2",

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.1.0",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^22.0.0",
76+
"igniteui-theming": "^23.0.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
color: var-get($theme, 'text-color');
2525
background: var-get($theme, 'background-color');
2626
border-radius: calc(var(--size) / 2);
27-
box-shadow: var-get($theme, 'shadow');
27+
box-shadow: var-get($theme, 'elevation');
2828
overflow: hidden;
2929

3030
igx-icon {

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@
4343
%igx-bottom-nav-menu--top {
4444
inset-block-start: 0;
4545
inset-block-end: inherit;
46-
box-shadow: var-get($theme, 'shadow');
46+
box-shadow: var-get($theme, 'elevation');
4747
}
4848

4949
%igx-bottom-nav-menu--bottom {
5050
inset-block-start: inherit;
5151
inset-block-end: 0;
52-
box-shadow: var-get($theme, 'shadow');
52+
box-shadow: var-get($theme, 'elevation');
5353
}
5454

5555
%igx-bottom-nav-menu-item {

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
%igx-group-display {
3838
display: flex;
39-
box-shadow: var-get($theme, 'shadow');
39+
box-shadow: var-get($theme, 'elevation');
4040
border-radius: var-get($theme, 'border-radius');
4141

4242
button {
@@ -269,6 +269,7 @@
269269
color: var-get($theme, 'item-focused-text-color');
270270
background: var-get($theme, 'item-focused-background');
271271
border-color: var-get($theme, 'item-focused-border-color');
272+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
272273
z-index: 2;
273274

274275
igx-icon {

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193

194194
$contained-shadow: map.get(
195195
(
196-
'material': var-get($contained-theme, 'resting-shadow'),
196+
'material': var-get($contained-theme, 'resting-elevation'),
197197
'fluent': none,
198198
'bootstrap': none,
199199
'indigo': none,
@@ -203,7 +203,7 @@
203203

204204
$contained-shadow--hover: map.get(
205205
(
206-
'material': var-get($contained-theme, 'hover-shadow'),
206+
'material': var-get($contained-theme, 'hover-elevation'),
207207
'fluent': none,
208208
'bootstrap': none,
209209
'indigo': none,
@@ -213,8 +213,8 @@
213213

214214
$contained-shadow--focus: map.get(
215215
(
216-
'material': var-get($contained-theme, 'focus-shadow'),
217-
'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
216+
'material': var-get($contained-theme, 'focus-elevation'),
217+
'fluent': none,
218218
'bootstrap': 0 0 0 rem(4px)
219219
var-get($contained-theme, 'shadow-color'),
220220
'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -224,8 +224,8 @@
224224

225225
$contained-shadow--active: map.get(
226226
(
227-
'material': var-get($contained-theme, 'active-shadow'),
228-
'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
227+
'material': var-get($contained-theme, 'active-elevation'),
228+
'fluent': none,
229229
'bootstrap': 0 0 0 rem(4px)
230230
var-get($contained-theme, 'shadow-color'),
231231
'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -235,7 +235,7 @@
235235

236236
$fab-shadow: map.get(
237237
(
238-
'material': var-get($fab-theme, 'resting-shadow'),
238+
'material': var-get($fab-theme, 'resting-elevation'),
239239
'fluent': none,
240240
'bootstrap': none,
241241
'indigo': none,
@@ -245,7 +245,7 @@
245245

246246
$fab-shadow--hover: map.get(
247247
(
248-
'material': var-get($fab-theme, 'hover-shadow'),
248+
'material': var-get($fab-theme, 'hover-elevation'),
249249
'fluent': none,
250250
'bootstrap': none,
251251
'indigo': none,
@@ -255,8 +255,8 @@
255255

256256
$fab-shadow--focus: map.get(
257257
(
258-
'material': var-get($fab-theme, 'focus-shadow'),
259-
'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
258+
'material': var-get($fab-theme, 'focus-elevation'),
259+
'fluent': none,
260260
'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
261261
'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
262262
),
@@ -265,8 +265,8 @@
265265

266266
$fab-shadow--active: map.get(
267267
(
268-
'material': var-get($fab-theme, 'active-shadow'),
269-
'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
268+
'material': var-get($fab-theme, 'active-elevation'),
269+
'fluent': none,
270270
'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
271271
'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
272272
),
@@ -573,7 +573,10 @@
573573
background: var-get($contained-theme, 'background');
574574
border-color: var-get($contained-theme, 'border-color');
575575
border-radius: var-get($contained-theme, 'border-radius');
576-
box-shadow: var-get($contained-theme, 'resting-shadow');
576+
577+
@if $variant == 'material' {
578+
box-shadow: var-get($contained-theme, 'resting-elevation');
579+
}
577580

578581
igx-icon {
579582
color: var-get($contained-theme, 'icon-color');
@@ -583,7 +586,10 @@
583586
color: var-get($contained-theme, 'hover-foreground');
584587
background: var-get($contained-theme, 'hover-background');
585588
border-color: var-get($contained-theme, 'hover-border-color');
586-
box-shadow: var-get($contained-theme, 'hover-shadow');
589+
590+
@if $variant == 'material' {
591+
box-shadow: var-get($contained-theme, 'hover-elevation');
592+
}
587593

588594
igx-icon {
589595
color: var-get($contained-theme, 'icon-color-hover');
@@ -594,7 +600,10 @@
594600
color: var-get($contained-theme, 'active-foreground');
595601
background: var-get($contained-theme, 'active-background');
596602
border-color: var-get($contained-theme, 'active-border-color');
597-
box-shadow: var-get($contained-theme, 'active-shadow');
603+
604+
@if $variant == 'material' {
605+
box-shadow: var-get($contained-theme, 'active-elevation');
606+
}
598607

599608
igx-icon {
600609
color: var-get($contained-theme, 'active-foreground');
@@ -627,7 +636,7 @@
627636
}
628637

629638
@if $variant == 'material' {
630-
box-shadow: var-get($contained-theme, 'focus-shadow');
639+
box-shadow: var-get($contained-theme, 'focus-elevation');
631640
} @else {
632641
box-shadow: $contained-shadow--active;
633642
}
@@ -652,7 +661,7 @@
652661
}
653662

654663
@if $variant == 'material' {
655-
box-shadow: var-get($contained-theme, 'focus-shadow');
664+
box-shadow: var-get($contained-theme, 'focus-elevation');
656665
}
657666
}
658667

@@ -713,7 +722,10 @@
713722
background: var-get($fab-theme, 'background');
714723
border-color: var-get($fab-theme, 'border-color');
715724
border-radius: var-get($fab-theme, 'border-radius');
716-
box-shadow: var-get($fab-theme, 'resting-shadow');
725+
726+
@if $variant == 'material' {
727+
box-shadow: var-get($fab-theme, 'resting-elevation');
728+
}
717729

718730
igx-icon {
719731
color: var-get($fab-theme, 'icon-color');
@@ -723,7 +735,10 @@
723735
color: var-get($fab-theme, 'hover-foreground');
724736
background: var-get($fab-theme, 'hover-background');
725737
border-color: var-get($fab-theme, 'hover-border-color');
726-
box-shadow: var-get($fab-theme, 'hover-shadow');
738+
739+
@if $variant == 'material' {
740+
box-shadow: var-get($fab-theme, 'hover-elevation');
741+
}
727742

728743
igx-icon {
729744
color: var-get($fab-theme, 'icon-color-hover');
@@ -734,7 +749,10 @@
734749
color: var-get($fab-theme, 'active-foreground');
735750
background: var-get($fab-theme, 'active-background');
736751
border-color: var-get($fab-theme, 'active-border-color');
737-
box-shadow: var-get($fab-theme, 'active-shadow');
752+
753+
@if $variant == 'material' {
754+
box-shadow: var-get($fab-theme, 'active-elevation');
755+
}
738756

739757
igx-icon {
740758
color: var-get($fab-theme, 'active-foreground');
@@ -758,7 +776,7 @@
758776
}
759777

760778
@if $variant == 'material' {
761-
box-shadow: var-get($fab-theme, 'focus-shadow');
779+
box-shadow: var-get($fab-theme, 'focus-elevation');
762780
} @else {
763781
box-shadow: $contained-shadow--focus;
764782
}

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
}
3232

3333
%igx-card--elevated {
34-
box-shadow: var-get($theme, 'resting-shadow');
34+
box-shadow: var-get($theme, 'resting-elevation');
3535

3636
&:hover {
37-
box-shadow: var-get($theme, 'hover-shadow');
37+
box-shadow: var-get($theme, 'hover-elevation');
3838
}
3939

4040
@if $not-material-theme {

‎projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
outline-style: none;
4747
transition: all .15s ease-in-out;
4848
background: var-get($theme, 'button-background');
49-
box-shadow: var-get($theme, 'button-shadow');
49+
box-shadow: var-get($theme, 'button-elevation');
5050
border: rem(1px) solid var-get($theme, 'button-border-color');
5151
border-radius: var(--nav-btn-border-radius);
5252

@@ -167,7 +167,7 @@
167167
inset-inline-start: 50%;
168168
transform: translateX(-50%);
169169
background: var-get($theme, 'indicator-background');
170-
box-shadow: var-get($theme, 'button-shadow');
170+
box-shadow: var-get($theme, 'button-elevation');
171171
border-radius: var-get($theme, 'border-radius');
172172

173173
[dir='rtl'] & {

‎projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@
540540
@extend %igx-chip;
541541

542542
position: absolute;
543-
box-shadow: var-get($theme, 'ghost-shadow');
543+
box-shadow: var-get($theme, 'ghost-elevation');
544544
overflow: hidden;
545545
color: var-get($theme, 'focus-text-color');
546546
background: var-get($theme, 'ghost-background');

0 commit comments

Comments
 (0)