lux: fix disabled btn-outline-secondary color in v5 #1307

thomaspark · Jul 17, 2024 · 2fca8f5 · 2fca8f5
1 parent 896463e
commit 2fca8f5
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 70 deletions.
diff --git a/dist/lux/_bootswatch.scss b/dist/lux/_bootswatch.scss
@@ -72,6 +72,13 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;3
   color: $gray-600;
   border-color: $gray-600;
 
+  &.disabled,
+  &:disabled,
+  fieldset:disabled & {
+    color: $gray-600;
+    border-color: $gray-600;
+  }
+
   &:not([disabled]):not(.disabled):hover,
   &:not([disabled]):not(.disabled):focus,
   &:not([disabled]):not(.disabled):active {

diff --git a/dist/lux/_variables.scss b/dist/lux/_variables.scss
@@ -39,7 +39,7 @@ $danger:        $red !default;
 $light:         $white !default;
 $dark:          $gray-800 !default;
 
-$min-contrast-ratio:   2.3 !default;
+$min-contrast-ratio:   1.9 !default;
 
 // Options
 

diff --git a/dist/lux/bootstrap.css b/dist/lux/bootstrap.css
@@ -3081,18 +3081,18 @@ textarea.form-control-lg {
 }
 
 .btn-warning {
-  --bs-btn-color: #000;
+  --bs-btn-color: #fff;
   --bs-btn-bg: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f2b969;
-  --bs-btn-hover-border-color: #f2b560;
-  --bs-btn-focus-shadow-rgb: 204, 147, 66;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f3bd71;
-  --bs-btn-active-border-color: #f2b560;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #cc9342;
+  --bs-btn-hover-border-color: #c08a3e;
+  --bs-btn-focus-shadow-rgb: 242, 185, 105;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #c08a3e;
+  --bs-btn-active-border-color: #b4823b;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f0ad4e;
   --bs-btn-disabled-border-color: #f0ad4e;
 }
@@ -3219,11 +3219,11 @@ textarea.form-control-lg {
 .btn-outline-warning {
   --bs-btn-color: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
+  --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #f0ad4e;
   --bs-btn-hover-border-color: #f0ad4e;
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
-  --bs-btn-active-color: #000;
+  --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #f0ad4e;
   --bs-btn-active-border-color: #f0ad4e;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -6588,7 +6588,7 @@ textarea.form-control-lg {
 }
 
 .text-bg-warning {
-  color: #000 !important;
+  color: #fff !important;
   background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
@@ -6657,9 +6657,9 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: RGBA(243, 189, 113, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
-  text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(192, 138, 62, var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
@@ -11822,6 +11822,10 @@ textarea.form-control-lg {
   color: #919aa1;
   border-color: #919aa1;
 }
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled, fieldset:disabled .btn-outline-secondary {
+  color: #919aa1;
+  border-color: #919aa1;
+}
 .btn-outline-secondary:not([disabled]):not(.disabled):hover, .btn-outline-secondary:not([disabled]):not(.disabled):focus, .btn-outline-secondary:not([disabled]):not(.disabled):active {
   color: #fff;
   background-color: #ced4da;

diff --git a/dist/lux/bootstrap.min.css b/dist/lux/bootstrap.min.css
diff --git a/dist/lux/bootstrap.min.css.map b/dist/lux/bootstrap.min.css.map
diff --git a/dist/lux/bootstrap.rtl.css b/dist/lux/bootstrap.rtl.css
@@ -3079,18 +3079,18 @@ textarea.form-control-lg {
 }
 
 .btn-warning {
-  --bs-btn-color: #000;
+  --bs-btn-color: #fff;
   --bs-btn-bg: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f2b969;
-  --bs-btn-hover-border-color: #f2b560;
-  --bs-btn-focus-shadow-rgb: 204, 147, 66;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f3bd71;
-  --bs-btn-active-border-color: #f2b560;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #cc9342;
+  --bs-btn-hover-border-color: #c08a3e;
+  --bs-btn-focus-shadow-rgb: 242, 185, 105;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #c08a3e;
+  --bs-btn-active-border-color: #b4823b;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f0ad4e;
   --bs-btn-disabled-border-color: #f0ad4e;
 }
@@ -3217,11 +3217,11 @@ textarea.form-control-lg {
 .btn-outline-warning {
   --bs-btn-color: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
+  --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #f0ad4e;
   --bs-btn-hover-border-color: #f0ad4e;
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
-  --bs-btn-active-color: #000;
+  --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #f0ad4e;
   --bs-btn-active-border-color: #f0ad4e;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -6570,7 +6570,7 @@ textarea.form-control-lg {
 }
 
 .text-bg-warning {
-  color: #000 !important;
+  color: #fff !important;
   background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
@@ -6639,9 +6639,9 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: RGBA(243, 189, 113, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
-  text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(192, 138, 62, var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
@@ -11796,6 +11796,10 @@ textarea.form-control-lg {
   color: #919aa1;
   border-color: #919aa1;
 }
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled, fieldset:disabled .btn-outline-secondary {
+  color: #919aa1;
+  border-color: #919aa1;
+}
 .btn-outline-secondary:not([disabled]):not(.disabled):hover, .btn-outline-secondary:not([disabled]):not(.disabled):focus, .btn-outline-secondary:not([disabled]):not(.disabled):active {
   color: #fff;
   background-color: #ced4da;

diff --git a/dist/lux/bootstrap.rtl.min.css b/dist/lux/bootstrap.rtl.min.css
diff --git a/dist/lux/bootstrap.rtl.min.css.map b/dist/lux/bootstrap.rtl.min.css.map
diff --git a/docs/5/lux/_bootswatch.scss b/docs/5/lux/_bootswatch.scss
@@ -72,6 +72,13 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;3
   color: $gray-600;
   border-color: $gray-600;
 
+  &.disabled,
+  &:disabled,
+  fieldset:disabled & {
+    color: $gray-600;
+    border-color: $gray-600;
+  }
+
   &:not([disabled]):not(.disabled):hover,
   &:not([disabled]):not(.disabled):focus,
   &:not([disabled]):not(.disabled):active {

diff --git a/docs/5/lux/_variables.scss b/docs/5/lux/_variables.scss
@@ -39,7 +39,7 @@ $danger:        $red !default;
 $light:         $white !default;
 $dark:          $gray-800 !default;
 
-$min-contrast-ratio:   2.3 !default;
+$min-contrast-ratio:   1.9 !default;
 
 // Options
 

diff --git a/docs/5/lux/bootstrap.css b/docs/5/lux/bootstrap.css
@@ -3081,18 +3081,18 @@ textarea.form-control-lg {
 }
 
 .btn-warning {
-  --bs-btn-color: #000;
+  --bs-btn-color: #fff;
   --bs-btn-bg: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f2b969;
-  --bs-btn-hover-border-color: #f2b560;
-  --bs-btn-focus-shadow-rgb: 204, 147, 66;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f3bd71;
-  --bs-btn-active-border-color: #f2b560;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #cc9342;
+  --bs-btn-hover-border-color: #c08a3e;
+  --bs-btn-focus-shadow-rgb: 242, 185, 105;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #c08a3e;
+  --bs-btn-active-border-color: #b4823b;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f0ad4e;
   --bs-btn-disabled-border-color: #f0ad4e;
 }
@@ -3219,11 +3219,11 @@ textarea.form-control-lg {
 .btn-outline-warning {
   --bs-btn-color: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
+  --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #f0ad4e;
   --bs-btn-hover-border-color: #f0ad4e;
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
-  --bs-btn-active-color: #000;
+  --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #f0ad4e;
   --bs-btn-active-border-color: #f0ad4e;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -6588,7 +6588,7 @@ textarea.form-control-lg {
 }
 
 .text-bg-warning {
-  color: #000 !important;
+  color: #fff !important;
   background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
@@ -6657,9 +6657,9 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: RGBA(243, 189, 113, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
-  text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(192, 138, 62, var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
@@ -11822,6 +11822,10 @@ textarea.form-control-lg {
   color: #919aa1;
   border-color: #919aa1;
 }
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled, fieldset:disabled .btn-outline-secondary {
+  color: #919aa1;
+  border-color: #919aa1;
+}
 .btn-outline-secondary:not([disabled]):not(.disabled):hover, .btn-outline-secondary:not([disabled]):not(.disabled):focus, .btn-outline-secondary:not([disabled]):not(.disabled):active {
   color: #fff;
   background-color: #ced4da;

diff --git a/docs/5/lux/bootstrap.min.css b/docs/5/lux/bootstrap.min.css
diff --git a/docs/5/lux/bootstrap.min.css.map b/docs/5/lux/bootstrap.min.css.map
diff --git a/docs/5/lux/bootstrap.rtl.css b/docs/5/lux/bootstrap.rtl.css
@@ -3079,18 +3079,18 @@ textarea.form-control-lg {
 }
 
 .btn-warning {
-  --bs-btn-color: #000;
+  --bs-btn-color: #fff;
   --bs-btn-bg: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f2b969;
-  --bs-btn-hover-border-color: #f2b560;
-  --bs-btn-focus-shadow-rgb: 204, 147, 66;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f3bd71;
-  --bs-btn-active-border-color: #f2b560;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #cc9342;
+  --bs-btn-hover-border-color: #c08a3e;
+  --bs-btn-focus-shadow-rgb: 242, 185, 105;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #c08a3e;
+  --bs-btn-active-border-color: #b4823b;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f0ad4e;
   --bs-btn-disabled-border-color: #f0ad4e;
 }
@@ -3217,11 +3217,11 @@ textarea.form-control-lg {
 .btn-outline-warning {
   --bs-btn-color: #f0ad4e;
   --bs-btn-border-color: #f0ad4e;
-  --bs-btn-hover-color: #000;
+  --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #f0ad4e;
   --bs-btn-hover-border-color: #f0ad4e;
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
-  --bs-btn-active-color: #000;
+  --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #f0ad4e;
   --bs-btn-active-border-color: #f0ad4e;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -6570,7 +6570,7 @@ textarea.form-control-lg {
 }
 
 .text-bg-warning {
-  color: #000 !important;
+  color: #fff !important;
   background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
@@ -6639,9 +6639,9 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: RGBA(243, 189, 113, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
-  text-decoration-color: RGBA(243, 189, 113, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(192, 138, 62, var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(192, 138, 62, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
@@ -11796,6 +11796,10 @@ textarea.form-control-lg {
   color: #919aa1;
   border-color: #919aa1;
 }
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled, fieldset:disabled .btn-outline-secondary {
+  color: #919aa1;
+  border-color: #919aa1;
+}
 .btn-outline-secondary:not([disabled]):not(.disabled):hover, .btn-outline-secondary:not([disabled]):not(.disabled):focus, .btn-outline-secondary:not([disabled]):not(.disabled):active {
   color: #fff;
   background-color: #ced4da;

diff --git a/docs/5/lux/bootstrap.rtl.min.css b/docs/5/lux/bootstrap.rtl.min.css
diff --git a/docs/5/lux/bootstrap.rtl.min.css.map b/docs/5/lux/bootstrap.rtl.min.css.map