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..d83d3545873 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 @@ -60,19 +60,19 @@ @if not($actions-text-color) and $background { @if meta.type-of($background) == 'color' { - $actions-text-color: rgba(text-contrast($background), .5); + $actions-text-color: color-mix(in oklch, text-contrast($background) 50%, transparent) } } @if not($content-text-color) and $background { @if meta.type-of($background) == 'color' { - $content-text-color: rgba(text-contrast($background), .7); + $content-text-color: color-mix(in oklch, text-contrast($background) 70%, transparent) } } @if not($subtitle-text-color) and $background { @if meta.type-of($background) == 'color' { - $subtitle-text-color: rgba(text-contrast($background), .7); + $subtitle-text-color: color-mix(in oklch, text-contrast($background) 70%, transparent) } } 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..a9f1a3f2d33 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 @@ -93,7 +93,7 @@ @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: color-mix(in oklch, text-contrast($button-disabled-background) 30%, transparent) } } 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..b14462a7685 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 @@ -54,7 +54,7 @@ @if not($message-color) and $background{ @if meta.type-of($background) == 'color' { - $message-color: rgba(text-contrast($background), .8); + $message-color: color-mix(in oklch, text-contrast($background) 80%, transparent); } } 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..95e9390101d 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 @@ -101,7 +101,7 @@ $hover-item-text-color: text-contrast($background-color); @if meta.type-of($background-color) == 'color' { - $hover-item-background: rgba(text-contrast($background-color), .12); + $hover-item-background: color-mix(in oklch, text-contrast($background-color) 12%, transparent); } } @@ -113,7 +113,7 @@ $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: color-mix(in oklch, text-contrast($background-color) 12%, transparent); } } @@ -139,19 +139,19 @@ @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); + $disabled-item-text-color: color-mix(in oklch, text-contrast($background-color) 36%, transparent); } } @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: color-mix(in oklch, text-contrast($disabled-item-background) 36%, transparent); } } @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: color-mix(in oklch, text-contrast($background-color) 70%, transparent); } } 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..303a150e4a2 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 @@ -61,7 +61,7 @@ @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: text-contrast($header-background, .8); } } 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..d0c43c8020a 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 @@ -60,13 +60,13 @@ @if not($border-color) and $background-color { @if type-of($background-color) == 'color' { - $border-color: rgba(text-contrast($background-color), .26); + $border-color: color-mix(in oklch, text-contrast($background-color) 26%, transparent); } } @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: color-mix(in oklch, text-contrast($background-color) 26%, transparent); } } 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 90ce37cda12..0de9cc2f064 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 @@ -240,7 +240,7 @@ @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: color-mix(in oklch, text-contrast($ghost-header-background) 7%, transparent); } } @@ -262,7 +262,7 @@ @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: color-mix(in oklch, text-contrast($header-background) 24%, transparent); } } @@ -300,7 +300,7 @@ @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: to-opaque(color-mix(in oklch, text-contrast($content-background) 80%, transparent), $content-background); } } @@ -322,13 +322,13 @@ @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: text-contrast($content-background, .08); } } @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: text-contrast($content-background, .08); } } @@ -354,7 +354,7 @@ @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: text-contrast($header-background, .87); } } @@ -380,13 +380,13 @@ @if not($grouparea-color) and $grouparea-background { @if meta.type-of($grouparea-background) == 'color' { - $grouparea-color: rgba(text-contrast($grouparea-background), .8) + $grouparea-color: text-contrast($grouparea-background, .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: text-contrast($header-background, .8) } } 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 e06678a80a1..902dfe0ffc0 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 @@ -142,7 +142,7 @@ @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: color-mix(in oklch, text-contrast($item-background) 74%, transparent); } } @@ -168,7 +168,7 @@ @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: color-mix(in oklch, text-contrast($item-background-hover) 74%, transparent); } } @@ -194,7 +194,7 @@ @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: color-mix(in oklch, text-contrast($item-background-active) 74%, transparent); } } 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..766c3c39462 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 @@ -89,7 +89,7 @@ @if not($item-active-background) and $background { @if meta.type-of($background) == 'color' { - $item-active-background: rgba(text-contrast($background), .24); + $item-active-background: color-mix(in oklch, text-contrast($background) 24%, transparent); } } @@ -103,7 +103,7 @@ @if not($item-hover-background) and $background { @if meta.type-of($background) == 'color' { - $item-hover-background: rgba(text-contrast($background), .08); + $item-hover-background: color-mix(in oklch, text-contrast($background) 8%, transparent); } } 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..71dc1be169b 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 @@ -82,7 +82,7 @@ @if not($item-text-color) and $item-background { @if meta.type-of($item-background) == 'color' { - $item-text-color: rgba(text-contrast($item-background), .54); + $item-text-color: color-mix(in oklch, text-contrast($item-background) 50%, transparent); } } 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..dfd6bc2d0ad 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 @@ -87,13 +87,13 @@ @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: color-mix(in oklch, text-contrast($background-color) 12%, transparent); } } @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: color-mix(in oklch, text-contrast($disabled-item-background) 6%, transparent); } } 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..b4ba728dd73 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 @@ -95,6 +95,12 @@ --ig-spacing-block-large: 1; } + #{$scope} { + --ig-contrast-a: 0.67; + --ig-contrast-aa: 0.6; + --ig-contrast-aaa: 0.56; + } + @if not(list.index($exclude, 'palette')) { @include palette($palette); }