fix(theme): some component themes don't work with fluent dark

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -149,24 +149,17 @@
     $group-item-min-width: 24px;
     $group-item-border-thickness: 1px;
     $group-items-margin: rem(10px, 16px);
+    $transition: all 140ms $ease-in-out-quad;
 
     %igx-group-display {
         display: flex;
         box-shadow: --var($theme, 'shadow');
-        transition: all 140ms $ease-in-out-quad;
+        transition: $transition;
         border-radius: --var($theme, 'border-radius')
     }
 
     %igx-group-item {
-        &%igx-button--flat {
-            border-radius: 0;
-        }
-
-        %igx-icon-display {
-            color: currentColor;
-            transition: all 140ms $ease-in-out-quad;
-        }
-
+        @include ellipsis();
         border: $group-item-border-thickness solid --var($theme, 'item-border-color');
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
@@ -180,16 +173,20 @@
         user-select: none;
         position: relative;
         z-index: 0;
-        transition: all 140ms $ease-in-out-quad;
+        transition: $transition;
 
-        @include ellipsis();
+        &%igx-button--flat {
+            border-radius: 0;
+        }
+
+        %igx-icon-display {
+            color: currentColor;
+        }
 
         &:not(:nth-child(0)) {
             margin-left: -1px;
         }
 
-
-
         &:first-of-type {
             border-radius: --var($theme, 'border-radius') 0 0 --var($theme, 'border-radius');
         }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -658,18 +658,16 @@
         border-color: --var($theme, 'success-secondary-color');
     }
 
-    %fluent-input-disabled {
-        // TODO: this should be a variable
-        color: rgb(161, 159, 157)
-    }
-
     %fluent-input {
         padding: 0;
         margin: 0;
-        // TODO: this should be a variable
         border: none;
     }
 
+    %fluent-input-disabled {
+        color: --var($theme, 'disabled-text-color');
+    }
+
     %form-group-bundle-main--fluent {
         padding-left: rem(8px);
     }
@@ -691,7 +689,7 @@
         transform-origin: top left;
         margin-top: 0 !important;
         height: auto;
-        color: rgb(50, 49, 48);
+        color: igx-color(map-get($theme, 'palette'), 'grays', 800);
 
         [dir='rtl'] & {
             transform-origin: top right;
@@ -707,15 +705,15 @@
     }
 
     %fluent-label-disabled {
-        color: rgb(161, 159, 157);
+        color: igx-color(map-get($theme, 'palette'), 'grays', 500);
     }
 
     %fluent-label-filled {
         transform: translateY(0);
     }
 
     %fluent-label-focused {
-        color: #333;
+        color: igx-color(map-get($theme, 'palette'), 'grays', 800);
         transform: translateY(0) scale(1);
     }
 

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -175,6 +175,21 @@
         fluent: none
     ), map-get($theme, variant));
 
+    $thumb-resting-shadow: map-get((
+        material: --var($theme, 'resting-shadow'),
+        fluent: none
+    ), map-get($theme, variant));
+
+    $thumb-hover-shadow: map-get((
+        material: --var($theme, 'hover-shadow'),
+        fluent: none
+    ), map-get($theme, variant));
+
+    $thumb-disabled-shadow: map-get((
+        material: --var($theme, 'disabled-shadow'),
+        fluent: none
+    ), map-get($theme, variant));
+
     $switch-thumb-height: $switch-thumb-width ;
 
     $ripple-size: em(48px);
@@ -246,12 +261,12 @@
         min-width: rem($switch-thumb-width);
         border-radius: --var($theme, 'border-radius-thumb');
         background: --var($theme, 'thumb-off-color');
-        box-shadow: --var($theme, 'resting-shadow');
+        box-shadow: $thumb-resting-shadow;
         transition: $input-transition;
         transform: translateX(rem($switch-off-offset));
 
         &:hover {
-            box-shadow: --var($theme, 'hover-shadow');
+            box-shadow: $thumb-hover-shadow;
         }
     }
 
@@ -266,7 +281,7 @@
 
     %switch-composite-thumb--disabled {
         background: --var($theme, 'thumb-disabled-color');
-        box-shadow: --var($theme, 'disabled-shadow');
+        box-shadow: $thumb-disabled-shadow;
     }
 
     %switch-ripple {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss

@@ -57,8 +57,6 @@
 /// @requires {map} $_default-shape-input-group
 /// @requires {map} $_default-elevation-input-group
 /// @see $default-palette
-
-
 $_light-input-group: extend(
     $_default-shape-input-group,
     $_default-elevation-input-group,