[FIX] web: adjust frontend form-check-input colors

Prior to this commit, checkboxes, radios and switch inputs had a color
issue in frontend: as the inner element (eg. check mark) was always
white if the user changed the primary color to a bright one, the inputs
were no longer readable.

Steps to reproduce:
- Go to the Contact page.
- Click on Edit.
- Click on Theme tab.
- Replace the primary color with a bright one (ex. light gray).
- Click on the form in the page.
- Add a field.
- Select the new field and choose the "Radio Buttons" or " Checkbox"
  type.
- Click on Save.
- Check the checkbox or the radio button.
=> The check mark or the dot is not visible enough.

This commit adjusts the colors to ensure that these inputs will always
be visible.

task-3702675

Part-of: odoo/odoo#150886
This commit is contained in:
Brieuc-brd
2024-04-24 16:34:46 +00:00
committed by qsm-odoo
parent 690242748f
commit 13a2292b68
@@ -60,6 +60,8 @@ $table-color: inherit !default;
// Forms
$component-active-bg: $primary !default;
$input-color: $body-color !default;
$input-bg: $body-bg !default;
$input-transition: background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out !default;
@@ -69,6 +71,11 @@ $input-disabled-border-color: rgba($input-color, 0.15) !default;
$form-check-input-border: $border-width solid $gray-400 !default;
$form-check-input-border-radius: 0 !default;
$form-check-input-checked-color: color-contrast($component-active-bg, $body-color, $white) !default;
$form-switch-color: $input-color !default;
$form-switch-checked-color: $form-check-input-checked-color !default;
$form-select-indicator-color: $input-color !default;
$form-select-disabled-color: mix($input-color, $input-bg) !default;
$form-select-disabled-bg: $input-disabled-bg !default;