refactor(samples): replace css-vars with tokens mixin

didimmova · didimmova · commit 38f980e211e4 · 2026-02-17T09:49:16.000+02:00
diff --git a/projects/app-lob/src/styles.scss b/projects/app-lob/src/styles.scss
@@ -42,9 +42,9 @@ body {
     igx-hierarchical-grid,
     igx-pivot-grid,
     igx-tree-grid {
-        --igx-chip-disabled-background: #616161;
-        --igx-chip-disabled-border-color: #616161;
-        --igx-chip-disabled-text-color: #BDBDBD;
+        --ig-chip-disabled-background: #616161;
+        --ig-chip-disabled-border-color: #616161;
+        --ig-chip-disabled-text-color: #BDBDBD;
     }
 }
 .fin-dark-theme {
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss
@@ -6,5 +6,4 @@ $custom-badge-theme: badge-theme(
   $border-radius: 4px
 );
 
-@include css-vars($custom-badge-theme);
-
+@include tokens($custom-badge-theme, $mode: 'scoped');
diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss
@@ -44,5 +44,4 @@ igx-chip {
 //     $border-radius: rem(5px)
 // );
 
-// @include css-vars($custom-chip-theme)
- 
+// @include tokens($custom-chip-theme, $mode: 'scoped');
diff --git a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.scss
@@ -28,11 +28,10 @@ $custom-chips-theme: chip-theme(
   $hover-text-color: #e7e7e7
 );
 
-@include css-vars($custom-theme);
+@include tokens($custom-theme, $mode: 'scoped');
 
 :host {
   ::ng-deep {
-    @include chip($custom-chips-theme);
+    @include tokens($custom-chips-theme, $mode: 'scoped');
   }
 }
- 
diff --git a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss
@@ -12,5 +12,4 @@ $custom-theme: grid-theme(
   $sortable-header-icon-hover-color: #e9bd0d
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/grid/grid-row-pinning-styling/grid-row-pinning-styling.component.scss b/src/app/grid/grid-row-pinning-styling/grid-row-pinning-styling.component.scss
@@ -8,5 +8,4 @@ $custom-theme: grid-theme(
   $cell-active-border-color: #ffcd0f
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.scss b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.scss
@@ -8,5 +8,4 @@ $custom-theme: grid-theme(
   $cell-active-border-color: #ffcd0f
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss
@@ -6,5 +6,4 @@ $custom-theme: grid-theme(
   $sortable-header-icon-hover-color: black
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/grid/grid-summary-template/grid-summary-template.component.scss b/src/app/grid/grid-summary-template/grid-summary-template.component.scss
@@ -28,7 +28,7 @@ igx-buttongroup {
 		align-items: center;
 		gap: 4px;
 		justify-content: space-between;
-		color: hsla(var(--igx-gray-900));
+		color: hsla(var(--ig-gray-900));
 
 		span {
 			user-select: all;
@@ -50,7 +50,7 @@ igx-buttongroup {
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
+		border-bottom: 1px dashed hsla(var(--ig-gray-400));
 
 		&:last-child {
 			border-bottom: none;
diff --git a/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss b/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss
@@ -9,5 +9,4 @@ $custom-theme: grid-theme(
   $header-border-color: rgba(0, 0, 0, 0.08)
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.scss b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.scss
@@ -28,7 +28,7 @@ igx-buttongroup {
 		align-items: center;
 		gap: 4px;
 		justify-content: space-between;
-		color: hsla(var(--igx-gray-900));
+		color: hsla(var(--ig-gray-900));
 
 		span {
 			user-select: all;
@@ -50,7 +50,7 @@ igx-buttongroup {
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
+		border-bottom: 1px dashed hsla(var(--ig-gray-400));
 
 		&:last-child {
 			border-bottom: none;
diff --git a/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss
@@ -5,7 +5,4 @@ $custom-grid-theme: grid-theme(
   $resize-line-color: #0288d1
 );
 
-:host ::ng-deep {
-  @include css-vars($custom-grid-theme);
-}
- 
+@include tokens($custom-grid-theme, $mode: 'scoped');
diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss
@@ -8,7 +8,4 @@ $custom-theme: grid-theme(
   $cell-active-border-color: #ffcd0f
 );
 
-:host ::ng-deep {
-  @include css-vars($custom-theme);
-}
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/hierarchical-grid/hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component.scss
@@ -6,7 +6,4 @@ $custom-theme: grid-theme(
   $sortable-header-icon-hover-color: black
 );
 
-:host ::ng-deep {
-  @include css-vars($custom-theme);
-}
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss
@@ -14,7 +14,4 @@ $custom-theme: grid-theme(
   $row-highlight: #ffcd0f
 );
 
-:host ::ng-deep {
-  @include css-vars($custom-theme);
-}
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss
@@ -13,9 +13,9 @@ $custom-theme: grid-summary-theme(
 );
 
 :host {
-    --igx-grid-summaries-patch-background: #{$summaries-background};
+    --ig-grid-summaries-patch-background: #{$summaries-background};
 
     ::ng-deep {
-        @include css-vars($custom-theme);
+        @include tokens($custom-theme, $mode: 'scoped');
     }
 }
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -11,9 +11,9 @@ $icon-avatar-theme: avatar-theme(
 );
 
 .initials{
-  @include css-vars($initials-avatar-theme);
+  @include tokens($initials-avatar-theme, $mode: 'scoped');
 }
 
 .icon{
-  @include css-vars($icon-avatar-theme);
+  @include tokens($icon-avatar-theme, $mode: 'scoped');
 }
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss
@@ -57,21 +57,20 @@ igx-divider {
 //     $focus-background: #d9d9d9,
 // );
 
-// $custom-icon-button-theme: icon-button-theme(
+// $custom-icon-button-theme: flat-icon-button-theme(
 //     $foreground: #00000073,
 //     $hover-foreground: #1677ff,
 //     $hover-background: none,
-//     $border-color: transparent
 // );
 
 // $custom-divider-theme: divider-theme(
 //     $color: #f0f0f0
 // );
 
-// @include css-vars($custom-card-theme);
-// @include css-vars($custom-avatar-theme);
-// @include css-vars($custom-chip-theme);
-// @include css-vars($custom-divider-theme);
+// @include tokens($custom-card-theme, $mode: 'scoped');
+// @include tokens($custom-avatar-theme, $mode: 'scoped');
+// @include tokens($custom-chip-theme, $mode: 'scoped');
+// @include tokens($custom-divider-theme, $mode: 'scoped');
 // .igx-icon-button--flat {
-//     @include css-vars($custom-icon-button-theme);
-// };
+//     @include tokens($custom-icon-button-theme, $mode: 'scoped');
+// };
diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss
@@ -62,7 +62,7 @@
 }
 
 igx-icon {
-    --igx-icon-size: #{rem(14px)};
+    --ig-icon-size: #{rem(14px)};
 }
 
 igx-avatar {
diff --git a/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss
@@ -10,4 +10,4 @@ $custom-panel-theme: expansion-panel-theme(
 );
 
 // Apply the custom themes to the components mixins.
-@include css-vars($custom-panel-theme);
+@include tokens($custom-panel-theme, $mode: 'scoped');
diff --git a/src/app/lists/combo/combo-styling/combo-styling.component.scss b/src/app/lists/combo/combo-styling/combo-styling.component.scss
@@ -17,7 +17,7 @@ $custom-checkbox-theme: checkbox-theme(
 );
 
 :host ::ng-deep {
-  @include css-vars($custom-drop-down-theme);
-  @include css-vars($custom-combo-theme);
-  @include css-vars($custom-checkbox-theme);
+  @include tokens($custom-drop-down-theme, $mode: 'scoped');
+  @include tokens($custom-combo-theme, $mode: 'scoped');
+  @include tokens($custom-checkbox-theme, $mode: 'scoped');
 }
diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss
@@ -7,4 +7,4 @@ $custom-strip: action-strip-theme(
   $actions-border-radius: 0,
 );
 
-@include css-vars($custom-strip);
+@include tokens($custom-strip, $mode: 'scoped');
diff --git a/src/app/menus/navdrawer/nav-drawer-styling/nav-drawer-styling.component.scss b/src/app/menus/navdrawer/nav-drawer-styling/nav-drawer-styling.component.scss
@@ -6,10 +6,9 @@ $custom-theme: navdrawer-theme(
   $item-active-background: #ecc256,
   $item-header-text-color: #f3c03e
 );
-    
+
 :host {
   ::ng-deep {
-    @include css-vars($custom-theme);
+        @include tokens($custom-theme, $mode: 'scoped');
   }
 }
-
diff --git a/src/app/notifications/banner/banner-styling/banner-styling.component.scss b/src/app/notifications/banner/banner-styling/banner-styling.component.scss
@@ -4,4 +4,4 @@ $custom-banner-theme: banner-theme(
   $banner-background: #011627,
 );
 
-@include css-vars($custom-banner-theme);
+@include tokens($custom-banner-theme, $mode: 'scoped');
diff --git a/src/app/pivot-grid/pivot-datasource/pivot-data-selector-sample.component.scss b/src/app/pivot-grid/pivot-datasource/pivot-data-selector-sample.component.scss
@@ -10,7 +10,7 @@ igx-pivot-grid {
 
 :host ::ng-deep {
     igx-pivot-data-selector {
-        border: 1px solid hsla(var(--igx-gray-200));
+        border: 1px solid hsla(var(--ig-gray-200));
         margin: 0 8px;
     }
 }
diff --git a/src/app/pivot-grid/pivot-features/pivot-features.component.scss b/src/app/pivot-grid/pivot-features/pivot-features.component.scss
@@ -13,7 +13,7 @@
         }
 
         igx-pivot-data-selector {
-            border: 1px solid hsla(var(--igx-gray-200));
+            border: 1px solid hsla(var(--ig-gray-200));
             margin: 0 8px;
         }
     }
diff --git a/src/app/pivot-grid/pivot-layout/pivot-layout.component.scss b/src/app/pivot-grid/pivot-layout/pivot-layout.component.scss
@@ -13,7 +13,7 @@
         }
 
         igx-pivot-data-selector {
-            border: 1px solid hsla(var(--igx-gray-200));
+            border: 1px solid hsla(var(--ig-gray-200));
             margin: 0 8px;
         }
     }
diff --git a/src/app/theming/animations/animations-sample-1/animations-sample-1.component.scss b/src/app/theming/animations/animations-sample-1/animations-sample-1.component.scss
@@ -19,5 +19,5 @@ igx-list {
 }
 
 igx-list-item {
-    border-bottom: 1px solid var(--igx-gray-100);
+    border-bottom: 1px solid var(--ig-gray-100);
 }
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss
@@ -9,5 +9,4 @@ $custom-theme: grid-theme(
   $header-border-color: rgba(0, 0, 0, 0.08)
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss
@@ -8,5 +8,4 @@ $custom-theme: grid-theme(
   $cell-active-border-color: #ffcd0f
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss
@@ -6,5 +6,4 @@ $custom-theme: grid-theme(
   $sortable-header-icon-hover-color: black
 );
 
-@include css-vars($custom-theme);
- 
+@include tokens($custom-theme, $mode: 'scoped');
diff --git a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss
@@ -12,7 +12,7 @@ $custom-theme: grid-summary-theme(
 
 :host {
   ::ng-deep {
-    @include css-vars($custom-theme);
+    @include tokens($custom-theme, $mode: 'scoped');
   }
 }
  
diff --git a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.scss b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.scss
@@ -28,7 +28,7 @@ igx-buttongroup {
 		align-items: center;
 		gap: 4px;
 		justify-content: space-between;
-		color: hsla(var(--igx-gray-900));
+		color: hsla(var(--ig-gray-900));
 
 		span {
 			user-select: all;
@@ -50,7 +50,7 @@ igx-buttongroup {
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-gray-400));
+		border-bottom: 1px dashed hsla(var(--ig-gray-400));
 
 		&:last-child {
 			border-bottom: none;

Original file line number	Diff line number	Diff line change
`@@ -42,9 +42,9 @@ body {`
`42`	`42`	`igx-hierarchical-grid,`
`43`	`43`	`igx-pivot-grid,`
`44`	`44`	`igx-tree-grid {`
`45`		`- --igx-chip-disabled-background: #616161;`
`46`		`- --igx-chip-disabled-border-color: #616161;`
`47`		`- --igx-chip-disabled-text-color: #BDBDBD;`
	`45`	`+ --ig-chip-disabled-background: #616161;`
	`46`	`+ --ig-chip-disabled-border-color: #616161;`
	`47`	`+ --ig-chip-disabled-text-color: #BDBDBD;`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`	`.fin-dark-theme {`
Original file line number	Diff line number	Diff line change
`@@ -28,11 +28,10 @@ $custom-chips-theme: chip-theme(`
`28`	`28`	`$hover-text-color: #e7e7e7`
`29`	`29`	`);`
`30`	`30`
`31`		`-@include css-vars($custom-theme);`
	`31`	`+@include tokens($custom-theme, $mode: 'scoped');`
`32`	`32`
`33`	`33`	`:host {`
`34`	`34`	`::ng-deep {`
`35`		`- @include chip($custom-chips-theme);`
	`35`	`+ @include tokens($custom-chips-theme, $mode: 'scoped');`
`36`	`36`	`}`
`37`	`37`	`}`
`38`		`-`