feat(styles): update select disabled styles (#3228)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Jul 17, 2024 · 55c2edc · 55c2edc
1 parent c201e80
commit 55c2edc
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 15 deletions.
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -68,7 +68,7 @@
 
     &:disabled {
       ~ label {
-        color: forms.$input-disabled-color;
+        color: var(--post-gray-60);
       }
     }
 
@@ -133,7 +133,7 @@
 
     &:disabled {
       ~ label {
-        color: forms.$input-disabled-color;
+        color: var(--post-gray-60);
       }
     }
 

diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -52,11 +52,9 @@
     }
   }
 
-  &:disabled {
-    @include utilities.high-contrast-mode {
-      border-color: GrayText !important;
-      background-color: Field !important;
-      color: GrayText;
+  @include utilities.disabled-style {
+    ~ .form-text {
+      color: var(--post-gray-60);
     }
   }
 

diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
@@ -96,7 +96,7 @@ select.form-control-rg:not([size]):not([multiple]) {
     border: forms.$input-disabled-border-style;
 
     ~ .form-text {
-      color: forms.$input-disabled-color;
+      color: var(--post-gray-60);
     }
 
     @include utilities.high-contrast-mode {
@@ -219,7 +219,7 @@ select.form-control-rg:not([size]):not([multiple]) {
     margin-bottom: spacing.$size-micro;
   }
 
-  &:has(+ .form-control[disabled]) {
-    color: forms.$input-disabled-color;
+  &:has(+ .form-control[disabled], + .form-select[disabled]) {
+    color: var(--post-gray-60);
   }
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
@@ -149,7 +149,7 @@
 @mixin disabled-style($additional-selector: '') {
   &:disabled#{$additional-selector} {
     pointer-events: none;
-    color: var(--post-gray-40);
+    color: var(--post-gray-60);
     border-color: var(--post-gray-40);
     border-style: dashed;
     background-clip: padding-box;

diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
@@ -5,10 +5,10 @@
 $form-select-border-radius: forms.$input-border-radius;
 $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
-$form-select-disabled-border-color: forms.$input-disabled-border-color;
+$form-select-disabled-border-color: color.$gray-40;
 $form-select-indicator-color: color.$black;
 $form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-indicator-color)}') !default;
-$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-color)}') !default;
+$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default;
 $form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
 $form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;
 

diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -37,8 +37,8 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
-$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
-$input-disabled-border-color: color.$gray-40; // Design System only
+$input-disabled-color: var(--post-gray-60); // Design System only
+$input-disabled-border-color: var(--post-gray-40); // Design System only
 $input-disabled-border-style: spacing.$size-line dashed;
 
 $input-color: color.$black !default;