Merge pull request #6806 from IgniteUI/CSS-variables-default-#6803

refactor(theme): change legacy support default value to false

Author: zdrawku

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes for each version of this project will be documented in this
 
 ## 9.1.0
 
+### Themes
+- **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
+
 ### New Features
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -350,7 +350,7 @@
 ///   // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
 @function --var($map, $key, $fallback: null) {
-    $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
+    $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, false);
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -51,7 +51,7 @@
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 /// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
 /// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
 /// @requires {variable} $components
@@ -91,7 +91,7 @@
     $palette,
     $schema: $light-schema,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -412,11 +412,11 @@
 /// Creates a global theme that can be used with light backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-light-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -447,11 +447,11 @@
 /// Creates a global theme that can be used with dark backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-dark-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -482,11 +482,11 @@
 /// Creates a global fluent theme that can be used with light backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-fluent-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -517,11 +517,11 @@
 /// Creates a global fluent theme that can be used with dark backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-fluent-dark-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -553,11 +553,11 @@
 /// Creates a global bootstrap-like theme that can be used with light backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-bootstrap-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -615,11 +615,11 @@
 /// Creates a global bootstrap-like theme that can be used with dark backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
-/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
+/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 @mixin igx-bootstrap-dark-theme(
     $palette,
     $exclude: (),
-    $legacy-support: true,
+    $legacy-support: false,
     $roundness: null,
     $elevation: true,
 ) {
@@ -667,4 +667,3 @@
         $elevation: $elevation,
     );
 }
-

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -2601,7 +2601,7 @@ describe('igxOverlay', () => {
             const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
             tick();
             const styles = css(overlayWrapper);
-            const expectedBackgroundColor = 'background: rgba(0, 0, 0, 0.38)';
+            const expectedBackgroundColor = 'background: var(--igx-overlay-background-color)';
             const appliedBackgroundStyles = styles[2];
             expect(appliedBackgroundStyles).toContain(expectedBackgroundColor);
         }));