refactor(themes): include --ig-theme in the generated CSS themes (#14508)

Author: simeonoff

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

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
 @use '../schemas' as *;
@@ -72,6 +73,8 @@
     // Stores all excluded component styles
     $excluded: ();
     $scope: if(is-root(), ':root', '&');
+    $theme: map.get($schema, '_meta', 'theme');
+    $variant: map.get($schema, '_meta', 'variant');
 
     #{$scope} {
         --ig-size-small: 1;
@@ -111,6 +114,13 @@
         }
     }
 
+    @if $theme {
+        #{$scope} {
+            --ig-theme: #{if($theme == 'indigo-design', 'indigo', #{$theme})};
+            --ig-theme-variant: #{$variant};
+        }
+    }
+
     @if list.length($exclude) > 0 {
         $excluded: is-component($exclude);
     }

src/app/input-group/input-group.sample.html

@@ -285,7 +285,7 @@
                     <igx-hint>Helper text</igx-hint>
                 </igx-input-group>
 
-                <igx-input-group [type]="inputType" theme="indigo-design">
+                <igx-input-group [type]="inputType" theme="indigo">
                     <label igxLabel>Always Indigo</label>
                     <igx-prefix>
                         http://

src/styles/_variables.scss

@@ -7,10 +7,6 @@ $typeface: $material-typeface;
 $type-scale: $material-type-scale;
 $variant: map.get($schema, '_meta', 'variant');
 
-:root {
-    --ig-theme: material;
-}
-
 $background-color: var(--ig-gray-900-contrast);
 $foreground-color: hsl(var(--ig-gray-900));