@equinor/eds-tokens 2.2.0 → 2.3.0-beta.1

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/dark-semantic-trimmed.css

@@ -51,6 +51,10 @@
   --eds-color-bg-danger-fill-emphasis-default: #ffa3a1;
   --eds-color-bg-danger-fill-emphasis-hover: #ffc1bf;
   --eds-color-bg-danger-fill-emphasis-active: #ffd9d7;
+  --eds-color-bg-floating: #202223;
+  --eds-color-bg-backdrop: #738696;
+  --eds-color-bg-input: #0b0b0b;
+  --eds-color-bg-disabled: #525c65;
   --eds-color-border-neutral-subtle: #525c65;
   --eds-color-border-neutral-medium: #738696;
   --eds-color-border-neutral-strong: #9fb4c6;
@@ -69,6 +73,8 @@
   --eds-color-border-danger-subtle: #923a3c;
   --eds-color-border-danger-medium: #e53748;
   --eds-color-border-danger-strong: #ff8082;
+  --eds-color-border-focus: #2d8bc5;
+  --eds-color-border-disabled: #738696;
   --eds-color-text-neutral-subtle: #d6e3ee; /** Used for text and icons */
   --eds-color-text-neutral-strong: #f5fdff; /** Used for text and icons */
   --eds-color-text-neutral-subtle-on-emphasis: #333639; /** Text or icons against colored backgrounds */
@@ -93,4 +99,6 @@
   --eds-color-text-danger-strong: #fff5f4; /** Used for text and icons */
   --eds-color-text-danger-subtle-on-emphasis: #492d2c; /** Text or icons against colored backgrounds */
   --eds-color-text-danger-strong-on-emphasis: #040303; /** Text or icons against colored backgrounds */
+  --eds-color-text-link: #5abbfb;
+  --eds-color-text-disabled: #738696;
 }

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

@@ -51,6 +51,10 @@
   --eds-color-bg-danger-fill-emphasis-default: #bc002a;
   --eds-color-bg-danger-fill-emphasis-hover: #9a1026;
   --eds-color-bg-danger-fill-emphasis-active: #8e1525;
+  --eds-color-bg-floating: #ffffff;
+  --eds-color-bg-backdrop: #aeaeae;
+  --eds-color-bg-input: #f5f5f5;
+  --eds-color-bg-disabled: #e1e1e1;
   --eds-color-border-neutral-subtle: #d4d4d4;
   --eds-color-border-neutral-medium: #aeaeae;
   --eds-color-border-neutral-strong: #696969;
@@ -69,6 +73,8 @@
   --eds-color-border-danger-subtle: #ffbcba;
   --eds-color-border-danger-medium: #ff7a7d;
   --eds-color-border-danger-strong: #c6002d;
+  --eds-color-border-focus: #6fb6e9;
+  --eds-color-border-disabled: #aeaeae;
   --eds-color-text-neutral-subtle: #585858; /** Used for text and icons */
   --eds-color-text-neutral-strong: #1d1d1d; /** Used for text and icons */
   --eds-color-text-neutral-subtle-on-emphasis: #dedede; /** Text or icons against colored backgrounds */
@@ -93,4 +99,6 @@
   --eds-color-text-danger-strong: #2e1414; /** Used for text and icons */
   --eds-color-text-danger-subtle-on-emphasis: #ffcbc9; /** Text or icons against colored backgrounds */
   --eds-color-text-danger-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-link: #0070a9;
+  --eds-color-text-disabled: #aeaeae;
 }

package/build/css/color/static/semantic-verbose.css

@@ -51,6 +51,9 @@
   --eds-color-bg-danger-fill-emphasis-default: var(--eds-color-danger-9);
   --eds-color-bg-danger-fill-emphasis-hover: var(--eds-color-danger-10);
   --eds-color-bg-danger-fill-emphasis-active: var(--eds-color-danger-11);
+  --eds-color-bg-floating: var(--eds-color-bg-floating);
+  --eds-color-bg-backdrop: var(--eds-color-bg-backdrop);
+  --eds-color-bg-input: var(--eds-color-bg-input);
   --eds-color-border-neutral-subtle: var(--eds-color-neutral-6);
   --eds-color-border-neutral-medium: var(--eds-color-neutral-7);
   --eds-color-border-neutral-strong: var(--eds-color-neutral-8);
