fix(styling): add missing btn-default text color & border color

- the `btn-default` is no longer a valid CSS class in Bootstrap 5, but we can keep the class and provide our own text color & border for it - also add missing styling for dark mode as well
ghiscoding · Jun 9, 2024 · bfdec1e · bfdec1e
1 parent 5430486
commit bfdec1e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -25,7 +25,10 @@ $slick-font-size-base:          			                      $slick-font-size-base-v
 $slick-font-family:                                         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $slick-primary-color:                                       $primary-color !default;
 $slick-btn-default-bg-color:                                #fff !default;
+$slick-btn-default-border:                                  1px solid #dbdbdb !default;
 $slick-btn-default-border-color:                            #ccc !default;
+$slick-btn-default-border-hover-color:                      #b5b5b5 !default;
+$slick-btn-default-text-color:                              #212529 !default;
 $slick-button-primary-bg-color:                             $slick-primary-color !default;
 $slick-button-primary-bg-color-disabled:                    #bebebe !default;
 $slick-button-primary-color:                                inherit !default;
@@ -557,8 +560,8 @@ $slick-editor-modal-footer-border-top:                      1px solid #c9c9c9 !d
 $slick-editor-modal-footer-padding:                         8px !default;
 $slick-editor-modal-footer-status-text-width:               40% !default;
 $slick-editor-modal-footer-buttons-width:                   60% !default;
-$slick-editor-modal-footer-btn-border:                      1px solid #dbdbdb !default;
-$slick-editor-modal-footer-btn-border-hover-color:          #b5b5b5 !default;
+$slick-editor-modal-footer-btn-border:                      $slick-btn-default-border !default;
+$slick-editor-modal-footer-btn-border-hover-color:          $slick-btn-default-border-hover-color !default;
 $slick-editor-modal-footer-btn-height:                      inherit !default;
 $slick-editor-modal-footer-btn-margin:                      0 5px 0 0 !default;
 $slick-editor-modal-footer-btn-radius:                      4px !default;
@@ -979,6 +982,8 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-button-primary-color:                           #bababa;
   --slick-button-style-bg-color:                          var(--slick-base-dark-menu-bg-color);
   --slick-btn-default-bg-color:                           #383838;
+  --slick-btn-default-text-color:                         #ffffff;
+  --slick-btn-default-border-color:                       #565656;
   --slick-cell-even-background-color:                     #141618;
   --slick-cell-odd-background-color:                      #2c3034;
   --slick-cell-text-color:                                #d4d4d4;
@@ -1004,7 +1009,6 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-detail-view-icon-opacity-hover:                 0.75;
   --slick-detail-view-container-border:                   1px solid #525252;
   --slick-detail-view-container-bgcolor:                  #3c4349;
-  --slick-btn-default-border-color:                       #565656;
   --slick-grid-menu-icon-btn-color:                       #ededed;
   --slick-row-mouse-hover-color:                          #2c3034;
   --slick-header-background-color:                        #1c1c1c;
@@ -1070,7 +1074,10 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-editor-modal-default-btn-disabled-bg-color:     #3f3f3f;
   --slick-editor-modal-default-btn-disabled-color:        #5b5b5b;
   --slick-editor-modal-detail-container-border-modified:  1px solid #cc8400;
+  --slick-btn-default-border:                             var(--slick-base-dark-menu-item-border);
+  --slick-btn-default-border-hover-color:                 var(--slick-button-hover-border-color);
   --slick-editor-modal-close-btn-border-left:             var(--slick-base-dark-menu-border);
+  --slick-editor-modal-footer-btn-border:                 var(--slick-base-dark-menu-item-border);
   --slick-editor-modal-footer-btn-border-hover-color:     var(--slick-button-hover-border-color);
   --slick-editor-modal-container-bg-color:                #333333;
   --slick-editor-modal-header-bg-color:                   #333333;
@@ -1082,7 +1089,6 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-editor-modal-footer-border-top:                 var(--slick-base-dark-menu-border);
   --slick-editor-modal-input-editor-border:               var(--slick-base-dark-menu-border);
   --slick-editor-modal-checkbox-editor-border:            var(--slick-base-dark-menu-border);
-  --slick-editor-modal-footer-btn-border:                 var(--slick-base-dark-menu-item-border);
   --slick-editor-modal-container-box-shadow:              0 0 2px #606060;
   --slick-editor-modal-reset-btn-bg-color:                #383838;
   --slick-editor-modal-close-btn-bg-color:                transparent;

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -24,6 +24,24 @@
   cursor: pointer;
 }
 
+// default buttons used by SlickGrid and also when appended to body (e.g. LongText Editor)
+.btn-default {
+  color: var(--slick-btn-default-text-color, $slick-btn-default-text-color);
+  border: var(--slick-btn-default-border, $slick-btn-default-border);
+  &:hover {
+    border-color: var(--slick-btn-default-border-hover-color, $slick-btn-default-border-hover-color);
+  }
+}
+.slick-dark-mode {
+  .btn-default {
+    color: var(--slick-btn-default-text-color, $slick-btn-default-text-color);
+    border: var(--slick-btn-default-border, $slick-btn-default-border);
+    &:hover {
+      border-color: var(--slick-btn-default-border-hover-color, $slick-btn-default-border-hover-color);
+    }
+  }
+}
+
 .slickgrid-container {
   overflow: hidden;
   outline: 0;