From b0be138460886eb1aed045a0506b3e851359f31d Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Fri, 11 Mar 2022 09:08:58 +0200
Subject: [PATCH] refactor(checkbox): refactor checkbox bootstrap styles
 (#11143)

* refactor(checkbox): refactor checkbox bootstrap styles

* refactor(checkbox): fix dark checkbox tick color

Co-authored-by: Dilyana Dimova <didimmova@Dilyanas-MacBook-Pro.local>
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
---
 .../components/checkbox/_checkbox-theme.scss  | 22 +++++--------------
 .../themes/schemas/light/_checkbox.scss       |  4 ++--
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 6b4695506e5..8752254982a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -103,7 +103,7 @@
     // If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
     // It is under the name of $cbx-size
     $size: em(20px);
-    $size-bs: em(14px);
+    $size-bs: em(16px);
     $checkbox-radius: math.div($size, 2);
 
     $variant: map.get($theme, variant);
@@ -229,31 +229,19 @@
         background: transparent;
 
         @if $bootstrap-theme {
-            %cbx-composite-mark {
-                stroke: var-get($theme, 'empty-color');
-            }
+            border-color: var-get($theme, 'disabled-color-label');
         }
     }
 
     %cbx-composite--x--disabled {
-        @if $bootstrap-theme {
-            background: transparent;
-        } @else {
-            background: var-get($theme, 'disabled-color');
-        }
+        background: var-get($theme, 'disabled-color');
 
         &::after {
-            @if $bootstrap-theme {
-                background: transparent;
-            } @else {
-                background: var-get($theme, 'disabled-color');
-            }
+            background: var-get($theme, 'disabled-color');
         }
 
         @if $bootstrap-theme {
-            %cbx-composite-mark--x {
-                stroke: var-get($theme, 'empty-color');
-            }
+            border-color: var-get($theme, 'disabled-color');
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss
index f543445aca0..210b950aa06 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss
@@ -92,7 +92,7 @@ $fluent-checkbox: extend(
 /// @type {Map}
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} empty-color [color: ('grays', 500)] - The unchecked border color.
-/// @prop {Map} disabled-color [color: ('grays', 300)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
 /// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @property {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
@@ -119,7 +119,7 @@ $bootstrap-checkbox: extend(
         ),
 
         disabled-color: (
-            color: ('grays', 300)
+            color: ('primary', 200)
         ),
     )
 );