refactor(samples): use tokens mixin for styling samples

Author: didimmova

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

@@ -6,4 +6,6 @@ $custom-badge-theme: badge-theme(
   $border-radius: 4px
 );
 
-@include tokens($custom-badge-theme, $mode: 'scoped');
+:host {
+  @include tokens($custom-badge-theme);
+}

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

@@ -44,4 +44,6 @@ igx-chip {
 //     $border-radius: rem(5px)
 // );
 
-// @include tokens($custom-chip-theme, $mode: 'scoped');
+// :host {
+//     @include tokens($custom-chip-theme);
+// }

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

@@ -5,8 +5,7 @@ $custom-theme: progress-circular-theme(
   $diameter: 50px,
 );
 
-@include css-vars($custom-theme);
-
 igx-circular-bar {
+    @include tokens($custom-theme);
     margin: 20px;
 }

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

@@ -6,5 +6,6 @@ $custom-icon-theme: icon-theme(
   $disabled-color: #494949
 );
 
-@include css-vars($custom-icon-theme);
- 
+:host {
+    @include tokens($custom-icon-theme);
+}

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

@@ -6,4 +6,6 @@ $custom-theme: progress-linear-theme(
   $text-color: #ecaa53,
 );
 
-@include css-vars($custom-theme);
+:host {
+    @include tokens($custom-theme);
+}

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

@@ -8,17 +8,14 @@ $dark-highlight: highlight-theme(
   $active-color: #ffcd0f,
 );
 
-:host {
-  ::ng-deep {
-    @include css-vars($dark-highlight);  
-    
+:host ::ng-deep {
+    @include tokens($dark-highlight);
+
     .custom-highlight {
-      border: 1px solid #ffcd0f;
-    }  
-    
+        border: 1px solid #ffcd0f;
+    }
+
     .custom-active-highlight {
-      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
+        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
     }
-  }
 }
- 

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

@@ -5,5 +5,6 @@ $custom-button-group: button-group-theme(
   $item-background: #57a5cd,
 );
 
-@include css-vars($custom-button-group);
-
+:host {
+    @include tokens($custom-button-group);
+}

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

@@ -232,10 +232,10 @@ $list: (
 // );
 
 // .button-sample {
-//     @include css-vars($custom-contained-theme);
-//     @include css-vars($custom-outlined-theme);
+//     @include tokens($custom-contained-theme);
+//     @include tokens($custom-outlined-theme);
 // }
 
 // .button-sample.filled {
-//     @include css-vars($custom-flat-theme);
-// }
+//     @include tokens($custom-flat-theme);
+// }

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

@@ -31,6 +31,7 @@ igx-checkbox:hover {
 //     $empty-color: #131e29,
 //     $border-radius: rem(4px),
 // );
-//
-// @include css-vars($custom-checkbox-theme);
-//
+
+// :host {
+//     @include tokens($custom-checkbox-theme);
+// }

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

@@ -8,6 +8,6 @@ $custom-drop-down-theme: drop-down-theme(
   $selected-item-background: #345779,
 );
 
-.drop-down__scroll-container {
-  @include css-vars($custom-drop-down-theme);
+:host {
+  @include tokens($custom-drop-down-theme);
 }