[BootstrapAdminUi] Improve inputs contrast ratio (#147)

Fixes #146
Sylius · Dec 9, 2024 · 8dbf4b2 · 8dbf4b2
2 parents 77c73fc + 4b14488
commit 8dbf4b2
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 22 deletions.
diff --git a/src/BootstrapAdminUi/assets/styles/_form.scss b/src/BootstrapAdminUi/assets/styles/_form.scss
@@ -40,5 +40,21 @@ textarea.form-control {
 }
 
 .form-select:disabled {
-    color: var(--tblr-gray-500);
+    color: var(--tblr-gray-600);
+}
+
+.input-group {
+    box-shadow: none;
+
+    .form-check {
+        flex-grow: 1;
+    }
+
+    .input-group-text {
+        color: var(--tblr-gray-600);
+    }
+}
+
+.form-control:focus {
+    box-shadow: none;
 }
diff --git a/src/BootstrapAdminUi/assets/styles/_tom-select.scss b/src/BootstrapAdminUi/assets/styles/_tom-select.scss
@@ -20,9 +20,8 @@
 }
 
 .focus .ts-control {
-    border-color: #adb5bd;
-    outline: 0;
-    box-shadow: var(--tblr-box-shadow-input), 0 0 0 0.25rem rgba(173, 181, 189, 0.25);
+    border: 1px solid var(--tblr-focus-ring-color);
+    box-shadow: 0 0 0 1px var(--tblr-focus-ring-color);
 }
 
 .ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {

diff --git a/src/BootstrapAdminUi/assets/styles/_variables.scss b/src/BootstrapAdminUi/assets/styles/_variables.scss
@@ -24,23 +24,35 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
 
-$body-color:                $gray-900;
+$body-color: $gray-900;
 
-$link-color:                $body-color;
-$link-decoration:           underline;
-$link-hover-color:          $primary;
-$link-hover-decoration:     null;
+$text-secondary: $gray-600;
+$text-secondary-light: $gray-500;
+$text-secondary-dark: $gray-700;
 
-$input-focus-border-color:    $gray-500;
+$link-color: $body-color;
+$link-decoration: underline;
+$link-hover-color: $primary;
+$link-hover-decoration: null;
 
-$focus-ring-width:      .25rem;
-$focus-ring-opacity:    .25;
-$focus-ring-color:      rgba($gray-500, $focus-ring-opacity);
-$focus-ring-blur:       0;
+$disabled-color: $gray-600;
+$form-secondary-color: $gray-600;
+
+$input-border-color: $gray-400;
+$input-border-color-translucent: $gray-400;
+$input-focus-border-color: $gray-600;
+
+$focus-ring-width: 0;
+$focus-ring-color: $input-focus-border-color;
+$focus-ring-blur: 0;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
 
-$pagination-active-color:           inherit;
-$pagination-active-bg:              $gray-200;
+$input-btn-focus-width: $focus-ring-width;
+
+$btn-border-color: $input-border-color;
+
+$pagination-active-color: inherit;
+$pagination-active-bg: $gray-200;
 
 $font-family-sans-serif: 'Inter', serif;
 

diff --git a/src/BootstrapAdminUi/public/app.css b/src/BootstrapAdminUi/public/app.css
diff --git a/src/BootstrapAdminUi/public/app.rtl.css b/src/BootstrapAdminUi/public/app.rtl.css