@@ -69,6 +72,7 @@
   --eds-color-border-danger-subtle: var(--eds-color-danger-6);
   --eds-color-border-danger-medium: var(--eds-color-danger-7);
   --eds-color-border-danger-strong: var(--eds-color-danger-8);
+  --eds-color-border-focus: var(--eds-color-border-focus);
   --eds-color-text-neutral-subtle: var(--eds-color-neutral-12); /** Used for text and icons */
   --eds-color-text-neutral-strong: var(--eds-color-neutral-13); /** Used for text and icons */
   --eds-color-text-neutral-subtle-on-emphasis: var(--eds-color-neutral-14); /** Text or icons against colored backgrounds */
@@ -93,4 +97,8 @@
   --eds-color-text-danger-strong: var(--eds-color-danger-13); /** Used for text and icons */
   --eds-color-text-danger-subtle-on-emphasis: var(--eds-color-danger-14); /** Text or icons against colored backgrounds */
   --eds-color-text-danger-strong-on-emphasis: var(--eds-color-danger-15); /** Text or icons against colored backgrounds */
+  --eds-color-text-link: var(--eds-color-text-link);
+  --eds-color-bg-disabled: var(--eds-color-bg-disabled);
+  --eds-color-border-disabled: var(--eds-color-border-disabled);
+  --eds-color-text-disabled: var(--eds-color-text-disabled);
 }

package/build/css/color/static/variables.css

@@ -52,6 +52,9 @@
   --eds-color-bg-danger-fill-emphasis-default: var(--eds-color-danger-9);
   --eds-color-bg-danger-fill-emphasis-hover: var(--eds-color-danger-10);
   --eds-color-bg-danger-fill-emphasis-active: var(--eds-color-danger-11);
+  --eds-color-bg-floating: var(--eds-color-bg-floating);
+  --eds-color-bg-backdrop: var(--eds-color-bg-backdrop);
+  --eds-color-bg-input: var(--eds-color-bg-input);
   --eds-color-border-neutral-subtle: var(--eds-color-neutral-6);
   --eds-color-border-neutral-medium: var(--eds-color-neutral-7);
   --eds-color-border-neutral-strong: var(--eds-color-neutral-8);
@@ -70,6 +73,7 @@
   --eds-color-border-danger-subtle: var(--eds-color-danger-6);
   --eds-color-border-danger-medium: var(--eds-color-danger-7);
   --eds-color-border-danger-strong: var(--eds-color-danger-8);
+  --eds-color-border-focus: var(--eds-color-border-focus);
   --eds-color-text-neutral-subtle: var(--eds-color-neutral-12); /** Used for text and icons */
   --eds-color-text-neutral-strong: var(--eds-color-neutral-13); /** Used for text and icons */
   --eds-color-text-neutral-subtle-on-emphasis: var(--eds-color-neutral-14); /** Text or icons against colored backgrounds */
@@ -94,4 +98,8 @@
   --eds-color-text-danger-strong: var(--eds-color-danger-13); /** Used for text and icons */
   --eds-color-text-danger-subtle-on-emphasis: var(--eds-color-danger-14); /** Text or icons against colored backgrounds */
   --eds-color-text-danger-strong-on-emphasis: var(--eds-color-danger-15); /** Text or icons against colored backgrounds */
+  --eds-color-text-link: var(--eds-color-text-link);
+  --eds-color-bg-disabled: var(--eds-color-bg-disabled);
+  --eds-color-border-disabled: var(--eds-color-border-disabled);
+  --eds-color-text-disabled: var(--eds-color-text-disabled);
 }

package/build/js/color/color-scheme/dark-semantic.d.ts

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE: string;
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT: string;
 export const BG_DANGER_FILL_EMPHASIS_HOVER: string;
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE: string;
+export const BG_FLOATING: string;
+export const BG_BACKDROP: string;
+export const BG_INPUT: string;
+export const BG_DISABLED: string;
 export const BORDER_NEUTRAL_SUBTLE: string;
 export const BORDER_NEUTRAL_MEDIUM: string;
 export const BORDER_NEUTRAL_STRONG: string;
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG: string;
 export const BORDER_DANGER_SUBTLE: string;
 export const BORDER_DANGER_MEDIUM: string;
 export const BORDER_DANGER_STRONG: string;
+export const BORDER_FOCUS: string;
+export const BORDER_DISABLED: string;
 /** Used for text and icons */
 export const TEXT_NEUTRAL_SUBTLE: string;
 /** Used for text and icons */
@@ -116,3 +122,5 @@ export const TEXT_DANGER_STRONG: string;
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS: string;
 /** Text or icons against colored backgrounds */
 export const TEXT_DANGER_STRONG_ON_EMPHASIS: string;
+export const TEXT_LINK: string;
+export const TEXT_DISABLED: string;

package/build/js/color/color-scheme/dark-semantic.js

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE = "#d43745";
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT = "#ffa3a1";
 export const BG_DANGER_FILL_EMPHASIS_HOVER = "#ffc1bf";
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE = "#ffd9d7";
+export const BG_FLOATING = "#202223";
+export const BG_BACKDROP = "#738696";
+export const BG_INPUT = "#0b0b0b";
+export const BG_DISABLED = "#525c65";
 export const BORDER_NEUTRAL_SUBTLE = "#525c65";
 export const BORDER_NEUTRAL_MEDIUM = "#738696";
 export const BORDER_NEUTRAL_STRONG = "#9fb4c6";
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG = "#f99539";
 export const BORDER_DANGER_SUBTLE = "#923a3c";
 export const BORDER_DANGER_MEDIUM = "#e53748";
 export const BORDER_DANGER_STRONG = "#ff8082";
+export const BORDER_FOCUS = "#2d8bc5";
+export const BORDER_DISABLED = "#738696";
 export const TEXT_NEUTRAL_SUBTLE = "#d6e3ee"; // Used for text and icons
 export const TEXT_NEUTRAL_STRONG = "#f5fdff"; // Used for text and icons
 export const TEXT_NEUTRAL_SUBTLE_ON_EMPHASIS = "#333639"; // Text or icons against colored backgrounds
@@ -92,3 +98,5 @@ export const TEXT_DANGER_SUBTLE = "#ffd0ce"; // Used for text and icons
 export const TEXT_DANGER_STRONG = "#fff5f4"; // Used for text and icons
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS = "#492d2c"; // Text or icons against colored backgrounds
 export const TEXT_DANGER_STRONG_ON_EMPHASIS = "#040303"; // Text or icons against colored backgrounds
+export const TEXT_LINK = "#5abbfb";
+export const TEXT_DISABLED = "#738696";

package/build/js/color/color-scheme/light-semantic.d.ts

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE: string;
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT: string;
 export const BG_DANGER_FILL_EMPHASIS_HOVER: string;
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE: string;
+export const BG_FLOATING: string;
+export const BG_BACKDROP: string;
+export const BG_INPUT: string;
+export const BG_DISABLED: string;
 export const BORDER_NEUTRAL_SUBTLE: string;
 export const BORDER_NEUTRAL_MEDIUM: string;
 export const BORDER_NEUTRAL_STRONG: string;
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG: string;
 export const BORDER_DANGER_SUBTLE: string;
 export const BORDER_DANGER_MEDIUM: string;
 export const BORDER_DANGER_STRONG: string;
+export const BORDER_FOCUS: string;
+export const BORDER_DISABLED: string;
 /** Used for text and icons */
 export const TEXT_NEUTRAL_SUBTLE: string;
 /** Used for text and icons */
@@ -116,3 +122,5 @@ export const TEXT_DANGER_STRONG: string;
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS: string;
 /** Text or icons against colored backgrounds */
 export const TEXT_DANGER_STRONG_ON_EMPHASIS: string;
+export const TEXT_LINK: string;
+export const TEXT_DISABLED: string;

