chore: fix disabled state (#1834)

momentum-design · Nov 21, 2024 · 15dffd3 · 15dffd3
1 parent 9a45409
commit 15dffd3
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }