From 5f0bf84063ae084114bb585fd768a4c8265b4970 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 16 Nov 2023 11:36:26 +0100
Subject: [PATCH] :lipstick: Improve contrast for checkbox

---
 .../resources/styles/common/refactor/basic-rules.scss | 11 +++++++----
 .../styles/common/refactor/design-tokens.scss         |  6 ++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index b96decc6d6..0cb5aea6fc 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -402,10 +402,13 @@
   min-width: $s-16;
   min-height: $s-16;
   border-radius: $br-6;
-  background-color: var(--input-checkbox-background-color-rest);
-  border: $s-1 solid var(--input-checkbox-background-color-rest);
+
+  background-color: var(--input-checkbox-inactive-background-color);
+  border-radius: $br-4;
+  box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
   svg {
     display: none;
+    stroke: var(--input-checkbox-inactive-foreground-color);
   }
   &:hover {
     border-color: var(--input-checkbox-border-color-hover);
@@ -414,11 +417,11 @@
     border-color: var(--input-checkbox-border-color-focus);
   }
   &:global(.checked) {
-    background-color: var(--input-border-color-active);
     border-color: var(--input-checkbox-border-color-active);
+    background-color: var(--input-checkbox-active-background-color);
     svg {
       @extend .button-icon-small;
-      stroke: var(--input-details-color);
+      stroke: var(--input-checkbox-active-foreground-color);
     }
   }
   &:global(.intermediate) {
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index d5e21d58e4..ff35b96355 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -159,6 +159,12 @@
   --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
   --input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
 
+  // Checkbox color
+  --input-checkbox-inactive-background-color: var(--off-white);
+  --input-checkbox-inactive-foreground-color: var(--color-background-primary);
+  --input-checkbox-active-background-color: var(--color-accent-primary);
+  --input-checkbox-active-foreground-color: var(--color-background-primary);
+
   --menu-background-color: var(--color-background-tertiary);
   --menu-foreground-color: var(--color-foreground-primary);
   --menu-background-color-selected: var(--color-background-tertiary);