chore(samples): update additional samples, using tokens

Author: didimmova

projects/app-crm/src/app/grid-crm/grid-crm.component.scss

@@ -32,14 +32,14 @@
         $title-text-color: contrast-color($color: 'primary', $variant: 500)
     );
 
-	$crm-grid-toolbar-button: button-theme(
+	$crm-grid-toolbar-button: outlined-button-theme(
         $background: color($light-palette, 'primary', 800),
         $hover-background: color($light-palette, 'primary', 900),
         $active-foreground: contrast-color($light-palette, 'primary', 900),
         $focus-foreground: contrast-color($light-palette, 'primary', 900)
     );
 
-	$crm-grid-search-button: button-theme(
+	$crm-grid-search-button: flat-icon-button-theme(
         $background: transparent,
         $focus-background: color($light-palette, 'gray', 200),
         $hover-background: color($light-palette, 'gray', 200)
@@ -110,7 +110,7 @@
 		width: 70%
 	}
 
-	@include css-vars($crm-grid-toolbar);
+	@include tokens($crm-grid-toolbar, $mode: 'scoped');
 
 	.igx-grid-toolbar__actions {
 		.igx-button--outlined {
@@ -139,7 +139,7 @@
 	}
 
 	.igx-grid-toolbar__actions {
-		@include css-vars($crm-grid-toolbar-button);
+		@include tokens($crm-grid-toolbar-button);
 	}
 
 	.crm-sample-toolbar__title {
@@ -205,7 +205,7 @@
 		box-shadow: none;
 	}
 
-    @include css-vars($crm-input-drop-down);
+	@include tokens($crm-input-drop-down, $mode: 'scoped');
 
 	.sample-flex-container {
 		.igx-input-group,
@@ -281,13 +281,13 @@
 	.igx-input-group--search .igx-input-group__bundle {
 		background-color: color($color: 'primary', $variant: 800);
 
-		@include css-vars($crm-grid-search-button);
+		@include tokens($crm-grid-search-button);
 	}
 
 	.grid__wrapper:not(.dark_grid) {
-		@include css-vars($crm-grid-theme);
-		@include css-vars($summary-theme);
-		@include css-vars($checkbox-theme);
+		@include tokens($crm-grid-theme);
+		@include tokens($summary-theme);
+		@include tokens($checkbox-theme);
 	}
 
 
@@ -327,13 +327,13 @@
 
 	.dark_grid {
         @include palette($dark-palette);
-		@include css-vars($checkbox-dark-theme);
-		@include css-vars($crm-dark-grid-theme);
-		@include css-vars($crm-grid-dark-button);
-		@include css-vars($crm-grid-dark-progress);
+		@include tokens($checkbox-dark-theme);
+		@include tokens($crm-dark-grid-theme);
+		@include tokens($crm-grid-dark-button);
+		@include tokens($crm-grid-dark-progress);
 
 		.igx-grid-toolbar__actions {
-			@include css-vars($crm-grid-toolbar-button);
+			@include tokens($crm-grid-toolbar-button);
 		}
 
         .sample-flex-container {

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -59,7 +59,7 @@ $custom-badge-theme: badge-theme(
     .selected {
         igx-badge {
             & {
-                @include css-vars($custom-badge-theme);
+                @include tokens($custom-badge-theme);
             }
 
             position: absolute;
@@ -96,8 +96,8 @@ $custom-badge-theme: badge-theme(
     }
 
     .analytics-btn {
-        @include css-vars(
-            button-theme(
+        @include tokens(
+            contained-button-theme(
                 $foreground: contrast-color($color: 'gray', $variant: 900),
                 $background: color($color: 'success', $variant: 500, $opacity: .8),
                 $hover-background: color($color: 'success'),

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss

@@ -16,8 +16,8 @@ $progressBar-sample-theme: progress-linear-theme(
 
 ::ng-deep .default-theme {
     .grid__wrapper {
-        @include css-vars($grid-sample-theme);
-        @include css-vars($progressBar-sample-theme);
+        @include tokens($grid-sample-theme);
+        @include tokens($progressBar-sample-theme);
     }
 }
 

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

@@ -1,35 +1,35 @@
 @use '../../../../variables' as *;
 
-$flatBtn: button-theme(
+$flatBtn: flat-button-theme(
     $border-radius: .5
 );
 
-$containedBtn: button-theme(
+$containedBtn: contained-button-theme(
     $border-radius: 30px
 );
 
-$fabBtn: button-theme(
+$fabBtn: fab-button-theme(
     $border-radius: 10%
 );
 
-$iconBtn: icon-button-theme(
+$iconBtn: flat-icon-button-theme(
     $border-radius: 12px
 );
 
 .flat {
-    @include css-vars($flatBtn);
+    @include tokens($flatBtn);
 }
 
 .contained {
-    @include css-vars($containedBtn);
+    @include tokens($containedBtn);
 }
 
 .fab {
-    @include css-vars($fabBtn);
+    @include tokens($fabBtn);
 }
 
 .icon {
-    @include css-vars($iconBtn);
+    @include tokens($iconBtn);
 }
 
 .buttons-sample {

src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.scss

@@ -20,7 +20,7 @@ $custom-navbar-theme: navbar-theme(
     $background: #f8f9fa,
 );
 
-$custom-button-theme: button-theme(
+$custom-button-theme: flat-button-theme(
     $foreground: #666,
     $hover-foreground: #0099ff,
     $focus-foreground: #0099ff,
@@ -31,9 +31,9 @@ $custom-button-theme: button-theme(
     $active-background: transparent,
 );
 
-:host::ng-deep {
+:host {
     --ig-button-font-size: 0.75rem;
 
-    @include css-vars($custom-navbar-theme);
-    @include css-vars($custom-button-theme);
+    @include tokens($custom-navbar-theme);
+    @include tokens($custom-button-theme);
 }

src/app/data-entries/select/select-header-footer/select-header-footer.component.scss

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

src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.scss

@@ -7,8 +7,8 @@ $custom-checkbox-theme: checkbox-theme(
     $border-radius: 10px
 );
 
-.list-sample ::ng-deep {
-    @include css-vars($custom-checkbox-theme);
+.list-sample {
+    @include tokens($custom-checkbox-theme);
 }
 
 .sample {