refactor(crm): update styles to work with theming package

Author: simeonoff

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

@@ -4,28 +4,63 @@
 @import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css');
 
 :host ::ng-deep {
-	$crm-grid-palette: palette($primary: #09f, $secondary: #ffbf00, $surface: #fff);
-	$crm-grid-dark-palette: palette($primary: #09f, $secondary: #fff, $surface: #222);
-	@include theme($crm-grid-palette);
+	$crm-grid-palette: palette(
+        $primary: #09f,
+        $secondary: #ffbf00,
+        $surface: #fff
+    );
+	$crm-grid-dark-palette: palette(
+        $primary: #09f,
+        $secondary: #fff,
+        $surface: #222
+    );
+	@include palette($crm-grid-palette);
 
 	$checkbox-theme: checkbox-theme(
-        $fill-color: color($crm-grid-palette, 'secondary', 500),
-        $tick-color: black
+        $fill-color: color($color: 'secondary', $variant: 500),
+        $tick-color: contrast-color($color: 'secondary', $variant: 500)
+    );
+	$checkbox-dark-theme: checkbox-theme(
+        $fill-color: color($color: 'gray', $variant: 900),
+        $tick-color: contrast-color($color: 'gray', $variant: 900)
+    );
+	$summary-theme: grid-summary-theme(
+        $background-color: #f0f8fe,
+        $result-color: color($color: 'primary', $variant: 500)
+    );
+	$search-theme: input-group-theme(
+        $search-background: color($color: 'primary', $variant: 600),
+        $idle-text-color: color($color: 'primary', $variant: 100),
+        $filled-text-color: color($color: 'gray', $variant: 600),
+        $focused-text-color: color($color: 'gray', $variant: 600)
+    );
+
+    @debug $search-theme;
+
+	$crm-grid-theme: grid-theme(
+        $header-background: #f0f8fe,
+        $header-border-color: #dde5eb
     );
-	$checkbox-dark-theme: checkbox-theme($fill-color: color($crm-grid-palette, 'gray', 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, 'gray', 600), $focused-text-color: color($crm-grid-palette, 'gray', 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, 'gray', 800),
 		$row-hover-background: color($crm-grid-palette, 'gray', 700),
 		$row-selected-hover-background: color($crm-grid-palette, 'gray', 700),
 		$cell-active-border-color: color($crm-grid-palette, 'primary', 50),
 		$cell-selected-background: color($crm-grid-palette, 'gray', 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, 'gray', 200), $hover-background: color($crm-grid-palette, 'gray', 200));
+	$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, 'gray', 200),
+        $hover-background: color($crm-grid-palette, 'gray', 200)
+    );
 	$crm-grid-dark-button: button-theme(
 		$foreground: color($crm-grid-dark-palette, 'primary', 500),
 		$hover-foreground: color($crm-grid-dark-palette, 'primary', 500),
@@ -34,7 +69,10 @@
 	$crm-grid-dark-progress: progress-linear-theme(
 		$track-color: color($crm-grid-palette, 'gray', 500)
 	);
-	$crm-input-drop-down: input-group-theme($placeholder-color: color($crm-grid-palette, 'gray', 500), $idle-text-color: color($crm-grid-palette, 'gray', 900));
+	$crm-input-drop-down: input-group-theme(
+        $placeholder-color: color($crm-grid-palette, 'gray', 500),
+        $idle-text-color: color($crm-grid-palette, 'gray', 900)
+    );
 
 	.grid__wrapper {
 		width: inherit;
@@ -295,6 +333,7 @@
 	.grid__wrapper:not(.dark_grid) {
 		@include css-vars($crm-grid-theme);
 		@include css-vars($summary-theme);
+		@include css-vars($checkbox-theme);
 	}
 
 	.dark_grid {