@equinor/eds-tokens 2.1.1 → 2.3.0-beta.0

package/README.md

@@ -133,7 +133,17 @@ const darkSurface = darkSemanticNested.bg.neutral.surface // "#262626"
 
 * **Colors** -- Semantic color tokens for backgrounds, text, borders, and states
 * **Spacing** -- Layout spacing including inline, stack, inset, and border radius
-* **Typography** -- Font sizes, line heights, and font families (requires font files)
+* **Typography** -- Font sizes, line heights, and font families (requires font files, see below)
+
+### Font loading
+
+The typography system requires two font families: **Equinor** (headings) and **Inter** (UI/body text). Load both via the EDS variable font stylesheet:
+
+```html
+<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
+```
+
+> **Note:** The older `equinor-font.css` only includes the Equinor font. Components using `data-font-family="ui"` (Button, TextField, Input, etc.) will fall back to a generic sans-serif if Inter is not loaded.
 
 ### Typography variables that adapt to data-attributes
   * Font family setup (UI and Header fonts)

package/build/css/color/color-scheme/color-scheme.css

@@ -17,6 +17,9 @@
   --eds-color-bg-input: light-dark(#f5f5f5, #0b0b0b);
   --eds-color-border-focus: light-dark(#6fb6e9, #2d8bc5);
   --eds-color-text-link: light-dark(#0070a9, #5abbfb);
+  --eds-color-bg-disabled: light-dark(#e1e1e1, #525c65);
+  --eds-color-border-disabled: light-dark(#aeaeae, #738696);
+  --eds-color-text-disabled: light-dark(#aeaeae, #738696);
   --eds-color-accent-1: light-dark(#eaf8fa, #0a0b0b);
   --eds-color-accent-2: light-dark(#f6ffff, #1e2323);
   --eds-color-accent-3: light-dark(#cfe7e9, #3c6266);

package/build/css/color/color-scheme/dark-color-scheme-trimmed.css

@@ -8,6 +8,9 @@
   --eds-color-bg-input: #0b0b0b;
   --eds-color-border-focus: #2d8bc5;
   --eds-color-text-link: #5abbfb;
+  --eds-color-bg-disabled: #525c65;
+  --eds-color-border-disabled: #738696;
+  --eds-color-text-disabled: #738696;
   --eds-color-accent-1: #0a0b0b;
   --eds-color-accent-2: #1e2323;
   --eds-color-accent-3: #3c6266;

package/build/css/color/color-scheme/light-color-scheme-trimmed.css

@@ -8,6 +8,9 @@
   --eds-color-bg-input: #f5f5f5;
   --eds-color-border-focus: #6fb6e9;
   --eds-color-text-link: #0070a9;
+  --eds-color-bg-disabled: #e1e1e1;
+  --eds-color-border-disabled: #aeaeae;
+  --eds-color-text-disabled: #aeaeae;
   --eds-color-accent-1: #eaf8fa;
   --eds-color-accent-2: #f6ffff;
   --eds-color-accent-3: #cfe7e9;

package/build/css/color/dynamic/semantic-accent-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-accent-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-accent-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-accent-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-accent-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-accent-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-accent-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-accent-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-accent-3);
   --eds-color-bg-canvas: var(--eds-color-accent-1);
   --eds-color-bg-surface: var(--eds-color-accent-2);
   --eds-color-border-subtle: var(--eds-color-accent-6);
   --eds-color-border-medium: var(--eds-color-accent-7);
   --eds-color-border-strong: var(--eds-color-accent-8);
+  --eds-color-border-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle: var(--eds-color-accent-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-accent-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-accent-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-accent-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/semantic-danger-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-danger-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-danger-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-danger-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-danger-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-danger-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-danger-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-danger-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-danger-3);
   --eds-color-bg-canvas: var(--eds-color-danger-1);
   --eds-color-bg-surface: var(--eds-color-danger-2);
   --eds-color-border-subtle: var(--eds-color-danger-6);
   --eds-color-border-medium: var(--eds-color-danger-7);
   --eds-color-border-strong: var(--eds-color-danger-8);
+  --eds-color-border-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle: var(--eds-color-danger-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-danger-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-danger-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-danger-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/semantic-info-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-info-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-info-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-info-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-info-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-info-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-info-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-info-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-info-3);
   --eds-color-bg-canvas: var(--eds-color-info-1);
   --eds-color-bg-surface: var(--eds-color-info-2);
   --eds-color-border-subtle: var(--eds-color-info-6);
   --eds-color-border-medium: var(--eds-color-info-7);
   --eds-color-border-strong: var(--eds-color-info-8);
+  --eds-color-border-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle: var(--eds-color-info-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-info-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-info-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-info-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/semantic-neutral-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-neutral-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-neutral-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-neutral-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-neutral-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-neutral-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-neutral-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-canvas: var(--eds-color-neutral-1);
   --eds-color-bg-surface: var(--eds-color-neutral-2);
   --eds-color-border-subtle: var(--eds-color-neutral-6);
   --eds-color-border-medium: var(--eds-color-neutral-7);
   --eds-color-border-strong: var(--eds-color-neutral-8);
+  --eds-color-border-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle: var(--eds-color-neutral-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-neutral-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-neutral-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-neutral-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/semantic-success-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-success-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-success-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-success-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-success-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-success-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-success-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-success-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-success-3);
   --eds-color-bg-canvas: var(--eds-color-success-1);
   --eds-color-bg-surface: var(--eds-color-success-2);
   --eds-color-border-subtle: var(--eds-color-success-6);
   --eds-color-border-medium: var(--eds-color-success-7);
   --eds-color-border-strong: var(--eds-color-success-8);
+  --eds-color-border-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle: var(--eds-color-success-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-success-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-success-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-success-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/semantic-warning-verbose.css

@@ -6,16 +6,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-warning-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-warning-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-warning-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-warning-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-warning-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-warning-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-warning-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-warning-3);
   --eds-color-bg-canvas: var(--eds-color-warning-1);
   --eds-color-bg-surface: var(--eds-color-warning-2);
   --eds-color-border-subtle: var(--eds-color-warning-6);
   --eds-color-border-medium: var(--eds-color-warning-7);
   --eds-color-border-strong: var(--eds-color-warning-8);
+  --eds-color-border-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle: var(--eds-color-warning-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-warning-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-warning-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-warning-15); /** Text or icons against colored backgrounds */
 }

package/build/css/color/dynamic/variables.css

@@ -12,16 +12,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-neutral-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-neutral-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-neutral-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-neutral-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-neutral-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-neutral-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-canvas: var(--eds-color-neutral-1);
   --eds-color-bg-surface: var(--eds-color-neutral-2);
   --eds-color-border-subtle: var(--eds-color-neutral-6);
   --eds-color-border-medium: var(--eds-color-neutral-7);
   --eds-color-border-strong: var(--eds-color-neutral-8);
+  --eds-color-border-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle: var(--eds-color-neutral-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-neutral-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-neutral-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-neutral-15); /** Text or icons against colored backgrounds */
 }
@@ -34,16 +38,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-accent-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-accent-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-accent-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-accent-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-accent-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-accent-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-accent-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-accent-3);
   --eds-color-bg-canvas: var(--eds-color-accent-1);
   --eds-color-bg-surface: var(--eds-color-accent-2);
   --eds-color-border-subtle: var(--eds-color-accent-6);
   --eds-color-border-medium: var(--eds-color-accent-7);
   --eds-color-border-strong: var(--eds-color-accent-8);
+  --eds-color-border-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle: var(--eds-color-accent-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-accent-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-accent-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-accent-15); /** Text or icons against colored backgrounds */
 }
@@ -56,16 +64,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-danger-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-danger-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-danger-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-danger-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-danger-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-danger-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-danger-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-danger-3);
   --eds-color-bg-canvas: var(--eds-color-danger-1);
   --eds-color-bg-surface: var(--eds-color-danger-2);
   --eds-color-border-subtle: var(--eds-color-danger-6);
   --eds-color-border-medium: var(--eds-color-danger-7);
   --eds-color-border-strong: var(--eds-color-danger-8);
+  --eds-color-border-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle: var(--eds-color-danger-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-danger-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-danger-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-danger-15); /** Text or icons against colored backgrounds */
 }
@@ -78,16 +90,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-info-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-info-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-info-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-info-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-info-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-info-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-info-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-info-3);
   --eds-color-bg-canvas: var(--eds-color-info-1);
   --eds-color-bg-surface: var(--eds-color-info-2);
   --eds-color-border-subtle: var(--eds-color-info-6);
   --eds-color-border-medium: var(--eds-color-info-7);
   --eds-color-border-strong: var(--eds-color-info-8);
+  --eds-color-border-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle: var(--eds-color-info-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-info-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-info-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-info-15); /** Text or icons against colored backgrounds */
 }
@@ -100,16 +116,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-success-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-success-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-success-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-success-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-success-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-success-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-success-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-success-3);
   --eds-color-bg-canvas: var(--eds-color-success-1);
   --eds-color-bg-surface: var(--eds-color-success-2);
   --eds-color-border-subtle: var(--eds-color-success-6);
   --eds-color-border-medium: var(--eds-color-success-7);
   --eds-color-border-strong: var(--eds-color-success-8);
