From 7809147f59f27e77c81088a6252fe7caf76178e1 Mon Sep 17 00:00:00 2001
From: "chrysanthe(chgo)" <chgo@odoo.com>
Date: Mon, 8 May 2023 16:02:32 +0000
Subject: [PATCH] [IMP] web: improve input colors

== ISSUE ==

If you go to the Payroll Module, you can see that the checkboxes on the
main dashboard have a different color for the `background`
and the `border`.

This is due to inconsistencies in the color theme.

There was also an issue with the checkboxes in Accounting.
If you go to Accounting > Configuration > Currencies
and hover a checkbox, the checkboxes have a different background than
the one in Payroll which is not consistent.

== After this commit ==

The `background` and `border` color of the inputs are set
to the enterprise one. We also handle this in dark mode.

task-2818586

Part-of: odoo/odoo#116641
---
 .../static/src/scss/bootstrap_overridden.scss |  1 +
 .../src/scss/bootstrap_review_backend.scss    | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index f661f3331d2..cd50f991fdd 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -286,6 +286,7 @@ $form-check-input-checked-border-color: $o-brand-primary !default;
 $form-check-input-checked-bg-color: $o-brand-primary !default;
 $form-switch-checked-color: $input-bg !default;
 $form-switch-circle-bg-color: $input-bg !default;
+$form-switch-focus-color: mix($o-success, $input-bg) !default;
 
 $form-range-thumb-bg: $primary !default;
 
diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss
index 422d988dab4..e56fcb33b7f 100644
--- a/addons/web/static/src/scss/bootstrap_review_backend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_backend.scss
@@ -258,3 +258,43 @@ $-o-bg-colors-custom: null;
     background-color: $input-focus-bg;
     border-color: $o-input-hover-border-color;
 }
+
+// Switches
+// ============================================================================
+.form-switch {
+    .form-check-input:checked {
+        background-color: $o-success;
+        border-color: $o-success;
+    }
+
+    .form-check-input:focus {
+        border-color: $o-success;
+    }
+
+    &:hover .form-check-input:not(:disabled) {
+        border-color: $o-success;
+    }
+
+    // Creating a different styling for toggle switches with a purpose of switching
+    // from A to B (eg. switching between month and year) rather than ON/OFF.
+    // The 'o_switch_toggle' class should be use in addition to the default
+    // 'form-switch' Bootstrap class.
+    &.o_switch_toggle {
+        .form-check-input, .form-check-input:checked {
+            border-color: $o-action;
+            background-color: $o-view-background-color;
+            
+            &, &:focus, &:checked {
+                background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$o-action}'/></svg>"));
+            }
+        }
+        
+        &:hover .form-check-input:not(:disabled) {
+            border-color: $o-action;
+        }
+    }
+
+    &:disabled, &.disabled, &[disabled] {
+        opacity: $o-opacity-disabled;
+    }
+}