Merge branch 'vNext' into sstoychev/webconfig-crm-vnext

Author: ChronosSF

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

@@ -5,15 +5,32 @@
 
 :host ::ng-deep {
 	$crm-grid-palette: palette($primary: #09f, $secondary: #ffbf00);
+	$crm-grid-dark-palette: palette($primary: #09f, $secondary: #fff);
 	@include theme($crm-grid-palette);
 
 	$checkbox-theme: checkbox-theme($fill-color: color($crm-grid-palette, 'secondary', 500), $tick-color: black);
+	$checkbox-dark-theme: checkbox-theme($fill-color: color($crm-grid-palette, 'grays', 50), $tick-color: black);
 	$summary-theme: grid-summary-theme($background-color: #f0f8fe, $result-color: color($crm-grid-palette, 'primary', 500));
 	$search-theme: input-group-theme($search-background: color($crm-grid-palette, 'primary', 600), $idle-text-color: color($crm-grid-palette, 'primary', 100), $filled-text-color: color($crm-grid-palette, 'grays', 600), $focused-text-color: color($crm-grid-palette, 'grays', 600));
 	$crm-grid-theme: grid-theme($header-background: #f0f8fe, $header-border-color: #dde5eb);
+	$crm-dark-grid-theme: grid-theme(
+		$row-selected-background: color($crm-grid-palette, 'grays', 800),
+		$row-hover-background: color($crm-grid-palette, 'grays', 700),
+		$row-selected-hover-background: color($crm-grid-palette, 'grays', 700),
+		$cell-active-border-color: color($crm-grid-palette, 'primary', 50),
+		$cell-selected-background: color($crm-grid-palette, 'grays', 50),
+	);
 	$crm-grid-toolbar: grid-toolbar-theme($background-color: color($crm-grid-palette, 'primary', 500));
 	$crm-grid-toolbar-button: button-theme($background: color($crm-grid-palette, 'primary', 800), $hover-background: color($crm-grid-palette, 'primary', 900), $focus-foreground: #fff);
 	$crm-grid-search-button: button-theme($background: transparent, $focus-background: color($crm-grid-palette, 'grays', 200), $hover-background: color($crm-grid-palette, 'grays', 200));
+	$crm-grid-dark-button: button-theme(
+		$foreground: color($crm-grid-dark-palette, 'primary', 500),
+		$hover-foreground: color($crm-grid-dark-palette, 'primary', 500),
+		$focus-foreground: color($crm-grid-dark-palette, 'primary', 500),
+	);
+	$crm-grid-dark-progress: progress-linear-theme(
+		$track-color: color($crm-grid-palette, 'grays', 500)
+	);
 	$crm-input-drop-down: input-group-theme($placeholder-color: color($crm-grid-palette, 'grays', 500), $idle-text-color: color($crm-grid-palette, 'grays', 900));
 
 	.grid__wrapper {
@@ -67,7 +84,7 @@
 		width: 70%
 	}
 
-	@include grid-toolbar($crm-grid-toolbar);
+	@include css-vars($crm-grid-toolbar);
 
 	.igx-grid-toolbar__actions {
 		.igx-button--outlined {
@@ -105,7 +122,7 @@
 	}
 
 	.igx-grid-toolbar__actions {
-		@include button($crm-grid-toolbar-button);
+		@include css-vars($crm-grid-toolbar-button);
 	}
 
 	.crm-sample-toolbar__title {
@@ -175,7 +192,7 @@
 		margin-left: 4px;
 	}
 
-	@include input-group($search-theme);
+	@include css-vars($search-theme);
 
 	.case-sensitive--active {
 		background: color($crm-grid-palette, 'primary', 200);
@@ -191,7 +208,7 @@
 	}
 
 	.igx-drop-down__list {
-		@include input-group($crm-input-drop-down)
+		@include css-vars($crm-input-drop-down)
 	}
 
 	.sample-flex-container {
@@ -268,20 +285,24 @@
 	.igx-input-group--search .igx-input-group__bundle {
 		background-color: color($crm-grid-palette, 'primary', 800);
 
-		@include button($crm-grid-search-button);
+		@include css-vars($crm-grid-search-button);
 	}
 
 	// Not dark theme
 	.grid__wrapper:not(.dark_grid) {
-		@include grid($crm-grid-theme);
-		@include grid-summary($summary-theme);
+		@include css-vars($crm-grid-theme);
+		@include css-vars($summary-theme);
 	}
 
 	.dark_grid {
-		@include dark-theme($dark-material-palette);
-		@include grid-toolbar($crm-grid-toolbar);
+		@include dark-theme($crm-grid-dark-palette);
+		@include css-vars($checkbox-dark-theme);
+		@include css-vars($crm-grid-toolbar);
+		@include css-vars($crm-dark-grid-theme);
+		@include css-vars($crm-grid-dark-button);
+		@include css-vars($crm-grid-dark-progress);
 		.igx-grid-toolbar__actions {
-			@include button($crm-grid-toolbar-button);
+			@include css-vars($crm-grid-toolbar-button);
 		}
 	}
 }