From 217b9616ef078e3fc4dcc7cd8476037439b2534c Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Mon, 30 Oct 2023 11:11:41 +0100
Subject: [PATCH] Add color variation options for checkbox style

---
 .../src/lib/checkbox/checkbox.component.css   | 24 +++++++++++++++++++
 .../src/lib/checkbox/checkbox.component.html  |  2 +-
 .../src/lib/checkbox/checkbox.component.ts    |  5 ++++
 .../record-table/record-table.component.html  |  2 ++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.css b/libs/ui/inputs/src/lib/checkbox/checkbox.component.css
index e69de29bb2..25929c14ff 100644
--- a/libs/ui/inputs/src/lib/checkbox/checkbox.component.css
+++ b/libs/ui/inputs/src/lib/checkbox/checkbox.component.css
@@ -0,0 +1,24 @@
+.default {
+  --gn-ui-checkbox-color: var(--color-main);
+}
+
+.secondary {
+  --gn-ui-checkbox-color: var(--color-secondary);
+}
+
+.primary {
+  --gn-ui-checkbox-color: var(--color-primary);
+}
+
+mat-checkbox {
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-state-layer-color: var(
+    --gn-ui-checkbox-color
+  );
+}
diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.html b/libs/ui/inputs/src/lib/checkbox/checkbox.component.html
index 947220f73f..db748c0e12 100644
--- a/libs/ui/inputs/src/lib/checkbox/checkbox.component.html
+++ b/libs/ui/inputs/src/lib/checkbox/checkbox.component.html
@@ -1,8 +1,8 @@
 <mat-checkbox
   class="cursor-pointer"
+  [class]="classList"
   type="checkbox"
   [checked]="checked"
   [indeterminate]="indeterminate"
   (click)="handleClick($event)"
-  color="primary"
 ></mat-checkbox>
diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts b/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts
index c9903a0495..27051d894e 100644
--- a/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts
+++ b/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts
@@ -13,10 +13,15 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckboxComponent {
+  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
   @Input() checked = false
   @Input() indeterminate? = false
   @Output() changed = new EventEmitter<boolean>()
 
+  get classList() {
+    return `${this.type}`
+  }
+
   handleClick(event: Event) {
     event.stopPropagation()
     this.checked = !this.checked
diff --git a/libs/ui/search/src/lib/record-table/record-table.component.html b/libs/ui/search/src/lib/record-table/record-table.component.html
index 809973bf98..1b5b225d6e 100644
--- a/libs/ui/search/src/lib/record-table/record-table.component.html
+++ b/libs/ui/search/src/lib/record-table/record-table.component.html
@@ -53,6 +53,7 @@
             [checked]="isAllSelected()"
             [indeterminate]="isSomeSelected()"
             (changed)="selectAll()"
+            type="default"
           >
           </gn-ui-checkbox>
         </div>
@@ -153,6 +154,7 @@
           <gn-ui-checkbox
             [checked]="isChecked(record)"
             (changed)="handleRecordSelectedChange($event, record)"
+            type="default"
           ></gn-ui-checkbox>
         </div>
         <div