From 053be337d956fb332d0acd6f6425ff52facbe307 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Mon, 10 Mar 2025 15:45:06 +0200
Subject: [PATCH 01/53] feat(avatar): improve avatar theme (#15480)
---
.../styles/components/avatar/_avatar-theme.scss | 13 ++++++-------
1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
index 6c462663f50..fc058199660 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -41,10 +41,13 @@
}
$theme: digest-schema($avatar-schema);
- $meta: map.get($theme, '_meta');
@if not($color) and $background {
- $color: text-contrast($background);
+ $color: adaptive-contrast($background);
+ }
+
+ @if not($icon-color) and $background {
+ $icon-color: adaptive-contrast($background);
}
@return extend($theme, (
@@ -54,10 +57,6 @@
icon-color: $icon-color,
border-radius: $border-radius,
size: $size,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -68,7 +67,7 @@
@include css-vars($theme);
$variant: map.get($theme, '_meta', 'variant');
-
+
%igx-avatar-display {
@include sizable();
From 76fd5f377bdfef3bc48f088c7aea646152b8d743 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Mon, 14 Apr 2025 10:51:42 +0300
Subject: [PATCH 02/53] feat(badge): improve badge theme (#15487)
* feat(badge): improve badge theme
* feat(avatar, badge): use css vars to calculate contrast dynamically
---
.../core/styles/components/avatar/_avatar-theme.scss | 6 +++---
.../core/styles/components/badge/_badge-theme.scss | 11 +++--------
2 files changed, 6 insertions(+), 11 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
index fc058199660..06f9e037937 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -43,11 +43,11 @@
$theme: digest-schema($avatar-schema);
@if not($color) and $background {
- $color: adaptive-contrast($background);
+ $color: adaptive-contrast(var(--background));
}
@if not($icon-color) and $background {
- $icon-color: adaptive-contrast($background);
+ $icon-color: adaptive-contrast(var(--background));
}
@return extend($theme, (
@@ -66,7 +66,7 @@
@mixin avatar($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-avatar-display {
@include sizable();
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 97d3567c89f..305db2063f4 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
@@ -48,14 +48,13 @@
}
$theme: digest-schema($badge-schema);
- $meta: map.get($theme, '_meta');
@if not($icon-color) and $background-color {
- $icon-color: text-contrast($background-color);
+ $icon-color: adaptive-contrast(var(--background-color));
}
@if not($text-color) and $background-color {
- $text-color: text-contrast($background-color);
+ $text-color: adaptive-contrast(var(--background-color));
}
@if not($shadow) {
@@ -71,10 +70,6 @@
border-radius: $border-radius,
background-color: $background-color,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- )),
));
}
@@ -84,7 +79,7 @@
@mixin badge($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-badge-display {
--size: #{rem(22px)};
From 2291ffdf5c2eab45874a82f1ad8f4d84bb110170 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:40:52 +0300
Subject: [PATCH 03/53] feat(expansion-panel): improve expansion-panel theme
(#15651)
* feat(expansion-panel): improve expansion-panel theme
* feat(expansion-panel): use meta from schemas
---
.../_expansion-panel-theme.scss | 31 +++++++++++--------
1 file changed, 18 insertions(+), 13 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
index 20e144dcca6..2798fbfd668 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -53,24 +53,33 @@
}
$theme: digest-schema($expansion-panel-schema);
- $meta: map.get($theme, '_meta');
@if not($header-title-color) and $header-background {
- $header-title-color: text-contrast($header-background);
+ $header-title-color: adaptive-contrast(var(--header-background));
+ }
+
+ @if not($header-icon-color) and $header-background {
+ $header-icon-color: adaptive-contrast(var(--header-background));
}
@if not($header-description-color) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $header-description-color: rgba(text-contrast($header-background), .8);
- }
+ $header-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8);
}
- @if not($header-icon-color) and $header-background {
- $header-icon-color: text-contrast($header-background);
+ @if not($header-focus-background) and $header-background {
+ $header-focus-background: hsl(from var(--header-background) h s calc(l * 1.1));
}
@if not($body-color) and $body-background {
- $body-color: text-contrast($body-background);
+ $body-color: adaptive-contrast(var(--body-background));
+ }
+
+ @if not($disabled-text-color) and $header-background {
+ $disabled-text-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
+ }
+
+ @if not($disabled-description-color) and $header-background {
+ $disabled-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
}
@return extend($theme, (
@@ -86,10 +95,6 @@
disabled-text-color: $disabled-text-color,
disabled-description-color: $disabled-description-color,
expanded-margin: $expanded-margin,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -98,7 +103,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin expansion-panel($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$panel-padding: rem(16px) rem(24px);
$panel-padding-header-indigo: rem(10px) rem(16px);
From 5c8f2e2bda7bff96417e41774d99ebf046ccb5b7 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:41:08 +0300
Subject: [PATCH 04/53] feat(dialog): update dialog theme to use
adaptive-contrast function (#15643)
* feat(dialog): update dialog theme to use adaptive-contrast function
* feat(dialog): update using meta from schemas
---
.../components/dialog/_dialog-theme.scss | 21 ++++++++-----------
1 file changed, 9 insertions(+), 12 deletions(-)
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 09abd1eca12..88580758382 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
@@ -46,16 +46,17 @@
}
$theme: digest-schema($dialog-schema);
- $meta: map.get($theme, '_meta');
@if not($title-color) and $background{
- $title-color: text-contrast($background);
+ $title-color: adaptive-contrast(var(--background));
}
@if not($message-color) and $background{
- @if meta.type-of($background) == 'color' {
- $message-color: rgba(text-contrast($background), .8);
- }
+ $message-color: hsla(from adaptive-contrast(var(--background)) h s l / .8);
+ }
+
+ @if not($border-color) and $background{
+ $border-color: hsla(from adaptive-contrast(var(--background)) h s l / .3);
}
@if not($shadow) {
@@ -71,11 +72,7 @@
title-color: $title-color,
message-color: $message-color,
shadow: $shadow,
- border-color: $border-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
+ border-color: $border-color
));
}
@@ -85,8 +82,8 @@
@mixin dialog($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
- $bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
+ $variant: map.get($theme, '_meta', 'theme');
+ $bootstrap-theme: map.get($theme, '_meta', 'theme') == 'bootstrap';
$dialog-min-width: map.get((
'material': rem(280px),
From 8af172093d8e2f805b7b8e8fa462770ead29a7a0 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:41:22 +0300
Subject: [PATCH 05/53] feat(combo): improve combo theme (#15631)
* feat(combo): improve combo theme
* feat(combo): update material focus background color of the toggle button
---
.../styles/components/combo/_combo-theme.scss | 50 ++++++++++++++++---
1 file changed, 44 insertions(+), 6 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
index 9b76e6ebbc4..2a485798baf 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -60,7 +60,49 @@
}
$theme: digest-schema($combo-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if not($empty-list-placeholder-color) and $empty-list-background {
+ $empty-list-placeholder-color: adaptive-contrast(var(--empty-list-background));
+ }
+
+ @if not($toggle-button-foreground) and $toggle-button-background {
+ $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
+ }
+
+ @if $variant == 'material' {
+ @if not($toggle-button-background-focus) and $toggle-button-background {
+ $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+ }
+ } @else {
+ @if not($toggle-button-background-focus) and $toggle-button-background {
+ $toggle-button-background-focus: var(--toggle-button-background);
+ }
+ }
+
+ @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
+ $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
+ }
+
+ @if not($toggle-button-background-focus--border) and $toggle-button-background {
+ $toggle-button-background-focus--border: var(--toggle-button-background);
+ }
+
+ @if not($toggle-button-foreground-filled) and $toggle-button-background {
+ $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
+ }
+
+ @if not($toggle-button-background-disabled) and $toggle-button-background {
+ $toggle-button-background-disabled: hsla(from var(--toggle-button-background) h s l / 0.3);
+ }
+
+ @if not($toggle-button-foreground-disabled) and $toggle-button-background {
+ $toggle-button-foreground-disabled: hsla(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
+ }
+
+ @if not($clear-button-foreground-focus) and $clear-button-background-focus {
+ $clear-button-foreground-focus: adaptive-contrast(var(--clear-button-background-focus));
+ }
@return extend($theme, (
name: $name,
@@ -80,10 +122,6 @@
clear-button-background-focus: $clear-button-background-focus,
clear-button-foreground: $clear-button-foreground,
clear-button-foreground-focus: $clear-button-foreground-focus,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -93,7 +131,7 @@
@mixin combo($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$search-input-inline-padding: map.get((
'material': pad-inline(rem(4px), rem(8px), rem(16px)),
From 9105a94c3596e8c0bca31ac3940a01c30aeb8966 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:41:34 +0300
Subject: [PATCH 06/53] feat(action-strip): update text contrast function
(#15620)
* feat(action-strip): update text contrast function
* remove meta
---
.../components/action-strip/_action-strip-theme.scss | 9 ++-------
1 file changed, 2 insertions(+), 7 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
index c99350f8040..4c87c2df3a4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -41,10 +41,9 @@
}
$theme: digest-schema($action-strip-schema);
- $meta: map.get($theme, '_meta');
@if not($icon-color) and $actions-background {
- $icon-color: text-contrast($actions-background);
+ $icon-color: adaptive-contrast(var(--actions-background));
}
@if not($actions-border-radius) {
@@ -58,10 +57,6 @@
icon-color: $icon-color,
delete-action: $delete-action,
actions-border-radius: $actions-border-radius,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -71,7 +66,7 @@
@mixin action-strip($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$icon-button-size: map.get((
'material': rem(36px),
'fluent': rem(32px),
From 7c09f00b034b6a8a4afb066442078e2f6012c38d Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:41:49 +0300
Subject: [PATCH 07/53] feat(card): improve card theme (#15516)
---
.../styles/components/card/_card-theme.scss | 21 +++++--------------
1 file changed, 5 insertions(+), 16 deletions(-)
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 5325f0e38ae..576570dc37c 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
@@ -52,28 +52,21 @@
}
$theme: digest-schema($card-schema);
- $meta: map.get($theme, '_meta');
@if not($header-text-color) and $background {
- $header-text-color: text-contrast($background);
+ $header-text-color: adaptive-contrast(var(--background));
}
@if not($actions-text-color) and $background {
- @if meta.type-of($background) == 'color' {
- $actions-text-color: rgba(text-contrast($background), .5);
- }
+ $actions-text-color: adaptive-contrast(var(--background));
}
@if not($content-text-color) and $background {
- @if meta.type-of($background) == 'color' {
- $content-text-color: rgba(text-contrast($background), .7);
- }
+ $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
}
@if not($subtitle-text-color) and $background {
- @if meta.type-of($background) == 'color' {
- $subtitle-text-color: rgba(text-contrast($background), .7);
- }
+ $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
}
@if not($resting-shadow) {
@@ -97,10 +90,6 @@
actions-text-color: $actions-text-color,
resting-shadow: $resting-shadow,
hover-shadow: $hover-shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -110,7 +99,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin card($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$not-material-theme: $variant != 'material';
$card-heading-padding: rem(16px, 16px);
From 6fbbd55a8353ec6267f161935cb610162da50058 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:42:00 +0300
Subject: [PATCH 08/53] feat(bottom-nav): improve bottom-nav theme (#15489)
* feat(bottom-nav): improve bottom-nav theme
* feat(bottom-nav): use background css var
---
.../bottom-nav/_bottom-nav-theme.scss | 45 +++++++------------
1 file changed, 17 insertions(+), 28 deletions(-)
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 fdb0a893aea..87da896f8a7 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
@@ -51,42 +51,36 @@
$theme: digest-schema($bottom-nav-schema);
- $meta: map.get($theme, '_meta');
-
- @if not($label-color) and $background {
- @if meta.type-of($background) == 'color' {
- $label-color: text-contrast($background);
- }
+ @if not($label-color) and not($icon-color) and $background {
+ $label-color: adaptive-contrast(var(--background));
}
@if not($icon-color) and $label-color {
- @if meta.type-of($label-color) == 'color' {
- $icon-color: $label-color;
- }
+ $icon-color: $label-color;
+ }
+
+ @if not($label-color) and $icon-color {
+ $label-color: $icon-color;
+ }
+
+ @if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
+ $label-disabled-color: adaptive-contrast(var(--background));
}
@if not($icon-disabled-color) and $label-disabled-color {
- @if meta.type-of($label-disabled-color) == 'color' {
- $icon-disabled-color: $label-disabled-color;
- }
+ $icon-disabled-color: $label-disabled-color;
}
@if not($label-disabled-color) and $icon-disabled-color {
- @if meta.type-of($icon-disabled-color) == 'color' {
- $label-disabled-color: $icon-disabled-color;
- }
+ $label-disabled-color: $icon-disabled-color;
}
@if not($icon-selected-color) and $label-selected-color {
- @if meta.type-of($background) == 'color' {
- $icon-selected-color: $label-selected-color;
- }
+ $icon-selected-color: $label-selected-color;
}
- @if not($icon-color) and $background {
- @if meta.type-of($background) == 'color' {
- $icon-color: text-contrast($background);
- }
+ @if not($label-selected-color) and $icon-selected-color {
+ $label-selected-color: $icon-selected-color;
}
@if not($shadow) {
@@ -105,11 +99,6 @@
label-disabled-color: $label-disabled-color,
border-color: $border-color,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -119,7 +108,7 @@
@mixin bottom-nav($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$menu-height: rem(56px);
$item-min-width: rem(80px);
$item-max-width: rem(168px);
From 6256b70ecb71cf88fc9df4f9bb9047568b71fa17 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:42:14 +0300
Subject: [PATCH 09/53] feat(banner): improve banner theme (#15488)
* feat(banner): improve banner theme
* feat(banner): use css vars
---
.../styles/components/banner/_banner-theme.scss | 13 ++++++-------
1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
index 74a3166012a..dd52a4a12fc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -43,10 +43,13 @@
}
$theme: digest-schema($banner-schema);
- $meta: map.get($theme, '_meta');
@if not($banner-message-color) and $banner-background {
- $banner-message-color: text-contrast($banner-background);
+ $banner-message-color: adaptive-contrast(var(--banner-background));
+ }
+
+ @if not($banner-illustration-color) and $banner-background {
+ $banner-illustration-color: adaptive-contrast(var(--banner-background));
}
@return extend($theme, (
@@ -57,10 +60,6 @@
banner-border-color: $banner-border-color,
banner-illustration-color: $banner-illustration-color,
border-radius: $border-radius,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -69,7 +68,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin banner($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-banner-host {
igx-expansion-panel-body {
From 81216db564bf7467b46bb96fd045c12315258419 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 17:05:15 +0300
Subject: [PATCH 10/53] feat(navbar): improve navbar theme (#15660)
---
.../components/navbar/_navbar-theme.scss | 26 ++++++++++++-------
1 file changed, 16 insertions(+), 10 deletions(-)
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 0b2cb70cb10..ab59cae46d8 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
@@ -43,18 +43,28 @@
}
$theme: digest-schema($navbar-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
@if not($text-color) and $background {
- $text-color: text-contrast($background);
+ $text-color: adaptive-contrast(var(--background));
}
@if not($idle-icon-color) and $background {
- $idle-icon-color: text-contrast($background);
+ $idle-icon-color: adaptive-contrast(var(--background));
}
- @if not($hover-icon-color) and $background {
- $hover-icon-color: text-contrast($background);
+ @if $variant == 'indigo' {
+ @if not($border-color) and $background {
+ $border-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.3);
+ }
+
+ @if not($hover-icon-color) and $background {
+ $hover-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.7);
+ }
+ } @else {
+ @if not($hover-icon-color) and $background {
+ $hover-icon-color: adaptive-contrast(var(--background));
+ }
}
@if not($shadow) {
@@ -74,10 +84,6 @@
idle-icon-color: $idle-icon-color,
hover-icon-color: $hover-icon-color,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -86,7 +92,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin navbar($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$navbar-padding: rem(16px);
$navbar-title-fz: rem(18px, 16px);
From 563b70d69f4a1a90d8d07055d08f01fbbe8ddffc Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 15 Apr 2025 17:59:31 +0300
Subject: [PATCH 11/53] feat(navdrawer): improve navdrawer theme (#15662)
---
.../navdrawer/_navdrawer-theme.scss | 46 ++++++++++---------
1 file changed, 24 insertions(+), 22 deletions(-)
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 69f4ef7e25d..d68f9a185a4 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
@@ -73,42 +73,48 @@
}
$theme: digest-schema($navdrawer-schema);
- $meta: map.get($theme, '_meta');
@if not($item-header-text-color) and $background {
- $item-header-text-color: text-contrast($background);
+ $item-header-text-color: adaptive-contrast(var(--background));
}
@if not($item-text-color) and $background {
- $item-text-color: text-contrast($background);
+ $item-text-color: adaptive-contrast(var(--background));
}
@if not($item-icon-color) and $background {
- $item-icon-color: text-contrast($background);
+ $item-icon-color: adaptive-contrast(var(--background));
+ }
+
+ @if not($item-hover-background) and $background {
+ $item-hover-background: hsla(from adaptive-contrast(var(--background)) h s l / .08);
+ }
+
+ @if not($item-hover-text-color) and $background {
+ $item-hover-text-color: adaptive-contrast(var(--background));
+ }
+
+ @if not($item-hover-icon-color) and $background {
+ $item-hover-icon-color: adaptive-contrast(var(--background));
}
@if not($item-active-background) and $background {
- @if meta.type-of($background) == 'color' {
- $item-active-background: rgba(text-contrast($background), .24);
- }
+ $item-active-background: hsla(from adaptive-contrast(var(--background)) h s l / .24);
}
@if not($item-active-text-color) and $item-active-background {
- $item-active-text-color: text-contrast($item-active-background);
+ $item-active-text-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
}
@if not($item-active-icon-color) and $item-active-background {
- $item-active-icon-color: text-contrast($item-active-background);
+ $item-active-icon-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
}
- @if not($item-hover-background) and $background {
- @if meta.type-of($background) == 'color' {
- $item-hover-background: rgba(text-contrast($background), .08);
- }
+ @if not($item-disabled-text-color) and $background {
+ $item-disabled-text-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
}
-
- @if not($item-hover-text-color) and $background {
- $item-hover-text-color: text-contrast($background);
+ @if not($item-disabled-icon-color) and $background {
+ $item-disabled-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
}
@if not($shadow) {
@@ -133,11 +139,7 @@
item-hover-icon-color: $item-hover-icon-color,
item-disabled-text-color:$item-disabled-text-color,
item-disabled-icon-color: $item-disabled-icon-color,
- shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
+ shadow: $shadow
));
}
@@ -147,7 +149,7 @@
@mixin navdrawer($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$drawer-icon-size: rem(24px);
$aside-padding: map.get((
From 85ee24fd0fdd686d672411feffc130da1122ff63 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:15:20 +0300
Subject: [PATCH 12/53] feat(tree): improve tree theme (#15717)
* feat(tree): improve tree theme
* feat(tree): add logic for disabled state
---
.../styles/components/tree/_tree-theme.scss | 43 ++++++++++++++-----
1 file changed, 33 insertions(+), 10 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
index 7cbd141cfaf..4c46d1c6bfc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
@@ -62,22 +62,49 @@
}
$theme: digest-schema($tree-schema);
- $meta: map.get($theme, '_meta');
@if not($foreground) and $background {
- $foreground: text-contrast($background);
+ $foreground: adaptive-contrast(var(--background));
+ }
+
+ @if not($background-selected) and $background {
+ $background-selected: hsl(from var(--background) h s calc(l * 0.9));
+ }
+
+ @if not($hover-color) and $background {
+ $hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1);
+ }
+
+ @if not($hover-selected-color) and $background-selected {
+ $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
}
@if not($foreground-selected) and $background-selected {
- $foreground-selected: text-contrast($background-selected);
+ $foreground-selected: adaptive-contrast(var(--background-selected));
+ }
+
+ @if not($background-active) and $background {
+ $background-active: hsl(from var(--background) h s calc(l * 0.9));
}
@if not($foreground-active) and $background-active {
- $foreground-active: text-contrast($background-active);
+ $foreground-active: adaptive-contrast(var(--background-active));
+ }
+
+ @if not($background-active-selected) and $background-active {
+ $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
}
@if not($foreground-active-selected) and $background-active-selected {
- $foreground-active-selected: text-contrast($background-active-selected);
+ $foreground-active-selected: adaptive-contrast(var(--background-active-selected));
+ }
+
+ @if not($background-disabled) and $background {
+ $background-disabled: color-mix(in hsl, var(--background), transparent 50%);
+ }
+
+ @if not($foreground-disabled) and $background-disabled {
+ $foreground-disabled: adaptive-contrast(var(--background-disabled));
}
@return extend($theme, (
@@ -98,10 +125,6 @@
border-color: $border-color,
hover-color: $hover-color,
hover-selected-color: $hover-selected-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
size: $size,
));
}
@@ -112,7 +135,7 @@
@mixin tree($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$indigo-theme: $variant == 'indigo';
$node-indent-default: (
From 8d62677e599b1409e027d42868e623c62750ffcc Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:15:52 +0300
Subject: [PATCH 13/53] feat(time-picker): improve time-picker theme (#15712)
---
.../time-picker/_time-picker-theme.scss | 53 ++++++++++++-------
1 file changed, 35 insertions(+), 18 deletions(-)
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 b91921d5877..b7f41c1f63e 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
@@ -71,36 +71,57 @@
}
$theme: digest-schema($time-picker-schema);
- $meta: map.get($theme, '_meta');
@if not($text-color) and $background-color {
- $text-color: text-contrast($background-color);
+ $text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7);
+ }
+
+ @if not($hover-text-color) and $text-color {
+ $hover-text-color: hsla(from var(--text-color) h s l / 1);
+ }
+
+ @if not($header-background) and $selected-text-color {
+ $header-background: var(--selected-text-color);
+ }
+
+ @if not($header-background) and $background-color {
+ $header-background: var(--background-color);
}
@if not($header-hour-text-color) and $header-background {
- $header-hour-text-color: text-contrast($header-background);
+ $header-hour-text-color: adaptive-contrast(var(--header-background));
}
@if not($selected-text-color) and $active-item-background {
- $selected-text-color: text-contrast($active-item-background);
+ $selected-text-color: var(--active-item-background);
+ }
+
+ @if not($active-item-background) and $selected-text-color {
+ $active-item-background: var(--selected-text-color);
}
@if not($active-item-background) and $background-color {
- @if meta.type-of($background-color) == 'color' {
- $active-item-background: rgba(text-contrast($background-color), .12);
- }
+ $active-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .5);
+ }
+
+ @if not($active-item-foreground) and $active-item-background {
+ $active-item-foreground: hsla(from adaptive-contrast(var(--active-item-background)) h s l / 1);
+ }
+
+ @if not($selected-text-color) and $background-color {
+ $selected-text-color: adaptive-contrast(var(--background-color));
}
@if not($disabled-text-color) and $disabled-item-background {
- @if meta.type-of($disabled-item-background) == 'color' {
- $disabled-text-color: rgba(text-contrast($disabled-item-background), .6);
- }
+ $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .6);
+ }
+
+ @if not($border-color) and $background-color {
+ $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .6);
}
@if not($divider-color) and $border-color {
- @if meta.type-of($border-color) == 'color' {
- $divider-color: $border-color;
- }
+ $divider-color: var(--border-color);
}
@if not($modal-shadow) {
@@ -133,10 +154,6 @@
divider-color: $divider-color,
time-item-size: $time-item-size,
active-item-border-radius: $active-item-border-radius,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -146,7 +163,7 @@
@mixin time-picker($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$not-bootstrap-theme: $variant != 'bootstrap';
$picker-buttons-padding: map.get((
From 6b85f7df44fe513a06ed5769853b7c91efeb23c3 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:16:03 +0300
Subject: [PATCH 14/53] feat(snackbar): improve snackbar theme (#15683)
---
.../styles/components/snackbar/_snackbar-theme.scss | 11 +++--------
1 file changed, 3 insertions(+), 8 deletions(-)
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 a1323ecae76..9b5b8a2922f 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
@@ -42,14 +42,13 @@
}
$theme: digest-schema($snackbar-schema);
- $meta: map.get($theme, '_meta');
@if not($button-color) and $background {
- $button-color: text-contrast($background);
+ $button-color: adaptive-contrast(var(--background));
}
@if not($text-color) and $background {
- $text-color: text-contrast($background);
+ $text-color: adaptive-contrast(var(--background));
}
@if not($shadow) {
@@ -64,10 +63,6 @@
text-color: $text-color,
button-color: $button-color,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -78,7 +73,7 @@
@include css-vars($theme);
@include fade-in();
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$snackbar-min-height: rem(48px);
$snackbar-padding: rem(7px) rem(24px);
From 96d7878e1fe6394aa01ec92acac85c93b69575eb Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:16:15 +0300
Subject: [PATCH 15/53] feat(splitter): improve splitter theme (#15684)
---
.../components/splitter/_splitter-theme.scss | 23 ++++++++++++-------
1 file changed, 15 insertions(+), 8 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index e2fabbea5b9..4993a71ce78 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -42,16 +42,27 @@
}
$theme: digest-schema($splitter-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
@if not($handle-color) and $bar-color {
- $handle-color: text-contrast($bar-color);
+ $handle-color: adaptive-contrast(var(--bar-color));
}
@if not($expander-color) and $bar-color {
- $expander-color: text-contrast($bar-color);
+ $expander-color: adaptive-contrast(var(--bar-color));
}
+ @if $variant != 'indigo' {
+ @if not($focus-color) and $bar-color {
+ $focus-color: hsl(from var(--bar-color) h s calc(l * 0.7));
+ }
+ } @else {
+ @if not($focus-color) and $bar-color {
+ $focus-color: var(--bar-color);
+ }
+ }
+
+
@return extend($theme, (
name: $name,
bar-color: $bar-color,
@@ -60,10 +71,6 @@
border-radius: $border-radius,
focus-color: $focus-color,
size: $size,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -77,7 +84,7 @@
$debug-hitbox: false;
$hitbox-debug-color: rgba(coral, .24);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
//splitter-size + borders
$splitter-size: unitless(map.get($theme, 'size')) + 2;
From a357ce65b98874a949c914fa192f32c4e6621d8e Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:16:29 +0300
Subject: [PATCH 16/53] feat(toast): improve toast theme (#15713)
---
.../styles/components/toast/_toast-theme.scss | 19 +++++++++----------
1 file changed, 9 insertions(+), 10 deletions(-)
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 e7cee91389c..acce0d38e78 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
@@ -46,17 +46,20 @@
}
$theme: digest-schema($toast-schema);
- $meta: map.get($theme, '_meta');
+
+ @if not($text-color) and $background {
+ $text-color: adaptive-contrast(var(--background));
+ }
+
+ @if not($border-color) and $text-color {
+ $border-color: hsla(from var(--text-color) h s l / 0.3);
+ }
@if not($shadow) {
$elevation: map.get($toast-schema, 'elevation');
$shadow: elevation($elevation);
}
- @if not($text-color) and $background {
- $text-color: text-contrast($background);
- }
-
@return extend($theme, (
name: $name,
background: $background,
@@ -64,10 +67,6 @@
text-color: $text-color,
border-color: $border-color,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -77,8 +76,8 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin toast($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$width: rem(52px);
$margin: rem(42px) auto;
From 7fcee0e2d3574354049e60ee33ca3d1561f70690 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Thu, 17 Apr 2025 10:32:08 +0300
Subject: [PATCH 17/53] improve checkbox theme and add missing properties
(#15533)
---
.../checkbox/_checkbox-component.scss | 2 +-
.../components/checkbox/_checkbox-theme.scss | 74 ++++++++++++++++---
2 files changed, 64 insertions(+), 12 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
index ea5e85bc339..5c0def5856a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
@@ -163,7 +163,7 @@
@extend %igx-checkbox--focused-bootstrap !optional;
&:hover {
- @extend %igx-checkbox--focused-hovered !optional;
+ @extend %igx-checkbox--focused-hovered-bootstrap !optional;
}
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 4f8f632a66e..48ed1cffa0e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -29,8 +29,11 @@
/// @param {List} $border-radius [null] - The border radius used for checkbox component.
/// @param {List} $border-radius-ripple [null] - The border radius used for checkbox ripple.
/// @param {Color} $focus-outline-color [null] - The focus outlined color.
+/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.
+/// @param {Color} $focus-border-color [null] - The focus border color.
/// @param {Color} $error-color [null] - The border and fill colors in invalid state.
/// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover.
+/// @param {Color} $focus-outline-color-error [null] - The focus outline error color.
/// Set to light when the surrounding area is dark.
///
/// @requires $light-material-schema
@@ -58,8 +61,11 @@
$disabled-color-label: null,
$border-radius-ripple: null,
$focus-outline-color: null,
+ $focus-outline-color-focused: null,
+ $focus-border-color: null,
$error-color: null,
$error-color-hover: null,
+ $focus-outline-color-error: null,
) {
$name: 'igx-checkbox';
$checkbox-schema: ();
@@ -71,7 +77,55 @@
}
$theme: digest-schema($checkbox-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if not($empty-color-hover) and $empty-color {
+ $empty-color-hover: hsl(from var(--empty-color) h s calc(l * 0.9));
+ }
+
+ @if not($fill-color-hover) and $fill-color {
+ $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+ }
+
+ @if not($tick-color) and $fill-color {
+ $tick-color: adaptive-contrast(var(--fill-color));
+ }
+
+ @if not($label-color-hover) and $label-color {
+ $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+ }
+
+ @if not($focus-border-color) and $fill-color {
+ $focus-border-color: var(--fill-color);
+ }
+
+ @if not($disabled-indeterminate-color) and $fill-color {
+ $disabled-indeterminate-color: hsla(from var(--fill-color) h s l / 0.5);
+ }
+
+ @if not($error-color-hover) and $error-color {
+ $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+ }
+
+ @if not($focus-outline-color-error) and $error-color {
+ $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($focus-outline-color) and $fill-color {
+ $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($focus-outline-color) and $empty-color {
+ $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+ }
+
+ @if not($focus-outline-color-focused) and $fill-color {
+ $focus-outline-color-focused: hsla(from var(--fill-color) h s l / .5);
+ }
+ }
@return extend($theme, (
name: $name,
@@ -91,13 +145,11 @@
border-radius: $border-radius,
border-radius-ripple: $border-radius-ripple,
focus-outline-color: $focus-outline-color,
+ focus-outline-color-focused: $focus-outline-color-focused,
+ focus-border-color: $focus-border-color,
error-color: $error-color,
error-color-hover: $error-color-hover,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
+ focus-outline-color-error: $focus-outline-color-error
));
}
@@ -106,8 +158,8 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin checkbox($theme) {
@include css-vars($theme);
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
- $variant: map.get($theme, '_meta', 'variant');
+ $theme-variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$material-theme: $variant == 'material';
$bootstrap-theme: $variant == 'bootstrap';
@@ -591,14 +643,14 @@
%igx-checkbox--focused-bootstrap {
%cbx-composite {
border-radius: var-get($theme, 'border-radius');
- border-color: color($color: 'primary', $variant: 200);
+ border-color: var-get($theme, 'focus-border-color');
box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
}
}
- %igx-checkbox--focused-hovered {
+ %igx-checkbox--focused-hovered-bootstrap {
%cbx-composite {
- border-color: color($color: 'primary', $variant: 300);
+ border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
}
}
From 846fbde92b8e0a5396ca21a471c58ff618cd54e3 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Thu, 17 Apr 2025 10:32:32 +0300
Subject: [PATCH 18/53] feat(switch): improve switch theme (#15699)
---
.../components/switch/_switch-theme.scss | 120 ++++++++++++++++--
1 file changed, 112 insertions(+), 8 deletions(-)
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 fc4dda80469..6a6055ffa76 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
@@ -91,7 +91,116 @@
}
$theme: digest-schema($switch-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if $variant == 'material' {
+ @if not($track-off-color) and $thumb-off-color {
+ $track-off-color: hsl(from var(--thumb-off-color) h s calc(l * 0.5));
+ }
+
+ @if not($thumb-off-color) and $track-off-color {
+ $thumb-off-color: hsl(from var(--track-off-color) h s calc(l * 1.3));
+ }
+
+ @if not($thumb-disabled-color) and $thumb-off-color {
+ $thumb-disabled-color: hsl(from var(--thumb-off-color) h s calc(l + 20));
+ }
+
+ @if not($track-on-color) and $thumb-on-color {
+ $track-on-color: hsl(from var(--thumb-on-color) h s calc(l * 1.3));
+ }
+
+ @if not($track-on-hover-color) and $track-on-color {
+ $track-on-hover-color: var(--track-on-color);
+ }
+
+ @if not($thumb-on-color) and $track-on-color {
+ $thumb-on-color: hsl(from var(--track-on-color) h s calc(l * 0.6));
+ }
+
+ @if not($thumb-on-disabled-color) and $thumb-on-color {
+ $thumb-on-disabled-color: hsl(from var(--thumb-on-color) h s calc(l + 20));
+ }
+ } @else {
+ @if not($thumb-off-color) and $track-off-color {
+ $thumb-off-color: hsla(from adaptive-contrast(var(--track-off-color)) h s l / 0.8);
+ }
+ @if not($border-color) and $thumb-off-color {
+ $border-color: var(--thumb-off-color);
+ }
+
+ @if not($thumb-off-color) and $border-color {
+ $thumb-off-color: var(--border-color);
+ }
+
+ @if not($border-hover-color) and $track-off-color {
+ $border-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9);
+ }
+
+ @if not($border-hover-color) and $border-color {
+ $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8));
+ }
+
+ @if not($thumb-on-color) and $track-on-color {
+ $thumb-on-color: adaptive-contrast(var(--track-on-color));
+ }
+
+ @if not($track-on-hover-color) and $track-on-color {
+ $track-on-hover-color: hsl(from var(--track-on-color) h s calc(l * 0.9));
+ }
+
+ @if not($border-on-color) and $track-on-color {
+ $border-on-color: var(--track-on-color);
+ }
+
+ @if not($border-on-hover-color) and $border-on-color {
+ $border-on-hover-color: hsl(from var(--border-on-color) h s calc(l * 0.9));
+ }
+
+ @if not($thumb-disabled-color) and $thumb-off-color {
+ $thumb-disabled-color: hsla(from var(--thumb-off-color) h s l / 0.3);
+ }
+
+ @if not($border-disabled-color) and $border-color {
+ $border-disabled-color: hsla(from var(--border-color) h s l / 0.3);
+ }
+
+ @if not($thumb-on-disabled-color) and $thumb-on-color {
+ $thumb-on-disabled-color: hsla(from var(--thumb-on-color) h s l / 0.3);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($focus-fill-color) and $track-on-color {
+ $focus-fill-color: hsl(from var(--track-on-color) h s calc(l * 1.2));
+ }
+
+ @if not($focus-outline-color) and $focus-fill-color {
+ $focus-outline-color: hsla(from var(--focus-fill-color) h s l / 0.5);
+ }
+
+ @if not($focus-fill-hover-color) and $focus-fill-color {
+ $focus-fill-hover-color: hsl(from var(--focus-fill-color) h s calc(l * 0.9));
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($focus-outline-color) and $border-color {
+ $focus-outline-color: hsla(from var(--border-color) h s l / 0.5);
+ }
+
+ @if not($focus-outline-color-focused) and $border-on-color {
+ $focus-outline-color-focused: hsla(from var(--border-on-color) h s l / 0.5);
+ }
+ }
+ }
+
+ @if not($track-disabled-color) and $track-off-color {
+ $track-disabled-color: hsla(from var(--track-off-color) h s l / 0.5);
+ }
+
+ @if not($track-on-disabled-color) and $track-on-color {
+ $track-on-disabled-color: hsla(from var(--track-on-color) h s l / 0.5);
+ }
@if not($resting-shadow) {
$resting-elevation: map.get($switch-schema, 'resting-elevation');
@@ -155,11 +264,6 @@
focus-outline-color-focused: $focus-outline-color-focused,
focus-fill-color: $focus-fill-color,
focus-fill-hover-color: $focus-fill-hover-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -170,8 +274,8 @@
@include css-vars($theme);
@include scale-in-out($start-scale: .9);
- $variant: map.get($theme, '_meta', 'variant');
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
+ $variant: map.get($theme, '_meta', 'theme');
+ $theme-variant: map.get($theme, '_meta', 'variant');
$switch-width: map.get((
'material': 36px,
From b3fa2a6f85f55550b5a60928e2358756fdce60fc Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Thu, 17 Apr 2025 10:33:30 +0300
Subject: [PATCH 19/53] feat(chip): improve chip custom theme functions
(#15619)
---
.../styles/components/chip/_chip-theme.scss | 111 ++++++++++--------
1 file changed, 64 insertions(+), 47 deletions(-)
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 45b929e1bda..4b5371c8cc6 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
@@ -106,94 +106,116 @@
}
$theme: digest-schema($chip-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
@if not($text-color) and $background {
- $text-color: text-contrast($background);
+ $text-color: adaptive-contrast(var(--background));
}
- @if not($hover-background) and $background {
- $luminance: luminance($background);
+ @if not($border-color) and $background {
+ $border-color: var(--background);
+ }
- @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
- $hover-background: color.scale($background, $lightness: 14%);
- } @else {
- $hover-background: color.scale($background, $lightness: -4%);
- }
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 0.9));
}
@if not($hover-text-color) and $hover-background {
- $hover-text-color: text-contrast(to-opaque($hover-background));
+ $hover-text-color: adaptive-contrast(var(--hover-background));
}
@if not($focus-background) and $background {
- $luminance: luminance($background);
+ $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+ }
- @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
- $focus-background: color.scale($background, $lightness: 22%);
- } @else {
- $focus-background: color.scale($background, $lightness: -8%);
+ @if $variant == 'fluent' {
+ @if not($focus-background) and $selected-background {
+ $focus-background: var(--selected-background);
}
}
@if not($focus-text-color) and $focus-background {
- $focus-text-color: text-contrast(to-opaque($focus-background));
+ $focus-text-color: adaptive-contrast(var(--focus-background));
}
- @if not($selected-background) and $background {
- $luminance: luminance($background);
-
- @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
- $selected-background: color.scale($background, $lightness: 22%);
- } @else {
- $selected-background: color.scale($background, $lightness: -8%);
+ @if $variant != 'indigo' and $variant != 'fluent' {
+ @if not($selected-background) and $background {
+ $selected-background: var(--background);
+ }
+ } @else {
+ @if not($selected-background) and $background {
+ $selected-background: hsl(from var(--background) h s calc(l * 1.1));
}
}
@if not($selected-text-color) and $selected-background {
- $selected-text-color: text-contrast(to-opaque($selected-background));
+ $selected-text-color: adaptive-contrast(var(--selected-background));
}
- @if not($hover-selected-background) and $hover-background {
- $hover-selected-background: $hover-background;
+ @if not($hover-selected-background) and $selected-background {
+ $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9));
}
@if not($hover-selected-text-color) and $hover-selected-background {
- $hover-selected-text-color: text-contrast(to-opaque($hover-selected-background));
+ $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
}
- @if not($focus-selected-background) and $selected-background {
- $luminance: luminance($selected-background);
-
- @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
- $focus-selected-background: color.scale($background, $lightness: 32%);
- } @else {
- $focus-selected-background: color.scale($background, $lightness: -16%);
+ @if $variant != 'indigo' {
+ @if not($focus-selected-background) and $selected-background {
+ $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8));
+ }
+ } @else {
+ @if not($focus-selected-background) and $selected-background {
+ $focus-selected-background: var(--selected-background);
}
}
@if not($focus-selected-text-color) and $focus-selected-background {
- $focus-selected-text-color: text-contrast(to-opaque($focus-selected-background));
+ $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
}
@if not($hover-border-color) and $border-color {
- $hover-border-color: $border-color;
+ $hover-border-color: var(--border-color);
}
@if not($focus-border-color) and $border-color {
- $focus-border-color: $border-color;
+ $focus-border-color: var(--border-color);
}
@if not($selected-border-color) and $border-color {
- $selected-border-color: $border-color;
+ $selected-border-color: var(--border-color);
}
@if not($hover-selected-border-color) and $border-color {
- $hover-selected-border-color: $border-color;
+ $hover-selected-border-color: var(--border-color);
}
@if not($focus-selected-border-color) and $border-color {
- $focus-selected-border-color: $border-color;
+ $focus-selected-border-color: var(--border-color);
+ }
+
+ @if $variant == 'indigo' {
+ @if not($selected-border-color) and $selected-background {
+ $selected-border-color: var(--selected-background);
+ }
+
+ @if not($hover-selected-border-color) and $hover-selected-background {
+ $hover-selected-border-color: var(--hover-selected-background);
+ }
+
+ @if not($focus-selected-border-color) and $focus-selected-background {
+ $focus-selected-border-color: var(--focus-selected-background);
+ }
+ }
+
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($focus-outline-color) and $focus-background {
+ $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4);
+ }
+
+ @if not($focus-selected-outline-color) and $focus-selected-background {
+ $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4);
+ }
}
@if not($ghost-shadow) {
@@ -240,11 +262,6 @@
remove-icon-color-focus: $remove-icon-color-focus,
focus-selected-outline-color: $focus-selected-outline-color,
focus-outline-color: $focus-outline-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
size: $size,
));
}
@@ -256,8 +273,8 @@
@include css-vars($theme);
$chip-max-width: 32ch;
- $variant: map.get($theme, '_meta', 'variant');
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
+ $variant: map.get($theme, '_meta', 'theme');
+ $theme-variant: map.get($theme, '_meta', 'variant');
$chip-padding: (
comfortable: rem(if($variant != 'indigo', 12px, 7px)),
From 05dab174bf348155ae9feb7232255bb8fe915dd5 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Thu, 17 Apr 2025 10:33:46 +0300
Subject: [PATCH 20/53] feat(radio): improve radio theme (#15680)
---
.../styles/components/radio/_radio-theme.scss | 64 ++++++++++++++++---
1 file changed, 54 insertions(+), 10 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
index f3980d160fe..5c75385adfc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -24,6 +24,7 @@
/// @param {Color} $hover-color [null] - The border and dot colors on hover.
/// @param {Color} $fill-color-hover [null] - The checked dot color on hover.
/// @param {Color} $fill-hover-border-color [null] - The checked border color on hover.
+/// @param {Color} $focus-border-color [null] - The focus border color.
/// @param {Color} $focus-outline-color [null] - The focus outlined color.
/// @param {Color} $focus-outline-color-filled [null] - The focus outline color when radio is filled.
/// @param {Color} $error-color [null] - The label, border and dot color in invalid state.
@@ -46,6 +47,7 @@
$empty-fill-color: null,
$fill-color: null,
$fill-hover-border-color: null,
+ $focus-border-color: null,
$focus-outline-color: null,
$focus-outline-color-filled: null,
$disabled-color: null,
@@ -67,7 +69,53 @@
}
$theme: digest-schema($radio-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if not($hover-color) and $empty-color {
+ $hover-color: hsl(from var(--empty-color) h s calc(l * 0.9));
+ }
+
+ @if not($fill-color-hover) and $fill-color {
+ $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+ }
+
+ @if $variant != 'bootstrap' {
+ @if not($fill-hover-border-color) and $fill-color-hover {
+ $fill-hover-border-color: var(--fill-color-hover);
+ }
+ }
+
+ @if not($label-color-hover) and $label-color {
+ $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+ }
+
+ @if not($error-color-hover) and $error-color {
+ $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+ }
+
+ @if not($focus-outline-color-error) and $error-color {
+ $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($focus-border-color) and $fill-color {
+ $focus-border-color: var(--fill-color);
+ }
+
+ @if not($focus-outline-color) and $fill-color {
+ $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($focus-outline-color) and $empty-color {
+ $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+ }
+
+ @if not($focus-outline-color-filled) and $fill-color {
+ $focus-outline-color-filled: hsla(from var(--fill-color) h s l / .5);
+ }
+ }
@return extend($theme, (
name: $name,
@@ -82,16 +130,12 @@
disabled-fill-color: $disabled-fill-color,
hover-color: $hover-color,
fill-color-hover: $fill-color-hover,
+ focus-border-color: $focus-border-color,
focus-outline-color: $focus-outline-color,
focus-outline-color-filled: $focus-outline-color-filled,
error-color: $error-color,
error-color-hover: $error-color-hover,
focus-outline-color-error: $focus-outline-color-error,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -102,8 +146,8 @@
@include css-vars($theme);
@include scale-in-out($start-scale: .9);
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
- $variant: map.get($theme, '_meta', 'variant');
+ $theme-variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$material-theme: $variant == 'material';
$bootstrap-theme: $variant == 'bootstrap';
$not-bootstrap-theme: $variant != 'bootstrap';
@@ -462,7 +506,7 @@
box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
&::after {
- border-color: color($color: 'primary', $variant: 200);
+ border-color: var-get($theme, 'focus-border-color');
}
}
}
@@ -478,7 +522,7 @@
%igx-checkbox--focused-hovered {
@if $variant == 'bootstrap' {
%radio-composite:after {
- border-color: color($color: 'primary', $variant: 300);
+ border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
}
}
}
From 00488445c3efb255614f66cbae13d6257e38c7ce Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:32:26 +0300
Subject: [PATCH 21/53] feat(button-group): improve button group theme (#15501)
---
.../button-group/_button-group-theme.scss | 142 ++++++++++++++----
1 file changed, 113 insertions(+), 29 deletions(-)
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 ff81ce04820..ccf7fb9d749 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
@@ -120,44 +120,130 @@
}
$theme: digest-schema($button-group-schema);
- $meta: map.get($theme, '_meta');
$border: rem(1px) solid map.get($theme, 'item-selected-border-color');
+ //background colors
+ @if not($item-hover-background) and $item-background {
+ $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+ }
+
+ @if not($item-selected-background) and $item-background {
+ $item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7));
+ }
+
+ @if not($item-selected-hover-background) and $item-selected-background {
+ $item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1));
+ }
+
+ @if not($item-selected-focus-background) and $item-selected-background {
+ $item-selected-focus-background: var(--item-selected-background);
+ }
+
+ @if not($item-selected-focus-hover-background) and $item-selected-hover-background {
+ $item-selected-focus-hover-background: var(--item-selected-hover-background);
+ }
+
+ @if not($item-focused-background) and $item-background {
+ $item-focused-background: var(--item-hover-background);
+ }
+
+ @if not($item-focused-hover-background) and $item-hover-background {
+ $item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9));
+ }
+
+ @if not($disabled-background-color) and $item-background {
+ $disabled-background-color: var(--item-background);
+ }
+
+ @if not($disabled-selected-background) and $item-selected-background {
+ $disabled-selected-background: rgba(gray, 0.3);
+ }
+
+ //border colors
+ @if not($item-border-color) and $item-background {
+ $item-border-color: hsl(from var(--item-background) h s calc(l * 0.8));
+ }
+
+ @if not($item-hover-border-color) and $item-border-color {
+ $item-hover-border-color: var(--item-border-color);
+ }
+
+ @if not($item-focused-border-color) and $item-border-color {
+ $item-focused-border-color: var(--item-border-color);
+ }
+
+ @if not($item-selected-border-color) and $item-border-color {
+ $item-selected-border-color: var(--item-border-color);
+ }
+
+ @if not($item-selected-hover-border-color) and $item-border-color {
+ $item-selected-hover-border-color: var(--item-border-color);
+ }
+
+ @if not($item-disabled-border) and $item-border-color {
+ $item-disabled-border: var(--item-border-color);
+ }
+
+ @if not($disabled-selected-border-color) and $item-border-color {
+ $disabled-selected-border-color: var(--item-border-color);
+ }
+
+ //text and icon colors
@if not($item-text-color) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- $item-text-color: text-contrast($item-background);
- }
+ $item-text-color: adaptive-contrast(var(--item-background));
}
- @if not($item-hover-text-color) and $item-hover-background {
- @if meta.type-of($item-hover-background) == 'color' {
- $item-hover-text-color: text-contrast($item-hover-background);
- }
+ @if not($item-icon-color) and $item-text-color {
+ $item-icon-color: var(--item-text-color);
}
- @if not($item-selected-background) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- $item-selected-background: text-contrast($item-background);
- }
+ @if not($item-hover-text-color) and $item-hover-background {
+ $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
}
- @if not($idle-shadow-color) and $selected-shadow-color {
- @if meta.type-of($selected-shadow-color) == 'color' {
- $idle-shadow-color: $selected-shadow-color;
- }
+ @if not($item-hover-icon-color) and $item-hover-text-color {
+ $item-hover-icon-color: var(--item-hover-text-color);
}
- @if not($selected-shadow-color) and $idle-shadow-color {
- @if meta.type-of($idle-shadow-color) == 'color' {
- $selected-shadow-color: $idle-shadow-color;
- }
+ @if not($item-focused-text-color) and $item-focused-background {
+ $item-focused-text-color: adaptive-contrast(var(--item-focused-background));
}
@if not($item-selected-text-color) and $item-selected-background {
- @if meta.type-of($item-selected-background) == 'color' {
- $item-selected-text-color: text-contrast($item-selected-background);
- }
+ $item-selected-text-color: adaptive-contrast(var(--item-selected-background));
+ }
+
+ @if not($item-selected-icon-color) and $item-selected-text-color {
+ $item-selected-icon-color: var(--item-selected-text-color);
+ }
+
+ @if not($item-selected-hover-text-color) and $item-selected-hover-background {
+ $item-selected-hover-text-color: adaptive-contrast(var(--item-selected-hover-background));
+ }
+
+ @if not($item-selected-hover-icon-color) and $item-selected-hover-text-color {
+ $item-selected-hover-icon-color: var(--item-selected-hover-text-color);
+ }
+
+ @if not($disabled-text-color) and $disabled-background-color {
+ $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4);
+ }
+
+ @if not($disabled-selected-text-color) and $disabled-text-color {
+ $disabled-selected-text-color: var(--disabled-text-color);
+ }
+
+ @if not($idle-shadow-color) and $item-background {
+ $idle-shadow-color: hsla(from var(--item-background) h s l / .5);
+ }
+
+ @if not($idle-shadow-color) and $selected-shadow-color {
+ $idle-shadow-color: var(--selected-shadow-color);
+ }
+
+ @if not($selected-shadow-color) and $idle-shadow-color {
+ $selected-shadow-color: var(--idle-shadow-color);
}
@if map.get($button-group-schema, 'elevation') > 0 {
@@ -205,11 +291,7 @@
border: $border,
shadow: $shadow,
idle-shadow-color: $idle-shadow-color,
- selected-shadow-color: $selected-shadow-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
+ selected-shadow-color: $selected-shadow-color
));
}
@@ -223,7 +305,7 @@
$group-items-margin: rem(10px, 16px);
$outline-btn-indent: rem(2px);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$bootstrap-theme: $variant == 'bootstrap';
$indigo-theme: $variant == 'indigo';
$group-item-min-width: map.get((
@@ -445,6 +527,7 @@
@if $variant == 'bootstrap' {
background: var-get($theme, 'item-background');
z-index: 1;
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
&:active {
background: var-get($theme, 'item-hover-background');
@@ -691,6 +774,7 @@
color: var-get($theme, 'item-selected-text-color');
border-color: var-get($theme, 'item-selected-border-color');
background: var-get($theme, 'item-selected-background');
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
igx-icon {
color: var-get($theme, 'item-selected-icon-color');
From 9e27e8ec207d483146d8a5622bb6725dc54183e4 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:33:13 +0300
Subject: [PATCH 22/53] feat(carousel): improve carousel theme and add missed
properties (#15525)
---
.../components/carousel/_carousel-theme.scss | 126 ++++++++++++++----
1 file changed, 103 insertions(+), 23 deletions(-)
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 d90e486d0b9..d4515cf9683 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
@@ -21,9 +21,13 @@
/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
/// @param {Color} $button-border-color [null] - The previous/next buttons idle border color.
/// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color.
+/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus.
/// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
+/// @param {Color} $indicator-background [null] - The indicators container background color.
+/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
/// @param {Color} $indicator-dot-color [null] - The idle indicator dot color.
/// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color.
+/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus.
/// @param {Color} $indicator-border-color [null] - The idle indicator border color.
/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
/// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
@@ -54,13 +58,18 @@
$button-disabled-background: null,
$button-arrow-color: null,
$button-hover-arrow-color: null,
+ $button-focus-arrow-color: null,
$button-disabled-arrow-color: null,
$button-border-color: null,
$button-hover-border-color: null,
+ $button-focus-border-color: null,
$button-disabled-border-color: null,
+ $indicator-background: null,
+ $label-indicator-background: null,
$indicator-dot-color: null,
$indicator-hover-dot-color: null,
+ $indicator-focus-color: null,
$indicator-border-color: null,
$indicator-active-dot-color: null,
$indicator-active-border-color: null,
@@ -76,7 +85,25 @@
}
$theme: digest-schema($carousel-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if $variant == 'indigo' {
+ @if not($button-hover-background) and $button-background {
+ $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+ }
+
+ @if not($button-border-color) and $button-background {
+ $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
+ }
+
+ @if not($button-hover-border-color) and $button-border-color {
+ $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
+ }
+
+ @if not($indicator-active-dot-color) and not($indicator-background) and $button-background {
+ $indicator-active-dot-color: var(--button-background);
+ }
+ }
@if not($button-shadow) {
$button-elevation: map.get($carousel-schema, 'button-elevation');
@@ -84,16 +111,80 @@
}
@if not($button-arrow-color) and $button-background {
- $button-arrow-color: text-contrast($button-background);
+ $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85));
+ }
+
+ @if not($button-hover-background) and $button-background {
+ $button-hover-background: var(--button-background);
}
@if not($button-hover-arrow-color) and $button-hover-background {
- $button-hover-arrow-color: text-contrast($button-hover-background);
+ $button-hover-arrow-color: adaptive-contrast(var(--button-hover-background));
+ }
+
+ @if not($button-focus-arrow-color) and $button-hover-arrow-color {
+ $button-focus-arrow-color: var(--button-hover-arrow-color);
+ }
+
+ @if not($button-disabled-background) and $button-background {
+ $button-disabled-background: var(--button-background);
}
@if not($button-disabled-arrow-color) and $button-disabled-background {
- @if meta.type-of($button-disabled-background) == 'color' {
- $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+ $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / .4);
+ }
+
+ @if not($indicator-dot-color) and $indicator-background {
+ $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / .8);
+ }
+
+ @if not($indicator-hover-dot-color) and $indicator-dot-color {
+ $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+ }
+
+ @if not($indicator-border-color) and $indicator-dot-color {
+ $indicator-border-color: var(--indicator-dot-color);
+ }
+
+ @if not($indicator-active-dot-color) and $indicator-background {
+ $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
+ }
+
+ @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
+ $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
+ }
+
+ @if not($indicator-active-border-color) and $indicator-active-dot-color {
+ $indicator-active-border-color: var(--indicator-active-dot-color);
+ }
+
+ @if $variant == 'material' {
+ @if not($button-focus-border-color) and $button-focus-arrow-color {
+ $button-focus-border-color: var(--button-focus-arrow-color);
+ }
+ }
+
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ @if not($button-focus-border-color) and $button-background {
+ $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5);
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($button-focus-border-color) and $indicator-active-dot-color {
+ $button-focus-border-color: var(--indicator-active-dot-color);
+ }
+
+ @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
+ $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / .5);
+ }
+ } @else {
+ @if not($indicator-focus-color) and not($indicator-background) and $button-background {
+ $indicator-focus-color: var(--button-background);
+ }
+
+ @if not($indicator-focus-color) and $indicator-background {
+ $indicator-focus-color: adaptive-contrast(var(--indicator-background));
}
}
@@ -110,21 +201,22 @@
button-hover-background: $button-hover-background,
button-arrow-color: $button-arrow-color,
button-hover-arrow-color: $button-hover-arrow-color,
+ button-focus-arrow-color: $button-focus-arrow-color,
button-disabled-arrow-color: $button-disabled-arrow-color,
button-border-color: $button-border-color,
button-hover-border-color: $button-hover-border-color,
+ button-focus-border-color: $button-focus-border-color,
button-disabled-border-color: $button-disabled-border-color,
+ indicator-background: $indicator-background,
+ label-indicator-background: $label-indicator-background,
indicator-dot-color: $indicator-dot-color,
indicator-hover-dot-color: $indicator-hover-dot-color,
+ indicator-focus-color: $indicator-focus-color,
indicator-border-color: $indicator-border-color,
indicator-active-dot-color: $indicator-active-dot-color,
indicator-active-border-color: $indicator-active-border-color,
indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -139,7 +231,7 @@
$indicator-border-style: rem(2px) solid;
$btn-indent: rem(3px);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$not-bootstrap-theme: $variant != 'bootstrap';
%igx-carousel-display {
@@ -206,25 +298,17 @@
border: rem(2px) solid var-get($theme, 'button-focus-border-color');
igx-icon {
- color: var-get($theme, 'button-focus-border-color');
+ color: var-get($theme, 'button-focus-arrow-color');
}
@if $variant == 'bootstrap' {
box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
border-color: var-get($theme, 'button-border-color');
-
- igx-icon {
- color: var-get($theme, 'button-arrow-color');
- }
}
@if $variant == 'fluent' {
border: none;
- igx-icon {
- color: var-get($theme, 'indicator-focus-color');
- }
-
&::after {
position: absolute;
content: '';
@@ -239,10 +323,6 @@
@if $variant == 'indigo' {
box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
-
- igx-icon {
- color: var-get($theme, 'button-arrow-color');
- }
}
}
From b3ce5c61477af85ca2dacce425d6a25262468490 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:33:36 +0300
Subject: [PATCH 23/53] feat(dropdown): improve dropdown theme (#15647)
---
.../drop-down/_drop-down-theme.scss | 80 +++++++++++--------
1 file changed, 48 insertions(+), 32 deletions(-)
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 f0cbccbc4a9..46fb7ede2d2 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
@@ -91,68 +91,88 @@
}
$theme: digest-schema($drop-down-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
@if not($item-text-color) and $background-color {
- $item-text-color: text-contrast($background-color);
+ $item-text-color: adaptive-contrast(var(--background-color));
+ }
+
+ @if not($item-icon-color) and $item-text-color {
+ $item-icon-color: hsla(from var(--item-text-color) h s l / 0.8);
}
@if not($hover-item-background) and $background-color {
- $hover-item-text-color: text-contrast($background-color);
+ $hover-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .12);
+ }
- @if meta.type-of($background-color) == 'color' {
- $hover-item-background: rgba(text-contrast($background-color), .12);
- }
+ @if not($hover-item-text-color) and $item-text-color {
+ $hover-item-text-color: var(--item-text-color);
}
- @if not($hover-item-text-color) and $background-color {
- $hover-item-text-color: text-contrast($background-color);
+ @if not($hover-item-icon-color) and $hover-item-text-color {
+ $hover-item-icon-color: hsla(from var(--hover-item-text-color) h s l / 0.8);
}
@if not($focused-item-background) and $background-color {
- $focused-item-text-color: text-contrast($background-color);
-
- @if meta.type-of($background-color) == 'color' {
- $focused-item-background: rgba(text-contrast($background-color), .12);
- }
+ $focused-item-background: hsl(from var(--background-color) h s calc(l * 0.8));
}
@if not($focused-item-text-color) and $focused-item-background {
- $focused-item-text-color: text-contrast($focused-item-background);
+ $focused-item-text-color: adaptive-contrast(var(--focused-item-background));
+ }
+
+ @if not($selected-item-background) and $background-color {
+ $selected-item-background: hsl(from var(--background-color) h s calc(l * 1.2));
}
@if not($selected-item-text-color) and $selected-item-background {
- $selected-item-text-color: text-contrast($selected-item-background);
+ $selected-item-text-color: adaptive-contrast(var(--selected-item-background));
+ }
+
+ @if not($selected-item-icon-color) and $selected-item-text-color {
+ $selected-item-icon-color: hsla(from var(--selected-item-text-color) h s l / 0.8);
+ }
+
+ @if not($selected-hover-item-background) and $selected-item-background {
+ $selected-hover-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
}
@if not($selected-hover-item-text-color) and $selected-hover-item-background {
- $selected-hover-item-text-color: text-contrast($selected-hover-item-background);
+ $selected-hover-item-text-color: adaptive-contrast(var(--selected-hover-item-background));
+ }
+
+ @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color {
+ $selected-hover-item-icon-color: hsla(from var(--selected-hover-item-text-color) h s l / 0.8);
+ }
+
+ @if not($selected-focus-item-background) and $selected-item-background {
+ $selected-focus-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
}
@if not($selected-focus-item-text-color) and $selected-focus-item-background {
- $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+ $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
}
@if not($selected-focus-item-text-color) and $selected-focus-item-background {
- $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+ $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
}
- @if not($disabled-item-text-color) and $background-color {
- @if meta.type-of($background-color) == 'color' {
- $disabled-item-text-color: rgba(text-contrast($background-color), .36);
+ @if $variant == 'indigo' {
+ @if not($focused-item-border-color) and $selected-item-background {
+ $focused-item-border-color: var(--selected-item-background);
}
}
+ @if not($disabled-item-text-color) and $background-color {
+ $disabled-item-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .36);
+ }
+
@if not($disabled-item-text-color) and $disabled-item-background {
- @if meta.type-of($disabled-item-background) == 'color' {
- $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);
- }
+ $disabled-item-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .36);
}
@if not($header-text-color) and $background-color {
- @if meta.type-of($background-color) == 'color' {
- $header-text-color: rgba(text-contrast($background-color), .7);
- }
+ $header-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .7);
}
@if not($shadow) {
@@ -189,10 +209,6 @@
border-color: $border-color,
border-width: $border-width,
size: $size,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -201,7 +217,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin drop-down($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-drop-down {
position: absolute;
From 59b5fed15f5a391ff3808adc8964dd04171c13c3 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:33:58 +0300
Subject: [PATCH 24/53] feat(grid): improve grid theme (#15722)
---
.../styles/components/grid/_grid-theme.scss | 209 ++++++++++--------
1 file changed, 115 insertions(+), 94 deletions(-)
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 0166b635863..145d5f0dae8 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
@@ -225,104 +225,113 @@
}
$theme: digest-schema($grid-schema);
- $meta: map.get($theme, '_meta');
-
- @if not($cell-selected-within-text-color) and $cell-selected-within-background {
- $cell-selected-within-text-color: text-contrast($cell-selected-within-background);
- }
@if not($ghost-header-icon-color) and $ghost-header-background {
- @if meta.type-of($ghost-header-background) == 'color' {
- $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
- }
+ $ghost-header-icon-color: hsla(from adaptive-contrast(var(--ghost-header-background)) h s l / .07);
}
@if not($ghost-header-text-color) and $ghost-header-background {
- $ghost-header-text-color: text-contrast($ghost-header-background);
+ $ghost-header-text-color: adaptive-contrast(var(--ghost-header-background));
}
- @if $header-background and meta.type-of($header-background) == 'color' {
- $header-background: to-opaque($header-background, color($color: 'surface'));
+ @if not($header-text-color) and $header-background {
+ $header-text-color: adaptive-contrast(var(--header-background));
}
- @if not($header-text-color) and $header-background {
- $header-text-color: text-contrast($header-background);
+ @if not($header-selected-background) and $header-background {
+ $header-selected-background: hsl(from var(--header-background) h s calc(l * 0.9));
}
@if not($header-selected-text-color) and $header-selected-background {
- $header-selected-text-color: text-contrast($header-selected-background);
+ $header-selected-text-color: adaptive-contrast(var(--header-selected-background));
}
@if not($header-border-color) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $header-border-color: rgba(text-contrast($header-background), .24);
- }
+ $header-border-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .24);
}
@if not($content-text-color) and $content-background {
- $content-text-color: text-contrast($content-background);
+ $content-text-color: adaptive-contrast(var(--content-background));
}
@if not($row-odd-background) and $content-background {
- $row-odd-background: $content-background;
- }
-
- @if $row-odd-background and meta.type-of($row-odd-background) == 'color' and color.alpha($row-odd-background) != 1 {
- $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));
-
- $row-odd-background: to-opaque($row-odd-background, $cbg);
+ $row-odd-background: hsl(from var(--content-background) h calc(s - 10) l);
}
@if not($row-odd-text-color) and $row-odd-background {
- $row-odd-text-color: text-contrast($row-odd-background);
+ $row-odd-text-color: adaptive-contrast(var(--row-odd-background));
}
@if not($row-even-background) and $content-background {
- $row-even-background: $content-background;
- }
-
- @if $row-even-background and meta.type-of($row-even-background) == 'color' and color.alpha($row-even-background) != 1 {
- $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));
-
- $row-even-background: to-opaque($row-even-background, $cbg);
+ $row-even-background: hsl(from var(--content-background) h calc(s + 10) l);
}
@if not($row-even-text-color) and $row-even-background {
- $row-even-text-color: text-contrast($row-even-background);
+ $row-even-text-color: adaptive-contrast(var(--row-even-background));
}
@if not($row-hover-background) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $row-hover-background: to-opaque(rgba(text-contrast($content-background), .08), $content-background)
- }
+ $row-hover-background: hsl(from var(--content-background) h s calc(l * 0.85));
}
@if not($row-hover-text-color) and $row-hover-background {
- $row-hover-text-color: text-contrast($row-hover-background);
+ $row-hover-text-color: adaptive-contrast(var(--row-hover-background));
+ }
+
+ @if not($cell-selected-background) and $content-background {
+ $cell-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
}
@if not($cell-selected-text-color) and $cell-selected-background {
- $cell-selected-text-color: text-contrast($cell-selected-background);
+ $cell-selected-text-color: adaptive-contrast(var(--cell-selected-background));
+ }
+
+ @if not($row-selected-background) and $content-background {
+ $row-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
}
@if not($row-selected-text-color) and $row-selected-background {
- $row-selected-text-color: text-contrast($row-selected-background);
+ $row-selected-text-color: adaptive-contrast(var(--row-selected-background));
+ }
+
+ @if not($row-selected-hover-background) and $row-selected-background {
+ $row-selected-hover-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
}
@if not($row-selected-hover-text-color) and $row-selected-hover-background {
- $row-selected-hover-text-color: text-contrast($row-selected-hover-background);
+ $row-selected-hover-text-color: adaptive-contrast(var(--row-selected-hover-background));
}
@if not($row-border-color) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $row-border-color: rgba(text-contrast($content-background), .08)
- }
+ $row-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08);
+ }
+
+ @if not($cell-selected-within-background) and $row-selected-background {
+ $cell-selected-within-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
+ }
+
+ @if not($cell-selected-within-text-color) and $cell-selected-within-background {
+ $cell-selected-within-text-color: adaptive-contrast(var(--cell-selected-within-background));
+ }
+
+ @if not($cell-editing-background) and $content-background {
+ $cell-editing-background: var(--content-background);
+ }
+
+ @if not($cell-editing-foreground) and $cell-editing-background {
+ $cell-editing-foreground: adaptive-contrast(var(--cell-editing-background));
+ }
+
+ @if not($cell-editing-focus-foreground) and $cell-editing-background {
+ $cell-editing-focus-foreground: adaptive-contrast(var(--cell-editing-background));
+ }
+
+ @if not($cell-active-border-color) and $content-background {
+ $cell-active-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5);
}
@if not($pinned-border-color) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $pinned-border-color: rgba(text-contrast($content-background), .08)
- }
+ $pinned-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08);
}
@if not($group-row-background) and $header-background {
@@ -330,61 +339,75 @@
}
@if not($expand-icon-color) and $group-row-background {
- $expand-icon-color: text-contrast($group-row-background)
+ $expand-icon-color: adaptive-contrast(var(--group-row-background))
+ }
+
+ @if not($group-row-selected-background) and $group-row-background {
+ $group-row-selected-background: hsl(from var(--group-row-background) h s calc(l * 0.8));
}
@if not($group-label-text) and $group-row-selected-background {
- $group-label-text: text-contrast($group-row-selected-background)
+ $group-label-text: adaptive-contrast(var(--group-row-selected-background))
}
@if not($expand-icon-color) and $group-row-selected-background {
- $expand-icon-color: text-contrast($group-row-selected-background)
+ $expand-icon-color: adaptive-contrast(var(--group-row-selected-background))
+ }
+
+ @if not($expand-icon-hover-color) and $expand-icon-color {
+ $expand-icon-hover-color: var(--expand-icon-color);
}
@if not($group-count-background) and $group-row-selected-background {
- $group-count-background: text-contrast($group-row-selected-background);
+ $group-count-background: adaptive-contrast(var(--group-row-selected-background));
}
@if not($expand-all-icon-color) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $expand-all-icon-color: rgba(text-contrast($header-background), .87);
- }
+ $expand-all-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .87);
}
@if not($expand-all-icon-hover-color) and $header-background {
- $expand-all-icon-hover-color: text-contrast($header-background);
+ $expand-all-icon-hover-color: adaptive-contrast(var(--header-background));
+ }
+
+ @if not($sorted-header-icon-color) and $header-background {
+ $sorted-header-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+ }
+
+ @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color {
+ $sortable-header-icon-hover-color: hsla(from var(--sorted-header-icon-color) h s l / 1);
+ }
+
+ @if not($edit-mode-color) and $content-background {
+ $edit-mode-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5);
}
@if not($group-label-text) and $group-row-background {
- $group-label-text: text-contrast($group-row-background)
+ $group-label-text: adaptive-contrast(var(--group-row-background))
}
@if not($group-count-background) and $group-row-background {
- $group-count-background: text-contrast($group-row-background);
+ $group-count-background: adaptive-contrast(var(--group-row-background));
}
@if not($group-count-text-color) and $group-count-background {
- $group-count-text-color: text-contrast($group-count-background);
+ $group-count-text-color: adaptive-contrast(var(--group-count-background));
}
@if not($grouparea-background) and $header-background {
- $grouparea-background: $header-background
+ $grouparea-background: var(--header-background);
}
@if not($grouparea-color) and $grouparea-background {
- @if meta.type-of($grouparea-background) == 'color' {
- $grouparea-color: rgba(text-contrast($grouparea-background), .8)
- }
+ $grouparea-color: hsla(from adaptive-contrast(var(--grouparea-background)) h s l / .8);
}
@if not($grouparea-color) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $grouparea-color: rgba(text-contrast($header-background), .8)
- }
+ $grouparea-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8);
}
@if not($drop-area-background) and $grouparea-background {
- $drop-area-background: text-contrast($grouparea-background);
+ $drop-area-background: adaptive-contrast(var(--grouparea-background));
}
@if not($drop-area-on-drop-background) and $drop-area-background {
@@ -392,49 +415,53 @@
}
@if not($drop-area-text-color) and $drop-area-background {
- $drop-area-text-color: text-contrast($drop-area-background)
+ $drop-area-text-color: adaptive-contrast(var(--drop-area-background));
}
@if not($drop-area-icon-color) and $drop-area-background {
- $drop-area-icon-color: text-contrast($drop-area-background)
+ $drop-area-icon-color: adaptive-contrast(var(--drop-area-background));
}
@if not($filtering-header-background) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- @if luminance($header-background) < .5 {
- $filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
- } @else {
- $filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
- }
- }
+ $filtering-header-background: color-mix(in hsl, var(--header-background), #fff 5%);
}
@if not($filtering-header-text-color) and $filtering-header-background {
- $filtering-header-text-color: text-contrast($filtering-header-background);
+ $filtering-header-text-color: adaptive-contrast(var(--filtering-header-background));
}
@if not($filtering-row-background) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- @if luminance($header-background) < .5 {
- $filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
- } @else {
- $filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
- }
- }
+ $filtering-row-background: color-mix(in hsl, var(--header-background), #fff 5%);
}
@if not($filtering-row-text-color) and $filtering-row-background {
- $filtering-row-text-color: text-contrast(to-opaque($filtering-row-background));
+ $filtering-row-text-color: adaptive-contrast(var(--filtering-row-background));
+ }
+
+ @if not($excel-filtering-header-foreground) and $filtering-row-background {
+ $excel-filtering-header-foreground: adaptive-contrast(var(--filtering-row-background));
+ }
+
+ @if not($excel-filtering-subheader-foreground) and $filtering-row-background {
+ $excel-filtering-subheader-foreground: adaptive-contrast(var(--filtering-row-background));
+ }
+
+ @if not($excel-filtering-actions-foreground) and $filtering-row-background {
+ $excel-filtering-actions-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8);
+ }
+
+ @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background {
+ $excel-filtering-actions-disabled-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5);
}
@if not($grid-shadow) {
$grid-elevation: map.get($grid-schema, 'grid-elevation');
- $grid-shadow: elevation($grid-elevation);
+ $grid-shadow: elevation(var(--grid-elevation));
}
@if not($drag-shadow) {
$drag-elevation: map.get($grid-schema, 'drag-elevation');
- $drag-shadow: elevation($drag-elevation);
+ $drag-shadow: elevation(var(--drag-elevation));
}
@if not($drop-area-border-radius) {
@@ -553,12 +580,6 @@
cell-selected-within-background: $cell-selected-within-background,
cell-selected-within-text-color: $cell-selected-within-text-color,
-
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -580,8 +601,8 @@
@include scale-in-ver-center();
- $variant: map.get($theme, '_meta', 'variant');
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
+ $variant: map.get($theme, '_meta', 'theme');
+ $theme-variant: map.get($theme, '_meta', 'variant');
$bootstrap-theme: $variant == 'bootstrap';
$not-bootstrap-theme: $variant != 'bootstrap';
From 86cf951932d04f4287e650785a6b9d0e47fd8276 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:34:22 +0300
Subject: [PATCH 25/53] feat(grid-summary): improve grid-summary theme (#15723)
---
.../grid-summary/_grid-summary-theme.scss | 25 +++++++++----------
1 file changed, 12 insertions(+), 13 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
index 294b866cbc8..b5f0f050fce 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -52,22 +52,25 @@
}
$theme: digest-schema($grid-summary-schema);
- $meta: map.get($theme, '_meta');
+
+ @if not($label-color) and $background-color {
+ $label-color: adaptive-contrast(var(--background-color));
+ }
+
+ @if not($label-hover-color) and $label-color {
+ $label-hover-color: var(--label-color);
+ }
@if not($result-color) and $background-color {
- $result-color: text-contrast($background-color);
+ $result-color: adaptive-contrast(var(--background-color));
}
@if not($border-color) and $background-color {
- @if type-of($background-color) == 'color' {
- $border-color: rgba(text-contrast($background-color), .26);
- }
+ $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
}
@if not($pinned-border-color) and $background-color {
- @if type-of($background-color) == 'color' {
- $pinned-border-color: rgba(text-contrast($background-color), .26);
- }
+ $pinned-border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
}
@return extend($theme, (
@@ -82,10 +85,6 @@
pinned-border-style: $pinned-border-style,
pinned-border-color: $pinned-border-color,
label-hover-color: $label-hover-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -95,7 +94,7 @@
@mixin grid-summary($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$cell-pin: (
style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
From ed6244d126d1abee27c1973646937a659ef2d9d0 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:34:45 +0300
Subject: [PATCH 26/53] feat(grid-toolbar): improve grid-toolbar-theme (#15724)
---
.../grid-toolbar/_grid-toolbar-theme.scss | 19 +++++++------------
1 file changed, 7 insertions(+), 12 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index f45ce0a3238..da35e179b9f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -52,30 +52,29 @@
}
$theme: digest-schema($grid-toolbar-schema);
- $meta: map.get($theme, '_meta');
@if not($title-text-color) and $background-color {
- $title-text-color: text-contrast($background-color);
+ $title-text-color: adaptive-contrast(var(--background-color));
}
@if not($item-text-color) and $dropdown-background {
- $item-text-color: text-contrast($dropdown-background);
+ $item-text-color: adaptive-contrast(var(--dropdown-background));
}
@if not($item-hover-text-color) and $dropdown-background {
- $item-hover-text-color: text-contrast($dropdown-background);
+ $item-hover-text-color: adaptive-contrast(var(--dropdown-background));
}
@if not($item-focus-text-color) and $dropdown-background {
- $item-focus-text-color: text-contrast($dropdown-background);
+ $item-focus-text-color: adaptive-contrast(var(--dropdown-background));
}
@if not($item-hover-text-color) and $item-hover-background {
- $item-hover-text-color: text-contrast($item-hover-background);
+ $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
}
@if not($item-focus-text-color) and $item-focus-background {
- $item-focus-text-color: text-contrast($item-focus-background);
+ $item-focus-text-color: adaptive-contrast(var(--item-focus-background));
}
@return extend($theme, (
@@ -89,10 +88,6 @@
item-hover-text-color: $item-hover-text-color,
item-focus-background: $item-focus-background,
item-focus-text-color: $item-focus-text-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
size: $size,
border-color: $border-color
));
@@ -104,7 +99,7 @@
@mixin grid-toolbar($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$bootstrap-theme: $variant == 'bootstrap';
// Caption
From a04f48164836b0065d76cce4b0c2dc7b6f017974 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:35:44 +0300
Subject: [PATCH 27/53] feat(list): improve list theme (#15654)
---
.../styles/components/list/_list-theme.scss | 104 +++++++-----------
1 file changed, 40 insertions(+), 64 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index ee2f3119d64..300c7122c3e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -94,160 +94,140 @@
}
$theme: digest-schema($list-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
@if not($header-background) and $background {
- $header-background: $background;
+ $header-background: var(--background);
}
@if not($header-background) and $item-background {
- $header-background: $item-background;
+ $header-background: var(--item-background);
}
@if not($item-background) and $background {
- $item-background: $background;
+ $item-background: var(--background);
}
@if not($background) and $item-background {
- $background: $item-background;
+ $background: var(--item-background);
}
@if not($item-background-hover) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- @if luminance($item-background) < .5 {
- $item-background-hover: color.scale($item-background, $lightness: 8%);
- } @else {
- $item-background-hover: color.scale($item-background, $lightness: -8%);
- }
- }
+ $item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
}
@if not($item-background-active) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- @if luminance($item-background) < .5 {
- $item-background-active: color.scale($item-background, $lightness: 8%);
- } @else {
- $item-background-active: color.scale($item-background, $lightness: -8%);
- }
- }
+ $item-background-active: hsl(from var(--item-background) h s calc(l * 0.9));
}
@if not($item-background-selected) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- @if luminance($item-background) < .5 {
- $item-background-selected: color.scale($item-background, $lightness: 8%);
- } @else {
- $item-background-selected: color.scale($item-background, $lightness: -8%);
- }
- }
+ $item-background-selected: hsl(from var(--item-background) h s calc(l * 0.9));
}
@if not($header-text-color) and $header-background {
- $header-text-color: text-contrast($header-background);
+ $header-text-color: adaptive-contrast(var(--header-background));
}
@if not($item-text-color) and $item-background {
- $item-text-color: text-contrast($item-background);
+ $item-text-color: adaptive-contrast(var(--item-background));
}
@if not($item-title-color) and $item-background {
- $item-title-color: text-contrast($item-background);
+ $item-title-color: adaptive-contrast(var(--item-background));
}
@if not($item-action-color) and $item-background {
- $item-action-color: text-contrast($item-background);
+ $item-action-color: adaptive-contrast(var(--item-background));
}
@if not($item-thumbnail-color) and $item-background {
- $item-thumbnail-color: text-contrast($item-background);
+ $item-thumbnail-color: adaptive-contrast(var(--item-background));
}
@if not($item-subtitle-color) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- $item-subtitle-color: rgba(text-contrast($item-background), .74);
- }
+ $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .74);
}
@if not($item-subtitle-color) and $item-text-color {
- $item-subtitle-color: $item-text-color;
+ $item-subtitle-color: var(--item-text-color);
}
@if not($item-text-color-hover) and $item-background-hover {
- $item-text-color-hover: text-contrast($item-background-hover);
+ $item-text-color-hover: adaptive-contrast(var(--item-background-hover));
}
@if not($item-title-color-hover) and $item-background-hover {
- $item-title-color-hover: text-contrast($item-background-hover);
+ $item-title-color-hover: adaptive-contrast(var(--item-background-hover));
}
@if not($item-action-color-hover) and $item-background-hover {
- $item-action-color-hover: text-contrast($item-background-hover);
+ $item-action-color-hover: adaptive-contrast(var(--item-background-hover));
}
@if not($item-thumbnail-color-hover) and $item-background-hover {
- $item-thumbnail-color-hover: text-contrast($item-background-hover);
+ $item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover));
}
@if not($item-subtitle-color-hover) and $item-background-hover {
- @if meta.type-of($item-background-hover) == 'color' {
- $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
- }
+ $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / .74);
}
@if not($item-subtitle-color-hover) and $item-text-color-hover {
- $item-subtitle-color-hover: $item-text-color-hover;
+ $item-subtitle-color-hover: var(--item-text-color-hover);
}
@if not($item-text-color-active) and $item-background-active {
- $item-text-color-active: text-contrast($item-background-active);
+ $item-text-color-active: adaptive-contrast(var(--item-background-active));
}
@if not($item-text-color-selected) and $item-background-selected {
- $item-text-color-selected: text-contrast($item-background-selected);
+ $item-text-color-selected: adaptive-contrast(var(--item-background-selected));
}
@if not($item-title-color-active) and $item-background-active {
- $item-title-color-active: text-contrast($item-background-active);
+ $item-title-color-active: adaptive-contrast(var(--item-background-active));
}
@if not($item-title-color-selected) and $item-background-selected {
- $item-title-color-selected: text-contrast($item-background-selected);
+ $item-title-color-selected: adaptive-contrast(var(--item-background-selected));
}
@if not($item-action-color-active) and $item-background-active {
- $item-action-color-active: text-contrast($item-background-active);
+ $item-action-color-active: adaptive-contrast(var(--item-background-active));
}
@if not($item-action-color-selected) and $item-background-selected {
- $item-action-color-selected: text-contrast($item-background-selected);
+ $item-action-color-selected: adaptive-contrast(var(--item-background-selected));
}
@if not($item-thumbnail-color-active) and $item-background-active {
- $item-thumbnail-color-active: text-contrast($item-background-active);
+ $item-thumbnail-color-active: adaptive-contrast(var(--item-background-active));
}
@if not($item-thumbnail-color-selected) and $item-background-selected {
- $item-thumbnail-color-selected: text-contrast($item-background-selected);
+ $item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected));
}
@if not($item-subtitle-color-active) and $item-background-active {
- @if meta.type-of($item-background-active) == 'color' {
- $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
- }
+ $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / .74);
}
@if not($item-subtitle-color-selected) and $item-background-selected {
- @if meta.type-of($item-background-selected) == 'color' {
- $item-subtitle-color-selected: rgba(text-contrast($item-background-selected), .74);
- }
+ $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / .74);
}
@if not($item-subtitle-color-active) and $item-text-color-active {
- $item-subtitle-color-active: $item-text-color-active;
+ $item-subtitle-color-active: var(--item-text-color-active);
}
@if not($item-subtitle-color-selected) and $item-text-color-selected {
- $item-subtitle-color-selected: $item-text-color-selected;
+ $item-subtitle-color-selected: var(--item-text-color-selected);
+ }
+
+ @if $variant == 'fluent' or $variant == 'bootstrap'{
+ @if not($border-color) and $item-background {
+ $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .15);
+ }
}
@return extend($theme, (
@@ -283,10 +263,6 @@
item-thumbnail-color-selected: $item-thumbnail-color-selected,
border-color: $border-color,
border-width: $border-width,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -296,7 +272,7 @@
@mixin list($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$bootstrap-theme: $variant == 'bootstrap';
$theme-padding-block-l: map.get((
From 32a5f3758aa6da67ef146cf49cd52c3b6850cb63 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:36:14 +0300
Subject: [PATCH 28/53] feat(slider): improve slider theme (#15743)
---
.../components/slider/_slider-theme.scss | 99 +++++++++++++++++--
1 file changed, 92 insertions(+), 7 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
index 850d59d8df1..313d3e25ccb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
@@ -71,10 +71,99 @@
}
$theme: digest-schema($slider-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if $variant == 'fluent' or $variant == 'indigo' {
+ @if not($thumb-border-color) and $track-color {
+ $thumb-border-color: var(--track-color);
+ }
+
+ @if not($track-color) and $thumb-border-color {
+ $track-color: var(--thumb-border-color);
+ }
+
+ @if not($thumb-border-hover-color) and $thumb-border-color {
+ $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1));
+ }
+
+ @if $variant == 'fluent' {
+ @if not($thumb-focus-color) and $thumb-border-color {
+ $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2));
+ }
+ } @else {
+ @if not($thumb-focus-color) and $thumb-border-color {
+ $thumb-focus-color: hsla(from var(--thumb-border-color) h s l / 0.3);
+ }
+ }
+ }
+
+ @if $variant == 'material' {
+ @if not($thumb-color) and $track-color {
+ $thumb-color: var(--track-color);
+ }
+
+ @if not($track-color) and $thumb-color {
+ $track-color: var(--thumb-color);
+ }
+
+ @if not($base-track-color) and $track-color {
+ $base-track-color: hsla(from var(--track-color) h s l / 0.4);
+ }
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($thumb-border-color) and $thumb-color {
+ $thumb-border-color: var(--thumb-color);
+ }
+
+ @if not($thumb-focus-color) and $thumb-color {
+ $thumb-focus-color: hsla(from var(--thumb-color) h s l / 0.5);
+ }
+ }
+
+ @if not($track-hover-color) and $track-color {
+ $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1));
+ }
+
+ @if $variant != 'bootstrap' {
+ @if not($label-background-color) and $track-color {
+ $label-background-color: var(--track-color);
+ }
+ } @else {
+ @if not($label-background-color) and $thumb-color {
+ $label-background-color: var(--thumb-color);
+ }
+ }
+
@if not($label-text-color) and $label-background-color {
- $label-text-color: text-contrast($label-background-color);
+ $label-text-color: adaptive-contrast($label-background-color);
+ }
+
+ @if $variant != 'indigo' {
+ @if not($base-track-hover-color) and $base-track-color {
+ $base-track-hover-color: var(--base-track-color);
+ }
+ } @else {
+ @if not($base-track-hover-color) and $base-track-color {
+ $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8));
+ }
+ }
+
+ @if not($disabled-base-track-color) and $base-track-color {
+ $disabled-base-track-color: hsla(from var(--base-track-color) h s l / 0.5);
+ }
+
+ @if not($disabled-fill-track-color) and $track-color {
+ $disabled-fill-track-color: hsla(from var(--track-color) h s l / 0.5);
+ }
+
+ @if not($disabled-thumb-color) and $thumb-color {
+ $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2));
+ }
+
+ @if not($thumb-disabled-border-color) and $thumb-border-color {
+ $thumb-disabled-border-color: hsla(from var(--thumb-border-color) h s l / 0.5);
}
@return extend($theme, (
@@ -98,10 +187,6 @@
disabled-fill-track-color: $disabled-fill-track-color,
tick-label-color: $tick-label-color,
tick-color: $tick-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -111,7 +196,7 @@
@mixin slider($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$slider-height: rem(48px);
$ripple-size: rem(40px);
From fc6ec3561569e6b7eedd090d5531d99bf1f2ae2e Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:36:34 +0300
Subject: [PATCH 29/53] feat(stepper): improve stepper theme (#15687)
---
.../components/stepper/_stepper-theme.scss | 212 ++++++++++++++++--
1 file changed, 190 insertions(+), 22 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index e9d489aa0a4..870c2043799 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -186,50 +186,222 @@
}
$theme: digest-schema($stepper-schema);
- $meta: map.get($theme, '_meta');
- @if not($indicator-background) and $step-background {
- $indicator-background: text-contrast($step-background);
+ //default step
+ @if not($step-hover-background) and $step-background {
+ $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
}
- @if not($indicator-color) and $indicator-background {
- $indicator-color: text-contrast($indicator-background);
+ @if not($step-focus-background) and $step-background {
+ $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
}
- @if not($complete-indicator-color) and $complete-indicator-background {
- $complete-indicator-color: text-contrast($complete-indicator-background);
+ @if not($indicator-background) and $step-background {
+ $indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6);
}
- @if not($invalid-indicator-color) and $invalid-indicator-background {
- $invalid-indicator-color: text-contrast($invalid-indicator-background);
+ @if not($indicator-outline) and $indicator-background {
+ $indicator-outline: var(--indicator-background);
}
- @if not($current-indicator-color) and $current-indicator-background {
- $current-indicator-color: text-contrast($current-indicator-background);
+ @if not($indicator-color) and $indicator-background {
+ $indicator-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 1);
}
@if not($title-color) and $step-background {
- $title-color: text-contrast($step-background);
+ $title-color: adaptive-contrast(var(--step-background));
}
@if not($subtitle-color) and $step-background {
- $subtitle-color: text-contrast($step-background);
+ $subtitle-color: adaptive-contrast(var(--step-background));
}
@if not($title-hover-color) and $step-hover-background {
- $title-hover-color: text-contrast($step-hover-background);
+ $title-hover-color: adaptive-contrast(var(--step-hover-background));
}
@if not($subtitle-hover-color) and $step-hover-background {
- $subtitle-hover-color: text-contrast($step-hover-background);
+ $subtitle-hover-color: adaptive-contrast(var(--step-hover-background));
}
@if not($title-focus-color) and $step-focus-background {
- $title-focus-color: text-contrast($step-focus-background);
+ $title-focus-color: adaptive-contrast(var(--step-focus-background));
}
@if not($subtitle-focus-color) and $step-focus-background {
- $subtitle-focus-color: text-contrast($step-focus-background);
+ $subtitle-focus-color: adaptive-contrast(var(--step-focus-background));
+ }
+
+ //current step
+ @if not($current-step-background) and $step-background {
+ $current-step-background: var(--step-background);
+ }
+
+ @if not($current-step-hover-background) and $current-step-background {
+ $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
+ }
+
+ @if not($current-step-focus-background) and $current-step-background {
+ $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
+ }
+
+ @if not($current-indicator-background) and $current-step-background {
+ $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
+ }
+
+ @if not($current-indicator-outline) and $current-indicator-background {
+ $current-indicator-outline: var(--current-indicator-background);
+ }
+
+ @if not($current-indicator-color) and $current-indicator-background {
+ $current-indicator-color: adaptive-contrast(var(--current-indicator-background));
+ }
+
+ @if not($current-title-color) and $current-step-background {
+ $current-title-color: adaptive-contrast(var(--current-step-background));
+ }
+
+ @if not($current-subtitle-color) and $current-step-background {
+ $current-subtitle-color: adaptive-contrast(var(--current-step-background));
+ }
+
+ @if not($current-title-hover-color) and $current-step-hover-background {
+ $current-title-hover-color: adaptive-contrast(var(--current-step-hover-background));
+ }
+
+ @if not($current-subtitle-hover-color) and $current-step-hover-background {
+ $current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background));
+ }
+
+ @if not($current-title-focus-color) and $current-step-focus-background {
+ $current-title-focus-color: adaptive-contrast(var(--current-step-focus-background));
+ }
+
+ @if not($current-subtitle-focus-color) and $current-step-focus-background {
+ $current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background));
+ }
+
+ //invalid step
+ @if not($invalid-step-background) and $step-background {
+ $invalid-step-background: var(--step-background);
+ }
+
+ @if not($invalid-step-hover-background) and $invalid-step-background {
+ $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
+ }
+
+ @if not($invalid-step-focus-background) and $invalid-step-background {
+ $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
+ }
+
+ @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
+ $invalid-indicator-background: adaptive-contrast(var(--invalid-step-background));
+ }
+
+ @if not($invalid-indicator-outline) and $invalid-indicator-background {
+ $invalid-indicator-outline: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background {
+ $invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background));
+ }
+
+ @if not($invalid-title-color) and $invalid-indicator-background {
+ $invalid-title-color: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-subtitle-color) and $invalid-indicator-background {
+ $invalid-subtitle-color: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-title-hover-color) and $invalid-indicator-background {
+ $invalid-title-hover-color: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-subtitle-hover-color) and $invalid-indicator-background {
+ $invalid-subtitle-hover-color: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-title-focus-color) and $invalid-indicator-background {
+ $invalid-title-focus-color: var(--invalid-indicator-background);
+ }
+
+ @if not($invalid-subtitle-focus-color) and $invalid-indicator-background {
+ $invalid-subtitle-focus-color: var(--invalid-indicator-background);
+ }
+
+ //completed step
+ @if not($complete-step-background) and $step-background {
+ $complete-step-background: var(--step-background);
+ }
+
+ @if not($complete-step-hover-background) and $complete-step-background {
+ $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
+ }
+
+ @if not($complete-step-focus-background) and $complete-step-background {
+ $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
+ }
+
+ @if not($complete-indicator-background) and $complete-step-background {
+ $complete-indicator-background: adaptive-contrast(var(--complete-step-background));
+ }
+
+ @if not($complete-indicator-color) and $complete-indicator-background {
+ $complete-indicator-color: adaptive-contrast(var(--complete-indicator-background));
+ }
+
+ @if not($complete-title-color) and $complete-step-background {
+ $complete-title-color: adaptive-contrast(var(--complete-step-background));
+ }
+
+ @if not($complete-subtitle-color) and $complete-step-background {
+ $complete-subtitle-color: adaptive-contrast(var(--complete-step-background));
+ }
+
+ @if not($complete-title-hover-color) and $complete-step-hover-background {
+ $complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+ }
+
+ @if not($complete-subtitle-hover-color) and $complete-step-hover-background {
+ $complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+ }
+
+ @if not($complete-title-focus-color) and $complete-step-focus-background {
+ $complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+ }
+
+ @if not($complete-subtitle-focus-color) and $complete-step-focus-background {
+ $complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+ }
+
+ //disabled step
+ @if not($disabled-indicator-background) and $step-background {
+ $disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5));
+ }
+
+ @if not($disabled-indicator-color) and $disabled-indicator-background {
+ $disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5));
+ }
+
+ @if not($disabled-indicator-outline) and $disabled-indicator-background {
+ $disabled-indicator-outline: var(--disabled-indicator-background);
+ }
+
+ @if not($disabled-title-color) and $step-background {
+ $disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+ }
+
+ @if not($disabled-subtitle-color) and $step-background {
+ $disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+ }
+
+ @if not($step-separator-color) and $step-background {
+ $step-separator-color: var(--step-background);
+ }
+
+ @if not($step-separator-color) and $indicator-background {
+ $step-separator-color: var(--indicator-background);
}
@if not($border-radius-indicator) {
@@ -318,10 +490,6 @@
// Border-radius
border-radius-indicator: $border-radius-indicator,
border-radius-step-header: $border-radius-step-header,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -331,7 +499,7 @@
@mixin stepper($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$indicator-size: map.get((
'material': rem(24px),
From 2189c67e86096c41dc42b51244804e37a3a87c24 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:37:22 +0300
Subject: [PATCH 30/53] feat(tabs): improve tabs theme (#15709)
---
.../styles/components/tabs/_tabs-theme.scss | 167 ++++++++++++------
1 file changed, 111 insertions(+), 56 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 9f8db059126..0cfcee38073 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -78,82 +78,141 @@
}
$theme: digest-schema($tabs-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
- @if not($item-text-color) and $item-background {
- @if meta.type-of($item-background) == 'color' {
- $item-text-color: rgba(text-contrast($item-background), .54);
- }
+ @if not($item-hover-background) and $item-background {
+ $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
}
- @if not($item-hover-color) and $item-background {
- $item-hover-color: text-contrast($item-background);
+ @if not($item-active-background) and $item-background {
+ $item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
}
- @if not($item-hover-color) and $item-hover-background {
- $item-hover-color: text-contrast($item-hover-background);
- }
+ @if not($item-background) {
+ @if not($item-text-color) and $item-icon-color {
+ $item-text-color: var(--item-icon-color);
+ }
- @if not($item-active-icon-color) and $item-active-background {
- $item-active-icon-color: text-contrast($item-active-background);
- }
+ @if not($item-icon-color) and $item-text-color {
+ $item-icon-color: var(--item-text-color);
+ }
+ } @else {
+ @if not($item-text-color) and $item-background {
+ $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.9);
+ }
- @if not($item-active-icon-color) and $item-background {
- $item-active-icon-color: text-contrast($item-background);
+ @if not($item-icon-color) and $item-background {
+ $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.9));
+ }
}
- @if not($indicator-color) and $item-background {
- $indicator-color: text-contrast($item-background);
+ @if $variant == 'bootstrap' {
+ @if not($item-hover-color) and $item-text-color {
+ $item-hover-color: hsl(from var(--item-text-color) h s calc(l * 0.9));
+ }
+
+ @if not($item-hover-icon-color) and $item-icon-color {
+ $item-hover-icon-color: hsla(from var(--item-icon-color) h s calc(l * 0.9));
+ }
+
+ @if not($border-color) and $item-background {
+ $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5);
+ }
+
+ @if not($border-color--hover) and $border-color {
+ $border-color--hover: var(--border-color);
+ }
+ } @else {
+ @if not($item-hover-color) and $item-text-color {
+ $item-hover-color: hsla(from var(--item-text-color) h s l / 1);
+ }
+
+ @if not($item-hover-icon-color) and $item-icon-color {
+ $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
+ }
+
+ @if not($item-background) {
+ @if not($indicator-color) and $item-text-color {
+ $indicator-color: var(--item-text-color);
+ }
+
+ @if not($indicator-color) and $item-icon-color {
+ $indicator-color: var(--item-icon-color);
+ }
+ } @else {
+ @if not($indicator-color) {
+ $indicator-color: adaptive-contrast(var(--item-background));
+ }
+ }
}
- @if not($item-active-color) and $item-active-icon-color {
- $item-active-color: $item-active-icon-color;
+ @if not($item-active-background) {
+ @if $variant != 'bootstrap' {
+ @if not($item-active-icon-color) and $item-icon-color {
+ $item-active-icon-color: var(--item-icon-color);
+ }
+
+ @if not($item-active-color) and $item-text-color {
+ $item-active-color: var(--item-text-color);
+ }
+ }
+ } @else {
+ @if not($item-active-icon-color) and $item-active-background {
+ $item-active-icon-color: adaptive-contrast(var(--item-active-background));
+ }
+
+ @if not($item-active-color) and $item-active-background {
+ $item-active-color: adaptive-contrast(var(--item-active-background));
+ }
}
// Button
- @if not($button-color) and $item-background {
- $button-color: text-contrast($item-background);
- }
+ @if $item-background {
+ @if not($button-background) and $item-background {
+ $button-background: var(--item-background);
+ }
- @if not($button-color) and $button-background {
- $button-color: text-contrast($button-background);
- }
+ @if not($button-hover-background) and $item-background {
+ $button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+ }
+ } @else if not($button-background) {
+ @if $variant != 'material' {
+ @if not($button-color) and $item-text-color {
+ $button-color: var(--item-text-color);
+ }
+
+ @if not($button-hover-color) and $button-color {
+ $button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9));
+ }
- @if not($button-color) and $item-background {
- $button-background: transparent;
+ @if not($button-disabled-color) and $button-color {
+ $button-disabled-color: hsla(from var(--button-color) h s l / 0.5);
+ }
+ }
}
- @if not($button-hover-color) and $button-hover-background {
- $button-hover-color: text-contrast($button-hover-background);
+ @if $button-background {
+ @if not($button-hover-background) and $button-background {
+ $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+ }
}
- @if not($button-hover-background) and $item-background {
- $button-hover-color: text-contrast($item-background);
+ @if not($button-color) and $button-background {
+ $button-color: adaptive-contrast(var(--button-background));
}
- @if not($button-background) and $item-background {
- @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
- $button-background: transparent;
- } @else {
- $button-background: rgba(255, 255, 255 , .1);
- }
+ @if not($button-hover-color) and $button-hover-background {
+ $button-hover-color: adaptive-contrast(var(--button-hover-background));
}
- @if not($button-hover-background) and $item-background {
- @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
- $button-hover-background: rgba(0, 0, 0, .05);
- } @else {
- $button-hover-background: rgba(255, 255, 255 , .14);
- }
+ @if not($button-ripple-color) and $button-color {
+ $button-ripple-color: var(--button-color);
}
- @if not($button-ripple-color) and $button-background {
- @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
- $button-ripple-color: rgba(0, 0, 0, .4);
- } @else {
- $button-ripple-color: rgba(255, 255, 255, .4);
- }
+ @if not($button-disabled-color) and $button-color {
+ $button-disabled-color: hsla(from var(--button-color) h s l / 0.4);
}
+
// Button end
@if not($tab-ripple-color) and $item-active-background {
@@ -186,12 +245,8 @@
tab-ripple-color: $tab-ripple-color,
button-ripple-color: $button-ripple-color,
border-color: $border-color,
+ border-color--hover: $border-color--hover,
border-radius: $border-radius,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -203,11 +258,11 @@
@mixin tabs($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$not-bootstrap-theme: $variant != 'bootstrap';
$bootstrap-theme: $variant == 'bootstrap';
$indigo-theme: $variant == 'indigo';
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
+ $theme-variant: map.get($theme, '_meta', 'variant');
$item-min-width: rem(90px);
$item-max-width: rem(360px);
From 99151c1faa47775c88c7a3aac1fedc1585e98d22 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:38:02 +0300
Subject: [PATCH 31/53] feat(icon-button): improve icon-button themes (#15737)
---
.../_contained-icon-button-theme.scss | 180 +++++++++++++++
.../icon-button/_flat-icon-button-theme.scss | 178 ++++++++++++++
.../icon-button/_icon-button-theme.scss | 77 ++++---
.../_outlined-icon-button-theme.scss | 218 ++++++++++++++++++
.../core/styles/themes/generators/_base.scss | 18 +-
5 files changed, 636 insertions(+), 35 deletions(-)
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
new file mode 100644
index 00000000000..bd85fd090c2
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
@@ -0,0 +1,180 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function contained-icon-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+ $shadow-color: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $focus-border-color: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-border-color: null,
+
+ $size: null,
+) {
+ $name: 'igx-contained-icon-button';
+ $icon-button-schema: ();
+
+ @if map.has-key($schema, 'icon-button') {
+ $icon-button-schema: map.get($schema, 'icon-button');
+ @if map.has-key($icon-button-schema, 'contained') {
+ $icon-button-schema: map.get($icon-button-schema, 'contained');
+ } @else {
+ $icon-button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($icon-button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if $variant == 'indigo' {
+ @if not($foreground) and $background {
+ $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
+ }
+
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 1.1));
+ }
+
+ @if not($focus-background) and $background {
+ $focus-background: var(--background);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-background) and $focus-background {
+ $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1));
+ }
+
+ @if not($active-background) and $background {
+ $active-background: hsl(from var(--background) h s calc(l * 1.1));
+ }
+ } @else {
+ @if not($foreground) and $background {
+ $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 1);
+ }
+
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 0.9));
+ }
+
+ @if not($focus-background) and $background {
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ $focus-background: var(--background);
+ } @else {
+ $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+ }
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: hsla(from adaptive-contrast(var(--focus-background)) h s l / 1);
+ }
+
+ @if not($focus-hover-background) and $focus-background {
+ $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+ }
+
+ @if not($active-background) and $background {
+ $active-background: hsl(from var(--background) h s calc(l * 0.8));
+ }
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: hsla(from adaptive-contrast(var(--hover-background)) h s l / 1);
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: hsla(from adaptive-contrast(var(--focus-hover-background)) h s l / 1);
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: hsla(from adaptive-contrast(var(--active-background)) h s l / 1);
+ }
+
+ @if not($shadow-color) and $focus-background {
+ $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+ }
+
+ @if $variant == 'fluent' {
+ @if not($focus-border-color) and $foreground {
+ $focus-border-color: var(--foreground);
+ }
+ } @else {
+ @if not($focus-border-color) and $border-color {
+ $focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($disabled-background) and $background {
+ $disabled-background: hsla(from var(--background) h s l / 0.4);
+ }
+
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+ }
+
+ @if not($focus-border-color) and $focus-background {
+ $focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
+ }
+ } @else {
+ @if not($disabled-background) and $background {
+ $disabled-background: hsla(from var(--background) h s l / 0.2);
+ }
+
+ @if not($disabled-foreground) and $disabled-background {
+ $disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7);
+ }
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ shadow-color: $shadow-color,
+
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+
+ border-radius: $border-radius,
+ border-color: $border-color,
+ focus-border-color: $focus-border-color,
+
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
new file mode 100644
index 00000000000..13d348c8a6c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
@@ -0,0 +1,178 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function flat-icon-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+ $shadow-color: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $focus-border-color: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-border-color: null,
+
+ $size: null,
+) {
+ $name: 'igx-flat-icon-button';
+ $icon-button-schema: ();
+
+ @if map.has-key($schema, 'icon-button') {
+ $icon-button-schema: map.get($schema, 'icon-button');
+ @if map.has-key($icon-button-schema, 'flat') {
+ $icon-button-schema: map.get($icon-button-schema, 'flat');
+ } @else {
+ $icon-button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($icon-button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if $variant == 'material' or $variant == 'fluent' {
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: var(--foreground);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: var(--foreground);
+ }
+
+ @if not($active-foreground) and $foreground {
+ $active-foreground: var(--foreground);
+ }
+
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if $variant == 'material' {
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.16);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+ } @else {
+ @if not($focus-hover-background) and $hover-background {
+ $focus-hover-background: var(--hover-background);
+ }
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.15);
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.15);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.15);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.15);
+ }
+ }
+
+ @if $variant == 'bootstrap'or $variant == 'indigo' {
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-foreground) and $hover-foreground {
+ $focus-hover-foreground: var(--hover-foreground);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($active-foreground) and $foreground {
+ $active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
+ }
+
+ @if not($shadow-color) and $foreground {
+ $shadow-color: hsla(from var(--foreground) h s l / 0.5);
+ }
+ } @else {
+ @if not($active-foreground) and $hover-foreground {
+ $active-foreground: var(--hover-foreground);
+ }
+
+ @if not($focus-border-color) and $foreground {
+ $focus-border-color: hsla(from var(--foreground) h s l / 0.3);
+ }
+ }
+ }
+
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+ }
+
+ @if $variant == 'fluent' {
+ @if not($disabled-background) and $foreground {
+ $disabled-background: hsla(from var(--foreground) h s l / 0.1);
+ }
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ shadow-color: $shadow-color,
+
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+
+ border-radius: $border-radius,
+ border-color: $border-color,
+ focus-border-color: $focus-border-color,
+
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index 0b3f0ed4712..1e350f580e0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -1,9 +1,14 @@
@use 'sass:map';
@use 'sass:meta';
+@use 'sass:list';
@use 'sass:color';
@use '../../base' as *;
@use '../../themes/schemas' as *;
+@forward './flat-icon-button-theme';
+@forward './contained-icon-button-theme';
+@forward './outlined-icon-button-theme';
+
////
/// @group themes
/// @access public
@@ -57,37 +62,19 @@
}
@if not($foreground) and $background {
- $foreground: text-contrast($background);
- }
-
- @if not($hover-background) and $background {
- @if meta.type-of($background) == 'color' {
- $hover-background: color.scale($background, $lightness: 5%);
- }
+ $foreground: adaptive-contrast(var(--background));
}
@if not($hover-foreground) and $hover-background {
- @if meta.type-of($hover-background) == 'color' {
- $hover-foreground: text-contrast($hover-background);
- }
- }
-
- @if not($focus-background) and $background {
- $focus-background: color.scale($background, $lightness: 5%);
+ $hover-foreground: adaptive-contrast(var(--hover-background));
}
@if not($focus-foreground) and $focus-background {
- $focus-foreground: text-contrast($focus-background);
- }
-
- @if not($focus-hover-background) and $background {
- @if meta.type-of($background) == 'color' {
- $focus-hover-background: color.scale($background, $lightness: 5%);
- }
+ $focus-foreground: adaptive-contrast(var(--focus-background));
}
@if not($focus-hover-foreground) and $focus-hover-background {
- $focus-hover-foreground: text-contrast($focus-hover-background);
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
$themes: map.merge($themes, (
@@ -117,7 +104,6 @@
disabled-foreground: $disabled-foreground,
disabled-border-color: $disabled-border-color,
size: $size,
- theme: map.get($schema, '_meta', 'theme'),
))
));
}
@@ -132,15 +118,42 @@
/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
-@mixin icon-button($theme) {
- $variant: map.get($theme, variant);
- $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
- $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
- $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-
- @include css-vars($flat-theme);
- @include css-vars($outlined-theme);
- @include css-vars($contained-theme);
+@mixin icon-button($themes...) {
+ $flat-theme: null;
+ $contained-theme: null;
+ $outlined-theme: null;
+ $variant: 'material';
+
+ $required: ('flat', 'contained', 'outlined');
+ $added: ();
+ $missing: ();
+
+ @each $key, $theme in meta.keywords($themes) {
+ $type: map.get($theme, _meta, type);
+
+ $added: list.append($added, $key);
+
+ @if $type == 'flat' {
+ $flat-theme: $theme;
+ } @else if $type == 'contained' {
+ $contained-theme: $theme;
+ } @else if $type == 'outlined' {
+ $outlined-theme: $theme;
+ }
+
+ $variant: map.get($theme, '_meta', 'theme');
+ @include css-vars($theme);
+ }
+
+ @each $item in $required {
+ @if not(list.index($added, $item)) {
+ $missing: list.append($missing, '$#{$item}', $separator: comma);
+ }
+ }
+
+ @if list.length($missing) != 0 {
+ @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
+ }
$icon-sizes: map.get((
'material': rem(18px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
new file mode 100644
index 00000000000..0ab70955686
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
@@ -0,0 +1,218 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function outlined-icon-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+ $shadow-color: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $focus-border-color: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-border-color: null,
+
+ $size: null,
+) {
+ $name: 'igx-outlined-icon-button';
+ $icon-button-schema: ();
+
+ @if map.has-key($schema, 'icon-button') {
+ $icon-button-schema: map.get($schema, 'icon-button');
+ @if map.has-key($icon-button-schema, 'outlined') {
+ $icon-button-schema: map.get($icon-button-schema, 'outlined');
+ } @else {
+ $icon-button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($icon-button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if $variant == 'material' or $variant == 'fluent' {
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: var(--foreground);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: var(--foreground);
+ }
+
+ @if not($active-foreground) and $foreground {
+ $active-foreground: var(--foreground);
+ }
+
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+
+ @if $variant == 'material' {
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.16);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+
+ @if not($border-color) and $foreground {
+ $border-color: hsla(from var(--foreground) h s l / 0.4);
+ }
+ } @else {
+ @if not($focus-hover-background) and $hover-background {
+ $focus-hover-background: var(--hover-background);
+ }
+
+ @if not($focus-border-color) and $foreground {
+ $focus-border-color: var(--foreground);
+ }
+
+ @if not($border-color) and $foreground {
+ $border-color: hsla(from var(--foreground) h s l / 0.7);
+ }
+
+ @if not($disabled-background) and $foreground {
+ $disabled-background: hsla(from var(--foreground) h s l / 0.1);
+ }
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($border-color) and $foreground {
+ $border-color: hsla(from var(--foreground) h s l / 0.8);
+ }
+
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.1);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-border-color) and $foreground {
+ $focus-border-color: hsla(from var(--foreground) h s l / 0.2);
+ }
+
+ @if not($focus-hover-foreground) and $hover-foreground {
+ $focus-hover-foreground: var(--hover-foreground);
+ }
+
+ @if not($active-foreground) and $hover-foreground {
+ $active-foreground: var(--hover-foreground);
+ }
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($border-color) and $foreground {
+ $border-color: var(--foreground);
+ }
+
+ @if not($hover-background) and $foreground {
+ $hover-background: var(--foreground);
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: var(--foreground);
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-background) and $focus-background {
+ $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
+ @if not($focus-border-color) and $active-background {
+ $focus-border-color: var(--active-background);
+ }
+
+ @if not($shadow-color) and $focus-background {
+ $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+ }
+ }
+
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+ }
+
+ @if not($disabled-border-color) and $border-color {
+ $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ shadow-color: $shadow-color,
+
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+
+ border-radius: $border-radius,
+ border-color: $border-color,
+ focus-border-color: $focus-border-color,
+
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index 28be2e20fee..bca86948b95 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -471,11 +471,23 @@
}
@if is-used('igx-icon-button', $exclude) {
- $icon-button-theme-map: icon-button-theme(
+ $flat-theme-map: flat-icon-button-theme(
$schema: $schema,
);
- $icon-button-theme-map: meta.call($theme-handler, $icon-button-theme-map);
- @include icon-button($icon-button-theme-map);
+
+ $contained-theme-map: contained-icon-button-theme(
+ $schema: $schema,
+ );
+
+ $outlined-theme-map: outlined-icon-button-theme(
+ $schema: $schema,
+ );
+
+ @include icon-button(
+ $flat: meta.call($theme-handler, $flat-theme-map),
+ $contained: meta.call($theme-handler, $contained-theme-map),
+ $outlined: meta.call($theme-handler, $outlined-theme-map),
+ );
}
@if is-used('igx-input-group', $exclude) {
From 94255dec90078fb4ab1cd0ee75c50586522dc0c4 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:38:36 +0300
Subject: [PATCH 32/53] feat(query-builder): improve query-builder theme
(#15675)
---
.../query-builder/_query-builder-theme.scss | 39 +++++++++++++------
1 file changed, 28 insertions(+), 11 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
index e1d2cafd988..63c4d7aa15b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -52,14 +52,36 @@
}
$theme: digest-schema($query-builder-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
- @if not($header-foreground) and $header-background {
- $header-foreground: text-contrast($header-background);
+ @if not($label-foreground) and $background {
+ $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6);
}
@if not($header-background) and $background {
- $header-background: $background;
+ $header-background: var(--background);
+ }
+
+ @if not($header-foreground) and $header-background {
+ $header-foreground: adaptive-contrast(var(--header-background));
+ }
+
+ @if not($subquery-header-background) and $header-background {
+ $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9));
+ }
+
+ @if not($subquery-border-color) and $subquery-header-background {
+ $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9));
+ }
+
+ @if not($separator-color) and $subquery-border-color {
+ $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9));
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($header-border) and $subquery-border-color {
+ $header-border: var(--subquery-border-color);
+ }
}
@return extend($theme, (
@@ -77,11 +99,6 @@
separator-color: $separator-color,
border-radius: $border-radius,
label-foreground: $label-foreground,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- theme-variant: map.get($schema, '_meta', 'variant')
- )),
));
}
@@ -98,8 +115,8 @@
@mixin query-builder($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
- $theme-variant: map.get($theme, '_meta', 'theme-variant');
+ $variant: map.get($theme, '_meta', 'theme');
+ $theme-variant: map.get($theme, '_meta', 'variant');
$bootstrap-theme: $variant == 'bootstrap';
$not-bootstrap-theme: not($bootstrap-theme);
From 08e27a22b4e4a5f219799807b3aa565fbc5ef108 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:39:29 +0300
Subject: [PATCH 33/53] feat(select): improve select theme (#15682)
---
.../components/select/_select-theme.scss | 40 ++++++++++++++++---
1 file changed, 34 insertions(+), 6 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 0829bce9fad..2483105ea46 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -46,7 +46,39 @@
}
$theme: digest-schema($select-schema);
- $meta: map.get($theme, '_meta');
+ $variant: map.get($theme, '_meta', 'theme');
+
+ @if not($toggle-button-foreground) and $toggle-button-background {
+ $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
+ }
+
+ @if not($toggle-button-foreground-filled) and $toggle-button-background {
+ $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
+ }
+
+ @if $variant == 'material' {
+ @if not($toggle-button-background-focus) and $toggle-button-background {
+ $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+ }
+ } @else {
+ @if not($toggle-button-background-focus) and $toggle-button-background {
+ $toggle-button-background-focus: var(--toggle-button-background);
+ }
+ }
+
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($toggle-button-background-focus--border) and $toggle-button-background {
+ $toggle-button-background-focus--border: var(--toggle-button-background)
+ }
+
+ @if not($toggle-button-foreground-focus) and $toggle-button-background-focus--border {
+ $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus--border));
+ }
+ } @else {
+ @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
+ $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
+ }
+ }
@return extend($theme, (
name: $name,
@@ -59,10 +91,6 @@
toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
toggle-button-foreground-filled: $toggle-button-foreground-filled,
toggle-button-background-focus--border: $toggle-button-background-focus--border,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -71,7 +99,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin select($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-select {
position: relative;
From 0b696a4446808dc8208f5e072325147d01d86241 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Mon, 28 Apr 2025 10:42:47 +0300
Subject: [PATCH 34/53] feat(input-group): improve input-group theme (#15728)
---
.../components/input/_input-group-theme.scss | 272 ++++++++++++++++--
1 file changed, 254 insertions(+), 18 deletions(-)
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 04f05cfc23b..72c3752e187 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
@@ -141,24 +141,228 @@
}
$theme: digest-schema($input-group-schema);
+ $variant: map.get($theme, '_meta', 'theme');
+
$search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation');
$search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
$search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
- @if not($placeholder-color) and $box-background {
- $placeholder-color: text-contrast($box-background);
+ @if $variant == 'material' {
+ @if not($box-background-hover) and $box-background {
+ $box-background-hover: var(--box-background);
+ }
+
+ @if not($box-background-focus) and $box-background {
+ $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
+ }
+
+ @if not($box-disabled-background) and $box-background {
+ $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
+ }
+
+ @if not($disabled-placeholder-color) and $box-disabled-background {
+ $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
+ }
+
+ @if not($disabled-text-color) and $box-disabled-background {
+ $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
+ }
+
+ @if not($placeholder-color) and $box-background {
+ $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ }
+
+ @if not($hover-placeholder-color) and $box-background-hover {
+ $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.6);
+ }
+
+ @if not($idle-text-color) and $box-background {
+ $idle-text-color: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($filled-text-color) and $box-background {
+ $filled-text-color: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($filled-text-hover-color) and $box-background {
+ $filled-text-hover-color: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($focused-text-color) and $box-background-focus {
+ $focused-text-color: adaptive-contrast(var(--box-background-focus));
+ }
+
+ @if not($idle-bottom-line-color) and $box-background {
+ $idle-bottom-line-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ }
+
+ @if not($hover-bottom-line-color) and $box-background {
+ $hover-bottom-line-color: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($idle-secondary-color) and $box-background {
+ $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ }
+
+ @if not($focused-secondary-color) and $box-background-focus {
+ $focused-secondary-color: adaptive-contrast(var(--box-background-focus));
+ }
+
+ @if not($input-prefix-color) and $box-background {
+ $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ }
+
+ @if not($input-prefix-color--filled) and $box-background {
+ $input-prefix-color--filled: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($input-prefix-color--focused) and $box-background-focus {
+ $input-prefix-color--focused: adaptive-contrast(var(--box-background-focus));
+ }
+
+ @if not($input-suffix-color) and $box-background {
+ $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ }
+
+ @if not($input-suffix-color--filled) and $box-background {
+ $input-suffix-color--filled: adaptive-contrast(var(--box-background));
+ }
+
+ @if not($input-suffix-color--focused) and $box-background-focus {
+ $input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
+ }
+ }
+
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ @if not($input-prefix-background) and $input-suffix-background {
+ $input-prefix-background: var(--input-suffix-background);
+ }
+
+ @if not($input-suffix-background) and $input-prefix-background {
+ $input-suffix-background: var(--input-prefix-background);
+ }
}
- @if not($placeholder-color) and $box-background-hover {
- $placeholder-color: text-contrast($box-background-hover);
+ @if $variant == 'material' or $variant == 'indigo' {
+ //bottom line color
+ @if not($hover-bottom-line-color) and $idle-bottom-line-color {
+ $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
+ }
+
+ @if not($focused-bottom-line-color) and $hover-bottom-line-color {
+ $focused-bottom-line-color: var(--hover-bottom-line-color);
+ }
+
+ @if $variant == 'material' {
+ @if not($focused-secondary-color) and $focused-bottom-line-color {
+ $focused-secondary-color: var(--focused-bottom-line-color);
+ }
+
+ @if not($border-color) and $idle-bottom-line-color {
+ $border-color: var(--idle-bottom-line-color);
+ }
+ }
+ }
+
+ //border-color
+ @if $variant == 'bootstrap' {
+ @if not($focused-border-color) and $border-color {
+ $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+ }
+
+ @if not($focused-secondary-color) and $focused-border-color {
+ $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
+ }
+ } @else {
+ @if not($hover-border-color) and $border-color {
+ $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+ }
+
+ @if not($focused-border-color) and $hover-border-color {
+ $focused-border-color: var(--hover-border-color);
+ }
+
+ @if $variant != 'indigo' {
+ @if not($focused-secondary-color) and $focused-border-color {
+ $focused-secondary-color: var(--focused-border-color);
+ }
+ }
}
- @if not($placeholder-color) and $box-background-focus {
- $placeholder-color: text-contrast($box-background-focus);
+ @if $variant == 'material' {
+ @if not($focused-bottom-line-color) and $focused-border-color {
+ $focused-bottom-line-color: var(--focused-border-color);
+ }
}
+ //material search input
+
@if not($placeholder-color) and $search-background {
- $placeholder-color: text-contrast($search-background);
+ $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
+
+ @if not($hover-placeholder-color) and $placeholder-color {
+ $hover-placeholder-color: var(--placeholder-color);
+ }
+
+ @if not($idle-secondary-color) and $placeholder-color {
+ $idle-secondary-color: var(--placeholder-color);
+ }
+
+ @if not($idle-text-color) and $search-background {
+ $idle-text-color: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($focused-secondary-color) and $search-background {
+ $focused-secondary-color: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($filled-text-color) and $search-background {
+ $filled-text-color: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($filled-text-hover-color) and $search-background {
+ $filled-text-hover-color: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($focused-text-color) and $search-background {
+ $focused-text-color: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($input-prefix-color) and $search-background {
+ $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
+
+ @if not($input-prefix-color--filled) and $search-background {
+ $input-prefix-color--filled: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($input-prefix-color--focused) and $search-background {
+ $input-prefix-color--focused: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($input-suffix-color) and $search-background {
+ $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
+
+ @if not($input-suffix-color--filled) and $search-background {
+ $input-suffix-color--filled: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($input-suffix-color--focused) and $search-background {
+ $input-suffix-color--focused: adaptive-contrast(var(--search-background));
+ }
+
+ @if not($search-disabled-background) and $search-background {
+ $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
+ }
+
+ @if not($disabled-placeholder-color) and $search-disabled-background {
+ $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
+ }
+
+ @if not($disabled-text-color) and $search-disabled-background {
+ $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
}
@if not($search-resting-shadow) {
@@ -173,36 +377,70 @@
$search-disabled-shadow: elevation($search-disabled-elevation);
}
+ //end material search input
+
+ @if not($input-prefix-color) and $input-suffix-color {
+ $input-prefix-color: var(--input-suffix-color);
+ }
+
+ @if not($input-suffix-color) and $input-prefix-color {
+ $input-suffix-color: var(--input-prefix-color);
+ }
+
@if not($input-prefix-background--filled) and $input-prefix-background {
- $input-prefix-background--filled: $input-prefix-background;
+ $input-prefix-background--filled: var(--input-prefix-background);
}
@if not($input-prefix-background--focused) and $input-prefix-background {
- $input-prefix-background--focused: $input-prefix-background;
+ $input-prefix-background--focused: var(--input-prefix-background);
}
@if not($input-prefix-color) and $input-prefix-background {
- $input-prefix-color: text-contrast($input-prefix-background);
+ $input-prefix-color: adaptive-contrast(var(--input-prefix-background));
+ }
+
+ @if not($input-prefix-color--filled) and $input-prefix-color {
+ $input-prefix-color--filled: var(--input-prefix-color);
+ }
+
+ @if not($input-prefix-color--focused) and $input-prefix-color--filled {
+ $input-prefix-color--focused: var(--input-prefix-color--filled);
}
@if not($input-prefix-color--filled) and $input-prefix-background--filled {
- $input-prefix-color--filled: text-contrast($input-prefix-background--filled);
+ $input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled));
}
@if not($input-prefix-color--focused) and $input-prefix-background--focused {
- $input-prefix-color--focused: text-contrast($input-prefix-background--focused);
+ $input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused));
+ }
+
+ @if not($input-suffix-background--filled) and $input-suffix-background {
+ $input-suffix-background--filled: var(--input-suffix-background);
+ }
+
+ @if not($input-suffix-background--focused) and $input-suffix-background {
+ $input-suffix-background--focused: var(--input-suffix-background);
}
@if not($input-suffix-color) and $input-suffix-background {
- $input-suffix-color: text-contrast($input-suffix-background);
+ $input-suffix-color: adaptive-contrast(var(--input-suffix-background));
+ }
+
+ @if not($input-suffix-color--filled) and $input-suffix-color {
+ $input-suffix-color--filled: var(--input-suffix-color);
+ }
+
+ @if not($input-suffix-color--focused) and $input-suffix-color--filled {
+ $input-suffix-color--focused: var(--input-suffix-color--filled);
}
@if not($input-suffix-color--filled) and $input-suffix-background--filled {
- $input-suffix-color--filled: text-contrast($input-suffix-background--filled);
+ $input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled));
}
@if not($input-suffix-color--focused) and $input-suffix-background--focused {
- $input-suffix-color--focused: text-contrast($input-suffix-background--focused);
+ $input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused));
}
@if not($box-border-radius) {
@@ -271,8 +509,6 @@
input-suffix-background--filled: $input-suffix-background--filled,
input-suffix-color--focused: $input-suffix-color--focused,
input-suffix-background--focused: $input-suffix-background--focused,
- theme: map.get($schema, '_meta', 'theme'),
- variant: map.get($schema, '_meta', 'theme'),
size: $size,
));
}
@@ -285,7 +521,7 @@
// when dynamically switching between the input `type` attribute.
@include css-vars($theme);
- $variant: map.get($theme, 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$transition-timing: .25s $out-cubic;
$material-theme: $variant == 'material';
$indigo-theme: $variant == 'indigo';
From 981ad3d708dd6b098fec5db65a0b03079e02855b Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Mon, 28 Apr 2025 10:49:29 +0300
Subject: [PATCH 35/53] feat(button): improve button themes and separate theme
functions (#15601)
---
.../components/button/_button-theme.scss | 371 ++++++++++-------
.../button/_contained-button-theme.scss | 280 +++++++++++++
.../components/button/_fab-button-theme.scss | 280 +++++++++++++
.../components/button/_flat-button-theme.scss | 324 +++++++++++++++
.../button/_outlined-button-theme.scss | 387 ++++++++++++++++++
.../core/styles/themes/generators/_base.scss | 186 ++++++---
6 files changed, 1618 insertions(+), 210 deletions(-)
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
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 e431e1bb1a4..1c0432a2bd4 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
@@ -1,9 +1,16 @@
@use 'sass:map';
@use 'sass:meta';
@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
@use '../../base' as *;
@use '../../themes/schemas' as *;
+@forward './flat-button-theme';
+@forward './contained-button-theme';
+@forward './outlined-button-theme';
+@forward './fab-button-theme';
+
////
/// @group themes
/// @access public
@@ -122,61 +129,39 @@
}
@if not($foreground) and $background {
- $foreground: text-contrast($background);
+ $foreground: adaptive-contrast(var(--background));
}
- @if not($hover-background) and $background {
- @if meta.type-of($background) == 'color' {
- $hover-background: color.scale($background, $lightness: 5%);
- }
+ @if not($icon-color) and $background {
+ $icon-color: adaptive-contrast(var(--background));
}
@if not($hover-foreground) and $hover-background {
- @if meta.type-of($hover-background) == 'color' {
- $hover-foreground: text-contrast($hover-background);
- }
- }
-
- @if not($icon-color) and $background {
- @if meta.type-of($background) == 'color' {
- $icon-color: text-contrast($background);
- }
+ $hover-foreground: adaptive-contrast(var(--hover-background));
}
@if not($icon-color-hover) and $hover-foreground {
- @if meta.type-of($hover-background) == 'color' {
- $icon-color-hover: $hover-foreground;
- }
- }
-
- @if not($focus-background) and $background {
- $focus-background: color.scale($background, $lightness: 5%);
+ $icon-color-hover: var(--hover-foreground);
}
@if not($focus-foreground) and $focus-background {
- $focus-foreground: text-contrast($focus-background);
- }
-
- @if not($focus-hover-background) and $background {
- @if meta.type-of($background) == 'color' {
- $focus-hover-background: color.scale($background, $lightness: 5%);
- }
+ $focus-foreground: adaptive-contrast(var(--focus-background));
}
@if not($focus-hover-foreground) and $focus-hover-background {
- $focus-hover-foreground: text-contrast($focus-hover-background);
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
@if not($focus-visible-background) and $focus-background {
- $focus-visible-background: $focus-background;
+ $focus-visible-background: var(--focus-background);
}
- @if not($focus-visible-foreground) and $focus-foreground {
- $focus-visible-foreground: $focus-foreground;
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
}
@if not($focus-visible-border-color) and $focus-border-color {
- $focus-visible-border-color: $focus-border-color;
+ $focus-visible-border-color: var(--focus-border-color);
}
@if not($_resting-shadow) {
@@ -242,7 +227,6 @@
disabled-icon-color: $disabled-icon-color,
disabled-border-color: $disabled-border-color,
size: $size,
- theme: map.get($schema, '_meta', 'theme'),
))
));
}
@@ -256,28 +240,60 @@
/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
-/// @param {Map} $theme - The theme used to style the component.
-@mixin button($theme) {
+/// @param {Map} $flat [null] - The flat theme used to style the component.
+/// @param {Map} $contained [null] - The contained theme used to style the component.
+/// @param {Map} $outlined [null] - The outlined theme used to style the component.
+/// @param {Map} $fab [null] - The fab theme used to style the component.
+@mixin button($themes...) {
$button-width: rem(88px);
+ $flat-theme: null;
+ $contained-theme: null;
+ $outlined-theme: null;
+ $fab-theme: null;
+ $variant: 'material';
+
+ $required: ('flat', 'contained', 'outlined', 'fab');
+ $added: ();
+ $missing: ();
+
+ @each $key, $theme in meta.keywords($themes) {
+ $type: map.get($theme, _meta, type);
+
+ $added: list.append($added, $key);
+
+ @if $type == 'flat' {
+ $flat-theme: $theme;
+ } @else if $type == 'contained' {
+ $contained-theme: $theme;
+ } @else if $type == 'outlined' {
+ $outlined-theme: $theme;
+ } @else if $type == 'fab' {
+ $fab-theme: $theme;
+ }
- $variant: map.get($theme, variant);
+ $variant: map.get($theme, '_meta', 'theme');
+ @include css-vars($theme);
+ }
- $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
- $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
- $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
- $fab-theme: map.get(map.get($theme, 'themes'), 'fab');
+ @each $item in $required {
+ @if not(list.index($added, $item)) {
+ $missing: list.append($missing, '$#{$item}', $separator: comma);
+ }
+ }
- @include css-vars($flat-theme);
- @include css-vars($outlined-theme);
- @include css-vars($contained-theme);
- @include css-vars($fab-theme);
+ @if list.length($missing) != 0 {
+ @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
+ }
- $time: map.get((
- 'material': .1s,
- 'fluent': .1s,
- 'bootstrap': .15s,
- 'indigo': .15s
- ), $variant);
+ $time: map.get(
+ (
+ 'material': 0.1s,
+ 'fluent': 0.1s,
+ 'bootstrap': 0.15s,
+ 'indigo': 0.15s,
+ ),
+ $variant
+ );
$button-transition: color $time ease-in-out,
background-color $time ease-in-out,
@@ -292,89 +308,101 @@
$button-padding-inline: (
comfortable: rem(16px, 16px),
cosy: rem(12px, 16px),
- compact: rem(8px, 16px)
+ compact: rem(8px, 16px),
);
$button-padding-indigo-inline: (
comfortable: rem(24px, 16px),
cosy: rem(16px, 16px),
- compact: rem(10px, 16px)
+ compact: rem(10px, 16px),
);
$button-padding-material-block: (
comfortable: rem(7px, 16px),
cosy: rem(4px, 16px),
- compact: rem(1px, 16px)
+ compact: rem(1px, 16px),
);
$button-padding-fluent-block: (
comfortable: 0,
cosy: 0,
- compact: 0
+ compact: 0,
);
$button-padding-bootstrap-block: (
comfortable: rem(6px, 16px),
cosy: rem(4px, 16px),
- compact: rem(2px, 16px)
+ compact: rem(2px, 16px),
);
$button-padding-indigo-block: (
comfortable: 0,
cosy: 0,
- compact: 0
+ compact: 0,
+ );
+
+ $button-padding-inline: map.get(
+ (
+ 'material': $button-padding-inline,
+ 'fluent': $button-padding-inline,
+ 'bootstrap': $button-padding-inline,
+ 'indigo': $button-padding-indigo-inline,
+ ),
+ $variant
);
- $button-padding-inline: map.get((
- 'material': $button-padding-inline,
- 'fluent': $button-padding-inline,
- 'bootstrap': $button-padding-inline,
- 'indigo': $button-padding-indigo-inline,
- ), $variant);
-
- $button-padding-block: map.get((
- 'material': $button-padding-material-block,
- 'fluent': $button-padding-fluent-block,
- 'bootstrap': $button-padding-bootstrap-block,
- 'indigo': $button-padding-indigo-block,
- ), $variant);
-
- $outlined-button-padding-inline: map.get((
- 'material': $button-padding-inline,
- 'fluent': $button-padding-inline,
- 'bootstrap': $button-padding-inline,
- 'indigo': $button-padding-indigo-inline,
- ), $variant);
-
- $outlined-button-padding-block: map.get((
- 'material': $button-padding-material-block,
- 'fluent': $button-padding-fluent-block,
- 'bootstrap': $button-padding-bootstrap-block,
- 'indigo': $button-padding-indigo-block
- ), $variant);
+ $button-padding-block: map.get(
+ (
+ 'material': $button-padding-material-block,
+ 'fluent': $button-padding-fluent-block,
+ 'bootstrap': $button-padding-bootstrap-block,
+ 'indigo': $button-padding-indigo-block,
+ ),
+ $variant
+ );
+
+ $outlined-button-padding-inline: map.get(
+ (
+ 'material': $button-padding-inline,
+ 'fluent': $button-padding-inline,
+ 'bootstrap': $button-padding-inline,
+ 'indigo': $button-padding-indigo-inline,
+ ),
+ $variant
+ );
+
+ $outlined-button-padding-block: map.get(
+ (
+ 'material': $button-padding-material-block,
+ 'fluent': $button-padding-fluent-block,
+ 'bootstrap': $button-padding-bootstrap-block,
+ 'indigo': $button-padding-indigo-block,
+ ),
+ $variant
+ );
$button-floating-padding-block: (
comfortable: rem(8px),
cosy: rem(4px),
- compact: 0
+ compact: 0,
);
$button-floating-padding-inline: (
comfortable: rem(14px),
cosy: rem(10px),
- compact: rem(6px)
+ compact: rem(6px),
);
$button-floating-padding-indigo-inline: (
comfortable: rem(10px),
cosy: rem(8px),
- compact: rem(6px)
+ compact: rem(6px),
);
$items-gap: (
comfortable: rem(12px),
cosy: rem(8px),
- compact: rem(4px)
+ compact: rem(4px),
);
$items-gap-indigo-comfortable: rem(8px);
@@ -382,73 +410,102 @@
$filtering-row-button-size: (
comfortable: rem(40px),
cosy: rem(30px),
- compact: rem(21px)
+ compact: rem(21px),
);
- $icon-sizes: map.get((
- 'material': rem(18px),
- 'fluent': rem(18px),
- 'bootstrap': rem(18px),
- 'indigo': rem(16px),
- ), $variant);
+ $icon-sizes: map.get(
+ (
+ 'material': rem(18px),
+ 'fluent': rem(18px),
+ 'bootstrap': rem(18px),
+ 'indigo': rem(16px),
+ ),
+ $variant
+ );
$icon-in-button-size: $icon-sizes;
- $contained-shadow: map.get((
- 'material': var-get($contained-theme, 'resting-shadow'),
- 'fluent': none,
- 'bootstrap': none,
- 'indigo': none
- ), $variant);
-
- $contained-shadow--hover: map.get((
- 'material': var-get($contained-theme, 'hover-shadow'),
- 'fluent': none,
- 'bootstrap': none,
- 'indigo': none
- ), $variant);
-
- $contained-shadow--focus: map.get((
- 'material': var-get($contained-theme, 'focus-shadow'),
- 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
- 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
- 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
- ), $variant);
-
- $contained-shadow--active: map.get((
- 'material': var-get($contained-theme, 'active-shadow'),
- 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
- 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
- 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
- ), $variant);
-
- $fab-shadow: map.get((
- 'material': var-get($fab-theme, 'resting-shadow'),
- 'fluent': none,
- 'bootstrap': none,
- 'indigo': none
- ), $variant);
-
- $fab-shadow--hover: map.get((
- 'material': var-get($fab-theme, 'hover-shadow'),
- 'fluent': none,
- 'bootstrap': none,
- 'indigo': none
- ), $variant);
-
- $fab-shadow--focus: map.get((
- 'material': var-get($fab-theme, 'focus-shadow'),
- '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')
- ), $variant);
-
- $fab-shadow--active: map.get((
- 'material': var-get($fab-theme, 'active-shadow'),
- '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')
- ), $variant);
+ $contained-shadow: map.get(
+ (
+ 'material': var-get($contained-theme, 'resting-shadow'),
+ 'fluent': none,
+ 'bootstrap': none,
+ 'indigo': none,
+ ),
+ $variant
+ );
+
+ $contained-shadow--hover: map.get(
+ (
+ 'material': var-get($contained-theme, 'hover-shadow'),
+ 'fluent': none,
+ 'bootstrap': none,
+ 'indigo': none,
+ ),
+ $variant
+ );
+
+ $contained-shadow--focus: map.get(
+ (
+ 'material': var-get($contained-theme, 'focus-shadow'),
+ 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+ 'bootstrap': 0 0 0 rem(4px)
+ var-get($contained-theme, 'shadow-color'),
+ 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+ ),
+ $variant
+ );
+
+ $contained-shadow--active: map.get(
+ (
+ 'material': var-get($contained-theme, 'active-shadow'),
+ 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+ 'bootstrap': 0 0 0 rem(4px)
+ var-get($contained-theme, 'shadow-color'),
+ 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+ ),
+ $variant
+ );
+
+ $fab-shadow: map.get(
+ (
+ 'material': var-get($fab-theme, 'resting-shadow'),
+ 'fluent': none,
+ 'bootstrap': none,
+ 'indigo': none,
+ ),
+ $variant
+ );
+
+ $fab-shadow--hover: map.get(
+ (
+ 'material': var-get($fab-theme, 'hover-shadow'),
+ 'fluent': none,
+ 'bootstrap': none,
+ 'indigo': none,
+ ),
+ $variant
+ );
+
+ $fab-shadow--focus: map.get(
+ (
+ 'material': var-get($fab-theme, 'focus-shadow'),
+ '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'),
+ ),
+ $variant
+ );
+
+ $fab-shadow--active: map.get(
+ (
+ 'material': var-get($fab-theme, 'active-shadow'),
+ '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'),
+ ),
+ $variant
+ );
%fluent-border {
&::after {
@@ -514,10 +571,10 @@
igx-grid-filtering-row {
@if $variant == 'bootstrap' {
--filtering-row-button-size: #{sizable(
- #{map.get($filtering-row-button-size, 'compact')},
- #{map.get($filtering-row-button-size, 'cosy')},
- #{map.get($filtering-row-button-size, 'comfortable')}
- )};
+ #{map.get($filtering-row-button-size, 'compact')},
+ #{map.get($filtering-row-button-size, 'cosy')},
+ #{map.get($filtering-row-button-size, 'comfortable')}
+ )};
%igx-button-display {
min-height: var(--filtering-row-button-size);
@@ -994,7 +1051,11 @@
/// Uses the 'button' category from the typographic scale.
/// @group typography
/// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles.
-@mixin button-typography($categories: (text: 'button')) {
+@mixin button-typography(
+ $categories: (
+ text: 'button',
+ )
+) {
$text: map.get($categories, 'text');
%igx-button-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
new file mode 100644
index 00000000000..b4ddf8613be
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
@@ -0,0 +1,280 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author Marin Popov
+/// @author Simeon Simeonoff
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and text colors in contained buttons
+/// $my-button-theme: contained-button-theme(
+/// $foreground: white,
+/// $background: black
+/// );
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-button-theme);
+@function contained-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $icon-color: $foreground,
+ $icon-color-hover: $hover-foreground,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $focus-visible-background: null,
+ $focus-visible-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $hover-border-color: null,
+ $focus-border-color: null,
+ $focus-visible-border-color: null,
+ $active-border-color: null,
+
+ $shadow-color: null,
+
+ $resting-shadow: null,
+ $hover-shadow: null,
+ $focus-shadow: null,
+ $active-shadow: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-icon-color: $disabled-foreground,
+ $disabled-border-color: null,
+ $size: null
+) {
+ $name: 'igx-contained-button';
+ $button-schema: ();
+
+ @if map.has-key($schema, 'button') {
+ $button-schema: map.get($schema, 'button');
+ @if map.has-key($button-schema, 'contained') {
+ $button-schema: map.get($button-schema, 'contained');
+ } @else {
+ $button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if not($foreground) and $background {
+ $foreground: adaptive-contrast(var(--background));
+ }
+
+ @if not($icon-color) and $background {
+ $icon-color: adaptive-contrast(var(--background));
+ }
+
+ @if $variant == 'indigo' {
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 1.08));
+ }
+ } @else {
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 1.05));
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($focus-background) and $background {
+ $focus-background: var(--background);
+ }
+ } @else {
+ @if not($focus-background) and $background {
+ $focus-background: hsl(from var(--background) h s calc(l * 1.1));
+ }
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--hover-background))
+ );
+ }
+
+ @if not($icon-color-hover) and $hover-background {
+ $icon-color-hover: if(
+ $icon-color,
+ var(--icon-color),
+ adaptive-contrast(var(--hover-background))
+ );
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--focus-background))
+ );
+ }
+
+ @if not($focus-hover-background) and $hover-background {
+ $focus-hover-background: var(--hover-background);
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--focus-hover-background))
+ );
+ }
+
+ @if not($focus-visible-background) and $focus-background {
+ $focus-visible-background: var(--focus-background);
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(
+ var(--focus-visible-background)
+ );
+ }
+
+ @if $variant == 'fluent' {
+ @if not($focus-visible-border-color) and $focus-visible-foreground {
+ $focus-visible-border-color: var(--focus-visible-foreground);
+ }
+ }
+
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ @if not($active-background) and $background {
+ $active-background: hsl(from var(--background) h s calc(l * 0.9));
+ }
+ } @else if $variant == 'material' {
+ @if not($active-background) and $focus-background {
+ $active-background: var(--focus-background);
+ }
+ } @else {
+ @if not($active-background) and $hover-background {
+ $active-background: var(--hover-background);
+ }
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($shadow-color) and $focus-visible-background {
+ $shadow-color: hsla(
+ from var(--focus-visible-background) h s l / 0.5
+ );
+ }
+ }
+
+ @if not($resting-shadow) {
+ $resting-elevation: map.get($button-schema, 'resting-elevation');
+ $resting-shadow: elevation($resting-elevation);
+ }
+
+ @if not($hover-shadow) {
+ $hover-elevation: map.get($button-schema, 'hover-elevation');
+ $hover-shadow: elevation($hover-elevation);
+ }
+
+ @if not($focus-shadow) {
+ $focus-elevation: map.get($button-schema, 'focus-elevation');
+ $focus-shadow: elevation($focus-elevation);
+ }
+
+ @if not($active-shadow) {
+ $active-elevation: map.get($button-schema, 'active-elevation');
+ $active-shadow: elevation($active-elevation);
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ icon-color: $icon-color,
+ icon-color-hover: $icon-color-hover,
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+ focus-visible-background: $focus-visible-background,
+ focus-visible-foreground: $focus-visible-foreground,
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+ border-radius: $border-radius,
+ border-color: $border-color,
+ hover-border-color: $hover-border-color,
+ focus-border-color: $focus-border-color,
+ focus-visible-border-color: $focus-visible-border-color,
+ active-border-color: $active-border-color,
+ shadow-color: $shadow-color,
+ resting-shadow: $resting-shadow,
+ hover-shadow: $hover-shadow,
+ focus-shadow: $focus-shadow,
+ active-shadow: $active-shadow,
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-icon-color: $disabled-icon-color,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ )
+ );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
new file mode 100644
index 00000000000..223739ae8f5
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
@@ -0,0 +1,280 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author Marin Popov
+/// @author Simeon Simeonoff
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and text colors in fab buttons
+/// $my-button-theme: fab-button-theme(
+/// $foreground: white,
+/// $background: black
+/// );
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-button-theme);
+@function fab-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $icon-color: $foreground,
+ $icon-color-hover: $hover-foreground,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $focus-visible-background: null,
+ $focus-visible-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $hover-border-color: null,
+ $focus-border-color: null,
+ $focus-visible-border-color: null,
+ $active-border-color: null,
+
+ $shadow-color: null,
+
+ $resting-shadow: null,
+ $hover-shadow: null,
+ $focus-shadow: null,
+ $active-shadow: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-icon-color: $disabled-foreground,
+ $disabled-border-color: null,
+ $size: null
+) {
+ $name: 'igx-fab-button';
+ $button-schema: ();
+
+ @if map.has-key($schema, 'button') {
+ $button-schema: map.get($schema, 'button');
+ @if map.has-key($button-schema, 'fab') {
+ $button-schema: map.get($button-schema, 'fab');
+ } @else {
+ $button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if not($foreground) and $background {
+ $foreground: adaptive-contrast(var(--background));
+ }
+
+ @if not($icon-color) and $background {
+ $icon-color: adaptive-contrast(var(--background));
+ }
+
+ @if $variant == 'indigo' {
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 1.08));
+ }
+ } @else {
+ @if not($hover-background) and $background {
+ $hover-background: hsl(from var(--background) h s calc(l * 1.05));
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($focus-background) and $background {
+ $focus-background: var(--background);
+ }
+ } @else {
+ @if not($focus-background) and $background {
+ $focus-background: hsl(from var(--background) h s calc(l * 1.1));
+ }
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--hover-background))
+ );
+ }
+
+ @if not($icon-color-hover) and $hover-background {
+ $icon-color-hover: if(
+ $icon-color,
+ var(--icon-color),
+ adaptive-contrast(var(--hover-background))
+ );
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--focus-background))
+ );
+ }
+
+ @if not($focus-hover-background) and $hover-background {
+ $focus-hover-background: var(--hover-background);
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: if(
+ $foreground,
+ var(--foreground),
+ adaptive-contrast(var(--focus-hover-background))
+ );
+ }
+
+ @if not($focus-visible-background) and $focus-background {
+ $focus-visible-background: var(--focus-background);
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(
+ var(--focus-visible-background)
+ );
+ }
+
+ @if $variant == 'fluent' {
+ @if not($focus-visible-border-color) and $focus-visible-foreground {
+ $focus-visible-border-color: var(--focus-visible-foreground);
+ }
+ }
+
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ @if not($active-background) and $background {
+ $active-background: hsl(from var(--background) h s calc(l * 0.9));
+ }
+ } @else if $variant == 'material' {
+ @if not($active-background) and $focus-background {
+ $active-background: var(--focus-background);
+ }
+ } @else {
+ @if not($active-background) and $hover-background {
+ $active-background: var(--hover-background);
+ }
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($shadow-color) and $focus-visible-background {
+ $shadow-color: hsla(
+ from var(--focus-visible-background) h s l / 0.5
+ );
+ }
+ }
+
+ @if not($resting-shadow) {
+ $resting-elevation: map.get($button-schema, 'resting-elevation');
+ $resting-shadow: elevation($resting-elevation);
+ }
+
+ @if not($hover-shadow) {
+ $hover-elevation: map.get($button-schema, 'hover-elevation');
+ $hover-shadow: elevation($hover-elevation);
+ }
+
+ @if not($focus-shadow) {
+ $focus-elevation: map.get($button-schema, 'focus-elevation');
+ $focus-shadow: elevation($focus-elevation);
+ }
+
+ @if not($active-shadow) {
+ $active-elevation: map.get($button-schema, 'active-elevation');
+ $active-shadow: elevation($active-elevation);
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ icon-color: $icon-color,
+ icon-color-hover: $icon-color-hover,
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+ focus-visible-background: $focus-visible-background,
+ focus-visible-foreground: $focus-visible-foreground,
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+ border-radius: $border-radius,
+ border-color: $border-color,
+ hover-border-color: $hover-border-color,
+ focus-border-color: $focus-border-color,
+ focus-visible-border-color: $focus-visible-border-color,
+ active-border-color: $active-border-color,
+ shadow-color: $shadow-color,
+ resting-shadow: $resting-shadow,
+ hover-shadow: $hover-shadow,
+ focus-shadow: $focus-shadow,
+ active-shadow: $active-shadow,
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-icon-color: $disabled-icon-color,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ )
+ );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
new file mode 100644
index 00000000000..757d10fb96e
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
@@ -0,0 +1,324 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author Marin Popov
+/// @author Simeon Simeonoff
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text colors in flat buttons
+/// $my-button-theme: flat-button-theme(
+/// $foreground: black,
+/// );
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-button-theme);
+@function flat-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $icon-color: $foreground,
+ $icon-color-hover: $hover-foreground,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $focus-visible-background: null,
+ $focus-visible-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $hover-border-color: null,
+ $focus-border-color: null,
+ $focus-visible-border-color: null,
+ $active-border-color: null,
+
+ $shadow-color: null,
+
+ $resting-shadow: null,
+ $hover-shadow: null,
+ $focus-shadow: null,
+ $active-shadow: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-icon-color: $disabled-foreground,
+ $disabled-border-color: null,
+ $size: null
+) {
+ $name: 'igx-flat-button';
+ $button-schema: ();
+
+ @if map.has-key($schema, 'button') {
+ $button-schema: map.get($schema, 'button');
+
+ @if map.has-key($button-schema, 'flat') {
+ $button-schema: map.get($button-schema, 'flat');
+ } @else {
+ $button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if $variant == 'material' or $variant == 'fluent' {
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.32);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.16);
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+ }
+
+ @if not($icon-color-hover) and $hover-foreground {
+ $icon-color-hover: var(--hover-foreground);
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: hsla(
+ from var(--focus-hover-background) h s l / 1
+ );
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: hsla(from var(--active-background) h s l / 1);
+ }
+
+ @if $variant == 'material' {
+ @if not($focus-visible-background) and $foreground {
+ $focus-visible-background: hsla(
+ from var(--foreground) h s l / 0.16
+ );
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: hsla(
+ from var(--focus-visible-background) h s l / 1
+ );
+ }
+ } @else {
+ @if not($focus-visible-foreground) and $focus-foreground {
+ $focus-visible-foreground: var(--focus-foreground);
+ }
+ }
+
+ @if $variant == 'fluent' {
+ @if not($focus-visible-border-color) and $focus-visible-foreground {
+ $focus-visible-border-color: var(--focus-visible-foreground);
+ }
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+ }
+
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($icon-color-hover) and $hover-foreground {
+ $icon-color-hover: var(--hover-foreground);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.7)
+ );
+ }
+ } @else {
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.9)
+ );
+ }
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.9)
+ );
+ }
+
+ @if not($focus-visible-foreground) and $foreground {
+ $focus-visible-foreground: var(--foreground);
+ }
+
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+ }
+
+ @if not($disabled-icon-color) and $disabled-foreground {
+ $disabled-icon-color: var(--disabled-foreground);
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($active-foreground) and $foreground {
+ $active-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.7)
+ );
+ }
+
+ @if not($shadow-color) and $focus-visible-foreground {
+ $shadow-color: hsla(
+ from var(--focus-visible-foreground) h s l / 0.5
+ );
+ }
+ } @else {
+ @if not($active-foreground) and $foreground {
+ $active-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.9)
+ );
+ }
+
+ @if not($shadow-color) and $focus-visible-foreground {
+ $shadow-color: hsla(
+ from var(--focus-visible-foreground) h s l / 0.2
+ );
+ }
+ }
+ }
+
+ @if not($resting-shadow) {
+ $resting-elevation: map.get($button-schema, 'resting-elevation');
+ $resting-shadow: elevation($resting-elevation);
+ }
+
+ @if not($hover-shadow) {
+ $hover-elevation: map.get($button-schema, 'hover-elevation');
+ $hover-shadow: elevation($hover-elevation);
+ }
+
+ @if not($focus-shadow) {
+ $focus-elevation: map.get($button-schema, 'focus-elevation');
+ $focus-shadow: elevation($focus-elevation);
+ }
+
+ @if not($active-shadow) {
+ $active-elevation: map.get($button-schema, 'active-elevation');
+ $active-shadow: elevation($active-elevation);
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ icon-color: $icon-color,
+ icon-color-hover: $icon-color-hover,
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+ focus-visible-background: $focus-visible-background,
+ focus-visible-foreground: $focus-visible-foreground,
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+ border-radius: $border-radius,
+ border-color: $border-color,
+ hover-border-color: $hover-border-color,
+ focus-border-color: $focus-border-color,
+ focus-visible-border-color: $focus-visible-border-color,
+ active-border-color: $active-border-color,
+ shadow-color: $shadow-color,
+ resting-shadow: $resting-shadow,
+ hover-shadow: $hover-shadow,
+ focus-shadow: $focus-shadow,
+ active-shadow: $active-shadow,
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-icon-color: $disabled-icon-color,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ )
+ );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
new file mode 100644
index 00000000000..a20c7a33d5f
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
@@ -0,0 +1,387 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author Marin Popov
+/// @author Simeon Simeonoff
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text colors in outlined buttons
+/// $my-button-theme: outlined-button-theme(
+/// $foreground: black,
+/// );
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-button-theme);
+@function outlined-button-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $foreground: null,
+
+ $hover-background: null,
+ $hover-foreground: null,
+
+ $icon-color: $foreground,
+ $icon-color-hover: $hover-foreground,
+
+ $focus-background: null,
+ $focus-foreground: null,
+
+ $focus-hover-background: null,
+ $focus-hover-foreground: null,
+
+ $focus-visible-background: null,
+ $focus-visible-foreground: null,
+
+ $active-background: null,
+ $active-foreground: null,
+
+ $border-radius: null,
+ $border-color: null,
+ $hover-border-color: null,
+ $focus-border-color: null,
+ $focus-visible-border-color: null,
+ $active-border-color: null,
+
+ $shadow-color: null,
+
+ $resting-shadow: null,
+ $hover-shadow: null,
+ $focus-shadow: null,
+ $active-shadow: null,
+
+ $disabled-background: null,
+ $disabled-foreground: null,
+ $disabled-icon-color: $disabled-foreground,
+ $disabled-border-color: null,
+ $size: null
+) {
+ $name: 'igx-outlined-button';
+ $button-schema: ();
+
+ @if map.has-key($schema, 'button') {
+ $button-schema: map.get($schema, 'button');
+ @if map.has-key($button-schema, 'outlined') {
+ $button-schema: map.get($button-schema, 'outlined');
+ } @else {
+ $button-schema: $schema;
+ }
+ }
+
+ $theme: digest-schema($button-schema);
+ $variant: map.get($schema, '_meta', 'theme');
+
+ @if $variant == 'material' or $variant == 'fluent' {
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.32);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.16);
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: hsla(
+ from var(--focus-hover-background) h s l / 1
+ );
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: hsla(from var(--active-background) h s l / 1);
+ }
+
+ @if $variant == 'material' {
+ @if not($focus-visible-background) and $foreground {
+ $focus-visible-background: hsla(
+ from var(--foreground) h s l / 0.16
+ );
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: hsla(
+ from var(--focus-visible-background) h s l / 1
+ );
+ }
+ } @else {
+ @if not($focus-visible-foreground) and $focus-foreground {
+ $focus-visible-foreground: var(--focus-foreground);
+ }
+ }
+
+ @if $variant == 'fluent' {
+ @if not($focus-visible-border-color) and $focus-visible-foreground {
+ $focus-visible-border-color: var(--focus-visible-foreground);
+ }
+ }
+ }
+
+ @if $variant == 'indigo' {
+ @if not($hover-background) and $foreground {
+ $hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($focus-hover-background) and $foreground {
+ $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsla(from var(--foreground) h s l / 0.08);
+ }
+
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: hsl(
+ from var(--foreground) h s calc(l * 0.9)
+ );
+ }
+
+ @if not($focus-visible-foreground) and $foreground {
+ $focus-visible-foreground: var(--foreground);
+ }
+
+ @if not($active-foreground) and $foreground {
+ $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+ }
+
+ @if not($shadow-color) and $focus-visible-foreground {
+ $shadow-color: hsla(
+ from var(--focus-visible-foreground) h s l / 0.2
+ );
+ }
+ }
+
+ @if $variant == 'bootstrap' {
+ @if not($hover-background) and $foreground {
+ $hover-background: var(--foreground);
+ }
+
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($focus-background) and $foreground {
+ $focus-background: hsl(from var(--foreground) h s calc(l * 0.8));
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-background) and $hover-background {
+ $focus-hover-background: hsl(
+ from var(--hover-background) h s calc(l * 0.9)
+ );
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(
+ var(--focus-hover-background)
+ );
+ }
+
+ @if not($focus-visible-background) and $hover-background {
+ $focus-visible-background: var(--hover-background);
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(
+ var(--focus-visible-background)
+ );
+ }
+
+ @if not($active-background) and $foreground {
+ $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+ }
+
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+ }
+
+ @if not($disabled-icon-color) and $disabled-foreground {
+ $disabled-icon-color: var(--disabled-foreground);
+ }
+
+ @if not($disabled-border-color) and $disabled-foreground {
+ $disabled-border-color: var(--disabled-foreground);
+ }
+
+ @if not($hover-border-color) and $hover-background {
+ $hover-border-color: var(--hover-background);
+ }
+
+ @if not($focus-border-color) and $focus-background {
+ $focus-border-color: var(--focus-background);
+ }
+
+ @if not($focus-visible-border-color) and $focus-visible-background {
+ $focus-visible-border-color: var(--focus-visible-background);
+ }
+
+ @if not($active-border-color) and $active-background {
+ $active-border-color: var(--active-background);
+ }
+
+ @if not($shadow-color) and $focus-visible-background {
+ $shadow-color: hsla(
+ from var(--focus-visible-background) h s l / 0.5
+ );
+ }
+ }
+
+ @if not($icon-color-hover) and $hover-foreground {
+ $icon-color-hover: var(--hover-foreground);
+ }
+
+ @if variant != 'bootstrap' {
+ @if not($border-color) and $foreground {
+ $border-color: var(--foreground);
+ }
+
+ @if not($hover-border-color) and $hover-foreground {
+ $hover-border-color: var(--hover-foreground);
+ }
+
+ @if not($focus-border-color) and $focus-foreground {
+ $focus-border-color: var(--focus-foreground);
+ }
+
+ @if not($focus-visible-border-color) and $focus-visible-foreground {
+ $focus-visible-border-color: var(--focus-visible-foreground);
+ }
+
+ @if not($active-border-color) and $active-foreground {
+ $active-border-color: var(--active-foreground);
+ }
+ }
+
+ @if not($resting-shadow) {
+ $resting-elevation: map.get($button-schema, 'resting-elevation');
+ $resting-shadow: elevation($resting-elevation);
+ }
+
+ @if not($hover-shadow) {
+ $hover-elevation: map.get($button-schema, 'hover-elevation');
+ $hover-shadow: elevation($hover-elevation);
+ }
+
+ @if not($focus-shadow) {
+ $focus-elevation: map.get($button-schema, 'focus-elevation');
+ $focus-shadow: elevation($focus-elevation);
+ }
+
+ @if not($active-shadow) {
+ $active-elevation: map.get($button-schema, 'active-elevation');
+ $active-shadow: elevation($active-elevation);
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ foreground: $foreground,
+ icon-color: $icon-color,
+ icon-color-hover: $icon-color-hover,
+ hover-background: $hover-background,
+ hover-foreground: $hover-foreground,
+ focus-background: $focus-background,
+ focus-foreground: $focus-foreground,
+ focus-hover-background: $focus-hover-background,
+ focus-hover-foreground: $focus-hover-foreground,
+ focus-visible-background: $focus-visible-background,
+ focus-visible-foreground: $focus-visible-foreground,
+ active-background: $active-background,
+ active-foreground: $active-foreground,
+ border-radius: $border-radius,
+ border-color: $border-color,
+ hover-border-color: $hover-border-color,
+ focus-border-color: $focus-border-color,
+ focus-visible-border-color: $focus-visible-border-color,
+ active-border-color: $active-border-color,
+ shadow-color: $shadow-color,
+ resting-shadow: $resting-shadow,
+ hover-shadow: $hover-shadow,
+ focus-shadow: $focus-shadow,
+ active-shadow: $active-shadow,
+ disabled-background: $disabled-background,
+ disabled-foreground: $disabled-foreground,
+ disabled-icon-color: $disabled-icon-color,
+ disabled-border-color: $disabled-border-color,
+ size: $size,
+ )
+ );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index bca86948b95..072eeaf10e8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -12,6 +12,7 @@
@use 'igniteui-theming/sass/utils' as *;
@use 'igniteui-theming/sass/themes' as *;
@use 'igniteui-theming/sass/themes/charts' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/button' as *;
////
/// @group themes
@@ -21,7 +22,9 @@
/// Default noop handler for theme map transforms
/// @access private
-@function theme-noop($arg) { @return $arg; }
+@function theme-noop($arg) {
+ @return $arg;
+}
/// Generates an Ignite UI for Angular global theme.
/// @param {Map} $palette - An palette to be used by the global theme.
@@ -39,7 +42,7 @@
$exclude: (),
$roundness: null,
$elevation: true,
- $elevations: elevations.$material-elevations,
+ $elevations: elevations.$material-elevations
) {
@include theme-internal(
$palette: $palette,
@@ -48,7 +51,7 @@
$roundness: $roundness,
$elevation: $elevation,
$elevations: $elevations
- )
+ );
}
/// Generates an Ignite UI for Angular global theme.
@@ -69,7 +72,7 @@
$roundness: null,
$elevation: true,
$elevations: elevations.$material-elevations,
- $theme-handler: meta.get-function('theme-noop'),
+ $theme-handler: meta.get-function('theme-noop')
) {
// Stores all excluded component styles
$excluded: ();
@@ -146,7 +149,10 @@
$action-strip-theme-map: action-strip-theme(
$schema: $schema,
);
- $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map);
+ $action-strip-theme-map: meta.call(
+ $theme-handler,
+ $action-strip-theme-map
+ );
@include action-strip($action-strip-theme-map);
}
@@ -167,18 +173,38 @@
}
@if is-used('igx-button', $exclude) {
- $button-theme-map: button-theme(
+ $flat-theme-map: flat-button-theme(
+ $schema: $schema,
+ );
+
+ $contained-theme-map: contained-button-theme(
+ $schema: $schema,
+ );
+
+ $outlined-theme-map: outlined-button-theme(
+ $schema: $schema,
+ );
+
+ $fab-theme-map: fab-button-theme(
$schema: $schema,
);
- $button-theme-map: meta.call($theme-handler, $button-theme-map);
- @include button($button-theme-map);
+
+ @include button(
+ $flat: meta.call($theme-handler, $flat-theme-map),
+ $contained: meta.call($theme-handler, $contained-theme-map),
+ $outlined: meta.call($theme-handler, $outlined-theme-map),
+ $fab:meta.call($theme-handler, $fab-theme-map)
+ );
}
@if is-used('igx-button-group', $exclude) {
$button-group-theme-map: button-group-theme(
$schema: $schema,
);
- $button-group-theme-map: meta.call($theme-handler, $button-group-theme-map);
+ $button-group-theme-map: meta.call(
+ $theme-handler,
+ $button-group-theme-map
+ );
@include button-group($button-group-theme-map);
}
@@ -227,55 +253,73 @@
$schema: $schema,
);
$data-chart-theme-map: meta.call($theme-handler, $data-chart-theme-map);
- @include css-vars($data-chart-theme-map);
+ @include css-vars($data-chart-theme-map);
}
@if is-used('doughnut-chart', $exclude) {
$doughnut-chart-theme-map: doughnut-chart-theme(
$schema: $schema,
);
- $doughnut-chart-theme-map: meta.call($theme-handler, $doughnut-chart-theme-map);
- @include css-vars($doughnut-chart-theme-map);
+ $doughnut-chart-theme-map: meta.call(
+ $theme-handler,
+ $doughnut-chart-theme-map
+ );
+ @include css-vars($doughnut-chart-theme-map);
}
@if is-used('linear-gauge', $exclude) {
$linear-gauge-theme-map: linear-gauge-theme(
$schema: $schema,
);
- $linear-gauge-theme-map: meta.call($theme-handler, $linear-gauge-theme-map);
- @include css-vars($linear-gauge-theme-map);
+ $linear-gauge-theme-map: meta.call(
+ $theme-handler,
+ $linear-gauge-theme-map
+ );
+ @include css-vars($linear-gauge-theme-map);
}
@if is-used('radial-gauge', $exclude) {
$radial-gauge-theme-map: radial-gauge-theme(
$schema: $schema,
);
- $radial-gauge-theme-map: meta.call($theme-handler, $radial-gauge-theme-map);
- @include css-vars($radial-gauge-theme-map);
+ $radial-gauge-theme-map: meta.call(
+ $theme-handler,
+ $radial-gauge-theme-map
+ );
+ @include css-vars($radial-gauge-theme-map);
}
@if is-used('financial-chart', $exclude) {
$financial-chart-theme-map: financial-chart-theme(
$schema: $schema,
);
- $financial-chart-theme-map: meta.call($theme-handler, $financial-chart-theme-map);
- @include css-vars($financial-chart-theme-map);
+ $financial-chart-theme-map: meta.call(
+ $theme-handler,
+ $financial-chart-theme-map
+ );
+ @include css-vars($financial-chart-theme-map);
}
@if is-used('bullet-graph', $exclude) {
$bullet-graph-theme-map: bullet-graph-theme(
$schema: $schema,
);
- $bullet-graph-theme-map: meta.call($theme-handler, $bullet-graph-theme-map);
- @include css-vars($bullet-graph-theme-map);
+ $bullet-graph-theme-map: meta.call(
+ $theme-handler,
+ $bullet-graph-theme-map
+ );
+ @include css-vars($bullet-graph-theme-map);
}
@if is-used('category-chart', $exclude) {
$category-chart-theme-map: category-chart-theme(
$schema: $schema,
);
- $category-chart-theme-map: meta.call($theme-handler, $category-chart-theme-map);
- @include css-vars($category-chart-theme-map);
+ $category-chart-theme-map: meta.call(
+ $theme-handler,
+ $category-chart-theme-map
+ );
+ @include css-vars($category-chart-theme-map);
}
@if is-used('geo-map', $exclude) {
@@ -283,7 +327,7 @@
$schema: $schema,
);
$geo-map-theme-map: meta.call($theme-handler, $geo-map-theme-map);
- @include css-vars($geo-map-theme-map);
+ @include css-vars($geo-map-theme-map);
}
@if is-used('pie-chart', $exclude) {
@@ -291,7 +335,7 @@
$schema: $schema,
);
$pie-chart-theme-map: meta.call($theme-handler, $pie-chart-theme-map);
- @include css-vars($pie-chart-theme-map);
+ @include css-vars($pie-chart-theme-map);
}
@if is-used('sparkline', $exclude) {
@@ -299,23 +343,29 @@
$schema: $schema,
);
$sparkline-theme-map: meta.call($theme-handler, $sparkline-theme-map);
- @include css-vars($sparkline-theme-map);
+ @include css-vars($sparkline-theme-map);
}
@if is-used('funnel-chart', $exclude) {
$funnel-chart-theme-map: funnel-chart-theme(
$schema: $schema,
);
- $funnel-chart-theme-map: meta.call($theme-handler, $funnel-chart-theme-map);
- @include css-vars($funnel-chart-theme-map);
+ $funnel-chart-theme-map: meta.call(
+ $theme-handler,
+ $funnel-chart-theme-map
+ );
+ @include css-vars($funnel-chart-theme-map);
}
@if is-used('shape-chart', $exclude) {
$shape-chart-theme-map: shape-chart-theme(
$schema: $schema,
);
- $shape-chart-theme-map: meta.call($theme-handler, $shape-chart-theme-map);
- @include css-vars($shape-chart-theme-map);
+ $shape-chart-theme-map: meta.call(
+ $theme-handler,
+ $shape-chart-theme-map
+ );
+ @include css-vars($shape-chart-theme-map);
}
@if is-used('igx-checkbox', $exclude) {
@@ -338,7 +388,10 @@
$column-actions-theme-map: column-actions-theme(
$schema: $schema,
);
- $column-actions-theme-map: meta.call($theme-handler, $column-actions-theme-map);
+ $column-actions-theme-map: meta.call(
+ $theme-handler,
+ $column-actions-theme-map
+ );
@include column-actions($column-actions-theme-map);
}
@@ -370,7 +423,10 @@
$date-range-picker-theme-map: date-range-picker-theme(
$schema: $schema,
);
- $date-range-picker-theme-map: meta.call($theme-handler, $date-range-picker-theme-map);
+ $date-range-picker-theme-map: meta.call(
+ $theme-handler,
+ $date-range-picker-theme-map
+ );
@include date-range-picker($date-range-picker-theme-map);
}
@@ -394,7 +450,10 @@
$dock-manager-theme-map: dock-manager-theme(
$schema: $schema,
);
- $dock-manager-theme-map: meta.call($theme-handler, $dock-manager-theme-map);
+ $dock-manager-theme-map: meta.call(
+ $theme-handler,
+ $dock-manager-theme-map
+ );
@include dock-manager($dock-manager-theme-map);
}
@@ -418,7 +477,10 @@
$expansion-panel-theme-map: expansion-panel-theme(
$schema: $schema,
);
- $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map);
+ $expansion-panel-theme-map: meta.call(
+ $theme-handler,
+ $expansion-panel-theme-map
+ );
@include expansion-panel($expansion-panel-theme-map);
}
@@ -434,7 +496,10 @@
$grid-summary-theme-map: grid-summary-theme(
$schema: $schema,
);
- $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
+ $grid-summary-theme-map: meta.call(
+ $theme-handler,
+ $grid-summary-theme-map
+ );
@include grid-summary($grid-summary-theme-map);
}
@@ -442,7 +507,10 @@
$grid-toolbar-theme-map: grid-toolbar-theme(
$schema: $schema,
);
- $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map);
+ $grid-toolbar-theme-map: meta.call(
+ $theme-handler,
+ $grid-toolbar-theme-map
+ );
@include grid-toolbar($grid-toolbar-theme-map);
}
@@ -450,7 +518,10 @@
$pivot-data-selector-theme-map: pivot-data-selector-theme(
$schema: $schema,
);
- $pivot-data-selector-theme-map: meta.call($theme-handler, $pivot-data-selector-theme-map);
+ $pivot-data-selector-theme-map: meta.call(
+ $theme-handler,
+ $pivot-data-selector-theme-map
+ );
@include pivot-data-selector($pivot-data-selector-theme-map);
}
@@ -494,7 +565,10 @@
$input-group-theme-map: input-group-theme(
$schema: $schema,
);
- $input-group-theme-map: meta.call($theme-handler, $input-group-theme-map);
+ $input-group-theme-map: meta.call(
+ $theme-handler,
+ $input-group-theme-map
+ );
@include input-group($input-group-theme-map);
}
@@ -550,7 +624,10 @@
$progress-circular-theme-map: progress-circular-theme(
$schema: $schema,
);
- $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map);
+ $progress-circular-theme-map: meta.call(
+ $theme-handler,
+ $progress-circular-theme-map
+ );
@include progress-circular($progress-circular-theme-map);
}
@@ -558,7 +635,10 @@
$progress-linear-theme-map: progress-linear-theme(
$schema: $schema,
);
- $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map);
+ $progress-linear-theme-map: meta.call(
+ $theme-handler,
+ $progress-linear-theme-map
+ );
@include progress-linear($progress-linear-theme-map);
}
@@ -574,7 +654,10 @@
$query-builder-theme-map: query-builder-theme(
$schema: $schema,
);
- $query-builder-theme-map: meta.call($theme-handler, $query-builder-theme-map);
+ $query-builder-theme-map: meta.call(
+ $theme-handler,
+ $query-builder-theme-map
+ );
@include query-builder($query-builder-theme-map);
}
@@ -646,7 +729,10 @@
$time-picker-theme-map: time-picker-theme(
$schema: $schema,
);
- $time-picker-theme-map: meta.call($theme-handler, $time-picker-theme-map);
+ $time-picker-theme-map: meta.call(
+ $theme-handler,
+ $time-picker-theme-map
+ );
@include time-picker($time-picker-theme-map);
}
@@ -676,12 +762,7 @@
/// @param {List} $exclude [( )] - A list of ig components to be excluded from the global theme styles.
/// @see {mixin} theme
/// @deprecated - Use the theme mixin instead.
-@mixin light-theme(
- $palette,
- $exclude: (),
- $roundness: null,
- $elevation: true,
-) {
+@mixin light-theme($palette, $exclude: (), $roundness: null, $elevation: true) {
$gray: color($palette, gray);
$surface: color($palette, surface);
@@ -701,7 +782,7 @@
$schema: $light-material-schema,
$exclude: $exclude,
$roundness: $roundness,
- $elevation: $elevation,
+ $elevation: $elevation
);
}
@@ -710,12 +791,7 @@
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
/// @see {mixin} theme
/// @deprecated - Use the theme mixin instead.
-@mixin dark-theme(
- $palette,
- $exclude: (),
- $roundness: null,
- $elevation: true,
-) {
+@mixin dark-theme($palette, $exclude: (), $roundness: null, $elevation: true) {
$gray: color($palette, gray);
$surface: color($palette, surface);
@@ -735,6 +811,6 @@
$schema: $dark-material-schema,
$exclude: $exclude,
$roundness: $roundness,
- $elevation: $elevation,
+ $elevation: $elevation
);
}
From 65f019e45c4307f7d4c1bd49f050a3bf0a4e411a Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 30 Apr 2025 15:00:37 +0300
Subject: [PATCH 36/53] feat(calendar): improve calendar custom theme functions
(#15510)
---
.../components/calendar/_calendar-theme.scss | 558 ++++++++++++++----
1 file changed, 444 insertions(+), 114 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index cf254985f27..ed66f3617f1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -328,195 +328,529 @@
}
$theme: digest-schema($calendar-schema);
- $meta: map.get($theme, '_meta');
$variant: map.get($schema, '_meta', 'theme');
+ //base start
+ @if not($header-foreground) and $header-background {
+ $header-foreground: adaptive-contrast(var(--header-background));
+ }
+
+ @if not($content-foreground) and $content-background {
+ $content-foreground: adaptive-contrast(var(--content-background));
+ }
+
+ @if not($weekend-color) and $content-foreground {
+ $weekend-color: var(--content-foreground);
+ }
+
+ @if not($inactive-color) and $content-background {
+ $inactive-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5);
+ }
+
+ @if not($weekday-color) and $inactive-color {
+ $weekday-color: var(--inactive-color);
+ }
+
+ @if not($week-number-background) and $content-background {
+ $week-number-background: hsla(from var(--content-background) h s calc(l * 0.8));
+ }
+
+ @if not($week-number-foreground) and $week-number-background {
+ $week-number-foreground: hsla(from adaptive-contrast(var(--week-number-background)) h s l / 0.5);
+ }
+ //base end
+
+ //picker start
@if $variant == 'bootstrap' {
@if not($picker-background) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $picker-background: $header-background;
- }
+ $picker-background: var(--header-background);
+ }
+
+ @if not($picker-hover-foreground) and $picker-background {
+ $picker-hover-foreground: hsla(from adaptive-contrast(var(--picker-background)) h s l / 0.8);
+ }
+
+ @if not($weekday-color) and $header-background {
+ $weekday-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
}
} @else {
@if not($picker-background) and $content-background {
- @if meta.type-of($picker-background) == 'color' {
- $picker-background: $content-background;
- }
+ $picker-background: var(--content-background);
}
- @if not($weekday-color) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $weekday-color: text-contrast($content-background);
- }
+ @if not($picker-hover-foreground) and $header-background {
+ $picker-hover-foreground: var(--header-background);
}
+ }
- @if not($navigation-color) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $navigation-color: text-contrast($content-background);
- }
+ @if not($picker-foreground) and $picker-background {
+ $picker-foreground: adaptive-contrast(var(--picker-background));
+ }
+
+ @if not($picker-focus-foreground) and $picker-hover-foreground {
+ $picker-focus-foreground: var(--picker-hover-foreground);
+ }
+
+ @if not($navigation-color) and $picker-background {
+ $navigation-color: adaptive-contrast(var(--picker-background));
+ }
+
+ @if not($navigation-hover-color) and $picker-hover-foreground {
+ $navigation-hover-color: var(--picker-hover-foreground);
+ }
+
+ @if not($navigation-focus-color) and $navigation-hover-color {
+ $navigation-focus-color: var(--navigation-hover-color);
+ }
+ //picker end
+
+ //date start
+ @if not($date-hover-background) and $content-background {
+ $date-hover-background: hsl(from var(--content-background) h s calc(l * 0.9));
+ }
+
+ @if not($date-hover-foreground) and $date-hover-background {
+ $date-hover-foreground: adaptive-contrast(var(--date-hover-background));
+ }
+
+ @if not($date-focus-background) and $date-hover-background {
+ $date-focus-background: var(--date-hover-background)
+ }
+
+ @if not($date-focus-foreground) and $date-hover-foreground {
+ $date-focus-foreground: var(--date-hover-foreground);
+ }
+
+ @if not($ym-hover-background) and $date-hover-background {
+ $ym-hover-background: var(--date-hover-background);
+ }
+
+ @if not($ym-hover-foreground) and $ym-hover-background {
+ $ym-hover-foreground: adaptive-contrast(var(--ym-hover-background));
+ }
+ //date end
+
+ //date current start
+ @if $variant == 'indigo' {
+ @if not($date-current-background) and $header-background {
+ $date-current-background: hsla(from var(--header-background) h s l / 0.4);
}
- @if not($navigation-focus-color) and $navigation-hover-color {
- @if meta.type-of($navigation-hover-color) == 'color' {
- $navigation-focus-color: $navigation-hover-color;
- }
+ @if not($date-current-border-color) and $date-current-background {
+ $date-current-border-color: hsla(from var(--date-current-background) h s l / 0.6);
}
- }
- @if not($header-foreground) and $header-background {
- @if meta.type-of($header-background) == 'color' {
- $header-foreground: text-contrast($header-background);
+ @if not($date-current-hover-background) and $date-current-background {
+ $date-current-hover-background: hsl(from var(--date-current-background) h s calc(l * 0.9));
+ }
+
+ @if not($date-current-hover-border-color) and $date-current-border-color {
+ $date-current-hover-border-color: hsl(from var(--date-current-border-color) h s calc(l * 0.9));
+ }
+
+ @if not($date-current-focus-background) and $date-current-hover-background {
+ $date-current-focus-background: var(--date-current-hover-background);
+ }
+
+ @if not($date-current-focus-border-color) and $date-current-hover-border-color {
+ $date-current-focus-border-color: var(--date-current-hover-border-color);
+ }
+
+ @if not($date-current-foreground) and $content-foreground {
+ $date-current-foreground: var(--content-foreground);
+ }
+
+ @if not($date-current-hover-foreground) and $date-current-foreground {
+ $date-current-hover-foreground: var(--date-current-foreground);
+ }
+
+ @if not($date-current-focus-foreground) and $date-current-foreground {
+ $date-current-focus-foreground: var(--date-current-foreground);
}
}
- @if not($weekend-color) and $content-foreground {
- @if meta.type-of($content-foreground) == 'color' {
- $weekend-color: $content-foreground;
+ @if $variant == 'fluent' {
+ @if not($date-current-background) and $header-background {
+ $date-current-background: var(--header-background);
}
}
- @if $variant != 'fluent' and $variant != 'bootstrap' {
+ @if $variant == 'material' or $variant == 'bootstrap' {
@if not($date-current-background) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $date-current-background: $content-background;
- }
+ $date-current-background: var(--content-background);
}
+ }
- @if not($date-current-foreground) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $date-current-foreground: text-contrast($content-background);
- }
+ @if $variant != 'indigo' {
+ @if not($date-current-foreground) and $date-current-background {
+ $date-current-foreground: adaptive-contrast(var(--date-current-background));
}
- }
- @if not($content-foreground) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $content-foreground: text-contrast($content-background);
+ @if not($date-current-hover-background) and $date-hover-background {
+ $date-current-hover-background: var(--date-hover-background);
+ }
+
+ @if not($date-current-focus-background) and $date-focus-background {
+ $date-current-focus-background: var(--date-focus-background);
+ }
+
+ @if not($date-current-hover-foreground) and $date-current-foreground {
+ $date-current-hover-foreground: var(--date-current-foreground);
+ }
+
+ @if not($date-current-focus-foreground) and $date-current-foreground {
+ $date-current-focus-foreground: var(--date-current-foreground);
}
}
- @if not($weekend-color) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $weekend-color: rgba($content-foreground, .5);
+ @if $variant == 'material' or $variant == 'bootstrap' {
+ @if not($date-current-border-color) and $date-current-foreground {
+ $date-current-border-color: var(--date-current-foreground);
+ }
+
+ @if not($date-current-hover-border-color) and $date-current-hover-foreground {
+ $date-current-hover-border-color: var(--date-current-hover-foreground);
+ }
+
+ @if not($date-current-focus-border-color) and $date-current-focus-foreground {
+ $date-current-focus-border-color: var(--date-current-focus-foreground);
}
}
+ //date current end
- @if not($picker-foreground) and $content-background {
- @if meta.type-of($content-background) == 'color' {
- $picker-foreground: text-contrast($content-background);
+ //date selected start
+
+ @if $variant == 'fluent' {
+ @if not($date-selected-background) and $date-hover-background {
+ $date-selected-background: var(--date-hover-background);
}
+ } @else {
+ @if not($date-selected-background) and $header-background {
+ $date-selected-background: var(--header-background);
+ }
+ }
+
+ @if not($date-selected-current-background) and $date-selected-background {
+ $date-selected-current-background: var(--date-selected-background);
+ }
+
+ @if not($date-selected-hover-background) and $date-selected-background {
+ $date-selected-hover-background: hsl(from var(--date-selected-background) h s calc(l * 0.9));
+ }
+
+ @if not($date-selected-current-hover-background) and $date-selected-hover-background {
+ $date-selected-current-hover-background: var(--date-selected-hover-background);
+ }
+
+ @if not($date-selected-focus-background) and $date-selected-hover-background {
+ $date-selected-focus-background: var(--date-selected-hover-background);
+ }
+
+ @if not($date-selected-current-focus-background) and $date-selected-focus-background {
+ $date-selected-current-focus-background: var(--date-selected-focus-background);
}
@if not($date-selected-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-foreground: text-contrast($date-selected-background);
- }
+ $date-selected-foreground: adaptive-contrast(var(--date-selected-background));
}
@if not($date-selected-hover-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-hover-foreground: text-contrast($date-selected-background);
- }
+ $date-selected-hover-foreground: adaptive-contrast(var(--date-selected-background));
}
@if not($date-selected-focus-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-focus-foreground: text-contrast($date-selected-background);
- }
+ $date-selected-focus-foreground: adaptive-contrast(var(--date-selected-background));
}
- @if not($date-selected-hover-foreground) and $date-selected-hover-background {
- @if meta.type-of($date-selected-hover-background) == 'color' {
- $date-selected-hover-foreground: text-contrast($date-selected-hover-background);
+ @if $variant == 'indigo' {
+ @if not($date-selected-current-border-color) and $date-selected-current-background {
+ $date-selected-current-border-color: hsl(from var(--date-selected-current-background) h calc(s * 0.9) calc(l * 1.5));
+ }
+ } @else {
+ @if not($date-selected-current-border-color) and $content-foreground {
+ $date-selected-current-border-color: var(--content-foreground);
}
}
- @if not($date-selected-focus-foreground) and $date-selected-focus-background {
- @if meta.type-of($date-selected-focus-background) == 'color' {
- $date-selected-focus-foreground: text-contrast($date-selected-focus-background);
- }
+ @if not($date-selected-current-hover-background) and $date-selected-hover-background {
+ $date-selected-current-hover-background: var(--date-selected-hover-background);
}
- @if not($date-selected-current-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-foreground: text-contrast($date-selected-background);
- }
+ @if not($date-selected-current-hover-border-color) and $date-selected-current-border-color {
+ $date-selected-current-hover-border-color: var(--date-selected-current-border-color);
}
- @if not($date-selected-current-hover-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-hover-foreground: text-contrast($date-selected-background);
+ @if $variant == 'fluent' {
+ @if not($date-selected-current-foreground) and $date-current-background {
+ $date-selected-current-foreground: adaptive-contrast(var(--date-current-background));
}
- }
- @if not($date-selected-current-focus-foreground) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-focus-foreground: text-contrast($date-selected-background);
+ @if not($date-selected-current-hover-foreground) and $date-current-background {
+ $date-selected-current-hover-foreground: adaptive-contrast(var(--date-current-background));
}
- }
- @if not($date-selected-current-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-background: $date-selected-background;
+ @if not($date-selected-current-focus-foreground) and $date-current-background {
+ $date-selected-current-focus-foreground: adaptive-contrast(var(--date-current-background));
+ }
+ } @else {
+ @if not($date-selected-current-foreground) and $date-selected-background {
+ $date-selected-current-foreground: adaptive-contrast(var(--date-selected-background));
}
- }
- @if not($date-selected-current-hover-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-hover-background: $date-selected-background;
+ @if not($date-selected-current-hover-foreground) and $date-selected-background {
+ $date-selected-current-hover-foreground: adaptive-contrast(var(--date-selected-background));
}
- }
- @if not($date-selected-current-focus-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-focus-background: $date-selected-background;
+ @if not($date-selected-current-focus-foreground) and $date-selected-current-focus-background {
+ $date-selected-current-focus-foreground: adaptive-contrast(var(--date-selected-current-focus-background));
}
}
- @if not($date-selected-current-focus-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-current-focus-background: $date-selected-background;
- }
+ @if not($date-selected-current-focus-border-color) and $date-selected-current-hover-border-color {
+ $date-selected-current-focus-border-color: var(--date-selected-current-hover-border-color);
}
+ //date selected end
- @if not($date-selected-hover-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-hover-background: $date-selected-background;
+ //date special start
+ @if $variant == 'fluent' or $variant == 'bootstrap' {
+ @if not($date-special-foreground) and $content-foreground {
+ $date-special-foreground: var(--content-foreground);
}
- }
- @if not($date-selected-focus-background) and $date-selected-background {
- @if meta.type-of($date-selected-background) == 'color' {
- $date-selected-focus-background: $date-selected-background;
+ @if not($date-special-border-color) and $header-background {
+ $date-special-border-color: var(--header-background);
}
- }
- @if not($date-selected-current-hover-background) and $date-selected-hover-background {
- @if meta.type-of($date-selected-hover-background) == 'color' {
- $date-selected-current-hover-background: $date-selected-hover-background;
+ @if not($date-special-hover-border-color) and $date-special-border-color {
+ $date-special-hover-border-color: var(--date-special-border-color);
+ }
+
+ @if not($date-special-focus-foreground) and $date-special-foreground {
+ $date-special-focus-foreground: var(--date-special-foreground);
+ }
+ } @else {
+ @if not($date-special-foreground) and $header-background {
+ $date-special-foreground: var(--header-background);
+ }
+
+ @if not($date-special-border-color) and $date-special-foreground {
+ $date-special-border-color: var(--date-special-foreground);
+ }
+
+ @if not($date-special-hover-foreground) and $date-special-foreground {
+ $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+ }
+
+ @if not($date-special-hover-border-color) and $date-special-hover-foreground {
+ $date-special-hover-border-color: var(--date-special-hover-foreground);
+ }
+
+ @if not($date-special-focus-foreground) and $date-special-hover-border-color {
+ $date-special-focus-foreground: var(--date-special-hover-border-color);
}
}
- @if not($date-selected-current-focus-background) and $date-selected-focus-background {
- @if meta.type-of($date-selected-focus-background) == 'color' {
- $date-selected-current-focus-background: $date-selected-focus-background;
+ @if not($date-special-hover-foreground) and $date-special-foreground {
+ $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+ }
+
+ @if not($date-special-hover-background) and $date-hover-background {
+ $date-special-hover-background: var(--date-hover-background);
+ }
+
+ @if not($date-special-focus-background) and $date-focus-background {
+ $date-special-focus-background: var(--date-focus-background);
+ }
+
+ @if $variant != 'fluent' {
+ @if not($date-selected-special-border-color) and $date-selected-foreground {
+ $date-selected-special-border-color: var(--date-selected-foreground);
+ }
+
+ @if not($date-selected-special-hover-border-color) and $date-selected-hover-foreground {
+ $date-selected-special-hover-border-color: var(--date-selected-hover-foreground);
+ }
+
+ @if not($date-selected-special-focus-border-color) and $date-selected-focus-foreground {
+ $date-selected-special-focus-border-color: var(--date-selected-focus-foreground);
+ }
+ } @else {
+ @if not($date-selected-special-border-color) and $date-special-border-color {
+ $date-selected-special-border-color: var(--date-special-border-color);
+ }
+
+ @if not($date-selected-special-hover-border-color) and $date-selected-special-border-color {
+ $date-selected-special-hover-border-color: var(--date-selected-special-border-color);
+ }
+
+ @if not($date-selected-special-focus-border-color) and $date-selected-special-border-color {
+ $date-selected-special-focus-border-color: var(--date-selected-special-border-color);
}
}
+ //date special end
- @if not($ym-hover-foreground) and $ym-hover-background {
- @if meta.type-of($ym-hover-background) == 'color' {
- $ym-hover-foreground: text-contrast($ym-hover-background);
+ //calendar views start
+ @if $variant != 'fluent' {
+ @if not($ym-selected-background) and $header-background {
+ $ym-selected-background: var(--header-background);
+ }
+
+ @if not($ym-selected-hover-background) and $ym-selected-background {
+ $ym-selected-hover-background: hsl(from var(--ym-selected-background) h s calc(l * 0.9));
+ }
+
+ @if not($ym-current-background) and $date-current-background {
+ $ym-current-background: var(--date-current-background);
+ }
+
+ @if not($ym-current-hover-background) and $date-current-hover-background {
+ $ym-current-hover-background: var(--date-current-hover-background);
+ }
+
+ @if not($ym-current-outline-color) and $date-current-border-color {
+ $ym-current-outline-color: var(--date-current-border-color);
+ }
+
+ @if not($ym-current-outline-hover-color) and $ym-current-outline-color {
+ $ym-current-outline-hover-color: var(--ym-current-outline-color);
+ }
+
+ @if not($ym-current-outline-focus-color) and $ym-current-outline-hover-color {
+ $ym-current-outline-focus-color: var(--ym-current-outline-hover-color);
+ }
+
+ @if not($ym-selected-current-outline-color) and $ym-current-outline-color {
+ $ym-selected-current-outline-color: var(--ym-current-outline-color);
+ }
+
+ @if not($ym-selected-current-outline-hover-color) and $ym-current-outline-hover-color {
+ $ym-selected-current-outline-hover-color: var(--ym-current-outline-hover-color);
+ }
+
+ @if not($ym-selected-current-outline-focus-color) and $ym-current-outline-focus-color {
+ $ym-selected-current-outline-focus-color: var(--ym-current-outline-focus-color);
}
+ } @else {
+ @if not($ym-selected-background) and $header-background {
+ $ym-selected-background: hsla(from var(--header-background) h s l / 0.3);
+ }
+
+ @if not($ym-current-background) and $date-selected-background {
+ $ym-current-background: var(--date-selected-background);
+ }
+
+ @if not($ym-current-hover-background) and $ym-current-background {
+ $ym-current-hover-background: hsl(from var(--ym-current-background) h s calc(l * 0.9));
+ }
+
+ @if not($ym-selected-hover-background) and $ym-selected-background {
+ $ym-selected-hover-background: hsla(from var(--ym-selected-background) h s calc(l * 0.9) / 0.5);
+ }
+
+ @if not($ym-selected-current-outline-color) and $ym-selected-current-foreground {
+ $ym-selected-current-outline-color: var(--ym-selected-current-foreground);
+ }
+
+ @if not($ym-selected-foreground) and $content-foreground {
+ $ym-selected-foreground: var(--content-foreground);
+ }
+
+ @if not($ym-selected-hover-foreground) and $ym-selected-foreground {
+ $ym-selected-hover-foreground: var(--content-foreground);
+ }
+ }
+
+ @if not($ym-selected-current-background) and $ym-selected-background {
+ $ym-selected-current-background: var(--ym-selected-background);
+ }
+
+ @if not($ym-selected-current-hover-background) and $ym-selected-hover-background {
+ $ym-selected-current-hover-background: var(--ym-selected-hover-background);
+ }
+
+ @if not($ym-current-foreground) and $ym-current-background {
+ $ym-current-foreground: hsla(from adaptive-contrast(var(--ym-current-background) h s l / 1));
+ }
+
+ @if not($ym-current-hover-foreground) and $ym-current-hover-background {
+ $ym-current-hover-foreground: hsla(from adaptive-contrast(var(--ym-current-hover-background) h s l / 1));
+ }
+
+ @if not($ym-selected-current-foreground) and $ym-selected-current-background {
+ $ym-selected-current-foreground: hsla(from adaptive-contrast($ym-selected-current-background) h s l / 1);
+ }
+
+ @if not($ym-selected-current-hover-foreground) and $ym-selected-current-hover-background {
+ $ym-selected-current-hover-foreground: hsla(from adaptive-contrast($ym-selected-current-hover-background) h s l / 1);
+ }
+ //calendar views end
+
+ //date range start
+ @if not($date-selected-range-background) and $date-selected-background {
+ $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
}
- @if not($ym-current-hover-foreground) and $ym-hover-background {
- @if meta.type-of($ym-hover-background) == 'color' {
- $ym-current-hover-foreground: text-contrast($ym-hover-background);
+ @if not($date-selected-range-foreground) and $content-foreground {
+ $date-selected-range-foreground: var(--content-foreground);
+ }
+
+ @if not($date-selected-range-hover-background) and $date-selected-background {
+ $date-selected-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
+ }
+
+ @if not($date-selected-range-hover-foreground) and $content-foreground {
+ $date-selected-range-hover-foreground: var(--content-foreground);
+ }
+
+ @if $variant == 'indigo' {
+ @if not($date-selected-current-range-background) and $date-selected-background {
+ $date-selected-current-range-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
+ }
+
+ @if not($date-selected-current-range-hover-background) and $date-selected-background {
+ $date-selected-current-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.24);
}
}
- @if not($week-number-foreground) and $week-number-background {
- $week-number-foreground: text-contrast($week-number-background);
+ @if not($date-selected-current-range-foreground) and $content-foreground {
+ $date-selected-current-range-foreground: var(--content-foreground);
+ }
+
+ @if not($date-selected-current-range-hover-background) and $date-selected-range-hover-background {
+ $date-selected-current-range-hover-background: var(--date-selected-range-hover-background);
+ }
+
+ @if not($date-selected-current-range-hover-foreground) and $content-foreground {
+ $date-selected-current-range-hover-foreground: var(--content-foreground);
+ }
+
+ @if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
+ $date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
+ }
+
+ @if not($date-special-range-foreground) and $date-special-foreground {
+ $date-special-range-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+ }
+
+ @if not($date-special-range-border-color) and $date-special-range-foreground {
+ $date-special-range-border-color: var(--date-special-range-foreground);
+ }
+
+ @if not($date-special-range-hover-background) and $date-selected-range-hover-background {
+ $date-special-range-hover-background: var(--date-selected-range-hover-background);
+ }
+
+ @if not($date-range-preview-border-color) and $date-selected-background {
+ $date-range-preview-border-color: var(--date-selected-background);
+ }
+ //date range end
+
+ @if not($date-disabled-foreground) and $content-background {
+ $date-disabled-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3);
+ }
+
+ @if not($date-disabled-range-foreground) and $date-selected-range-background {
+ $date-disabled-range-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3);
}
@return extend($theme, (
@@ -658,10 +992,6 @@
actions-divider-color: $actions-divider-color,
size: $size,
inner-size: $inner-size,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -671,7 +1001,7 @@
@mixin calendar($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$bootstrap-theme: $variant == 'bootstrap';
$cal-picker-padding: map.get((
From 42efd1a10af7a96ff4fc9b1b585c5297db5f2666 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Wed, 30 Apr 2025 15:02:44 +0300
Subject: [PATCH 37/53] feat(components): remove meta from themes and use
adaptive-contrast (#15740)
---
.../column-actions/_column-actions-theme.scss | 9 ++-------
.../styles/components/divider/_divider-theme.scss | 7 +------
.../components/grid/_pivot-data-selector-theme.scss | 7 +------
.../styles/components/highlight/highlight-theme.scss | 5 ++---
.../lib/core/styles/components/icon/_icon-theme.scss | 1 -
.../core/styles/components/label/_label-theme.scss | 4 +---
.../styles/components/overlay/_overlay-theme.scss | 1 -
.../styles/components/paginator/_paginator-theme.scss | 9 ++-------
.../components/progress/circular/_circular-theme.scss | 11 +++--------
.../components/progress/linear/_linear-theme.scss | 7 +------
.../core/styles/components/ripple/_ripple-theme.scss | 1 -
.../styles/components/scrollbar/scrollbar-theme.scss | 1 -
.../styles/components/tooltip/_tooltip-theme.scss | 9 ++-------
.../styles/components/watermark/_watermark-theme.scss | 1 -
14 files changed, 15 insertions(+), 58 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
index 47c6c705edf..10bc31b20f6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
@@ -37,20 +37,15 @@
}
$theme: digest-schema($column-actions-schema);
- $meta: map.get($theme, '_meta');
@if not($title-color) and $background-color {
- $title-color: text-contrast($background-color);
+ $title-color: adaptive-contrast(var(--background-color));
}
@return extend($theme, (
name: $name,
title-color: $title-color,
background-color: $background-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- )),
));
}
@@ -59,7 +54,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin column-actions($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%column-actions-display {
display: flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
index 2326d4151e5..8cf8dbfb696 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
@@ -32,16 +32,11 @@
}
$theme: digest-schema($divider-schema);
- $meta: map.get($theme, '_meta');
@return extend($theme, (
name: $name,
color: $color,
inset: $inset,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme'),
- )),
));
}
@@ -51,7 +46,7 @@
@mixin divider($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%igx-divider-display {
position: relative;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
index 2723371e9a9..29747c382f8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
@@ -25,14 +25,9 @@
}
$theme: digest-schema($pivot-data-selector-schema);
- $meta: map.get($theme, '_meta');
@return extend($theme, (
name: $name,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -41,7 +36,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin pivot-data-selector($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$chip-height-material: (
comfortable: rem(22px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
index 641077c20d6..7a575101755 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
@@ -39,11 +39,11 @@
$theme: digest-schema($highlight-schema);
@if not($resting-color) and $resting-background {
- $resting-color: text-contrast($resting-background);
+ $resting-color: adaptive-contrast(var(--resting-background));
}
@if not($active-color) and $active-background {
- $active-color: text-contrast($active-background);
+ $active-color: adaptive-contrast(var(--active-background));
}
@return extend($theme, (
@@ -53,7 +53,6 @@
resting-color: $resting-color,
active-background: $active-background,
active-color: $active-color,
- theme: map.get($schema, '_meta', 'theme'),
));
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
index e2b5249ac41..a70edbc4dd4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
@@ -41,7 +41,6 @@
color: $color,
size: $size,
disabled-color: $disabled-color,
- theme: map.get($schema, '_meta', 'theme'),
));
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
index a47078697a3..f2039f8489f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
@@ -31,8 +31,6 @@
name: $name,
selector: $selector,
color: $color,
- theme: map.get($schema, '_meta', 'theme'),
- variant: map.get($schema, '_meta', 'theme'),
));
}
@@ -43,7 +41,7 @@
// The --variant CSS produced by css-vars is needed also
// when dynamically switching between the input `type` attribute.
@include css-vars($theme);
- $variant: map.get($theme, 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%label-base {
@include ellipsis();
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
index 68c4d19e3ae..45034ddb62c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
@@ -37,7 +37,6 @@
name: $name,
selector: $selector,
background-color: $background-color,
- theme: map.get($schema, '_meta', 'theme'),
));
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
index 1e4883f8678..14130e74bbc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -38,10 +38,9 @@
}
$theme: digest-schema($grid-paginator-schema);
- $meta: map.get($theme, '_meta');
@if not($text-color) and $background-color {
- $text-color: text-contrast($background-color);
+ $text-color: adaptive-contrast($background-color);
}
@return extend($theme, (
@@ -49,10 +48,6 @@
text-color: $text-color,
background-color: $background-color,
border-color: $border-color,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -62,7 +57,7 @@
@mixin paginator($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
$paginator-padding-inline: (
comfortable: rem(24px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
index 8c0512966e6..d2486da8ee3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
@@ -46,7 +46,6 @@
}
$theme: digest-schema($circular-bar-schema);
- $meta: map.get($theme, '_meta');
$fill-color-default-start: map.get($theme, 'fill-color-default');
$fill-color-default-end: map.get($theme, 'fill-color-default');
@@ -73,10 +72,6 @@
fill-color-success: $fill-color-success,
text-color: $text-color,
diameter: $diameter,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -94,7 +89,7 @@
$diameter: calc(var(--circular-size) + var(--stroke-thickness));
$radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5);
$circumference: calc(#{$radius} * 2 * 3.1416);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%display-circular {
--circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness));
@@ -136,7 +131,7 @@
%outer {
stroke: var-get($theme, 'fill-color-default');
-
+
@if $variant != 'bootstrap' {
animation: igx-initial-dashoffset var(--_transition-duration) linear;
} @else {
@@ -313,7 +308,7 @@
%text--hidden {
visibility: hidden;
}
-
+
%gradient-start {
stop-color: var-get($theme, 'fill-color-default-end');
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
index c4d3cfa10ec..fb381552206 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
@@ -52,7 +52,6 @@
$linear-bar-schema: if(map.has-key($schema, 'linear-bar'), map.get($schema, 'linear-bar'), $schema);
$theme: digest-schema($linear-bar-schema);
- $meta: map.get($theme, '_meta');
@if not($track-border-radius) {
$track-border-radius: map.get($theme, 'track-border-radius');
@@ -71,10 +70,6 @@
track-border-radius: $track-border-radius,
track-height: $track-height,
strip-size: $strip-size,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -127,7 +122,7 @@ $easing-curves: (
@mixin progress-linear($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%display-linear {
position: relative;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
index 30d91d77268..4321a330a90 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
@@ -37,7 +37,6 @@
name: $name,
selector: $selector,
color: $color,
- theme: map.get($schema, '_meta', 'theme'),
));
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
index 66ce8b4857e..83149b01395 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
@@ -81,7 +81,6 @@
sb-corner-bg: $sb-corner-bg,
sb-corner-border-color: $sb-corner-border-color,
sb-corner-border-size: $sb-corner-border-size,
- theme: map.get($schema, '_meta', 'theme'),
));
}
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 6ddc20f8d80..d3e21b45036 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
@@ -43,7 +43,6 @@
}
$theme: digest-schema($tooltip-schema);
- $meta: map.get($theme, '_meta');
@if not($shadow) {
$elevation: map.get($tooltip-schema, 'elevation');
@@ -51,7 +50,7 @@
}
@if not($text-color) and $background {
- $text-color: text-contrast($background);
+ $text-color: adaptive-contrast($background);
}
@return extend($theme, (
@@ -61,10 +60,6 @@
text-color: $text-color,
border-radius: $border-radius,
shadow: $shadow,
- theme: map.get($schema, '_meta', 'theme'),
- _meta: map.merge(if($meta, $meta, ()), (
- variant: map.get($schema, '_meta', 'theme')
- )),
));
}
@@ -73,7 +68,7 @@
/// @param {Map} $theme - The theme used to style the component.
@mixin tooltip($theme) {
@include css-vars($theme);
- $variant: map.get($theme, '_meta', 'variant');
+ $variant: map.get($theme, '_meta', 'theme');
%tooltip-display {
display: inline-flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
index d43f68ae3f6..1fa70ac2dd5 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
@@ -58,7 +58,6 @@
color: $color,
border-color: $border-color,
border-radius: $border-radius,
- theme: map.get($schema, '_meta', 'theme'),
));
}
From 9074b1683297e21087fbe47df90a0b5f33177dc8 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 7 May 2025 17:38:52 +0300
Subject: [PATCH 38/53] feat(navbar): fix icon colors theming not working
---
.../lib/core/styles/components/navbar/_navbar-theme.scss | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
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 ab59cae46d8..97e354efb12 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
@@ -200,19 +200,15 @@
igx-icon,
igc-icon {
--component-size: 3;
- cursor: pointer;
- }
- > igx-icon,
- > igc-icon {
+ cursor: pointer;
+ user-select: none;
transition: color .15s $out-quad;
color: var-get($theme, 'idle-icon-color');
&:hover {
color: var-get($theme, 'hover-icon-color');
}
-
- user-select: none;
}
@if $variant == 'indigo' {
From a209805c9507a77eaadf155307064bd390ea982b Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 7 May 2025 17:51:08 +0300
Subject: [PATCH 39/53] feat(navbar): update hover-icon-color condition
---
.../src/lib/core/styles/components/navbar/_navbar-theme.scss | 4 ++++
1 file changed, 4 insertions(+)
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 97e354efb12..21ce8ffcf4d 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
@@ -49,6 +49,10 @@
$text-color: adaptive-contrast(var(--background));
}
+ @if not($hover-icon-color) and $idle-icon-color {
+ $hover-icon-color: hsl(from (var(--idle-icon-color)) h s calc(l * 1.1));
+ }
+
@if not($idle-icon-color) and $background {
$idle-icon-color: adaptive-contrast(var(--background));
}
From 9c3a013089796334e2eef8d8fd1397348ef7f029 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 13 May 2025 10:14:28 +0300
Subject: [PATCH 40/53] feat(themes): update button themes and remove alpha
where it's 1
---
.../button/_contained-button-theme.scss | 52 +++++++++++--------
.../components/button/_flat-button-theme.scss | 28 ++++++++++
.../button/_outlined-button-theme.scss | 28 ++++++++++
.../components/calendar/_calendar-theme.scss | 8 +--
.../_contained-icon-button-theme.scss | 26 ++++++++--
.../icon-button/_flat-icon-button-theme.scss | 12 +++++
.../_outlined-icon-button-theme.scss | 12 +++++
.../styles/components/list/_list-theme.scss | 8 +--
.../navdrawer/_navdrawer-theme.scss | 4 +-
.../components/stepper/_stepper-theme.scss | 2 +-
.../time-picker/_time-picker-theme.scss | 2 +-
11 files changed, 142 insertions(+), 40 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
index b4ddf8613be..e19aeeb0d4d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
@@ -115,6 +115,30 @@
$theme: digest-schema($button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: var(--foreground);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: var(--foreground);
+ }
+
+ @if not($focus-visible-foreground) and $foreground {
+ $focus-visible-foreground: var(--foreground);
+ }
+
+ @if not($active-foreground) and $foreground {
+ $active-foreground: var(--foreground);
+ }
+
+ @if not($icon-color-hover) and $icon-color {
+ $icon-color-hover: var(--icon-color);
+ }
+
@if not($foreground) and $background {
$foreground: adaptive-contrast(var(--background));
}
@@ -144,27 +168,15 @@
}
@if not($hover-foreground) and $hover-background {
- $hover-foreground: if(
- $foreground,
- var(--foreground),
- adaptive-contrast(var(--hover-background))
- );
+ $hover-foreground: adaptive-contrast(var(--hover-background));
}
@if not($icon-color-hover) and $hover-background {
- $icon-color-hover: if(
- $icon-color,
- var(--icon-color),
- adaptive-contrast(var(--hover-background))
- );
+ $icon-color-hover: adaptive-contrast(var(--hover-background));
}
@if not($focus-foreground) and $focus-background {
- $focus-foreground: if(
- $foreground,
- var(--foreground),
- adaptive-contrast(var(--focus-background))
- );
+ $focus-foreground: adaptive-contrast(var(--focus-background));
}
@if not($focus-hover-background) and $hover-background {
@@ -172,11 +184,7 @@
}
@if not($focus-hover-foreground) and $focus-hover-background {
- $focus-hover-foreground: if(
- $foreground,
- var(--foreground),
- adaptive-contrast(var(--focus-hover-background))
- );
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
@if not($focus-visible-background) and $focus-background {
@@ -184,9 +192,7 @@
}
@if not($focus-visible-foreground) and $focus-visible-background {
- $focus-visible-foreground: adaptive-contrast(
- var(--focus-visible-background)
- );
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
}
@if $variant == 'fluent' {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
index 757d10fb96e..a40949e1567 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
@@ -115,6 +115,34 @@
$theme: digest-schema($button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($icon-color-hover) and $hover-foreground {
+ $icon-color-hover: var(--hover-foreground);
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+ }
+
+ @if not($focus-visible-background) and $focus-background {
+ $focus-visible-background: var(--focus-background);
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
+ }
+
+ @if not($focus-visible-border-color) and $focus-border-color {
+ $focus-visible-border-color: var(--focus-border-color);
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-background) and $foreground {
$hover-background: hsla(from var(--foreground) h s l / 0.08);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
index a20c7a33d5f..ddb49029399 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
@@ -114,6 +114,34 @@
$theme: digest-schema($button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($icon-color-hover) and $hover-foreground {
+ $icon-color-hover: var(--hover-foreground);
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+ }
+
+ @if not($focus-visible-background) and $focus-background {
+ $focus-visible-background: var(--focus-background);
+ }
+
+ @if not($focus-visible-foreground) and $focus-visible-background {
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
+ }
+
+ @if not($focus-visible-border-color) and $focus-border-color {
+ $focus-visible-border-color: var(--focus-border-color);
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-background) and $foreground {
$hover-background: hsla(from var(--foreground) h s l / 0.08);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index ed66f3617f1..7f86649ee25 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -769,19 +769,19 @@
}
@if not($ym-current-foreground) and $ym-current-background {
- $ym-current-foreground: hsla(from adaptive-contrast(var(--ym-current-background) h s l / 1));
+ $ym-current-foreground: adaptive-contrast(var(--ym-current-background));
}
@if not($ym-current-hover-foreground) and $ym-current-hover-background {
- $ym-current-hover-foreground: hsla(from adaptive-contrast(var(--ym-current-hover-background) h s l / 1));
+ $ym-current-hover-foreground: adaptive-contrast(var(--ym-current-hover-background));
}
@if not($ym-selected-current-foreground) and $ym-selected-current-background {
- $ym-selected-current-foreground: hsla(from adaptive-contrast($ym-selected-current-background) h s l / 1);
+ $ym-selected-current-foreground: adaptive-contrast(var(--ym-selected-current-background));
}
@if not($ym-selected-current-hover-foreground) and $ym-selected-current-hover-background {
- $ym-selected-current-hover-foreground: hsla(from adaptive-contrast($ym-selected-current-hover-background) h s l / 1);
+ $ym-selected-current-hover-foreground: adaptive-contrast(var(--ym-selected-current-hover-background));
}
//calendar views end
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
index bd85fd090c2..f946b5a64e9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
@@ -46,6 +46,22 @@
$theme: digest-schema($icon-button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $foreground {
+ $hover-foreground: var(--foreground);
+ }
+
+ @if not($focus-foreground) and $foreground {
+ $focus-foreground: var(--foreground);
+ }
+
+ @if not($focus-hover-foreground) and $foreground {
+ $focus-hover-foreground: var(--foreground);
+ }
+
+ @if not($active-foreground) and $foreground {
+ $active-foreground: var(--foreground);
+ }
+
@if $variant == 'indigo' {
@if not($foreground) and $background {
$foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
@@ -72,7 +88,7 @@
}
} @else {
@if not($foreground) and $background {
- $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 1);
+ $foreground: adaptive-contrast(var(--background));
}
@if not($hover-background) and $background {
@@ -88,7 +104,7 @@
}
@if not($focus-foreground) and $focus-background {
- $focus-foreground: hsla(from adaptive-contrast(var(--focus-background)) h s l / 1);
+ $focus-foreground: adaptive-contrast(var(--focus-background));
}
@if not($focus-hover-background) and $focus-background {
@@ -101,15 +117,15 @@
}
@if not($hover-foreground) and $hover-background {
- $hover-foreground: hsla(from adaptive-contrast(var(--hover-background)) h s l / 1);
+ $hover-foreground: adaptive-contrast(var(--hover-background));
}
@if not($focus-hover-foreground) and $focus-hover-background {
- $focus-hover-foreground: hsla(from adaptive-contrast(var(--focus-hover-background)) h s l / 1);
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
@if not($active-foreground) and $active-background {
- $active-foreground: hsla(from adaptive-contrast(var(--active-background)) h s l / 1);
+ $active-foreground: adaptive-contrast(var(--active-background));
}
@if not($shadow-color) and $focus-background {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
index 13d348c8a6c..ec26a6c85f8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
@@ -46,6 +46,18 @@
$theme: digest-schema($icon-button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-foreground) and $foreground {
$hover-foreground: var(--foreground);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
index 0ab70955686..8c58a49c5f8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
@@ -46,6 +46,18 @@
$theme: digest-schema($icon-button-schema);
$variant: map.get($schema, '_meta', 'theme');
+ @if not($hover-foreground) and $hover-background {
+ $hover-foreground: adaptive-contrast(var(--hover-background));
+ }
+
+ @if not($focus-foreground) and $focus-background {
+ $focus-foreground: adaptive-contrast(var(--focus-background));
+ }
+
+ @if not($focus-hover-foreground) and $focus-hover-background {
+ $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-foreground) and $foreground {
$hover-foreground: var(--foreground);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index 300c7122c3e..e74b152efc6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -116,12 +116,12 @@
$item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
}
- @if not($item-background-active) and $item-background {
- $item-background-active: hsl(from var(--item-background) h s calc(l * 0.9));
+ @if not($item-background-active) and $item-background-hover {
+ $item-background-active: var(--item-background-hover);
}
- @if not($item-background-selected) and $item-background {
- $item-background-selected: hsl(from var(--item-background) h s calc(l * 0.9));
+ @if not($item-background-selected) and $item-background-active {
+ $item-background-selected: var(--item-background-active);
}
@if not($header-text-color) and $header-background {
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 d68f9a185a4..e9a91d6658f 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
@@ -103,11 +103,11 @@
}
@if not($item-active-text-color) and $item-active-background {
- $item-active-text-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
+ $item-active-text-color: adaptive-contrast(var(--item-active-background));
}
@if not($item-active-icon-color) and $item-active-background {
- $item-active-icon-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
+ $item-active-icon-color: adaptive-contrast(var(--item-active-background));
}
@if not($item-disabled-text-color) and $background {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 870c2043799..0972747ce9b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -205,7 +205,7 @@
}
@if not($indicator-color) and $indicator-background {
- $indicator-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 1);
+ $indicator-color: adaptive-contrast(var(--indicator-background));
}
@if not($title-color) and $step-background {
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 b7f41c1f63e..13d9f0b869f 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
@@ -105,7 +105,7 @@
}
@if not($active-item-foreground) and $active-item-background {
- $active-item-foreground: hsla(from adaptive-contrast(var(--active-item-background)) h s l / 1);
+ $active-item-foreground: adaptive-contrast(var(--active-item-background));
}
@if not($selected-text-color) and $background-color {
From c8a9e95254a2271b70e7e5dcb5f081ccf0b5d907 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 13 May 2025 10:49:24 +0300
Subject: [PATCH 41/53] feat(buttons): additional button changes
---
.../lib/core/styles/components/button/_flat-button-theme.scss | 4 ++++
.../core/styles/components/button/_outlined-button-theme.scss | 4 ++++
.../components/icon-button/_flat-icon-button-theme.scss | 4 ++++
.../components/icon-button/_outlined-icon-button-theme.scss | 4 ++++
4 files changed, 16 insertions(+)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
index a40949e1567..6c66b7adb6b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
@@ -131,6 +131,10 @@
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
@if not($focus-visible-background) and $focus-background {
$focus-visible-background: var(--focus-background);
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
index ddb49029399..8d7d3f1019b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
@@ -130,6 +130,10 @@
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
@if not($focus-visible-background) and $focus-background {
$focus-visible-background: var(--focus-background);
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
index ec26a6c85f8..aa6d89d2d5c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
@@ -58,6 +58,10 @@
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-foreground) and $foreground {
$hover-foreground: var(--foreground);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
index 8c58a49c5f8..536dfe1b837 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
@@ -58,6 +58,10 @@
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
}
+ @if not($active-foreground) and $active-background {
+ $active-foreground: adaptive-contrast(var(--active-background));
+ }
+
@if $variant == 'material' or $variant == 'fluent' {
@if not($hover-foreground) and $foreground {
$hover-foreground: var(--foreground);
From 3bef106fc224ca1b2ed0b868e5cbd25fe52d1a66 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 13 May 2025 14:30:50 +0300
Subject: [PATCH 42/53] feat(select): fix select focus toggle button in
material
---
.../src/lib/core/styles/components/select/_select-theme.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 2483105ea46..682f6ccc616 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -155,7 +155,7 @@
}
.igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
- @if $variant != 'fluent' {
+ @if $variant != 'fluent' and $variant != 'material' {
%igx-select__toggle-button {
background: var-get($theme, 'toggle-button-background-focus--border');
}
From c36a7f4bf8f7b989b9b5cc9518d31f8b326ee857 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 13 May 2025 16:15:17 +0300
Subject: [PATCH 43/53] feat(tabs): bind active colors and indicator color
---
.../styles/components/tabs/_tabs-theme.scss | 51 ++++++++++++-------
1 file changed, 32 insertions(+), 19 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 0cfcee38073..77efe9434c3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -106,6 +106,34 @@
}
}
+ @if not($item-active-background) {
+ @if $variant != 'bootstrap' {
+ @if not($item-active-icon-color) and $item-icon-color {
+ $item-active-icon-color: var(--item-icon-color);
+ }
+
+ @if not($item-active-color) and $item-text-color {
+ $item-active-color: var(--item-text-color);
+ }
+ }
+ } @else {
+ @if not($item-active-icon-color) and $item-active-color {
+ $item-active-icon-color: var(--item-active-color);
+ }
+
+ @if not($item-active-color) and $item-active-icon-color {
+ $item-active-color: var(--item-active-icon-color);
+ }
+
+ @if not($item-active-icon-color) and $item-active-background {
+ $item-active-icon-color: adaptive-contrast(var(--item-active-background));
+ }
+
+ @if not($item-active-color) and $item-active-background {
+ $item-active-color: adaptive-contrast(var(--item-active-background));
+ }
+ }
+
@if $variant == 'bootstrap' {
@if not($item-hover-color) and $item-text-color {
$item-hover-color: hsl(from var(--item-text-color) h s calc(l * 0.9));
@@ -140,30 +168,15 @@
$indicator-color: var(--item-icon-color);
}
} @else {
- @if not($indicator-color) {
- $indicator-color: adaptive-contrast(var(--item-background));
+ @if not($indicator-color) and $item-active-color {
+ $indicator-color: var(--item-active-color);
}
- }
- }
- @if not($item-active-background) {
- @if $variant != 'bootstrap' {
- @if not($item-active-icon-color) and $item-icon-color {
- $item-active-icon-color: var(--item-icon-color);
- }
- @if not($item-active-color) and $item-text-color {
- $item-active-color: var(--item-text-color);
+ @if not($indicator-color) {
+ $indicator-color: adaptive-contrast(var(--item-background));
}
}
- } @else {
- @if not($item-active-icon-color) and $item-active-background {
- $item-active-icon-color: adaptive-contrast(var(--item-active-background));
- }
-
- @if not($item-active-color) and $item-active-background {
- $item-active-color: adaptive-contrast(var(--item-active-background));
- }
}
// Button
From aca2903a01e7776fde2d04bd7e72dfb837f83fad Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 20 May 2025 15:19:29 +0300
Subject: [PATCH 44/53] feat(theming): bump theming version and fix navbar
---
package-lock.json | 8 ++++----
package.json | 2 +-
.../lib/core/styles/components/navbar/_navbar-theme.scss | 4 ++++
3 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index f6d891967a7..4f1f63170df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
"@types/source-map": "0.5.2",
"express": "^4.21.1",
"fflate": "^0.8.1",
- "igniteui-theming": "^17.2.0",
+ "igniteui-theming": "^18.0.1",
"igniteui-trial-watermark": "^3.0.2",
"lodash-es": "^4.17.21",
"rxjs": "^7.8.2",
@@ -12760,9 +12760,9 @@
}
},
"node_modules/igniteui-theming": {
- "version": "17.2.0",
- "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-17.2.0.tgz",
- "integrity": "sha512-i2zMlims6zjWd8aWJsimtDtgqRe9O2i7aH/85wf+Es5x2aSkGZsE2/OLrDb0GMXt2ISIsvjVnb1P46hZYiH+BQ==",
+ "version": "18.0.1",
+ "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-18.0.1.tgz",
+ "integrity": "sha512-+1MGKBtZ/8fNi/c2Y0vV7leLmlrCI3+BOVw+ZFxizU7nBz4jPcGiM7+t7DwFLE2VH1i2uLFkW3sEpktFqst9og==",
"license": "MIT",
"peerDependencies": {
"sass": "^1.69.5"
diff --git a/package.json b/package.json
index f73e2620f3a..656a5def1f5 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
"@types/source-map": "0.5.2",
"express": "^4.21.1",
"fflate": "^0.8.1",
- "igniteui-theming": "^17.2.0",
+ "igniteui-theming": "^18.0.1",
"igniteui-trial-watermark": "^3.0.2",
"lodash-es": "^4.17.21",
"rxjs": "^7.8.2",
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 21ce8ffcf4d..adef165709e 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
@@ -208,6 +208,10 @@
cursor: pointer;
user-select: none;
transition: color .15s $out-quad;
+ }
+
+ >igx-icon,
+ >igc-icon {
color: var-get($theme, 'idle-icon-color');
&:hover {
From c05d3d3c9cac9015541e3b4a919f74c436287d15 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 21 May 2025 10:03:58 +0300
Subject: [PATCH 45/53] feat(input-group): use logic only if the background is
not transparent
---
.../components/input/_input-group-theme.scss | 107 +++++++++---------
1 file changed, 54 insertions(+), 53 deletions(-)
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 72c3752e187..38e9f054f2a 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
@@ -147,7 +147,7 @@
$search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
$search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
- @if $variant == 'material' {
+ @if $variant == 'material' and $box-background != transparent {
@if not($box-background-hover) and $box-background {
$box-background-hover: var(--box-background);
}
@@ -296,73 +296,74 @@
}
//material search input
+ @if $search-background != transparent {
+ @if not($placeholder-color) and $search-background {
+ $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
- @if not($placeholder-color) and $search-background {
- $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
-
- @if not($hover-placeholder-color) and $placeholder-color {
- $hover-placeholder-color: var(--placeholder-color);
- }
+ @if not($hover-placeholder-color) and $placeholder-color {
+ $hover-placeholder-color: var(--placeholder-color);
+ }
- @if not($idle-secondary-color) and $placeholder-color {
- $idle-secondary-color: var(--placeholder-color);
- }
+ @if not($idle-secondary-color) and $placeholder-color {
+ $idle-secondary-color: var(--placeholder-color);
+ }
- @if not($idle-text-color) and $search-background {
- $idle-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($idle-text-color) and $search-background {
+ $idle-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($focused-secondary-color) and $search-background {
- $focused-secondary-color: adaptive-contrast(var(--search-background));
- }
+ @if not($focused-secondary-color) and $search-background {
+ $focused-secondary-color: adaptive-contrast(var(--search-background));
+ }
- @if not($filled-text-color) and $search-background {
- $filled-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($filled-text-color) and $search-background {
+ $filled-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($filled-text-hover-color) and $search-background {
- $filled-text-hover-color: adaptive-contrast(var(--search-background));
- }
+ @if not($filled-text-hover-color) and $search-background {
+ $filled-text-hover-color: adaptive-contrast(var(--search-background));
+ }
- @if not($focused-text-color) and $search-background {
- $focused-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($focused-text-color) and $search-background {
+ $focused-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($input-prefix-color) and $search-background {
- $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
+ @if not($input-prefix-color) and $search-background {
+ $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
- @if not($input-prefix-color--filled) and $search-background {
- $input-prefix-color--filled: adaptive-contrast(var(--search-background));
- }
+ @if not($input-prefix-color--filled) and $search-background {
+ $input-prefix-color--filled: adaptive-contrast(var(--search-background));
+ }
- @if not($input-prefix-color--focused) and $search-background {
- $input-prefix-color--focused: adaptive-contrast(var(--search-background));
- }
+ @if not($input-prefix-color--focused) and $search-background {
+ $input-prefix-color--focused: adaptive-contrast(var(--search-background));
+ }
- @if not($input-suffix-color) and $search-background {
- $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
+ @if not($input-suffix-color) and $search-background {
+ $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
+ }
- @if not($input-suffix-color--filled) and $search-background {
- $input-suffix-color--filled: adaptive-contrast(var(--search-background));
- }
+ @if not($input-suffix-color--filled) and $search-background {
+ $input-suffix-color--filled: adaptive-contrast(var(--search-background));
+ }
- @if not($input-suffix-color--focused) and $search-background {
- $input-suffix-color--focused: adaptive-contrast(var(--search-background));
- }
+ @if not($input-suffix-color--focused) and $search-background {
+ $input-suffix-color--focused: adaptive-contrast(var(--search-background));
+ }
- @if not($search-disabled-background) and $search-background {
- $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
- }
+ @if not($search-disabled-background) and $search-background {
+ $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
+ }
- @if not($disabled-placeholder-color) and $search-disabled-background {
- $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
- }
+ @if not($disabled-placeholder-color) and $search-disabled-background {
+ $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
+ }
- @if not($disabled-text-color) and $search-disabled-background {
- $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
+ @if not($disabled-text-color) and $search-disabled-background {
+ $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
+ }
}
@if not($search-resting-shadow) {
@@ -377,7 +378,7 @@
$search-disabled-shadow: elevation($search-disabled-elevation);
}
- //end material search input
+ // //end material search input
@if not($input-prefix-color) and $input-suffix-color {
$input-prefix-color: var(--input-suffix-color);
From 66326b9e7dbdeae74521f58a103f70f46327a635 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 21 May 2025 15:17:57 +0300
Subject: [PATCH 46/53] feat(input-group): update inputs computed styles
---
.../components/input/_input-group-theme.scss | 91 +++++++++----------
1 file changed, 41 insertions(+), 50 deletions(-)
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 38e9f054f2a..049c4654798 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
@@ -147,7 +147,7 @@
$search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
$search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
- @if $variant == 'material' and $box-background != transparent {
+ @if $variant == 'material' {
@if not($box-background-hover) and $box-background {
$box-background-hover: var(--box-background);
}
@@ -169,11 +169,11 @@
}
@if not($placeholder-color) and $box-background {
- $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
}
@if not($hover-placeholder-color) and $box-background-hover {
- $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.6);
+ $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
}
@if not($idle-text-color) and $box-background {
@@ -192,24 +192,12 @@
$focused-text-color: adaptive-contrast(var(--box-background-focus));
}
- @if not($idle-bottom-line-color) and $box-background {
- $idle-bottom-line-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
- }
-
- @if not($hover-bottom-line-color) and $box-background {
- $hover-bottom-line-color: adaptive-contrast(var(--box-background));
- }
-
@if not($idle-secondary-color) and $box-background {
- $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
- }
-
- @if not($focused-secondary-color) and $box-background-focus {
- $focused-secondary-color: adaptive-contrast(var(--box-background-focus));
+ $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
}
@if not($input-prefix-color) and $box-background {
- $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
}
@if not($input-prefix-color--filled) and $box-background {
@@ -221,7 +209,7 @@
}
@if not($input-suffix-color) and $box-background {
- $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+ $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
}
@if not($input-suffix-color--filled) and $box-background {
@@ -295,44 +283,50 @@
}
}
- //material search input
- @if $search-background != transparent {
- @if not($placeholder-color) and $search-background {
- $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
+ //search input
+ @if not($placeholder-color) and $search-background {
+ $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+ }
- @if not($hover-placeholder-color) and $placeholder-color {
- $hover-placeholder-color: var(--placeholder-color);
- }
+ @if not($hover-placeholder-color) and $placeholder-color {
+ $hover-placeholder-color: var(--placeholder-color);
+ }
+ @if $variant == 'indigo' {
+ @if not($box-background-hover) and $search-background {
+ $box-background-hover: var(--search-background);
+ }
+ } @else {
@if not($idle-secondary-color) and $placeholder-color {
$idle-secondary-color: var(--placeholder-color);
}
+ }
- @if not($idle-text-color) and $search-background {
- $idle-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($idle-text-color) and $search-background {
+ $idle-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($focused-secondary-color) and $search-background {
- $focused-secondary-color: adaptive-contrast(var(--search-background));
- }
+ @if not($filled-text-color) and $search-background {
+ $filled-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($filled-text-color) and $search-background {
- $filled-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($filled-text-hover-color) and $search-background {
+ $filled-text-hover-color: adaptive-contrast(var(--search-background));
+ }
- @if not($filled-text-hover-color) and $search-background {
- $filled-text-hover-color: adaptive-contrast(var(--search-background));
- }
+ @if not($focused-text-color) and $search-background {
+ $focused-text-color: adaptive-contrast(var(--search-background));
+ }
- @if not($focused-text-color) and $search-background {
- $focused-text-color: adaptive-contrast(var(--search-background));
- }
+ @if not($input-prefix-color) and $search-background {
+ $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+ }
- @if not($input-prefix-color) and $search-background {
- $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
+ @if not($input-suffix-color) and $search-background {
+ $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+ }
+ @if $variant != 'indigo' {
@if not($input-prefix-color--filled) and $search-background {
$input-prefix-color--filled: adaptive-contrast(var(--search-background));
}
@@ -341,10 +335,6 @@
$input-prefix-color--focused: adaptive-contrast(var(--search-background));
}
- @if not($input-suffix-color) and $search-background {
- $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
- }
-
@if not($input-suffix-color--filled) and $search-background {
$input-suffix-color--filled: adaptive-contrast(var(--search-background));
}
@@ -352,7 +342,9 @@
@if not($input-suffix-color--focused) and $search-background {
$input-suffix-color--focused: adaptive-contrast(var(--search-background));
}
+ }
+ @if $search-background != transparent {
@if not($search-disabled-background) and $search-background {
$search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
}
@@ -377,8 +369,7 @@
@if not($search-disabled-shadow) {
$search-disabled-shadow: elevation($search-disabled-elevation);
}
-
- // //end material search input
+ //end search input
@if not($input-prefix-color) and $input-suffix-color {
$input-prefix-color: var(--input-suffix-color);
From d3fffde74b35f850bb63cf6bb2ddaf96c6d61031 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 21 May 2025 15:25:38 +0300
Subject: [PATCH 47/53] feat(input-group): update disabled states
---
.../components/input/_input-group-theme.scss | 50 ++++++++++++++-----
1 file changed, 38 insertions(+), 12 deletions(-)
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 049c4654798..05117971c9b 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
@@ -156,18 +156,6 @@
$box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
}
- @if not($box-disabled-background) and $box-background {
- $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
- }
-
- @if not($disabled-placeholder-color) and $box-disabled-background {
- $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
- }
-
- @if not($disabled-text-color) and $box-disabled-background {
- $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
- }
-
@if not($placeholder-color) and $box-background {
$placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
}
@@ -219,6 +207,32 @@
@if not($input-suffix-color--focused) and $box-background-focus {
$input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
}
+
+ @if $box-background != transparent {
+ @if not($box-disabled-background) and $box-background {
+ $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
+ }
+
+ @if not($disabled-placeholder-color) and $box-disabled-background {
+ $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
+ }
+
+ @if not($disabled-text-color) and $box-disabled-background {
+ $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
+ }
+ } @else {
+ @if not($box-disabled-background) and $box-background {
+ $box-disabled-background: var(--box-background);
+ }
+
+ @if not($disabled-placeholder-color) and $placeholder-color {
+ $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+ }
+
+ @if not($disabled-text-color) and $idle-text-color {
+ $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+ }
+ }
}
@if $variant == 'fluent' or $variant == 'bootstrap' {
@@ -356,6 +370,18 @@
@if not($disabled-text-color) and $search-disabled-background {
$disabled-text-color: adaptive-contrast(var(--search-disabled-background));
}
+ } @else {
+ @if not($search-disabled-background) and $search-background {
+ $search-disabled-background: var(--search-background);
+ }
+
+ @if not($disabled-placeholder-color) and $placeholder-color {
+ $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+ }
+
+ @if not($disabled-text-color) and $idle-text-color {
+ $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+ }
}
@if not($search-resting-shadow) {
From d4f255cd1e220386f11119a8de0352eb5da57f2a Mon Sep 17 00:00:00 2001
From: didimmova
Date: Wed, 21 May 2025 16:51:41 +0300
Subject: [PATCH 48/53] feat(tabs): update tabs theme
---
.../styles/components/tabs/_tabs-theme.scss | 37 ++++++++++---------
1 file changed, 19 insertions(+), 18 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 77efe9434c3..3dc1cb0b0a0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -80,10 +80,6 @@
$theme: digest-schema($tabs-schema);
$variant: map.get($theme, '_meta', 'theme');
- @if not($item-hover-background) and $item-background {
- $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
- }
-
@if not($item-active-background) and $item-background {
$item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
}
@@ -98,11 +94,11 @@
}
} @else {
@if not($item-text-color) and $item-background {
- $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.9);
+ $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.8);
}
@if not($item-icon-color) and $item-background {
- $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.9));
+ $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.8));
}
}
@@ -134,15 +130,29 @@
}
}
- @if $variant == 'bootstrap' {
+ @if not($item-hover-background) {
@if not($item-hover-color) and $item-text-color {
- $item-hover-color: hsl(from var(--item-text-color) h s calc(l * 0.9));
+ $item-hover-color: hsla(from var(--item-text-color) h s l / 1);
}
@if not($item-hover-icon-color) and $item-icon-color {
- $item-hover-icon-color: hsla(from var(--item-icon-color) h s calc(l * 0.9));
+ $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
}
+ } @else {
+ @if not($item-hover-color) {
+ $item-hover-color: adaptive-contrast(var(--item-hover-background));
+ }
+
+ @if not($item-hover-icon-color) {
+ $item-hover-icon-color: adaptive-contrast(var(--item-hover-background));
+ }
+ }
+
+ @if not($item-hover-background) and $item-background {
+ $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+ }
+ @if $variant == 'bootstrap' {
@if not($border-color) and $item-background {
$border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5);
}
@@ -151,14 +161,6 @@
$border-color--hover: var(--border-color);
}
} @else {
- @if not($item-hover-color) and $item-text-color {
- $item-hover-color: hsla(from var(--item-text-color) h s l / 1);
- }
-
- @if not($item-hover-icon-color) and $item-icon-color {
- $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
- }
-
@if not($item-background) {
@if not($indicator-color) and $item-text-color {
$indicator-color: var(--item-text-color);
@@ -172,7 +174,6 @@
$indicator-color: var(--item-active-color);
}
-
@if not($indicator-color) {
$indicator-color: adaptive-contrast(var(--item-background));
}
From 82e22fe00c439f03e2cd0def42efc4537a42037d Mon Sep 17 00:00:00 2001
From: didimmova
Date: Fri, 23 May 2025 09:48:43 +0300
Subject: [PATCH 49/53] feat(button): update button themes
---
.../styles/components/button/_button-theme.scss | 2 +-
.../button/_contained-button-theme.scss | 16 ++++++++++++++++
.../components/button/_fab-button-theme.scss | 16 ++++++++++++++++
.../components/button/_flat-button-theme.scss | 2 +-
.../button/_outlined-button-theme.scss | 2 +-
5 files changed, 35 insertions(+), 3 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 1c0432a2bd4..928cdce5ff9 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
@@ -157,7 +157,7 @@
}
@if not($focus-visible-foreground) and $focus-visible-background {
- $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
}
@if not($focus-visible-border-color) and $focus-border-color {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
index e19aeeb0d4d..53577249ca6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
@@ -225,6 +225,22 @@
from var(--focus-visible-background) h s l / 0.5
);
}
+
+ @if not($disabled-background) and $background {
+ $disabled-background: hsla(from var(--background) h s l / 0.5);
+ }
+
+ @if not($disabled-icon-color) and $disabled-foreground {
+ $disabled-icon-color: var(--disabled-foreground);
+ }
+
+ @if not($disabled-foreground) and $disabled-background {
+ $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+ }
+
+ @if not($disabled-icon-color) and $disabled-background {
+ $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+ }
}
@if not($resting-shadow) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
index 223739ae8f5..c42835c4037 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
@@ -219,6 +219,22 @@
from var(--focus-visible-background) h s l / 0.5
);
}
+
+ @if not($disabled-background) and $background {
+ $disabled-background: hsla(from var(--background) h s l / 0.5);
+ }
+
+ @if not($disabled-icon-color) and $disabled-foreground {
+ $disabled-icon-color: var(--disabled-foreground);
+ }
+
+ @if not($disabled-foreground) and $disabled-background {
+ $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+ }
+
+ @if not($disabled-icon-color) and $disabled-background {
+ $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+ }
}
@if not($resting-shadow) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
index 6c66b7adb6b..8a9a5c98779 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
@@ -140,7 +140,7 @@
}
@if not($focus-visible-foreground) and $focus-visible-background {
- $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
}
@if not($focus-visible-border-color) and $focus-border-color {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
index 8d7d3f1019b..895b516e89f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
@@ -139,7 +139,7 @@
}
@if not($focus-visible-foreground) and $focus-visible-background {
- $focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
+ $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
}
@if not($focus-visible-border-color) and $focus-border-color {
From 861bc47724947324eeaed55d83a081da551a5111 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 27 May 2025 10:25:40 +0300
Subject: [PATCH 50/53] feat(icon-button): update themes
---
.../_contained-icon-button-theme.scss | 2 +-
.../icon-button/_flat-icon-button-theme.scss | 14 ++++----------
.../icon-button/_outlined-icon-button-theme.scss | 16 +++++++---------
3 files changed, 12 insertions(+), 20 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
index f946b5a64e9..8c186676e21 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
@@ -154,7 +154,7 @@
@if not($focus-border-color) and $focus-background {
$focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
}
- } @else {
+ } @else if $variant == 'bootstrap' {
@if not($disabled-background) and $background {
$disabled-background: hsla(from var(--background) h s l / 0.2);
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
index aa6d89d2d5c..c5d35da4741 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
@@ -133,6 +133,10 @@
$focus-hover-foreground: var(--hover-foreground);
}
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+ }
+
@if $variant == 'bootstrap' {
@if not($active-foreground) and $foreground {
$active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
@@ -152,16 +156,6 @@
}
}
- @if not($disabled-foreground) and $foreground {
- $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
- }
-
- @if $variant == 'fluent' {
- @if not($disabled-background) and $foreground {
- $disabled-background: hsla(from var(--foreground) h s l / 0.1);
- }
- }
-
@return extend(
$theme,
(
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
index 536dfe1b837..9ecc8857f99 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
@@ -111,10 +111,6 @@
@if not($border-color) and $foreground {
$border-color: hsla(from var(--foreground) h s l / 0.7);
}
-
- @if not($disabled-background) and $foreground {
- $disabled-background: hsla(from var(--foreground) h s l / 0.1);
- }
}
}
@@ -194,12 +190,14 @@
}
}
- @if not($disabled-foreground) and $foreground {
- $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
- }
+ @if $variant == 'bootstrap' or $variant == 'indigo' {
+ @if not($disabled-foreground) and $foreground {
+ $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+ }
- @if not($disabled-border-color) and $border-color {
- $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+ @if not($disabled-border-color) and $border-color {
+ $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+ }
}
@return extend(
From 93c99f4adf6f057ba3b0b5fa09fda9779d163698 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Tue, 27 May 2025 18:08:19 +0300
Subject: [PATCH 51/53] feat(calendar): update calendar theme functions
---
.../components/calendar/_calendar-theme.scss | 122 +++++++++++++-----
1 file changed, 91 insertions(+), 31 deletions(-)
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 7f86649ee25..0e0ba2c8ca2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -456,6 +456,10 @@
$date-current-focus-border-color: var(--date-current-hover-border-color);
}
+ @if not($date-current-foreground) and $date-current-background {
+ $date-current-foreground: adaptive-contrast(var(--date-current-background));
+ }
+
@if not($date-current-foreground) and $content-foreground {
$date-current-foreground: var(--content-foreground);
}
@@ -494,12 +498,22 @@
$date-current-focus-background: var(--date-focus-background);
}
- @if not($date-current-hover-foreground) and $date-current-foreground {
- $date-current-hover-foreground: var(--date-current-foreground);
+ @if $variant == 'fluent' {
+ @if not($date-current-hover-foreground) and $date-current-background {
+ $date-current-hover-foreground: adaptive-contrast(var(--date-current-background));
+ }
+
+ @if not($date-current-focus-foreground) and $date-current-background {
+ $date-current-focus-foreground: adaptive-contrast(var(--date-current-background));
+ }
}
- @if not($date-current-focus-foreground) and $date-current-foreground {
- $date-current-focus-foreground: var(--date-current-foreground);
+ @if not($date-current-hover-foreground) and $date-current-hover-background {
+ $date-current-hover-foreground: adaptive-contrast(var(--date-current-hover-background));
+ }
+
+ @if not($date-current-focus-foreground) and $date-current-hover-background {
+ $date-current-focus-foreground: adaptive-contrast(var(--date-current-hover-background));
}
}
@@ -658,10 +672,14 @@
$date-special-hover-background: var(--date-hover-background);
}
- @if not($date-special-focus-background) and $date-focus-background {
+ @if not($date-special-focus-background) and $date-focus-background {
$date-special-focus-background: var(--date-focus-background);
}
+ @if not($date-special-range-focus-background) and $date-special-focus-background {
+ $date-special-range-focus-background: var(--date-special-focus-background);
+ }
+
@if $variant != 'fluent' {
@if not($date-selected-special-border-color) and $date-selected-foreground {
$date-selected-special-border-color: var(--date-selected-foreground);
@@ -786,20 +804,70 @@
//calendar views end
//date range start
- @if not($date-selected-range-background) and $date-selected-background {
- $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
- }
-
@if not($date-selected-range-foreground) and $content-foreground {
$date-selected-range-foreground: var(--content-foreground);
}
- @if not($date-selected-range-hover-background) and $date-selected-background {
- $date-selected-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
+ @if $variant == 'fluent' {
+ @if not($date-selected-range-background) and $date-selected-background {
+ $date-selected-range-background: var(--date-selected-background);
+ }
+
+ @if not($date-selected-current-range-background) and $date-selected-range-background {
+ $date-selected-current-range-background: var(--date-selected-range-background);
+ }
+
+ @if not($date-selected-range-hover-background) and $date-selected-hover-background {
+ $date-selected-range-hover-background: var(--date-selected-hover-background);
+ }
+
+ @if not($date-selected-range-focus-background) and $date-selected-hover-background {
+ $date-selected-range-focus-background: var(--date-selected-hover-background);
+ }
+
+ @if not($date-selected-current-range-hover-foreground) and $date-current-background {
+ $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-current-background));
+ }
+
+ @if not($date-selected-current-range-focus-background) and $date-current-background {
+ $date-selected-current-range-focus-background: adaptive-contrast(var(--date-current-background));
+ }
+ } @else {
+ @if not($date-selected-range-background) and $date-selected-background {
+ $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
+ }
+
+ @if not($date-range-preview-border-color) and $date-selected-background {
+ $date-range-preview-border-color: var(--date-selected-background);
+ }
+
+ @if not($date-selected-current-range-hover-foreground) and $date-selected-current-range-hover-background {
+ $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-selected-current-range-hover-background));
+ }
+
+ @if not($date-selected-current-range-hover-foreground) and $content-foreground {
+ $date-selected-current-range-hover-foreground: var(--content-foreground);
+ }
+
+ @if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
+ $date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
+ }
+ }
+
+ @if not($date-selected-range-hover-background) and $date-hover-background {
+ $date-selected-range-hover-background: var(--date-hover-background);
+ }
+
+ @if not($date-selected-range-focus-background) and $date-selected-range-hover-background {
+ $date-selected-range-focus-background: var(--date-selected-range-hover-background);
}
- @if not($date-selected-range-hover-foreground) and $content-foreground {
- $date-selected-range-hover-foreground: var(--content-foreground);
+ @if not($date-selected-range-hover-foreground) and $date-selected-range-hover-background {
+ $date-selected-range-hover-foreground: adaptive-contrast(hsla(from var(--date-selected-range-hover-background) h s l / 1));
+ }
+
+ @if not($date-selected-range-focus-foreground) and $date-selected-range-focus-background {
+ $date-selected-range-focus-foreground: adaptive-contrast(hsla(from var(--date-selected-range-focus-background) h s l / 1));
}
@if $variant == 'indigo' {
@@ -810,22 +878,18 @@
@if not($date-selected-current-range-hover-background) and $date-selected-background {
$date-selected-current-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.24);
}
- }
-
- @if not($date-selected-current-range-foreground) and $content-foreground {
- $date-selected-current-range-foreground: var(--content-foreground);
- }
-
- @if not($date-selected-current-range-hover-background) and $date-selected-range-hover-background {
- $date-selected-current-range-hover-background: var(--date-selected-range-hover-background);
- }
- @if not($date-selected-current-range-hover-foreground) and $content-foreground {
- $date-selected-current-range-hover-foreground: var(--content-foreground);
- }
+ @if not($date-selected-current-range-foreground) and $date-current-background {
+ $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
+ }
+ } @else {
+ @if not($date-selected-current-range-foreground) and $date-current-background {
+ $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
+ }
- @if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
- $date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
+ @if not($date-selected-current-range-foreground) and $content-foreground {
+ $date-selected-current-range-foreground: var(--content-foreground);
+ }
}
@if not($date-special-range-foreground) and $date-special-foreground {
@@ -839,10 +903,6 @@
@if not($date-special-range-hover-background) and $date-selected-range-hover-background {
$date-special-range-hover-background: var(--date-selected-range-hover-background);
}
-
- @if not($date-range-preview-border-color) and $date-selected-background {
- $date-range-preview-border-color: var(--date-selected-background);
- }
//date range end
@if not($date-disabled-foreground) and $content-background {
From 85dcf8934d7d12df6c5e81a498240c1a28e0a250 Mon Sep 17 00:00:00 2001
From: didimmova
Date: Mon, 9 Jun 2025 17:05:14 +0300
Subject: [PATCH 52/53] chore(custom-strategy): delete duplicated code
---
.../src/app/custom-strategy.spec.ts | 37 -------------------
.../src/app/custom-strategy.ts | 8 ----
2 files changed, 45 deletions(-)
diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts
index b296279d6c2..1b5b3795f02 100644
--- a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts
+++ b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts
@@ -96,43 +96,6 @@ describe('Elements: ', () => {
detailGridComponent = (await detailGrid?.ngElementStrategy[ComponentRefKey])?.instance as IgxGridComponent;
expect(detailGridComponent).toBeDefined("Detail child grid was destroyed on re-expand");
});
-
- it(`should keep IgcNgElement instance in template of another IgcNgElement #15678`, async () => {
- const gridEl = document.createElement("igc-grid");
- testContainer.appendChild(gridEl);
- const columnEl = document.createElement("igc-column") as IgcNgElement;
- gridEl.appendChild(columnEl);
- gridEl.primaryKey = 'id';
- gridEl.data = [{ id: '1' }];
- (gridEl as any).detailTemplate = (ctx) => {
- return html`
-
-
`;
- }
-
- // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
- await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
-
- // sigh (ãīšã*)
- (gridEl as any).toggleRow('1');
- await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
-
- let detailGrid = document.querySelector('#child1');
- expect(detailGrid).toBeDefined();
- let detailGridComponent = (await detailGrid?.ngElementStrategy[ComponentRefKey])?.instance as IgxGridComponent;
- expect(detailGridComponent).toBeDefined();
-
- // close and re-expand row detail:
- (gridEl as any).toggleRow('1');
- await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
- (gridEl as any).toggleRow('1');
- await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
-
- detailGrid = document.querySelector('#child1');
- expect(detailGrid).toBeDefined();
- detailGridComponent = (await detailGrid?.ngElementStrategy[ComponentRefKey])?.instance as IgxGridComponent;
- expect(detailGridComponent).toBeDefined("Detail child grid was destroyed on re-expand");
- });
});
describe('Grid integration scenarios.', () => {
diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts
index b82101b1686..1907cba1fe7 100644
--- a/projects/igniteui-angular-elements/src/app/custom-strategy.ts
+++ b/projects/igniteui-angular-elements/src/app/custom-strategy.ts
@@ -61,14 +61,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
return this._configSelectors;
}
- private _configSelectors: string;
- public get configSelectors(): string {
- if (!this._configSelectors) {
- this._configSelectors = this.config.map(x => x.selector).join(',');
- }
- return this._configSelectors;
- }
-
constructor(private _componentFactory: ComponentFactory, private _injector: Injector, private config: ComponentConfig[]) {
super(_componentFactory, _injector);
}
From 3b47b68a9be939f6447244f65cb705cc3573b29b Mon Sep 17 00:00:00 2001
From: didimmova
Date: Thu, 12 Jun 2025 10:52:18 +0300
Subject: [PATCH 53/53] chore(themes): update changelog
---
CHANGELOG.md | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a5d8b720cf..6fe5277e2a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
All notable changes for each version of this project will be documented in this file.
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+ $custom-contained-button: contained-button-theme(
+ $background: #09f;
+ );
+```
+
## 20.0.0
### General