+  --eds-color-border-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle: var(--eds-color-success-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-success-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-success-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-success-15); /** Text or icons against colored backgrounds */
 }
@@ -122,16 +142,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-warning-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-warning-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-warning-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-warning-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-warning-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-warning-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-warning-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-warning-3);
   --eds-color-bg-canvas: var(--eds-color-warning-1);
   --eds-color-bg-surface: var(--eds-color-warning-2);
   --eds-color-border-subtle: var(--eds-color-warning-6);
   --eds-color-border-medium: var(--eds-color-warning-7);
   --eds-color-border-strong: var(--eds-color-warning-8);
+  --eds-color-border-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle: var(--eds-color-warning-12); /** Used for text and icons */
   --eds-color-text-strong: var(--eds-color-warning-13); /** Used for text and icons */
+  --eds-color-text-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-warning-14); /** Text or icons against colored backgrounds */
   --eds-color-text-strong-on-emphasis: var(--eds-color-warning-15); /** Text or icons against colored backgrounds */
 }

package/build/css/variables.css

@@ -12,6 +12,9 @@
   --eds-color-bg-input: light-dark(#f5f5f5, #0b0b0b);
   --eds-color-border-focus: light-dark(#6fb6e9, #2d8bc5);
   --eds-color-text-link: light-dark(#0070a9, #5abbfb);
+  --eds-color-bg-disabled: light-dark(#e1e1e1, #525c65);
+  --eds-color-border-disabled: light-dark(#aeaeae, #738696);
+  --eds-color-text-disabled: light-dark(#aeaeae, #738696);
   --eds-color-accent-1: light-dark(#eaf8fa, #0a0b0b);
   --eds-color-accent-2: light-dark(#f6ffff, #1e2323);
   --eds-color-accent-3: light-dark(#cfe7e9, #3c6266);
@@ -198,16 +201,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-neutral-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-neutral-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-neutral-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-neutral-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-neutral-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-neutral-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-neutral-3);
   --eds-color-bg-canvas: var(--eds-color-neutral-1);
   --eds-color-bg-surface: var(--eds-color-neutral-2);
   --eds-color-border-subtle: var(--eds-color-neutral-6);
   --eds-color-border-medium: var(--eds-color-neutral-7);
   --eds-color-border-strong: var(--eds-color-neutral-8);
+  --eds-color-border-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle: var(--eds-color-neutral-12);
   --eds-color-text-strong: var(--eds-color-neutral-13);
+  --eds-color-text-disabled: var(--eds-color-neutral-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-neutral-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-neutral-15);
 }
@@ -216,16 +223,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-accent-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-accent-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-accent-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-accent-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-accent-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-accent-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-accent-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-accent-3);
   --eds-color-bg-canvas: var(--eds-color-accent-1);
   --eds-color-bg-surface: var(--eds-color-accent-2);
   --eds-color-border-subtle: var(--eds-color-accent-6);
   --eds-color-border-medium: var(--eds-color-accent-7);
   --eds-color-border-strong: var(--eds-color-accent-8);
+  --eds-color-border-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle: var(--eds-color-accent-12);
   --eds-color-text-strong: var(--eds-color-accent-13);
+  --eds-color-text-disabled: var(--eds-color-accent-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-accent-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-accent-15);
 }
@@ -234,16 +245,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-danger-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-danger-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-danger-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-danger-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-danger-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-danger-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-danger-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-danger-3);
   --eds-color-bg-canvas: var(--eds-color-danger-1);
   --eds-color-bg-surface: var(--eds-color-danger-2);
   --eds-color-border-subtle: var(--eds-color-danger-6);
   --eds-color-border-medium: var(--eds-color-danger-7);
   --eds-color-border-strong: var(--eds-color-danger-8);
+  --eds-color-border-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle: var(--eds-color-danger-12);
   --eds-color-text-strong: var(--eds-color-danger-13);
+  --eds-color-text-disabled: var(--eds-color-danger-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-danger-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-danger-15);
 }
@@ -252,16 +267,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-info-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-info-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-info-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-info-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-info-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-info-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-info-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-info-3);
   --eds-color-bg-canvas: var(--eds-color-info-1);
   --eds-color-bg-surface: var(--eds-color-info-2);
   --eds-color-border-subtle: var(--eds-color-info-6);
   --eds-color-border-medium: var(--eds-color-info-7);
   --eds-color-border-strong: var(--eds-color-info-8);
+  --eds-color-border-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle: var(--eds-color-info-12);
   --eds-color-text-strong: var(--eds-color-info-13);
+  --eds-color-text-disabled: var(--eds-color-info-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-info-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-info-15);
 }
@@ -270,16 +289,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-success-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-success-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-success-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-success-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-success-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-success-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-success-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-success-3);
   --eds-color-bg-canvas: var(--eds-color-success-1);
   --eds-color-bg-surface: var(--eds-color-success-2);
   --eds-color-border-subtle: var(--eds-color-success-6);
   --eds-color-border-medium: var(--eds-color-success-7);
   --eds-color-border-strong: var(--eds-color-success-8);
