From 502ad72c3b007cabe1fcc2b8417d2cf1e9b8d2f0 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Mon, 8 Nov 2021 16:01:30 +0200
Subject: [PATCH] feat(button): Update the bootstrap palette color. Fix the
 button styles to match as much as possible the bootstrap button.

---
 src/components/button/button.bootstrap.scss | 44 +++++++++++++--------
 src/styles/themes/bootstrap.scss            |  8 ++--
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/button/button.bootstrap.scss b/src/components/button/button.bootstrap.scss
index 04d0c5c3a..977cb27da 100644
--- a/src/components/button/button.bootstrap.scss
+++ b/src/components/button/button.bootstrap.scss
@@ -1,16 +1,24 @@
 @use '../../styles/utilities' as utils;
 
 @mixin theme() {
+    igc-button::part(base) {
+        transition: all .15s ease-out;
+
+        &::before {
+            transition: all .15s ease-out;
+        }
+    }
+
     igc-button[size='large']::part(base) {
         --size: #{utils.rem(48px)};
     }
 
     igc-button[size='medium']::part(base) {
-        --size: #{utils.rem(40px)};
+        --size: #{utils.rem(38px)};
     }
 
     igc-button[size='small']::part(base) {
-        --size: #{utils.rem(32px)};
+        --size: #{utils.rem(31px)};
     }
 
     igc-button[variant='flat'][disabled]::part(base) {
@@ -20,18 +28,20 @@
 
     igc-button[variant='fab'][disabled]::part(base),
     igc-button[variant='contained'][disabled]::part(base) {
-        background: #{utils.color(primary, 100)};
-        color: #{utils.color(primary, 300)};
+        background: #{utils.color(primary, 200)};
+        color: #{utils.contrast-color(primary, 600)};
     }
 
     igc-button[variant='outlined'][disabled]::part(base) {
-        color: #{utils.color(primary, 100)};
-        box-shadow: 0 0 0 1px utils.color(primary, 100);
+        color: #{utils.color(primary, 500)};
+        box-shadow: 0 0 0 1px utils.color(primary, 500);
+        opacity: .65;
         background: transparent;
     }
 
     igc-button[variant='flat']:not([disabled])::part(base) {
         color: #{utils.color(primary, 500)};
+        border-radius: calc(var(--igc-border-radius) * 2);
 
         &:hover {
             color: #{utils.color(primary, 800)};
@@ -40,6 +50,7 @@
         &:focus,
         &:active {
             color: #{utils.color(primary, 600)};
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
 
         &:hover::before {
@@ -48,7 +59,7 @@
 
         &:focus::before,
         &:active::before {
-            background: #{utils.color(gray, 100)};
+            background: transparent;
             opacity: 1;
         }
     }
@@ -63,7 +74,7 @@
         &:focus,
         &:active {
             color: #{utils.contrast-color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
 
         &::before {
@@ -81,7 +92,6 @@
 
     igc-button[variant='outlined']:not([disabled])::part(base) {
         color: #{utils.color(primary, 500)};
-        transition: color .15s ease-out;
         box-shadow: 0 0 0 1px utils.color(primary, 500);
         overflow: visible;
 
@@ -91,17 +101,17 @@
             width: 100%;
             height: 100%;
             border-radius: calc(var(--igc-border-radius) * 2);
-            transition: box-shadow .15s ease-out;
         }
 
         &:hover {
+            background: #{utils.color(primary, 600)};
             color: #{utils.contrast-color(primary, 600)};
         }
 
-        &:focus,
-        &:active {
-            color: #{utils.contrast-color(primary, 600)};
-        }
+        //&:focus,
+        //&:active {
+        //    color: #{utils.contrast-color(primary, 600)};
+        //}
 
         &:hover::before {
             background: #{utils.color(primary, 500)};
@@ -110,13 +120,13 @@
 
         &:focus::before,
         &:active::before {
-            background: #{utils.color(primary, 500)};
+            background: transparent;
             opacity: 1;
         }
 
         &:focus::after,
         &:active::after {
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
     }
 
@@ -142,7 +152,7 @@
         &:focus,
         &:active {
             color: #{utils.contrast-color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
 
         &::before {
diff --git a/src/styles/themes/bootstrap.scss b/src/styles/themes/bootstrap.scss
index 11911cc1d..74fe4976d 100644
--- a/src/styles/themes/bootstrap.scss
+++ b/src/styles/themes/bootstrap.scss
@@ -13,12 +13,12 @@
 @use '../../components/input/input.bootstrap' as input;
 
 $palette: utils.palette(
-    $primary: #007bff,
+    $primary: #0d6efd,
     $secondary: #6c757d,
-    $gray: #000,
+    $gray: #adb5bd,
     $surface: #f8f9fa,
-    $info: #17a2b8,
-    $success: #28a745,
+    $info: #0dcaf0,
+    $success: #198754,
     $warn: #ffc107,
     $error: #dc3545,
 ) !default;