package/build/js/color/color-scheme/light-semantic.js

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE = "#ffa3a1";
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT = "#bc002a";
 export const BG_DANGER_FILL_EMPHASIS_HOVER = "#9a1026";
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE = "#8e1525";
+export const BG_FLOATING = "#ffffff";
+export const BG_BACKDROP = "#aeaeae";
+export const BG_INPUT = "#f5f5f5";
+export const BG_DISABLED = "#e1e1e1";
 export const BORDER_NEUTRAL_SUBTLE = "#d4d4d4";
 export const BORDER_NEUTRAL_MEDIUM = "#aeaeae";
 export const BORDER_NEUTRAL_STRONG = "#696969";
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG = "#a34e00";
 export const BORDER_DANGER_SUBTLE = "#ffbcba";
 export const BORDER_DANGER_MEDIUM = "#ff7a7d";
 export const BORDER_DANGER_STRONG = "#c6002d";
+export const BORDER_FOCUS = "#6fb6e9";
+export const BORDER_DISABLED = "#aeaeae";
 export const TEXT_NEUTRAL_SUBTLE = "#585858"; // Used for text and icons
 export const TEXT_NEUTRAL_STRONG = "#1d1d1d"; // Used for text and icons
 export const TEXT_NEUTRAL_SUBTLE_ON_EMPHASIS = "#dedede"; // Text or icons against colored backgrounds
@@ -92,3 +98,5 @@ export const TEXT_DANGER_SUBTLE = "#a50827"; // Used for text and icons
 export const TEXT_DANGER_STRONG = "#2e1414"; // Used for text and icons
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS = "#ffcbc9"; // Text or icons against colored backgrounds
 export const TEXT_DANGER_STRONG_ON_EMPHASIS = "#ffffff"; // Text or icons against colored backgrounds
+export const TEXT_LINK = "#0070a9";
+export const TEXT_DISABLED = "#aeaeae";

package/build/js/color/static/semantic.d.ts

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE: string;
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT: string;
 export const BG_DANGER_FILL_EMPHASIS_HOVER: string;
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE: string;
+export const BG_FLOATING: string;
+export const BG_BACKDROP: string;
+export const BG_INPUT: string;
+export const BG_DISABLED: string;
 export const BORDER_NEUTRAL_SUBTLE: string;
 export const BORDER_NEUTRAL_MEDIUM: string;
 export const BORDER_NEUTRAL_STRONG: string;
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG: string;
 export const BORDER_DANGER_SUBTLE: string;
 export const BORDER_DANGER_MEDIUM: string;
 export const BORDER_DANGER_STRONG: string;
+export const BORDER_FOCUS: string;
+export const BORDER_DISABLED: string;
 /** Used for text and icons */
 export const TEXT_NEUTRAL_SUBTLE: string;
 /** Used for text and icons */
@@ -116,3 +122,5 @@ export const TEXT_DANGER_STRONG: string;
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS: string;
 /** Text or icons against colored backgrounds */
 export const TEXT_DANGER_STRONG_ON_EMPHASIS: string;
+export const TEXT_LINK: string;
+export const TEXT_DISABLED: string;

package/build/js/color/static/semantic.js

@@ -50,6 +50,10 @@ export const BG_DANGER_FILL_MUTED_ACTIVE = "#ffa3a1";
 export const BG_DANGER_FILL_EMPHASIS_DEFAULT = "#bc002a";
 export const BG_DANGER_FILL_EMPHASIS_HOVER = "#9a1026";
 export const BG_DANGER_FILL_EMPHASIS_ACTIVE = "#8e1525";
+export const BG_FLOATING = "#ffffff";
+export const BG_BACKDROP = "#aeaeae";
+export const BG_INPUT = "#f5f5f5";
+export const BG_DISABLED = "#e1e1e1";
 export const BORDER_NEUTRAL_SUBTLE = "#d4d4d4";
 export const BORDER_NEUTRAL_MEDIUM = "#aeaeae";
 export const BORDER_NEUTRAL_STRONG = "#696969";
@@ -68,6 +72,8 @@ export const BORDER_WARNING_STRONG = "#a34e00";
 export const BORDER_DANGER_SUBTLE = "#ffbcba";
 export const BORDER_DANGER_MEDIUM = "#ff7a7d";
 export const BORDER_DANGER_STRONG = "#c6002d";
+export const BORDER_FOCUS = "#6fb6e9";
+export const BORDER_DISABLED = "#aeaeae";
 export const TEXT_NEUTRAL_SUBTLE = "#585858"; // Used for text and icons
 export const TEXT_NEUTRAL_STRONG = "#1d1d1d"; // Used for text and icons
 export const TEXT_NEUTRAL_SUBTLE_ON_EMPHASIS = "#dedede"; // Text or icons against colored backgrounds
