feat(*): migrating sass variables to 15

Konstantin Dinev · Konstantin Dinev · commit 0d003461fb42 · 2022-12-06T17:09:28.000+02:00
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss
@@ -79,7 +79,7 @@
 
 	.changePos2 {
 		.igx-grid__td-text {
-			--igx-success-l: 40%;
+			--ig-success-l: 40%;
 			border-inline-end: rem(4px) solid color(null, 'success', 500, .5);
 			padding-inline-end: rem(15px);
 		}
diff --git a/projects/app-lob/src/app/index/docs-layout.component.scss b/projects/app-lob/src/app/index/docs-layout.component.scss
@@ -1,6 +1,6 @@
 ::ng-deep {
 	.custom-body {
-		color: var(--igx-surface-500-contrast);
-		background: hsla(var(--igx-surface-500));
+		color: var(--ig-surface-500-contrast);
+		background: hsla(var(--ig-surface-500));
 	}
 }
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
@@ -42,7 +42,7 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--igx-secondary-600));
+			color: hsla(var(--ig-secondary-600));
 			user-select: none;
 		}
 	}
diff --git a/src/app/grid/grid-validation-style/grid-validation-style.component.scss b/src/app/grid/grid-validation-style/grid-validation-style.component.scss
@@ -10,7 +10,7 @@
 }
 
 :host ::ng-deep {
-    --igx-error-500: 34deg, 80%, 63%;
+    --ig-error-500: 34deg, 80%, 63%;
 
     .invalid-cell {
         box-shadow: inset 0 0 0 0.125rem color($color: error);
diff --git a/src/app/hierarchical-grid/hgrid-summary-export/hgrid-summary-export.component.scss b/src/app/hierarchical-grid/hgrid-summary-export/hgrid-summary-export.component.scss
@@ -28,7 +28,7 @@ igx-buttongroup {
 		align-items: center;
 		gap: 4px;
 		justify-content: space-between;
-		color: hsla(var(--igx-grays-900));
+		color: hsla(var(--ig-gray-900));
 
 		span {
 			user-select: all;
@@ -42,15 +42,15 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--igx-secondary-600));
+			color: hsla(var(--ig-secondary-600));
 			user-select: none;
 		}
 	}
 
 	> * {
 		padding: 8px 0;
 		line-height: 18px;
-		border-bottom: 1px dashed hsla(var(--igx-grays-400));
+		border-bottom: 1px dashed hsla(var(--ig-gray-400));
 
 		&:last-child {
 			border-bottom: none;
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
@@ -42,7 +42,7 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--igx-secondary-600));
+			color: hsla(var(--ig-secondary-600));
 			user-select: none;
 		}
 	}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-validation-style/hierarchical-grid-validation-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-validation-style/hierarchical-grid-validation-style.component.scss
@@ -10,7 +10,7 @@
 }
 
 :host ::ng-deep {
-    --igx-error-500: 34deg, 80%, 63%;
+    --ig-error-500: 34deg, 80%, 63%;
 
     .invalid-cell {
         box-shadow: inset 0 0 0 0.125rem color($color: error);
diff --git a/src/app/index/docs-layout.component.scss b/src/app/index/docs-layout.component.scss
@@ -1,6 +1,6 @@
 ::ng-deep {
 	.custom-body {
-		color: var(--igx-surface-500-contrast);
-		background: hsla(var(--igx-surface-500));
+		color: var(--ig-surface-500-contrast);
+		background: hsla(var(--ig-surface-500));
 	}
 }
diff --git a/src/app/interactions/toggle/toggle-samples.scss b/src/app/interactions/toggle/toggle-samples.scss
@@ -24,8 +24,8 @@
     }
 
     .custom-body & {
-        color: var(--igx-surface-500-contrast);
-        background-color: hsla(var(--igx-surface-500));
+        color: var(--ig-surface-500-contrast);
+        background-color: hsla(var(--ig-surface-500));
     }
 }
 
diff --git a/src/app/lists/combo/combo-template/combo-template.component.scss b/src/app/lists/combo/combo-template/combo-template.component.scss
@@ -6,7 +6,7 @@
 .header-class, .footer-class {
     text-align: center;
     padding: 4px;
-    color: var(--igx-secondary-500);
+    color: var(--ig-secondary-500);
 }
 
 .empty-class {
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.scss b/src/app/lists/list/list-item-selection/list-item-selection.component.scss
@@ -3,7 +3,7 @@
     padding: 16px;
 
     .selected {
-        background-color: hsla(var(--igx-secondary-500))
+        background-color: hsla(var(--ig-secondary-500))
     }
 
     .list-sample {
diff --git a/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.scss b/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.scss
@@ -7,7 +7,7 @@
 .node-refresh {
     cursor: pointer;
     padding: 0px 4px;
-    color: var(--igx-success-500);
+    color: var(--ig-success-500);
 }
 
 .node {
diff --git a/src/app/pivot-grid/pivot-features/pivot-features.component.scss b/src/app/pivot-grid/pivot-features/pivot-features.component.scss
@@ -5,11 +5,11 @@
 
     ::ng-deep {
         .upFontValue {
-            color: hsla(var(--igx-success-500));
+            color: hsla(var(--ig-success-500));
         }
 
         .downFontValue {
-            color: hsla(var(--igx-error-500));
+            color: hsla(var(--ig-error-500));
         }
 
         igx-pivot-data-selector {
diff --git a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.scss b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.scss
@@ -5,11 +5,11 @@
 
     ::ng-deep {
         .upFontValue {
-            color: hsla(var(--igx-success-500));
+            color: hsla(var(--ig-success-500));
         }
 
         .downFontValue {
-            color: hsla(var(--igx-error-500));
+            color: hsla(var(--ig-error-500));
         }
     }
 
diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss
@@ -10,11 +10,11 @@
 .info {
     display: flex;
     justify-content: center;
-    background: hsla(var(--igx-surface-500));
+    background: hsla(var(--ig-surface-500));
 }
 
 .info > span {
-    color: var(--igx-secondary-400);
+    color: var(--ig-secondary-400);
     font-weight: 600;
     font-size: 0.875rem;
     letter-spacing: 0.046875rem;
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss
@@ -18,11 +18,11 @@
 .stay__info {
     display: flex;
     justify-content: center;
-    background: hsla(var(--igx-surface-500));
+    background: hsla(var(--ig-surface-500));
 }
 
 .stay__info > span {
-    color: var(--igx-secondary-400);
+    color: var(--ig-secondary-400);
     font-weight: 600;
     font-size: 0.875rem;
     letter-spacing: 0.046875rem;
diff --git a/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.scss b/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.scss
@@ -10,7 +10,7 @@
 }
 
 :host ::ng-deep {
-    --igx-error-500: 34deg, 80%, 63%;
+    --ig-error-500: 34deg, 80%, 63%;
 
     .invalid-cell {
         box-shadow: inset 0 0 0 0.125rem color($color: error);
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
@@ -42,7 +42,7 @@ igx-buttongroup {
 			min-width: 70px;
 			justify-self: flex-start;
 			text-align: left;
-			color: hsla(var(--igx-secondary-600));
+			color: hsla(var(--ig-secondary-600));
 			user-select: none;
 		}
 	}

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@`
`79`	`79`
`80`	`80`	`.changePos2 {`
`81`	`81`	`.igx-grid__td-text {`
`82`		`- --igx-success-l: 40%;`
	`82`	`+ --ig-success-l: 40%;`
`83`	`83`	`border-inline-end: rem(4px) solid color(null, 'success', 500, .5);`
`84`	`84`	`padding-inline-end: rem(15px);`
`85`	`85`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`::ng-deep {`
`2`	`2`	`.custom-body {`
`3`		`- color: var(--igx-surface-500-contrast);`
`4`		`- background: hsla(var(--igx-surface-500));`
	`3`	`+ color: var(--ig-surface-500-contrast);`
	`4`	`+ background: hsla(var(--ig-surface-500));`
`5`	`5`	`}`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ igx-buttongroup {`
`42`	`42`	`min-width: 70px;`
`43`	`43`	`justify-self: flex-start;`
`44`	`44`	`text-align: left;`
`45`		`- color: hsla(var(--igx-secondary-600));`
	`45`	`+ color: hsla(var(--ig-secondary-600));`
`46`	`46`	`user-select: none;`
`47`	`47`	`}`
`48`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`:host ::ng-deep {`
`13`		`- --igx-error-500: 34deg, 80%, 63%;`
	`13`	`+ --ig-error-500: 34deg, 80%, 63%;`
`14`	`14`
`15`	`15`	`.invalid-cell {`
`16`	`16`	`box-shadow: inset 0 0 0 0.125rem color($color: error);`
Original file line number	Diff line number	Diff line change
`@@ -24,8 +24,8 @@`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.custom-body & {`
`27`		`- color: var(--igx-surface-500-contrast);`
`28`		`- background-color: hsla(var(--igx-surface-500));`
	`27`	`+ color: var(--ig-surface-500-contrast);`
	`28`	`+ background-color: hsla(var(--ig-surface-500));`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`.header-class, .footer-class {`
`7`	`7`	`text-align: center;`
`8`	`8`	`padding: 4px;`
`9`		`- color: var(--igx-secondary-500);`
	`9`	`+ color: var(--ig-secondary-500);`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.empty-class {`