+  --eds-color-border-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle: var(--eds-color-success-12);
   --eds-color-text-strong: var(--eds-color-success-13);
+  --eds-color-text-disabled: var(--eds-color-success-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-success-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-success-15);
 }
@@ -288,16 +311,20 @@
   --eds-color-bg-fill-muted-default: var(--eds-color-warning-3);
   --eds-color-bg-fill-muted-hover: var(--eds-color-warning-4);
   --eds-color-bg-fill-muted-active: var(--eds-color-warning-5);
+  --eds-color-bg-fill-muted-disabled: var(--eds-color-warning-3);
   --eds-color-bg-fill-emphasis-default: var(--eds-color-warning-9);
   --eds-color-bg-fill-emphasis-hover: var(--eds-color-warning-10);
   --eds-color-bg-fill-emphasis-active: var(--eds-color-warning-11);
+  --eds-color-bg-fill-emphasis-disabled: var(--eds-color-warning-3);
   --eds-color-bg-canvas: var(--eds-color-warning-1);
   --eds-color-bg-surface: var(--eds-color-warning-2);
   --eds-color-border-subtle: var(--eds-color-warning-6);
   --eds-color-border-medium: var(--eds-color-warning-7);
   --eds-color-border-strong: var(--eds-color-warning-8);
+  --eds-color-border-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle: var(--eds-color-warning-12);
   --eds-color-text-strong: var(--eds-color-warning-13);
+  --eds-color-text-disabled: var(--eds-color-warning-7);
   --eds-color-text-subtle-on-emphasis: var(--eds-color-warning-14);
   --eds-color-text-strong-on-emphasis: var(--eds-color-warning-15);
 }