From ad67ae7ed1e0b5422f56c1526bddc6b892031a1c Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 12 Nov 2025 16:47:20 +0200 Subject: [PATCH 1/4] fix(themes): update properties to use 'elevation' variables instead of 'shadow' variables --- .../styles/components/badge/_badge-theme.scss | 2 +- .../bottom-nav/_bottom-nav-theme.scss | 4 +-- .../button-group/_button-group-theme.scss | 3 +- .../components/button/_button-theme.scss | 34 +++++++++---------- .../styles/components/card/_card-theme.scss | 4 +-- .../components/carousel/_carousel-theme.scss | 4 +-- .../styles/components/chip/_chip-theme.scss | 2 +- .../components/dialog/_dialog-theme.scss | 2 +- .../drop-down/_drop-down-theme.scss | 2 +- .../styles/components/grid/_grid-theme.scss | 4 +-- .../components/input/_input-group-theme.scss | 18 +++++----- .../components/navbar/_navbar-theme.scss | 2 +- .../navdrawer/_navdrawer-theme.scss | 2 +- .../components/snackbar/_snackbar-theme.scss | 2 +- .../components/switch/_switch-theme.scss | 6 ++-- .../time-picker/_time-picker-theme.scss | 4 +-- .../styles/components/toast/_toast-theme.scss | 2 +- .../components/tooltip/_tooltip-theme.scss | 2 +- 18 files changed, 50 insertions(+), 49 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 82402c29970..47555fe0140 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -24,7 +24,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background-color'); border-radius: calc(var(--size) / 2); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); overflow: hidden; igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 6f21583c88e..549b33c75ed 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -43,13 +43,13 @@ %igx-bottom-nav-menu--top { inset-block-start: 0; inset-block-end: inherit; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); } %igx-bottom-nav-menu--bottom { inset-block-start: inherit; inset-block-end: 0; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); } %igx-bottom-nav-menu-item { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index b942c0e20a8..1f847b60c54 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -36,7 +36,7 @@ %igx-group-display { display: flex; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); border-radius: var-get($theme, 'border-radius'); button { @@ -269,6 +269,7 @@ color: var-get($theme, 'item-focused-text-color'); background: var-get($theme, 'item-focused-background'); border-color: var-get($theme, 'item-focused-border-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); z-index: 2; igx-icon { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 2b978400de7..6e638e35df2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -193,7 +193,7 @@ $contained-shadow: map.get( ( - 'material': var-get($contained-theme, 'resting-shadow'), + 'material': var-get($contained-theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -203,7 +203,7 @@ $contained-shadow--hover: map.get( ( - 'material': var-get($contained-theme, 'hover-shadow'), + 'material': var-get($contained-theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -213,7 +213,7 @@ $contained-shadow--focus: map.get( ( - 'material': var-get($contained-theme, 'focus-shadow'), + 'material': var-get($contained-theme, 'focus-elevation'), 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), @@ -224,7 +224,7 @@ $contained-shadow--active: map.get( ( - 'material': var-get($contained-theme, 'active-shadow'), + 'material': var-get($contained-theme, 'active-elevation'), 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), @@ -235,7 +235,7 @@ $fab-shadow: map.get( ( - 'material': var-get($fab-theme, 'resting-shadow'), + 'material': var-get($fab-theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -245,7 +245,7 @@ $fab-shadow--hover: map.get( ( - 'material': var-get($fab-theme, 'hover-shadow'), + 'material': var-get($fab-theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none, @@ -255,7 +255,7 @@ $fab-shadow--focus: map.get( ( - 'material': var-get($fab-theme, 'focus-shadow'), + 'material': var-get($fab-theme, 'focus-elevation'), 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), @@ -265,7 +265,7 @@ $fab-shadow--active: map.get( ( - 'material': var-get($fab-theme, 'active-shadow'), + 'material': var-get($fab-theme, 'active-elevation'), 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), @@ -573,7 +573,7 @@ background: var-get($contained-theme, 'background'); border-color: var-get($contained-theme, 'border-color'); border-radius: var-get($contained-theme, 'border-radius'); - box-shadow: var-get($contained-theme, 'resting-shadow'); + box-shadow: var-get($contained-theme, 'resting-elevation'); igx-icon { color: var-get($contained-theme, 'icon-color'); @@ -583,7 +583,7 @@ color: var-get($contained-theme, 'hover-foreground'); background: var-get($contained-theme, 'hover-background'); border-color: var-get($contained-theme, 'hover-border-color'); - box-shadow: var-get($contained-theme, 'hover-shadow'); + box-shadow: var-get($contained-theme, 'hover-elevation'); igx-icon { color: var-get($contained-theme, 'icon-color-hover'); @@ -594,7 +594,7 @@ color: var-get($contained-theme, 'active-foreground'); background: var-get($contained-theme, 'active-background'); border-color: var-get($contained-theme, 'active-border-color'); - box-shadow: var-get($contained-theme, 'active-shadow'); + box-shadow: var-get($contained-theme, 'active-elevation'); igx-icon { color: var-get($contained-theme, 'active-foreground'); @@ -627,7 +627,7 @@ } @if $variant == 'material' { - box-shadow: var-get($contained-theme, 'focus-shadow'); + box-shadow: var-get($contained-theme, 'focus-elevation'); } @else { box-shadow: $contained-shadow--active; } @@ -652,7 +652,7 @@ } @if $variant == 'material' { - box-shadow: var-get($contained-theme, 'focus-shadow'); + box-shadow: var-get($contained-theme, 'focus-elevation'); } } @@ -713,7 +713,7 @@ background: var-get($fab-theme, 'background'); border-color: var-get($fab-theme, 'border-color'); border-radius: var-get($fab-theme, 'border-radius'); - box-shadow: var-get($fab-theme, 'resting-shadow'); + box-shadow: var-get($fab-theme, 'resting-elevation'); igx-icon { color: var-get($fab-theme, 'icon-color'); @@ -723,7 +723,7 @@ color: var-get($fab-theme, 'hover-foreground'); background: var-get($fab-theme, 'hover-background'); border-color: var-get($fab-theme, 'hover-border-color'); - box-shadow: var-get($fab-theme, 'hover-shadow'); + box-shadow: var-get($fab-theme, 'hover-elevation'); igx-icon { color: var-get($fab-theme, 'icon-color-hover'); @@ -734,7 +734,7 @@ color: var-get($fab-theme, 'active-foreground'); background: var-get($fab-theme, 'active-background'); border-color: var-get($fab-theme, 'active-border-color'); - box-shadow: var-get($fab-theme, 'active-shadow'); + box-shadow: var-get($fab-theme, 'active-elevation'); igx-icon { color: var-get($fab-theme, 'active-foreground'); @@ -758,7 +758,7 @@ } @if $variant == 'material' { - box-shadow: var-get($fab-theme, 'focus-shadow'); + box-shadow: var-get($fab-theme, 'focus-elevation'); } @else { box-shadow: $contained-shadow--focus; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index bcaa61c6e4c..8c05c45c68f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -31,10 +31,10 @@ } %igx-card--elevated { - box-shadow: var-get($theme, 'resting-shadow'); + box-shadow: var-get($theme, 'resting-elevation'); &:hover { - box-shadow: var-get($theme, 'hover-shadow'); + box-shadow: var-get($theme, 'hover-elevation'); } @if $not-material-theme { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index e6c3abdfb38..d91da52b494 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -46,7 +46,7 @@ outline-style: none; transition: all .15s ease-in-out; background: var-get($theme, 'button-background'); - box-shadow: var-get($theme, 'button-shadow'); + box-shadow: var-get($theme, 'button-elevation'); border: rem(1px) solid var-get($theme, 'button-border-color'); border-radius: var(--nav-btn-border-radius); @@ -167,7 +167,7 @@ inset-inline-start: 50%; transform: translateX(-50%); background: var-get($theme, 'indicator-background'); - box-shadow: var-get($theme, 'button-shadow'); + box-shadow: var-get($theme, 'button-elevation'); border-radius: var-get($theme, 'border-radius'); [dir='rtl'] & { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index e17b34ca090..003a8ad71e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -540,7 +540,7 @@ @extend %igx-chip; position: absolute; - box-shadow: var-get($theme, 'ghost-shadow'); + box-shadow: var-get($theme, 'ghost-elevation'); overflow: hidden; color: var-get($theme, 'focus-text-color'); background: var-get($theme, 'ghost-background'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index c39996752e8..b87b260406e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -51,7 +51,7 @@ border: rem(1px) solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); overflow: hidden; .igx-calendar { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 1a261ddabcc..abbe8002bb1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -20,7 +20,7 @@ overflow: hidden; border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background-color'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); min-width: rem(128px); border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index d1f9b070cb3..2441720612a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -34,7 +34,7 @@ ), $variant); $cbx-bs-size: rem(14px); - $grid-shadow: var-get($theme, 'grid-shadow'); + $grid-shadow: var-get($theme, 'grid-elevation'); $grid-caption-fs: rem(20px); $grid-caption-lh: rem(32px); @@ -1908,7 +1908,7 @@ top: rem(-99999px); inset-inline-start: rem(-99999px); border: none; - box-shadow: var-get($theme, 'drag-shadow'); + box-shadow: var-get($theme, 'drag-elevation'); overflow: hidden; z-index: 20; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 1f513442471..544b63c7e05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -343,7 +343,7 @@ &%form-group-display--search { %form-group-bundle-search--hover:not(:focus-within) { - box-shadow: var-get($theme, 'search-resting-shadow'); + box-shadow: var-get($theme, 'search-resting-elevation'); } } @@ -1024,7 +1024,7 @@ %form-group-bundle--search { background: var-get($theme, 'search-background'); - box-shadow: var-get($theme, 'search-resting-shadow'); + box-shadow: var-get($theme, 'search-resting-elevation'); @if $variant != 'bootstrap' { border-radius: var-get($theme, 'search-border-radius'); @@ -1039,28 +1039,28 @@ } %form-group-bundle-search--hover { - box-shadow: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--focus { - box-shadow: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--error { - box-shadow: var-get($theme, 'search-hover-shadow'); - border-color: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); + border-color: var-get($theme, 'search-hover-elevation'); } %form-group-bundle-search--success { - box-shadow: var-get($theme, 'search-hover-shadow'); - border-color: var-get($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-elevation'); + border-color: var-get($theme, 'search-hover-elevation'); } %form-group-bundle-search--disabled { background: var-get($theme, 'search-disabled-background'); - box-shadow: var-get($theme, 'search-disabled-shadow'); + box-shadow: var-get($theme, 'search-disabled-elevation'); border-color: var-get($theme, 'disabled-border-color'); igx-prefix, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index 64fdb2bb167..83ae92dc981 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -25,7 +25,7 @@ padding-inline: pad-inline($navbar-padding); background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); z-index: 4; overflow: hidden; border-bottom: rem(1px) solid var-get($theme, 'border-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index b3f91966295..fa032dc01b5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -78,7 +78,7 @@ z-index: 999; transition: width, padding, transform; transition-timing-function: $in-out-quad; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); padding: $aside-padding; @if $variant != 'fluent' { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 5a27bbedd05..8e6234d7330 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -27,7 +27,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); backface-visibility: hidden; - box-shadow: var-get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); border-radius: var-get($theme, 'border-radius'); backdrop-filter: blur(8px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 5f2285a090c..b6eb01d2d9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -56,21 +56,21 @@ ), $variant); $thumb-resting-shadow: map.get(( - 'material': var-get($theme, 'resting-shadow'), + 'material': var-get($theme, 'resting-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none ), $variant); $thumb-hover-shadow: map.get(( - 'material': var-get($theme, 'hover-shadow'), + 'material': var-get($theme, 'hover-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none ), $variant); $thumb-disabled-shadow: map.get(( - 'material': var-get($theme, 'disabled-shadow'), + 'material': var-get($theme, 'disabled-elevation'), 'fluent': none, 'bootstrap': none, 'indigo': none diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 87aaf7e8354..42e22233e56 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -32,7 +32,7 @@ flex-flow: column nowrap; border-radius: var-get($theme, 'border-radius'); box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'), - var-get($theme, 'modal-shadow'); + var-get($theme, 'modal-elevation'); background: var-get($theme, 'background-color'); overflow: hidden; min-width: fit-content; @@ -58,7 +58,7 @@ %time-picker--dropdown { min-width: sizable(rem(290px), rem(314px), rem(360px)); box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'), - var-get($theme, 'dropdown-shadow'); + var-get($theme, 'dropdown-elevation'); %time-picker__body { min-width: auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 355afdff3fc..411989a9bba 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -29,7 +29,7 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); - box-shadow: map.get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); backdrop-filter: blur(10px); &::after { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 1e7410a2109..2e1f4a21a61 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -18,7 +18,7 @@ background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); border-radius: var-get($theme, 'border-radius'); - box-shadow: map.get($theme, 'shadow'); + box-shadow: var-get($theme, 'elevation'); padding: pad-block(rem(4px)) pad-inline(rem(8px)); gap: rem(8px); min-height: rem(24px); From e4a8d599cc0ca5a54703d474246ddf0434e9e377 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 13 Nov 2025 16:39:51 +0200 Subject: [PATCH 2/4] chore(themes): button-group code formatting --- .../styles/components/button-group/_button-group-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index 1f847b60c54..d5976b87ea8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -269,7 +269,7 @@ color: var-get($theme, 'item-focused-text-color'); background: var-get($theme, 'item-focused-background'); border-color: var-get($theme, 'item-focused-border-color'); - box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); z-index: 2; igx-icon { From e75d5a6adbf760c7836c8a1c0144113537cc6ffd Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 13 Nov 2025 17:55:58 +0200 Subject: [PATCH 3/4] fix(button-theme): apply the four shadow parameters only to the material theme --- .../components/button/_button-theme.scss | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 6e638e35df2..1216c65c314 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -214,7 +214,7 @@ $contained-shadow--focus: map.get( ( 'material': var-get($contained-theme, 'focus-elevation'), - 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), @@ -225,7 +225,7 @@ $contained-shadow--active: map.get( ( 'material': var-get($contained-theme, 'active-elevation'), - 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), @@ -256,7 +256,7 @@ $fab-shadow--focus: map.get( ( 'material': var-get($fab-theme, 'focus-elevation'), - 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), ), @@ -266,7 +266,7 @@ $fab-shadow--active: map.get( ( 'material': var-get($fab-theme, 'active-elevation'), - 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'fluent': none, 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), ), @@ -573,7 +573,10 @@ background: var-get($contained-theme, 'background'); border-color: var-get($contained-theme, 'border-color'); border-radius: var-get($contained-theme, 'border-radius'); - box-shadow: var-get($contained-theme, 'resting-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'resting-elevation'); + } igx-icon { color: var-get($contained-theme, 'icon-color'); @@ -583,7 +586,10 @@ color: var-get($contained-theme, 'hover-foreground'); background: var-get($contained-theme, 'hover-background'); border-color: var-get($contained-theme, 'hover-border-color'); - box-shadow: var-get($contained-theme, 'hover-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'hover-elevation'); + } igx-icon { color: var-get($contained-theme, 'icon-color-hover'); @@ -594,7 +600,10 @@ color: var-get($contained-theme, 'active-foreground'); background: var-get($contained-theme, 'active-background'); border-color: var-get($contained-theme, 'active-border-color'); - box-shadow: var-get($contained-theme, 'active-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($contained-theme, 'active-elevation'); + } igx-icon { color: var-get($contained-theme, 'active-foreground'); @@ -713,7 +722,10 @@ background: var-get($fab-theme, 'background'); border-color: var-get($fab-theme, 'border-color'); border-radius: var-get($fab-theme, 'border-radius'); - box-shadow: var-get($fab-theme, 'resting-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'resting-elevation'); + } igx-icon { color: var-get($fab-theme, 'icon-color'); @@ -723,7 +735,10 @@ color: var-get($fab-theme, 'hover-foreground'); background: var-get($fab-theme, 'hover-background'); border-color: var-get($fab-theme, 'hover-border-color'); - box-shadow: var-get($fab-theme, 'hover-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'hover-elevation'); + } igx-icon { color: var-get($fab-theme, 'icon-color-hover'); @@ -734,7 +749,10 @@ color: var-get($fab-theme, 'active-foreground'); background: var-get($fab-theme, 'active-background'); border-color: var-get($fab-theme, 'active-border-color'); - box-shadow: var-get($fab-theme, 'active-elevation'); + + @if $variant == 'material' { + box-shadow: var-get($fab-theme, 'active-elevation'); + } igx-icon { color: var-get($fab-theme, 'active-foreground'); From 3d9f5a2592514f532880904933dddc47443617df Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 17 Nov 2025 13:56:18 +0200 Subject: [PATCH 4/4] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 58f2d088c33..94ed64fcb9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^23.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13403,9 +13403,9 @@ } }, "node_modules/igniteui-theming": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0.tgz", - "integrity": "sha512-usKRq5+XkChbcALOpAzfBMC5Bt8hYkkCVVrtNhnQqa3G7sjj2+Le2wTOHDRMIM8l6HbEoWR/XE7RiQuuMFBVKA==", + "version": "23.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-23.0.0.tgz", + "integrity": "sha512-r3R06q0pK/P32lEIgjcml4t4ppfy80RVIl8VSnyCIg1WOEhAQmaPOioJJhID6K7iAwz4zlOGJXsP6SFeDb+gyA==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 169ead2725f..db64697dd88 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^23.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c19d48e0eba..b370a082872 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^22.0.0", + "igniteui-theming": "^23.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": {