Amélioration de la couleur de bordure des champs de formulaire (#705)

- Add new gray shade - Use $gray-500 for the border color of form fields
epfl-si · Jan 16, 2024 · fe1e8e1 · fe1e8e1
1 parent a174b1c
commit fe1e8e1
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 3 deletions.
diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss
@@ -70,7 +70,7 @@ input[type="button"] {
 
 .btn-secondary {
   background: transparent;
-  border-color: $gray-300;
+  border-color: $gray-500;
 
   .bg-dark & {
     border-color: $gray-600;

diff --git a/assets/components/atoms/input/input.scss b/assets/components/atoms/input/input.scss
@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 .form-control {
+  border-color: $input-border-color;
   height: auto;
   transition:
     color 0.3s,

diff --git a/assets/components/atoms/select/select.scss b/assets/components/atoms/select/select.scss
@@ -1,5 +1,9 @@
 @charset "utf-8";
 
+.custom-select {
+  border-color: $custom-select-border-color;
+}
+
 .ms-offscreen {
   clip: rect(0 0 0 0)!important;
   position: absolute!important;

diff --git a/assets/components/atoms/tag/tag.scss b/assets/components/atoms/tag/tag.scss
@@ -18,7 +18,7 @@ a.tag, button.tag, span.tag, div.tag, p.tag {
   padding: 0.4em 0.6em;
   text-decoration: none;
   background: $white;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-500;
   font-size: inherit;
   line-height: 1;
   font-weight: 400;

diff --git a/assets/config/bootstrap-variables.scss b/assets/config/bootstrap-variables.scss
@@ -14,6 +14,7 @@ $white:    #fff !default;
 $gray-100: #e6e6e6 !default;
 $gray-200: #d5d5d5 !default;
 $gray-300: #c1c1c1 !default;
+$gray-500: #8e8e8e !default;
 $gray-600: #707070 !default;
 $black:    #212121 !default;
 
@@ -383,7 +384,7 @@ $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-100 !default;
 
 $input-color:                           $black !default;
-$input-border-color:                    $gray-200 !default;
+$input-border-color:                    $gray-500 !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
 

diff --git a/assets/config/colors.json b/assets/config/colors.json
@@ -5,6 +5,7 @@
   "$gray-100": "#e6e6e6",
   "$gray-200": "#d5d5d5",
   "$gray-300": "#c1c1c1",
+  "$gray-500": "#8e8e8e",
   "$gray-600": "#707070",
   "$black": "#212121",
   "$leman": "#00A79F",