@@ -92,3 +98,5 @@ export const TEXT_DANGER_SUBTLE = "#a50827"; // Used for text and icons
 export const TEXT_DANGER_STRONG = "#2e1414"; // Used for text and icons
 export const TEXT_DANGER_SUBTLE_ON_EMPHASIS = "#ffcbc9"; // Text or icons against colored backgrounds
 export const TEXT_DANGER_STRONG_ON_EMPHASIS = "#ffffff"; // Text or icons against colored backgrounds
+export const TEXT_LINK = "#0070a9";
+export const TEXT_DISABLED = "#aeaeae";

package/build/js/spacing/comfortable.d.ts

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION: string;
 export const SIZING_ICON_XS: number;
 export const SIZING_ICON_XS_CONTAINER: number;
 export const SIZING_ICON_SM: number;

package/build/js/spacing/comfortable.js

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION = "Comfortable";
 export const SIZING_ICON_XS = 14;
 export const SIZING_ICON_XS_CONTAINER = 8;
 export const SIZING_ICON_SM = 16;

package/build/js/spacing/spacious.d.ts

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION: string;
 export const SIZING_ICON_XS: number;
 export const SIZING_ICON_XS_CONTAINER: number;
 export const SIZING_ICON_SM: number;

package/build/js/spacing/spacious.js

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION = "Spacious";
 export const SIZING_ICON_XS = 16;
 export const SIZING_ICON_XS_CONTAINER = 8;
 export const SIZING_ICON_SM = 18;

package/build/json/color/color-scheme/flat/dark-semantic.json

@@ -47,6 +47,10 @@
   "bg-danger-fill-emphasis-default": "#ffa3a1",
   "bg-danger-fill-emphasis-hover": "#ffc1bf",
   "bg-danger-fill-emphasis-active": "#ffd9d7",
+  "bg-floating": "#202223",
+  "bg-backdrop": "#738696",
+  "bg-input": "#0b0b0b",
+  "bg-disabled": "#525c65",
   "border-neutral-subtle": "#525c65",
   "border-neutral-medium": "#738696",
   "border-neutral-strong": "#9fb4c6",
@@ -65,6 +69,8 @@
   "border-danger-subtle": "#923a3c",
   "border-danger-medium": "#e53748",
   "border-danger-strong": "#ff8082",
+  "border-focus": "#2d8bc5",
+  "border-disabled": "#738696",
   "text-neutral-subtle": "#d6e3ee",
   "text-neutral-strong": "#f5fdff",
   "text-neutral-subtle-on-emphasis": "#333639",
@@ -88,5 +94,7 @@
   "text-danger-subtle": "#ffd0ce",
   "text-danger-strong": "#fff5f4",
   "text-danger-subtle-on-emphasis": "#492d2c",
-  "text-danger-strong-on-emphasis": "#040303"
+  "text-danger-strong-on-emphasis": "#040303",
+  "text-link": "#5abbfb",
+  "text-disabled": "#738696"
 }

package/build/json/color/color-scheme/flat/light-semantic.json

@@ -47,6 +47,10 @@
   "bg-danger-fill-emphasis-default": "#bc002a",
   "bg-danger-fill-emphasis-hover": "#9a1026",
   "bg-danger-fill-emphasis-active": "#8e1525",
+  "bg-floating": "#ffffff",
+  "bg-backdrop": "#aeaeae",
+  "bg-input": "#f5f5f5",
+  "bg-disabled": "#e1e1e1",
   "border-neutral-subtle": "#d4d4d4",
   "border-neutral-medium": "#aeaeae",
   "border-neutral-strong": "#696969",
@@ -65,6 +69,8 @@
   "border-danger-subtle": "#ffbcba",
   "border-danger-medium": "#ff7a7d",
   "border-danger-strong": "#c6002d",
+  "border-focus": "#6fb6e9",
+  "border-disabled": "#aeaeae",
   "text-neutral-subtle": "#585858",
   "text-neutral-strong": "#1d1d1d",
   "text-neutral-subtle-on-emphasis": "#dedede",
@@ -88,5 +94,7 @@
   "text-danger-subtle": "#a50827",
   "text-danger-strong": "#2e1414",
   "text-danger-subtle-on-emphasis": "#ffcbc9",
-  "text-danger-strong-on-emphasis": "#ffffff"
+  "text-danger-strong-on-emphasis": "#ffffff",
+  "text-link": "#0070a9",
+  "text-disabled": "#aeaeae"
 }

package/build/json/color/color-scheme/nested/dark-semantic.json

@@ -83,7 +83,11 @@
         "Hover": "#ffc1bf",
         "Active": "#ffd9d7"
       }
-    }
+    },
+    "Floating": "#202223",
+    "Backdrop": "#738696",
+    "Input": "#0b0b0b",
+    "Disabled": "#525c65"
   },
   "Border": {
     "Neutral": {
@@ -115,7 +119,9 @@
       "Subtle": "#923a3c",
       "Medium": "#e53748",
       "Strong": "#ff8082"
-    }
+    },
+    "Focus": "#2d8bc5",
+    "Disabled": "#738696"
   },
   "Text": {
     "Neutral": {
@@ -153,6 +159,8 @@
       "Strong": "#fff5f4",
       "Subtle on emphasis": "#492d2c",
       "Strong on emphasis": "#040303"
-    }
+    },
+    "Link": "#5abbfb",
+    "Disabled": "#738696"
   }
 }

package/build/json/color/color-scheme/nested/light-semantic.json

@@ -83,7 +83,11 @@
         "Hover": "#9a1026",
         "Active": "#8e1525"
       }
-    }
+    },
+    "Floating": "#ffffff",
+    "Backdrop": "#aeaeae",
+    "Input": "#f5f5f5",
+    "Disabled": "#e1e1e1"
   },
   "Border": {
     "Neutral": {
@@ -115,7 +119,9 @@
       "Subtle": "#ffbcba",
       "Medium": "#ff7a7d",
       "Strong": "#c6002d"
-    }
+    },
+    "Focus": "#6fb6e9",
+    "Disabled": "#aeaeae"
   },
   "Text": {
     "Neutral": {
@@ -153,6 +159,8 @@
       "Strong": "#2e1414",
       "Subtle on emphasis": "#ffcbc9",
       "Strong on emphasis": "#ffffff"
-    }
+    },
+    "Link": "#0070a9",
+    "Disabled": "#aeaeae"
   }
 }

package/build/json/color/static/flat/semantic.json

@@ -47,6 +47,10 @@
   "bg-danger-fill-emphasis-default": "#bc002a",
   "bg-danger-fill-emphasis-hover": "#9a1026",
   "bg-danger-fill-emphasis-active": "#8e1525",
+  "bg-floating": "#ffffff",
+  "bg-backdrop": "#aeaeae",
+  "bg-input": "#f5f5f5",
+  "bg-disabled": "#e1e1e1",
   "border-neutral-subtle": "#d4d4d4",
   "border-neutral-medium": "#aeaeae",
   "border-neutral-strong": "#696969",
@@ -65,6 +69,8 @@
   "border-danger-subtle": "#ffbcba",
   "border-danger-medium": "#ff7a7d",
   "border-danger-strong": "#c6002d",
+  "border-focus": "#6fb6e9",
+  "border-disabled": "#aeaeae",
   "text-neutral-subtle": "#585858",
   "text-neutral-strong": "#1d1d1d",
   "text-neutral-subtle-on-emphasis": "#dedede",
@@ -88,5 +94,7 @@
   "text-danger-subtle": "#a50827",
   "text-danger-strong": "#2e1414",
   "text-danger-subtle-on-emphasis": "#ffcbc9",
-  "text-danger-strong-on-emphasis": "#ffffff"
+  "text-danger-strong-on-emphasis": "#ffffff",
+  "text-link": "#0070a9",
+  "text-disabled": "#aeaeae"
 }

package/build/json/color/static/nested/semantic.json

@@ -83,7 +83,11 @@
         "Hover": "#9a1026",
         "Active": "#8e1525"
       }
