refactor: use semantic disabled tokens in next components (#4529)

Replace incorrect use of --eds-color-border-medium and
--eds-color-border-neutral-medium with the dedicated disabled state
tokens (--eds-color-text-disabled, --eds-color-border-disabled,
--eds-color-bg-fill-emphasis-disabled, --eds-color-bg-disabled)
introduced in eds-tokens#4525.

Author: pomfrida

packages/eds-core-react/src/components/next/Button/button.css

@@ -161,8 +161,8 @@
   }
 
   .eds-button[data-variant='primary']:disabled {
-    background-color: var(--eds-color-bg-fill-muted-default);
-    color: var(--eds-color-border-medium);
+    background-color: var(--eds-color-bg-fill-emphasis-disabled);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 
@@ -186,9 +186,9 @@
 
   .eds-button[data-variant='secondary']:disabled {
     outline: var(--eds-border-width-default, 1px) solid
-      var(--eds-color-border-medium);
+      var(--eds-color-border-disabled);
     outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 
@@ -208,7 +208,7 @@
   }
 
   .eds-button[data-variant='ghost']:disabled {
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 

packages/eds-core-react/src/components/next/Checkbox/checkbox.css

@@ -146,7 +146,7 @@
   }
 
   .eds-checkbox[data-disabled='true'] .eds-checkbox__icon {
-    fill: var(--eds-color-border-medium);
+    fill: var(--eds-color-text-disabled);
   }
 
   /* Icon visibility */
@@ -185,7 +185,7 @@
   }
 
   .eds-field.eds-checkbox[data-disabled='true'] .eds-field__label {
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 

packages/eds-core-react/src/components/next/Field/field.css

@@ -58,6 +58,6 @@
 
   /* Only helper message changes color when disabled */
   .eds-field[data-disabled='true'] {
-    --_eds-field-helper-color: var(--eds-color-border-neutral-medium);
+    --_eds-field-helper-color: var(--eds-color-text-disabled);
   }
 }

packages/eds-core-react/src/components/next/Input/input.css

@@ -80,23 +80,23 @@
       outline-color: transparent;
 
       & .eds-input {
-        color: var(--eds-color-border-medium);
+        color: var(--eds-color-text-disabled);
         cursor: not-allowed;
         opacity: 1;
         -webkit-text-fill-color: var(
-          --eds-color-border-medium
+          --eds-color-text-disabled
         ); /* Safari autofill override */
 
         &::placeholder {
-          color: var(--eds-color-border-medium);
-          -webkit-text-fill-color: var(--eds-color-border-medium);
+          color: var(--eds-color-text-disabled);
+          -webkit-text-fill-color: var(--eds-color-text-disabled);
         }
       }
 
       & .eds-adornment__text,
       & .eds-adornment__adornment,
       & .eds-error-icon {
-        color: var(--eds-color-border-medium);
+        color: var(--eds-color-text-disabled);
       }
     }
 

packages/eds-core-react/src/components/next/Radio/radio.css

@@ -143,7 +143,7 @@
   }
 
   .eds-radio[data-disabled='true'] .eds-radio__icon {
-    fill: var(--eds-color-border-medium);
+    fill: var(--eds-color-text-disabled);
   }
 
   /* Icon visibility */
@@ -168,7 +168,7 @@
   }
 
   .eds-field.eds-radio[data-disabled='true'] .eds-field__label {
-    color: var(--eds-color-border-medium);
+    color: var(--eds-color-text-disabled);
     cursor: not-allowed;
   }
 }

packages/eds-core-react/src/components/next/Switch/switch.css

@@ -50,7 +50,7 @@
     }
 
     &[data-disabled='true'] .eds-field__label {
-      color: var(--eds-color-border-medium);
+      color: var(--eds-color-text-disabled);
       cursor: not-allowed;
     }
   }
@@ -124,7 +124,7 @@
     }
 
     .eds-switch:has(.eds-switch__input:disabled) & {
-      background-color: var(--eds-color-border-medium);
+      background-color: var(--eds-color-bg-disabled);
       box-shadow: none;
     }
   }