From 15dffd3ecce1a09dfd6f1233619e13597eb29186 Mon Sep 17 00:00:00 2001
From: James Nestor <87858909+NotNestor@users.noreply.github.com>
Date: Thu, 21 Nov 2024 22:47:02 +0000
Subject: [PATCH] chore: fix disabled state (#1834)

---
 web-components/package.json                       |  2 +-
 .../src/components/combobox/scss/combobox.scss    | 15 ++++++++-------
 .../combobox/tokens/lm-combobox-tokens.js         |  4 ++++
 .../combobox/tokens/md-combobox-tokens.js         |  4 ++++
 .../combobox/tokens/mdv2-combobox-tokens.js       |  5 ++++-
 .../dropdown/tokens/md-dropdown-tokens.js         |  2 ++
 .../src/components/help-text/scss/help-text.scss  |  2 +-
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web-components/package.json b/web-components/package.json
index 3ef02e2e1a..f4cbf19860 100644
--- a/web-components/package.json
+++ b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
diff --git a/web-components/src/components/combobox/scss/combobox.scss b/web-components/src/components/combobox/scss/combobox.scss
index 92b0093baf..80d8024965 100644
--- a/web-components/src/components/combobox/scss/combobox.scss
+++ b/web-components/src/components/combobox/scss/combobox.scss
@@ -60,28 +60,29 @@
     .group:active {
       outline: none;
       box-shadow: none;
-      border-color: var(--combobox-disabled-bg-color) !important;
-      background-color: transparent;
+      border-color: var(--combobox-disabled-border-color) !important;
+      background-color: var(--combobox-disabled-bg-color);
 
       md-icon {
-        color: var(--md-primary-text-color);
-        fill: var(--md-primary-text-color);
+        opacity: 1;
+        color: var(--md-disabled-text-color);
+        fill: var(--md-disabled-text-color);
       }
 
       .md-combobox-right-arrow {
-        border-color: var(--combobox-disabled-bg-color);
+        border-color: var(--combobox-disabled-border-color);
       }
     }
 
     .md-combobox__multiwrap {
       input {
-        color: var(--combobox-disabled-bg-color);
+        color: var(--md-disabled-text-color);
       }
 
       input::placeholder,
       input::-webkit-input-placeholder {
         opacity: 1;
-        color: var(--combobox-disabled-bg-color);
+        color: var(--md-disabled-text-color);
       }
     }
   }
diff --git a/web-components/src/components/combobox/tokens/lm-combobox-tokens.js b/web-components/src/components/combobox/tokens/lm-combobox-tokens.js
index 3b69361072..336c513c62 100644
--- a/web-components/src/components/combobox/tokens/lm-combobox-tokens.js
+++ b/web-components/src/components/combobox/tokens/lm-combobox-tokens.js
@@ -51,6 +51,10 @@ const combobox = {
     "bg-color": {
       light: colors.gray[10].name,
       dark: colors.gray[90].name
+    },
+    "border-color": {
+      light: colors.gray[40].name,
+      dark: colors.gray[80].name
     }
   },
   invalid: {
diff --git a/web-components/src/components/combobox/tokens/md-combobox-tokens.js b/web-components/src/components/combobox/tokens/md-combobox-tokens.js
index 191e7ec988..f4796e8948 100644
--- a/web-components/src/components/combobox/tokens/md-combobox-tokens.js
+++ b/web-components/src/components/combobox/tokens/md-combobox-tokens.js
@@ -51,6 +51,10 @@ const combobox = {
     "bg-color": {
       light: colors.gray[10].name,
       dark: colors.gray[80].name
+    },
+    "border-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[90].name
     }
   },
   invalid: {
diff --git a/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js b/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js
index 4684d1f0fc..6579722e82 100644
--- a/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js
+++ b/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js
@@ -29,7 +29,7 @@ const combobox = {
       common: "$mds-color-theme-outline-theme-normal"
     },
     "new-border-color": {
-      common: "mds-color-theme-outline-input-active"
+      common: "$mds-color-theme-outline-input-active"
     },
     "bg-color": {
       common: "$mds-color-theme-background-primary-active"
@@ -38,6 +38,9 @@ const combobox = {
   disabled: {
     "bg-color": {
       common: "$mds-color-theme-background-primary-disabled"
+    },
+    "border-color": {
+      common: "$mds-color-theme-outline-primary-disabled"
     }
   },
   invalid: {
diff --git a/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js
index 63f3471ed6..1a922a5a96 100644
--- a/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js
+++ b/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js
@@ -14,6 +14,8 @@ const dropdown = {
   prefix: "md",
   component: "dropdown",
   "bg-color": {
+    light: colors.white[100].name,
+    dark: colors.gray[100].name,
     hover: {
       light: colors.gray[10].name,
       dark: colors.gray[80].name
diff --git a/web-components/src/components/help-text/scss/help-text.scss b/web-components/src/components/help-text/scss/help-text.scss
index b6140166e7..aea37331c0 100644
--- a/web-components/src/components/help-text/scss/help-text.scss
+++ b/web-components/src/components/help-text/scss/help-text.scss
@@ -46,5 +46,5 @@
 :host(.help-text.disabled.newMomentum),
 :host(.help-text-checkbox.disabled.newMomentum),
 :host(.help-text-radio.disabled.newMomentum) {
-  color: var(--input-default-new-disabled-color) !important;
+  color: var(--help-text-default-color) !important;
 }