From 75c127757ff206386b67bd0eb6e13a76daac1fa8 Mon Sep 17 00:00:00 2001
From: Dilyana Dimova <didimmova@Dilyanas-MacBook-Pro.local>
Date: Wed, 2 Mar 2022 10:04:01 +0200
Subject: [PATCH 1/2] refactor(checkbox): refactor checkbox bootstrap styles

---
 .../components/checkbox/_checkbox-theme.scss  | 22 +++++--------------
 .../styles/themes/schemas/dark/_checkbox.scss |  7 +-----
 .../themes/schemas/light/_checkbox.scss       |  4 ++--
 3 files changed, 8 insertions(+), 25 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 4e289720737..ac8f3cab68c 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/dark/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
index aad1a7a6a9b..abb766e2d1d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
@@ -26,14 +26,9 @@ $dark-fluent-checkbox: extend($fluent-checkbox, (
 
 /// Generates a dark bootstrap checkbox schema.
 /// @type {Map}
-/// @prop {Color} tick-color [color: ('grays', 900)] - The checked mark color.
 /// @requires {function} extend
 /// @requires $bootstrap-checkbox
-$dark-bootstrap-checkbox: extend($bootstrap-checkbox, (
-    tick-color: (
-        color: ('grays', 900)
-    )
-));
+$dark-bootstrap-checkbox: $bootstrap-checkbox;
 
 /// Generates a dark indigo checkbox schema.
 /// @type {Map}
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)
         ),
     )
 );

From 3348d384a8a73ad498d772ab26af4a2e65d98bb8 Mon Sep 17 00:00:00 2001
From: Dilyana Dimova <didimmova@Dilyanas-MacBook-Pro.local>
Date: Wed, 2 Mar 2022 11:49:37 +0200
Subject: [PATCH 2/2] refactor(checkbox): fix dark checkbox tick color

---
 .../src/lib/core/styles/themes/schemas/dark/_checkbox.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
index abb766e2d1d..aad1a7a6a9b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss
@@ -26,9 +26,14 @@ $dark-fluent-checkbox: extend($fluent-checkbox, (
 
 /// Generates a dark bootstrap checkbox schema.
 /// @type {Map}
+/// @prop {Color} tick-color [color: ('grays', 900)] - The checked mark color.
 /// @requires {function} extend
 /// @requires $bootstrap-checkbox
-$dark-bootstrap-checkbox: $bootstrap-checkbox;
+$dark-bootstrap-checkbox: extend($bootstrap-checkbox, (
+    tick-color: (
+        color: ('grays', 900)
+    )
+));
 
 /// Generates a dark indigo checkbox schema.
 /// @type {Map}