feat(components): remove meta from themes and use adaptive-contrast (#15740)

didimmova · web-flow · commit 42efd1a10af7 · 2025-04-30T15:02:44.000+03:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -38,21 +38,16 @@
     }
 
     $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, (
         name: $name,
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -43,15 +43,14 @@
     }
 
     $theme: digest-schema($tooltip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($shadow) {
         $elevation: map.get($tooltip-schema, 'elevation');
         $shadow: elevation($elevation);
     }
 
     @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
@@ -58,7 +58,6 @@
         color: $color,
         border-color: $border-color,
         border-radius: $border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 

Original file line number	Diff line number	Diff line change
`@@ -39,11 +39,11 @@`
`39`	`39`	`$theme: digest-schema($highlight-schema);`
`40`	`40`
`41`	`41`	`@if not($resting-color) and $resting-background {`
`42`		`- $resting-color: text-contrast($resting-background);`
	`42`	`+ $resting-color: adaptive-contrast(var(--resting-background));`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`@if not($active-color) and $active-background {`
`46`		`- $active-color: text-contrast($active-background);`
	`46`	`+ $active-color: adaptive-contrast(var(--active-background));`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`@return extend($theme, (`
`@@ -53,7 +53,6 @@`
`53`	`53`	`resting-color: $resting-color,`
`54`	`54`	`active-background: $active-background,`
`55`	`55`	`active-color: $active-color,`
`56`		`- theme: map.get($schema, '_meta', 'theme'),`
`57`	`56`	`));`
`58`	`57`	`}`
`59`	`58`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@`
`41`	`41`	`color: $color,`
`42`	`42`	`size: $size,`
`43`	`43`	`disabled-color: $disabled-color,`
`44`		`- theme: map.get($schema, '_meta', 'theme'),`
`45`	`44`	`));`
`46`	`45`	`}`
`47`	`46`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,6 @@`
`37`	`37`	`name: $name,`
`38`	`38`	`selector: $selector,`
`39`	`39`	`background-color: $background-color,`
`40`		`- theme: map.get($schema, '_meta', 'theme'),`
`41`	`40`	`));`
`42`	`41`	`}`
`43`	`42`