lux: fix btn-outline in light and dark mode, closes #1331

Author: thomaspark

dist/lux/_bootswatch.scss

@@ -58,40 +58,45 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;3
     font-size: 10px;
   }
 
-  &-warning {
-    &,
-    &:hover,
-    &:not([disabled]):not(.disabled):active,
-    &:focus {
-      color: $white;
-    }
+  &-primary {
+    --bs-btn-hover-bg: #{$black};
+    --bs-btn-hover-border-color: #{$black};
+    --bs-btn-active-bg: #{$black};
+    --bs-btn-active-border-color: #{$black};
   }
-}
-
-.btn-outline-secondary {
-  color: $gray-600;
-  border-color: $gray-600;
 
-  &.disabled,
-  &:disabled,
-  fieldset:disabled & {
-    color: $gray-600;
-    border-color: $gray-600;
+  &-secondary {
+    --bs-btn-hover-bg: #{$gray-200};
+    --bs-btn-hover-border-color: #{$gray-200};
+    --bs-btn-active-bg: #{$gray-300};
+    --bs-btn-active-border-color: #{$gray-300};
   }
 
-  &:not([disabled]):not(.disabled):hover,
-  &:not([disabled]):not(.disabled):focus,
-  &:not([disabled]):not(.disabled):active {
-    color: $white;
-    background-color: $gray-400;
-    border-color: $gray-400;
+  &-light {
+    --bs-btn-hover-bg: #{$gray-300};
+    --bs-btn-hover-border-color: #{$gray-300};
+    --bs-btn-active-bg: #{$gray-400};
+    --bs-btn-active-border-color: #{$gray-400};
   }
 
-  &:not([disabled]):not(.disabled):focus {
-    box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
+  &-link {
+    font-weight: $btn-font-weight;
   }
 }
 
+.btn-outline-secondary {
+  --bs-btn-color: #{$black};
+  --bs-btn-hover-bg: #{$gray-200};
+  --bs-btn-hover-border-color: #{$gray-200};
+  --bs-btn-active-bg: #{$gray-300};
+  --bs-btn-active-border-color: #{$gray-300};
+  border-color: $gray-100;
+}
+
+.btn-outline-light {
+  color: var(--bs-btn-active-color);
+}
+
 [class*="btn-outline-"] {
   border-width: 2px;
 }
@@ -102,7 +107,37 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;3
 
 @include color-mode(dark) {
   .btn-primary {
-    background-color: #080808;
+    --bs-btn-bg: #080808;
+    --bs-btn-hover-bg: #{$black};
+  }
+
+  .btn-outline-primary {
+    color: $white;
+    border-color: #080808;
+    --bs-btn-hover-bg: #{$black};
+  }
+
+  .btn-outline-secondary {
+    --bs-btn-color: #{$white};
+    --bs-btn-hover-color: #{$black};
+    --bs-btn-hover-bg: #{$gray-200};
+    --bs-btn-hover-border-color: #{$gray-200};
+    --bs-btn-active-bg: #{$gray-300};
+    --bs-btn-active-border-color: #{$gray-300};
+  }
+
+  .btn-outline-light {
+    color: $white;
+
+    &:not([disabled]):not(.disabled):hover,
+    &:not([disabled]):not(.disabled):focus,
+    &:not([disabled]):not(.disabled):active {
+      color: var(--bs-btn-active-color);
+    }
+  }
+
+  .btn-outline-dark {
+    color: $white;
   }
 }
 

dist/lux/_variables.scss

@@ -9,9 +9,9 @@ $theme: "lux" !default;
 
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
-$gray-200: #f7f7f9 !default;
-$gray-300: #eceeef !default;
-$gray-400: #ced4da !default;
+$gray-200: #f0f1f2 !default;
+$gray-300: #e0e1e2 !default;
+$gray-400: #cdcecf !default;
 $gray-500: #adb5bd !default;
 $gray-600: #919aa1 !default;
 $gray-700: #55595c !default;
@@ -36,7 +36,7 @@ $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        $red !default;
-$light:         $white !default;
+$light:         $gray-200 !default;
 $dark:          $gray-800 !default;
 
 $min-contrast-ratio:   1.9 !default;