-    }
+    },
+    "Floating": "#ffffff",
+    "Backdrop": "#aeaeae",
+    "Input": "#f5f5f5",
+    "Disabled": "#e1e1e1"
   },
   "Border": {
     "Neutral": {
@@ -115,7 +119,9 @@
       "Subtle": "#ffbcba",
       "Medium": "#ff7a7d",
       "Strong": "#c6002d"
-    }
+    },
+    "Focus": "#6fb6e9",
+    "Disabled": "#aeaeae"
   },
   "Text": {
     "Neutral": {
@@ -153,6 +159,8 @@
       "Strong": "#2e1414",
       "Subtle on emphasis": "#ffcbc9",
       "Strong on emphasis": "#ffffff"
-    }
+    },
+    "Link": "#0070a9",
+    "Disabled": "#aeaeae"
   }
 }

package/build/ts/color/color-scheme/dark-color-scheme.ts

@@ -0,0 +1,116 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const color = {
+  bgFloating: '#202223',
+  bgBackdrop: '#738696',
+  bgInput: '#0b0b0b',
+  borderFocus: '#2d8bc5',
+  textLink: '#5abbfb',
+  bgDisabled: '#525c65',
+  borderDisabled: '#738696',
+  textDisabled: '#738696',
+  accent: {
+    '1': '#0a0b0b',
+    '2': '#1e2323',
+    '3': '#3c6266',
+    '4': '#3e7378',
+    '5': '#41878e',
+    '6': '#3c6266',
+    '7': '#439199',
+    '8': '#6ec0c9',
+    '9': '#8cd2da',
+    '10': '#ace3e9',
+    '11': '#c7f1f6',
+    '12': '#bcebf1',
+    '13': '#e6ffff',
+    '14': '#2c3839',
+    '15': '#030303',
+  },
+  neutral: {
+    '1': '#0b0b0b',
+    '2': '#202223',
+    '3': '#525c65',
+    '4': '#5d6b76',
+    '5': '#6b7d8b',
+    '6': '#525c65',
+    '7': '#738696',
+    '8': '#9fb4c6',
+    '9': '#b4c7d7',
+    '10': '#cadae7',
+    '11': '#deeaf4',
+    '12': '#d6e3ee',
+    '13': '#f5fdff',
+    '14': '#333639',
+    '15': '#030303',
+  },
+  info: {
+    '1': '#0a0b0c',
+    '2': '#1d2226',
+    '3': '#33607e',
+    '4': '#316f98',
+    '5': '#2e82b7',
+    '6': '#33607e',
+    '7': '#2d8bc5',
+    '8': '#5abbfb',
+    '9': '#7dceff',
+    '10': '#a2e0ff',
+    '11': '#c4eeff',
+    '12': '#b7e8ff',
+    '13': '#ecffff',
+    '14': '#2a3741',
+    '15': '#030304',
+  },
+  success: {
+    '1': '#0a0c0a',
+    '2': '#1e231e',
+    '3': '#3c673a',
+    '4': '#3e793c',
+    '5': '#418e3e',
+    '6': '#3c673a',
+    '7': '#439941',
+    '8': '#6eca6a',
+    '9': '#8cdb87',
+    '10': '#aceba8',
+    '11': '#c7f7c3',
+    '12': '#bcf2b8',
+    '13': '#e6ffe3',
+    '14': '#2c392b',
+    '15': '#030303',
+  },
+  warning: {
+    '1': '#0c0b0a',
+    '2': '#27201b',
+    '3': '#7e4e25',
+    '4': '#97571b',
+    '5': '#b46201',
+    '6': '#7e4e25',
+    '7': '#c36800',
+    '8': '#f99539',
+    '9': '#ffad63',
+    '10': '#ffc791',
+    '11': '#ffddb9',
+    '12': '#ffd4aa',
+    '13': '#fff7e6',
+    '14': '#413226',
+    '15': '#040303',
+  },
+  danger: {
+    '1': '#0d0a0a',
+    '2': '#2a1e1e',
+    '3': '#923a3c',
+    '4': '#b03940',
+    '5': '#d43745',
+    '6': '#923a3c',
+    '7': '#e53748',
+    '8': '#ff8082',
+    '9': '#ffa3a1',
+    '10': '#ffc1bf',
+    '11': '#ffd9d7',
+    '12': '#ffd0ce',
+    '13': '#fff5f4',
+    '14': '#492d2c',
+    '15': '#040303',
+  },
+} as const