style(styling-samples): refactor component mixins to css-vars

Author: desig9stein

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

@@ -21,5 +21,5 @@ $custom-button-theme: button-theme(
 );
 
 :host ::ng-deep {
-	@include button($custom-button-theme);
+	@include css-vars($custom-button-theme);
 }

src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss

@@ -25,7 +25,7 @@ $custom-checkbox: checkbox-theme(
 );
 
 .custom-buttons {
-	@include button($button-theme);
+	@include css-vars($button-theme);
 }
 
 :host ::ng-deep {

src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss

@@ -42,8 +42,8 @@ $custom-button-theme: button-theme(
     // Penetrate the ViewEncapsulation
     ::ng-deep {
         // Apply the custom themes to the compoents mixins.
-        @include expansion-panel($custom-panel-theme);
-        @include button($custom-button-theme);
+        @include css-vars($custom-panel-theme);
+        @include css-vars($custom-button-theme);
     }
 }
 

src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss

@@ -66,7 +66,7 @@ $custom-drop-down: drop-down-theme(
         @include css-vars($custom-button-group);
 
         .igx-excel-filter__apply {
-            @include button($custom-raised-button);
+            @include css-vars($custom-raised-button);
         }
     }
 }

src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss

@@ -28,7 +28,7 @@ $custom-checkbox: checkbox-theme(
 );
 
 .custom-buttons {
-    @include button($button-theme);
+    @include css-vars($button-theme);
   }
 
 :host ::ng-deep {