style(styling-samples): refactor all styling samples to use css-vars mixin for theming.

Author: desig9stein

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -17,17 +17,6 @@ $custom-theme: chip-theme(
     $border-radius: 5px
 );
 
-
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include chip($custom-theme);
+    @include css-vars($custom-theme);
 }

src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss

@@ -5,15 +5,6 @@ $custom-theme: progress-circular-theme(
     $progress-circle-color: color($color: 'success')
 );
 
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include progress-circular($custom-theme);
+    @include css-vars($custom-theme);
 }

src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss

@@ -25,15 +25,6 @@ $custom-icon-theme: icon-theme(
       color: #0a415c;
     }
 
-    // @include css-vars($custom-icon-theme);
-
-    /* Using Theme Overrides to provide IE 11 support.
-     * NOTE: Theming using this approach will greatly increase the size
-     * of the output CSS. If you do not plan to target IE 11,
-     * delete this section and use the `igx-css-vars` mixin as shown above.
-    **/
-    ::ng-deep {
-        @include icon($custom-icon-theme);
-    }
+	@include css-vars($custom-icon-theme);
 }
 

src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss

@@ -10,15 +10,6 @@ $custom-theme: progress-linear-theme(
     $text-color: #ECAA53
 );
 
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
-:host ::ng-deep {
-    @include progress-linear($custom-theme);
+:host {
+    @include css-vars($custom-theme);
 }

src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.scss

@@ -12,7 +12,7 @@ $dark-highlight: highlight-theme(
     padding: 4px;
 
     ::ng-deep {
-        @include highlight($dark-highlight);
+        @include css-vars($dark-highlight);
 
         .custom-highlight {
             border: 1px solid #FFCD0F;

src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss

@@ -17,16 +17,9 @@ $custom-button-group: button-group-theme(
     $disabled-background-color: lightgray
 );
 
-// :host {
-//   @include css-vars($custom-button-group);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-  @include button-group($custom-button-group);
+	@include css-vars($custom-button-group);
 }
 
+
+

src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss

@@ -17,19 +17,19 @@ $iconBtn: button-theme(
 );
 
 .flat {
-    @include button($flatBtn);
+    @include css-vars($flatBtn);
 }
 
 .raised {
-    @include button($raisedBtn);
+    @include css-vars($raisedBtn);
 }
 
 .fab {
-    @include button($fabBtn);
+    @include css-vars($fabBtn);
 }
 
 .icon {
-    @include button($iconBtn);
+    @include css-vars($iconBtn);
 }
 
 .buttons-sample {

src/app/data-entries/buttons/buttons-style/buttons-style.component.scss

@@ -20,15 +20,6 @@ $custom-button-theme: button-theme(
     $disabled-foreground: #bbb
 );
 
-// :host {
-//     @include css-vars($custom-button-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include button($custom-button-theme);
+	@include button($custom-button-theme);
 }

src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss

@@ -12,15 +12,8 @@ $custom-checkbox-theme: checkbox-theme(
     display: flex;
     padding: 16px;
 
-    // @include css-vars($custom-checkbox-theme);
-
-    /* Using Theme Overrides to provide IE 11 support.
-     * NOTE: Theming using this approach will greatly increase the size
-     * of the output CSS. If you do not plan to target IE 11,
-     * delete this section and use the `igx-css-vars` mixin as shown above.
-    **/
-    ::ng-deep {
-        @include checkbox($custom-checkbox-theme);
-    }
+	::ng-deep {
+		@include css-vars($custom-checkbox-theme);
+	}
 }
 

src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss

@@ -28,16 +28,7 @@ $custom-button-theme: button-theme(
     $foreground: #fdfdfd,
 );
 
-// :host {
-//     @include css-vars($custom-drop-down-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
-:host  ::ng-deep {
-    @include drop-down($custom-drop-down-theme);
-    @include button($custom-button-theme);
+:host ::ng-deep {
+    @include css-vars($custom-drop-down-theme);
+    @include css-vars($custom-button-theme);
 }