From 55c2edca8a7908034e269d3994b0d810039f8d2d Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Wed, 17 Jul 2024 14:35:16 +0200
Subject: [PATCH] feat(styles): update select disabled styles (#3228)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 packages/styles/src/components/floating-label.scss        | 4 ++--
 packages/styles/src/components/form-select.scss           | 8 +++-----
 packages/styles/src/components/forms.scss                 | 6 +++---
 packages/styles/src/mixins/_utilities.scss                | 2 +-
 .../styles/src/variables/components/_form-select.scss     | 4 ++--
 packages/styles/src/variables/components/_forms.scss      | 4 ++--
 6 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 01f0e0f8ab..8bc859b9d5 100644
--- 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
index a11311df04..77a9635fda 100644
--- 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
index c204699045..cac60818a8 100644
--- 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
index 67826ecdac..3513794820 100644
--- 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
index c00e9260a6..70bf83d205 100644
--- 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
index 04629842a9..7ff0c0c9a3 100644
--- 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;