From 2bca2ef341c4267428399cbf2e35a6e57bdc95f4 Mon Sep 17 00:00:00 2001
From: Diego Smania <diego.smania@gmail.com>
Date: Sat, 15 May 2021 17:19:39 -0300
Subject: [PATCH] [pages, scss]: Add new light and dark buttons variants to the
 buttons page and fix they style.

---
 build/scss/_buttons.scss | 23 +++++++++++-
 pages/UI/buttons.html    | 80 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/build/scss/_buttons.scss b/build/scss/_buttons.scss
index 4bb2b7e51..940dd63dd 100644
--- a/build/scss/_buttons.scss
+++ b/build/scss/_buttons.scss
@@ -55,6 +55,17 @@
   }
 }
 
+.btn-outline-light {
+  color: darken($light, 20%);
+  border-color: darken($light, 20%);
+
+  &.disabled,
+  &:disabled {
+    color: darken($light, 20%);
+    border-color: darken($light, 20%);
+  }
+}
+
 // Application buttons
 .btn-app {
   @include border-radius(3px);
@@ -142,13 +153,21 @@
 
   @each $color, $value in $theme-colors-alt {
     .btn-#{$color} {
-      @include button-variant($value, $value);
+      @if $color == dark {
+        @include button-variant(darken($value, 5%), lighten($value, 10%));
+      } @else {
+        @include button-variant($value, $value);
+      }
     }
   }
 
   @each $color, $value in $theme-colors-alt {
     .btn-outline-#{$color} {
-      @include button-outline-variant($value);
+      @if $color == dark {
+        @include button-outline-variant(darken($value, 20%));
+      } @else {
+        @include button-outline-variant($value);
+      }
     }
   }
 }
diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index 3dfaab207..e82c3f9b5 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1009,6 +1009,46 @@
                       <button type="button" class="btn btn-block btn-warning disabled">Warning</button>
                     </td>
                   </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-lg">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-sm">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-xs">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-flat">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light disabled">Light</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-lg">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-sm">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-xs">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-flat">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark disabled">Dark</button>
+                    </td>
+                  </tr>
                 </table>
               </div>
               <!-- /.card -->
@@ -1158,6 +1198,46 @@
                       <button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
                     </td>
                   </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-lg">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-sm">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-xs">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-flat">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light disabled">Light</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-lg">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-sm">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-xs">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-flat">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark disabled">Dark</button>
+                    </td>
+                  </tr>
                 </table>
               </div>
               <!-- /.card -->