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

package/README.md

@@ -22,7 +22,27 @@ The package provides two token systems:
 
 ## CSS Variables (Recommended)
 
-The new token system uses CSS custom properties that automatically adapt to light and dark color schemes using the modern `light-dark()` function. These tokens are directly synced from Figma variables.
+The new token system uses CSS custom properties that automatically adapt to light and dark color schemes via explicit `[data-color-scheme]` scope rules with a `prefers-color-scheme` media-query fallback. These tokens are directly synced from Figma variables.
+
+### Dark mode
+
+Dual-mode color tokens are emitted as explicit scope rules in the published `variables.min.css`:
+
+```css
+:root              { --eds-color-bg-floating: #fff; }
+[data-color-scheme="light"] { --eds-color-bg-floating: #fff; }
+[data-color-scheme="dark"]  { --eds-color-bg-floating: #202223; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]) {
+    --eds-color-bg-floating: #202223;
+  }
+}
+```
+
+The published CSS does **not** use the `light-dark()` CSS function. This is deliberate: `light-dark()` is correct in source CSS, but downstream bundlers (Vite 8 + Rolldown + lightningcss, esbuild with legacy targets, postcss with certain presets) may polyfill it into a `var()` pattern that does not work for subtree-scoped dark mode. Emitting explicit scope rules is robust against any downstream CSS pipeline regardless of how it is configured.
+
+To enable dark mode for a subtree, set `data-color-scheme="dark"` on a wrapper element. To opt out of system dark mode for a subtree, set `data-color-scheme="light"`.
 
 ### Using CSS Variables in CSS
 
@@ -94,6 +114,37 @@ const padding = comfortableSpacing.SPACING_INLINE_MD
 const borderRadius = comfortableSpacing.SPACING_BORDER_RADIUS_ROUNDED
 ```
 
+#### Typography (non-CSS targets)
+
+Typography is composed at runtime from five orthogonal axes. The CSS bundle resolves them via `data-*` attributes; non-CSS consumers (React Native, SSR, design tooling) import the family-keyed matrix directly:
+
+```typescript
+import { typography as ui } from '@equinor/eds-tokens/ts/typography/font-family-ui'
+import { typography as header } from '@equinor/eds-tokens/ts/typography/font-family-header'
+
+const md = ui.fontFamilySize.md
+
+const style = {
+  fontFamily: ui.typography.fontFamily,
+  fontSize: md.fontSize,
+  fontWeight: md.fontWeight.normal,
+  lineHeight: md.lineHeight.default,
+  letterSpacing: md.tracking.normal,
+}
+// { fontFamily: 'Inter', fontSize: 14, fontWeight: 400,
+//   lineHeight: 20, letterSpacing: 0 }
+```
+
+Each size cell exposes `fontSize`, nested `fontWeight` / `tracking` / `lineHeight` objects, and inlined `iconSize` / `gapHorizontal` / `gapVertical` extras for chip- and button-like layouts. Variant names can be derived with `keyof`:
+
+```typescript
+type Weight = keyof typeof ui.fontFamilySize.md.fontWeight // 'lighter' | 'normal' | 'bolder'
+```
+
+For React Native, coerce `fontWeight` to a string at the call site (`String(md.fontWeight.normal)`) so it slots into `<Text style>`.
+
+See [`instructions/typography.md`](./instructions/typography.md) for the full axis model.
+
 ### Importing variables as JSON
 
 The variables are available in two formats:
@@ -147,7 +198,7 @@ The typography system requires two font families: **Equinor** (headings) and **I
 
 ### Typography variables that adapt to data-attributes
   * Font family setup (UI and Header fonts)
-  * Font size data attributes (`[data-text-size='xs']`, `[data-text-size='sm']`, etc.)
+  * Font size data attributes (`[data-font-size='xs']`, `[data-font-size='sm']`, etc.)
   * Line height data attributes (`[data-line-height='default']`, `[data-line-height='squished']`)
   * Font weight data attributes (`[data-font-weight='lighter']`, `[data-font-weight='normal']`, `[data-font-weight='bolder']`)
   * Letter spacing data attributes (`[data-tracking='tight']`, `[data-tracking='normal']`, `[data-tracking='wide']`)
@@ -174,17 +225,17 @@ Set typography properties using data attributes:
 
 ```html
 <!-- UI font with medium size -->
-<p data-font-family="ui" data-text-size="md" data-line-height="default">
+<p data-font-family="ui" data-font-size="md" data-line-height="default">
   UI font text
 </p>
 
 <!-- Header font with extra large size and bolder weight -->
-<h1 data-font-family="header" data-text-size="xl" data-font-weight="bolder">
+<h1 data-font-family="header" data-font-size="xl" data-font-weight="bolder">
   Header font text
 </h1>
 
 <!-- Baseline grid alignment -->
-<p data-font-family="ui" data-text-size="md" data-baseline="grid">
+<p data-font-family="ui" data-font-size="md" data-baseline="grid">
   Aligned to 4px baseline grid
 </p>
 ```
@@ -249,7 +300,7 @@ The foundation CSS includes baseline grid alignment for consistent vertical rhyt
 * `data-baseline="center"` -- Centers text vertically while maintaining 4px grid alignment
 
 ```html
-<p data-font-family="ui" data-text-size="md" data-baseline="grid">
+<p data-font-family="ui" data-font-size="md" data-baseline="grid">
   Text aligned to baseline grid
 </p>
 ```

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

@@ -52,9 +52,6 @@
   --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);
@@ -73,7 +70,6 @@
   --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 */
@@ -98,8 +94,4 @@
   --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/elevation/elevation.css

@@ -0,0 +1,2 @@
+  --eds-elevation-low: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 3px rgba(0, 0, 0, 0.12);
+  --eds-elevation-high: 0px 4px 12px 0px rgba(0, 0, 0, 0.2), 0px 12px 16px 6px rgba(0, 0, 0, 0.12);

package/build/css/typography/font-family-ui.css

@@ -63,7 +63,7 @@
   --eds-font-family-size-5xl-font-size: var(--eds-typography-ui-body-5xl-font-size);
   --eds-font-family-size-5xl-tracking-tight: var(--eds-typography-ui-body-5xl-tracking-tight);
   --eds-font-family-size-5xl-tracking-normal: var(--eds-typography-ui-body-5xl-tracking-normal);
-  --eds-font-family-size-5xl-tracking-wide: var(--eds-typography-ui-body-5xl-font-weight-lighter);
+  --eds-font-family-size-5xl-tracking-wide: var(--eds-typography-ui-body-5xl-tracking-wide);
   --eds-font-family-size-5xl-font-weight-lighter: var(--eds-typography-ui-body-5xl-font-weight-lighter);
   --eds-font-family-size-5xl-font-weight-normal: var(--eds-typography-ui-body-5xl-font-weight-normal);
   --eds-font-family-size-5xl-font-weight-bolder: var(--eds-typography-ui-body-5xl-font-weight-bolder);

package/build/css/typography.css

@@ -1,14 +1,17 @@
 /*
- * Registered custom property for font-size values
- * 
- * This @property declaration registers --eds-typography-font-size as a typed CSS custom property,
- * enabling proper unit handling in calc() expressions. This is essential for the
- * text-icon sizing calculations, which use tan(atan2(var(--eds-typography-font-size), 1px)) to
- * extract the numeric value from the font-size for proportional icon scaling.
- * 
- * Without this registration, the browser would treat --eds-typography-font-size as an untyped string,
- * preventing the mathematical operations needed for responsive icon sizing based on
- * the current text size.
+ * Registered custom properties for length-typed typography values.
+ *
+ * Typing these as <length> makes them safe to use directly in CSS length contexts
+ * (gap, font-size) and enables proper interpolation for transitions.
+ * --eds-typography-font-size in particular is used in tan(atan2(var(--eds-typography-font-size), 1px))
+ * for proportional icon sizing, which requires a registered length.
+ *
+ * Note: --eds-typography-icon-size is intentionally NOT registered. Icon.css uses
+ * `var(--eds-typography-icon-size, 1.5em)` where the 1.5em fallback provides
+ * proportional sizing relative to the parent's font-size when no [data-font-size]
+ * context is set. A registered @property always has a valid computed value
+ * (the initial-value), which would suppress the fallback — and 1.5em is not a
+ * valid initial-value (must be computationally independent).
  */
 @property --eds-typography-font-size {
   inherits: true;
@@ -16,6 +19,18 @@
   syntax: '<length>';
 }
 
+@property --eds-typography-gap-horizontal {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --eds-typography-gap-vertical {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
 /* Reset typography margin and set display mode */
 [data-font-family] {
   margin: 0;

package/build/css/variables.css

@@ -6,105 +6,105 @@
   color-scheme: dark;
 }
 
-:root {
-  --eds-color-bg-floating: light-dark(#fff, #202223);
-  --eds-color-bg-backdrop: light-dark(#aeaeae, #738696);
-  --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);
-  --eds-color-accent-4: light-dark(#bbdbdf, #3e7378);
-  --eds-color-accent-5: light-dark(#a2cdd2, #41878e);
-  --eds-color-accent-6: light-dark(#bbdbdf, #3c6266);
-  --eds-color-accent-7: light-dark(#7cbac1, #439199);
-  --eds-color-accent-8: light-dark(#21767e, #6ec0c9);
-  --eds-color-accent-9: light-dark(#206f77, #8cd2da);
-  --eds-color-accent-10: light-dark(#205c62, #ace3e9);
-  --eds-color-accent-11: light-dark(#20565c, #c7f1f6);
-  --eds-color-accent-12: light-dark(#1f6369, #bcebf1);
-  --eds-color-accent-13: light-dark(#141f20, #e6ffff);
-  --eds-color-accent-14: light-dark(#cae4e7, #2c3839);
-  --eds-color-accent-15: light-dark(#fff, #030303);
-  --eds-color-neutral-1: light-dark(#f5f5f5, #0b0b0b);
-  --eds-color-neutral-2: light-dark(#fff, #202223);
-  --eds-color-neutral-3: light-dark(#e1e1e1, #525c65);
-  --eds-color-neutral-4: light-dark(#d4d4d4, #5d6b76);
-  --eds-color-neutral-5: light-dark(#c4c4c4, #6b7d8b);
-  --eds-color-neutral-6: light-dark(#d4d4d4, #525c65);
-  --eds-color-neutral-7: light-dark(#aeaeae, #738696);
-  --eds-color-neutral-8: light-dark(#696969, #9fb4c6);
-  --eds-color-neutral-9: light-dark(#636363, #b4c7d7);
-  --eds-color-neutral-10: light-dark(#525252, #cadae7);
-  --eds-color-neutral-11: light-dark(#4d4d4d, #deeaf4);
-  --eds-color-neutral-12: light-dark(#585858, #d6e3ee);
-  --eds-color-neutral-13: light-dark(#1d1d1d, #f5fdff);
-  --eds-color-neutral-14: light-dark(#dedede, #333639);
-  --eds-color-neutral-15: light-dark(#fff, #030303);
-  --eds-color-info-1: light-dark(#e7f8ff, #0a0b0c);
-  --eds-color-info-2: light-dark(#f4ffff, #1d2226);
-  --eds-color-info-3: light-dark(#cae6fa, #33607e);
-  --eds-color-info-4: light-dark(#b5daf5, #316f98);
-  --eds-color-info-5: light-dark(#99cbf0, #2e82b7);
-  --eds-color-info-6: light-dark(#b5daf5, #33607e);
-  --eds-color-info-7: light-dark(#6fb6e9, #2d8bc5);
-  --eds-color-info-8: light-dark(#0070a9, #5abbfb);
-  --eds-color-info-9: light-dark(#006aa0, #7dceff);
-  --eds-color-info-10: light-dark(#085883, #a2e0ff);
-  --eds-color-info-11: light-dark(#0e5279, #c4eeff);
-  --eds-color-info-12: light-dark(#015e8d, #b7e8ff);
-  --eds-color-info-13: light-dark(#121e27, #ecffff);
-  --eds-color-info-14: light-dark(#c5e3f9, #2a3741);
-  --eds-color-info-15: light-dark(#fff, #030304);
-  --eds-color-success-1: light-dark(#eafbe8, #0a0c0a);
-  --eds-color-success-2: light-dark(#f6fff5, #1e231e);
-  --eds-color-success-3: light-dark(#cfeacc, #3c673a);
-  --eds-color-success-4: light-dark(#bbe0b8, #3e793c);
-  --eds-color-success-5: light-dark(#a2d49e, #418e3e);
-  --eds-color-success-6: light-dark(#bbe0b8, #3c673a);
-  --eds-color-success-7: light-dark(#7cc278, #439941);
-  --eds-color-success-8: light-dark(#227e22, #6eca6a);
-  --eds-color-success-9: light-dark(#207720, #8cdb87);
-  --eds-color-success-10: light-dark(#20621f, #aceba8);
-  --eds-color-success-11: light-dark(#215c1f, #c7f7c3);
-  --eds-color-success-12: light-dark(#20691f, #bcf2b8);
-  --eds-color-success-13: light-dark(#142114, #e6ffe3);
-  --eds-color-success-14: light-dark(#cae8c7, #2c392b);
-  --eds-color-success-15: light-dark(#fff, #030303);
-  --eds-color-warning-1: light-dark(#fff1e2, #0c0b0a);
-  --eds-color-warning-2: light-dark(#fffcf0, #27201b);
-  --eds-color-warning-3: light-dark(#fbdac1, #7e4e25);
-  --eds-color-warning-4: light-dark(#f6caaa, #97571b);
-  --eds-color-warning-5: light-dark(#f0b689, #b46201);
-  --eds-color-warning-6: light-dark(#f6caaa, #7e4e25);
-  --eds-color-warning-7: light-dark(#e89959, #c36800);
-  --eds-color-warning-8: light-dark(#a34e00, #f99539);
-  --eds-color-warning-9: light-dark(#9b4900, #ffad63);
-  --eds-color-warning-10: light-dark(#813e00, #ffc791);
-  --eds-color-warning-11: light-dark(#773a00, #ffddb9);
-  --eds-color-warning-12: light-dark(#8a4100, #ffd4aa);
-  --eds-color-warning-13: light-dark(#27190e, #fff7e6);
-  --eds-color-warning-14: light-dark(#fad6bc, #413226);
-  --eds-color-warning-15: light-dark(#fff, #040303);
-  --eds-color-danger-1: light-dark(#ffecea, #0d0a0a);
-  --eds-color-danger-2: light-dark(#fff9f8, #2a1e1e);
-  --eds-color-danger-3: light-dark(#ffd0ce, #923a3c);
-  --eds-color-danger-4: light-dark(#ffbcba, #b03940);
-  --eds-color-danger-5: light-dark(#ffa3a1, #d43745);
-  --eds-color-danger-6: light-dark(#ffbcba, #923a3c);
-  --eds-color-danger-7: light-dark(#ff7a7d, #e53748);
-  --eds-color-danger-8: light-dark(#c6002d, #ff8082);
-  --eds-color-danger-9: light-dark(#bc002a, #ffa3a1);
-  --eds-color-danger-10: light-dark(#9a1026, #ffc1bf);
-  --eds-color-danger-11: light-dark(#8e1525, #ffd9d7);
-  --eds-color-danger-12: light-dark(#a50827, #ffd0ce);
-  --eds-color-danger-13: light-dark(#2e1414, #fff5f4);
-  --eds-color-danger-14: light-dark(#ffcbc9, #492d2c);
-  --eds-color-danger-15: light-dark(#fff, #040303);
+:root, [data-color-scheme="light"] {
+  --eds-color-bg-floating: #fff;
+  --eds-color-bg-backdrop: #aeaeae;
+  --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;
+  --eds-color-accent-4: #bbdbdf;
+  --eds-color-accent-5: #a2cdd2;
+  --eds-color-accent-6: #bbdbdf;
+  --eds-color-accent-7: #7cbac1;
+  --eds-color-accent-8: #21767e;
+  --eds-color-accent-9: #206f77;
+  --eds-color-accent-10: #205c62;
+  --eds-color-accent-11: #20565c;
+  --eds-color-accent-12: #1f6369;
+  --eds-color-accent-13: #141f20;
+  --eds-color-accent-14: #cae4e7;
+  --eds-color-accent-15: #fff;
+  --eds-color-neutral-1: #f5f5f5;
+  --eds-color-neutral-2: #fff;
+  --eds-color-neutral-3: #e1e1e1;
+  --eds-color-neutral-4: #d4d4d4;
+  --eds-color-neutral-5: #c4c4c4;
+  --eds-color-neutral-6: #d4d4d4;
+  --eds-color-neutral-7: #aeaeae;
+  --eds-color-neutral-8: #696969;
+  --eds-color-neutral-9: #636363;
+  --eds-color-neutral-10: #525252;
+  --eds-color-neutral-11: #4d4d4d;
+  --eds-color-neutral-12: #585858;
+  --eds-color-neutral-13: #1d1d1d;
+  --eds-color-neutral-14: #dedede;
+  --eds-color-neutral-15: #fff;
+  --eds-color-info-1: #e7f8ff;
+  --eds-color-info-2: #f4ffff;
+  --eds-color-info-3: #cae6fa;
+  --eds-color-info-4: #b5daf5;
+  --eds-color-info-5: #99cbf0;
+  --eds-color-info-6: #b5daf5;
+  --eds-color-info-7: #6fb6e9;
+  --eds-color-info-8: #0070a9;
+  --eds-color-info-9: #006aa0;
+  --eds-color-info-10: #085883;
+  --eds-color-info-11: #0e5279;
+  --eds-color-info-12: #015e8d;
+  --eds-color-info-13: #121e27;
+  --eds-color-info-14: #c5e3f9;
+  --eds-color-info-15: #fff;
+  --eds-color-success-1: #eafbe8;
+  --eds-color-success-2: #f6fff5;
+  --eds-color-success-3: #cfeacc;
+  --eds-color-success-4: #bbe0b8;
+  --eds-color-success-5: #a2d49e;
+  --eds-color-success-6: #bbe0b8;
+  --eds-color-success-7: #7cc278;
+  --eds-color-success-8: #227e22;
+  --eds-color-success-9: #207720;
+  --eds-color-success-10: #20621f;
+  --eds-color-success-11: #215c1f;
+  --eds-color-success-12: #20691f;
+  --eds-color-success-13: #142114;
+  --eds-color-success-14: #cae8c7;
+  --eds-color-success-15: #fff;
+  --eds-color-warning-1: #fff1e2;
+  --eds-color-warning-2: #fffcf0;
+  --eds-color-warning-3: #fbdac1;
+  --eds-color-warning-4: #f6caaa;
+  --eds-color-warning-5: #f0b689;
+  --eds-color-warning-6: #f6caaa;
+  --eds-color-warning-7: #e89959;
+  --eds-color-warning-8: #a34e00;
+  --eds-color-warning-9: #9b4900;
+  --eds-color-warning-10: #813e00;
+  --eds-color-warning-11: #773a00;
+  --eds-color-warning-12: #8a4100;
+  --eds-color-warning-13: #27190e;
+  --eds-color-warning-14: #fad6bc;
+  --eds-color-warning-15: #fff;
+  --eds-color-danger-1: #ffecea;
+  --eds-color-danger-2: #fff9f8;
+  --eds-color-danger-3: #ffd0ce;
+  --eds-color-danger-4: #ffbcba;
+  --eds-color-danger-5: #ffa3a1;
+  --eds-color-danger-6: #ffbcba;
+  --eds-color-danger-7: #ff7a7d;
+  --eds-color-danger-8: #c6002d;
+  --eds-color-danger-9: #bc002a;
+  --eds-color-danger-10: #9a1026;
+  --eds-color-danger-11: #8e1525;
+  --eds-color-danger-12: #a50827;
+  --eds-color-danger-13: #2e1414;
+  --eds-color-danger-14: #ffcbc9;
+  --eds-color-danger-15: #fff;
   --eds-color-bg-neutral-canvas: var(--eds-color-neutral-1);
   --eds-color-bg-neutral-surface: var(--eds-color-neutral-2);
   --eds-color-bg-neutral-fill-muted-default: var(--eds-color-neutral-3);
@@ -195,9 +195,12 @@
   --eds-color-text-danger-strong: var(--eds-color-danger-13);
   --eds-color-text-danger-subtle-on-emphasis: var(--eds-color-danger-14);
   --eds-color-text-danger-strong-on-emphasis: var(--eds-color-danger-15);
+
+  --eds-elevation-low: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 3px rgba(0, 0, 0, 0.12);
+  --eds-elevation-high: 0px 4px 12px 0px rgba(0, 0, 0, 0.2), 0px 12px 16px 6px rgba(0, 0, 0, 0.12);
 }
 
-:root, [data-color-appearance="neutral"] {
+:root, [data-color-scheme="light"], [data-color-scheme="dark"], [data-color-appearance="neutral"] {
   --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);
@@ -1125,6 +1128,18 @@
   initial-value: 16px;
 }
 
+@property --eds-typography-gap-horizontal {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --eds-typography-gap-vertical {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0;
+}
+
 [data-font-family] {
   font-family: var(--eds-typography-font-family);
   font-size: var(--eds-typography-font-size);
@@ -1304,7 +1319,7 @@
   --eds-font-family-size-5xl-font-size: var(--eds-typography-ui-body-5xl-font-size);
   --eds-font-family-size-5xl-tracking-tight: var(--eds-typography-ui-body-5xl-tracking-tight);
   --eds-font-family-size-5xl-tracking-normal: var(--eds-typography-ui-body-5xl-tracking-normal);
-  --eds-font-family-size-5xl-tracking-wide: var(--eds-typography-ui-body-5xl-font-weight-lighter);
+  --eds-font-family-size-5xl-tracking-wide: var(--eds-typography-ui-body-5xl-tracking-wide);
   --eds-font-family-size-5xl-font-weight-lighter: var(--eds-typography-ui-body-5xl-font-weight-lighter);
   --eds-font-family-size-5xl-font-weight-normal: var(--eds-typography-ui-body-5xl-font-weight-normal);
   --eds-font-family-size-5xl-font-weight-bolder: var(--eds-typography-ui-body-5xl-font-weight-bolder);
@@ -1518,3 +1533,207 @@
 [data-tracking="wide"], [data-tracking="loose"] {
   --eds-typography-tracking: var(--eds-typography-tracking-wide);
 }
+
+[data-color-scheme="dark"] {
+  --eds-color-bg-floating: #202223;
+  --eds-color-bg-backdrop: #738696;
+  --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;
+  --eds-color-accent-4: #3e7378;
+  --eds-color-accent-5: #41878e;
+  --eds-color-accent-6: #3c6266;
+  --eds-color-accent-7: #439199;
+  --eds-color-accent-8: #6ec0c9;
+  --eds-color-accent-9: #8cd2da;
+  --eds-color-accent-10: #ace3e9;
+  --eds-color-accent-11: #c7f1f6;
+  --eds-color-accent-12: #bcebf1;
+  --eds-color-accent-13: #e6ffff;
+  --eds-color-accent-14: #2c3839;
+  --eds-color-accent-15: #030303;
+  --eds-color-neutral-1: #0b0b0b;
+  --eds-color-neutral-2: #202223;
+  --eds-color-neutral-3: #525c65;
+  --eds-color-neutral-4: #5d6b76;
+  --eds-color-neutral-5: #6b7d8b;
+  --eds-color-neutral-6: #525c65;
+  --eds-color-neutral-7: #738696;
+  --eds-color-neutral-8: #9fb4c6;
+  --eds-color-neutral-9: #b4c7d7;
+  --eds-color-neutral-10: #cadae7;
+  --eds-color-neutral-11: #deeaf4;
+  --eds-color-neutral-12: #d6e3ee;
+  --eds-color-neutral-13: #f5fdff;
+  --eds-color-neutral-14: #333639;
+  --eds-color-neutral-15: #030303;
+  --eds-color-info-1: #0a0b0c;
+  --eds-color-info-2: #1d2226;
+  --eds-color-info-3: #33607e;
+  --eds-color-info-4: #316f98;
+  --eds-color-info-5: #2e82b7;
+  --eds-color-info-6: #33607e;
+  --eds-color-info-7: #2d8bc5;
+  --eds-color-info-8: #5abbfb;
+  --eds-color-info-9: #7dceff;
+  --eds-color-info-10: #a2e0ff;
+  --eds-color-info-11: #c4eeff;
+  --eds-color-info-12: #b7e8ff;
+  --eds-color-info-13: #ecffff;
+  --eds-color-info-14: #2a3741;
+  --eds-color-info-15: #030304;
+  --eds-color-success-1: #0a0c0a;
+  --eds-color-success-2: #1e231e;
+  --eds-color-success-3: #3c673a;
+  --eds-color-success-4: #3e793c;
+  --eds-color-success-5: #418e3e;
+  --eds-color-success-6: #3c673a;
+  --eds-color-success-7: #439941;
+  --eds-color-success-8: #6eca6a;
+  --eds-color-success-9: #8cdb87;
+  --eds-color-success-10: #aceba8;
+  --eds-color-success-11: #c7f7c3;
+  --eds-color-success-12: #bcf2b8;
+  --eds-color-success-13: #e6ffe3;
+  --eds-color-success-14: #2c392b;
+  --eds-color-success-15: #030303;
+  --eds-color-warning-1: #0c0b0a;
+  --eds-color-warning-2: #27201b;
+  --eds-color-warning-3: #7e4e25;
+  --eds-color-warning-4: #97571b;
+  --eds-color-warning-5: #b46201;
+  --eds-color-warning-6: #7e4e25;
+  --eds-color-warning-7: #c36800;
+  --eds-color-warning-8: #f99539;
+  --eds-color-warning-9: #ffad63;
+  --eds-color-warning-10: #ffc791;
+  --eds-color-warning-11: #ffddb9;
+  --eds-color-warning-12: #ffd4aa;
+  --eds-color-warning-13: #fff7e6;
+  --eds-color-warning-14: #413226;
+  --eds-color-warning-15: #040303;
+  --eds-color-danger-1: #0d0a0a;
+  --eds-color-danger-2: #2a1e1e;
+  --eds-color-danger-3: #923a3c;
+  --eds-color-danger-4: #b03940;
+  --eds-color-danger-5: #d43745;
+  --eds-color-danger-6: #923a3c;
+  --eds-color-danger-7: #e53748;
+  --eds-color-danger-8: #ff8082;
+  --eds-color-danger-9: #ffa3a1;
+  --eds-color-danger-10: #ffc1bf;
+  --eds-color-danger-11: #ffd9d7;
+  --eds-color-danger-12: #ffd0ce;
+  --eds-color-danger-13: #fff5f4;
+  --eds-color-danger-14: #492d2c;
+  --eds-color-danger-15: #040303;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]) {
+    --eds-color-bg-floating: #202223;
+    --eds-color-bg-backdrop: #738696;
+    --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;
+    --eds-color-accent-4: #3e7378;
+    --eds-color-accent-5: #41878e;
+    --eds-color-accent-6: #3c6266;
+    --eds-color-accent-7: #439199;
+    --eds-color-accent-8: #6ec0c9;
+    --eds-color-accent-9: #8cd2da;
+    --eds-color-accent-10: #ace3e9;
+    --eds-color-accent-11: #c7f1f6;
+    --eds-color-accent-12: #bcebf1;
+    --eds-color-accent-13: #e6ffff;
+    --eds-color-accent-14: #2c3839;
+    --eds-color-accent-15: #030303;
+    --eds-color-neutral-1: #0b0b0b;
+    --eds-color-neutral-2: #202223;
+    --eds-color-neutral-3: #525c65;
+    --eds-color-neutral-4: #5d6b76;
+    --eds-color-neutral-5: #6b7d8b;
+    --eds-color-neutral-6: #525c65;
+    --eds-color-neutral-7: #738696;
+    --eds-color-neutral-8: #9fb4c6;
+    --eds-color-neutral-9: #b4c7d7;
+    --eds-color-neutral-10: #cadae7;
+    --eds-color-neutral-11: #deeaf4;
+    --eds-color-neutral-12: #d6e3ee;
+    --eds-color-neutral-13: #f5fdff;
+    --eds-color-neutral-14: #333639;
+    --eds-color-neutral-15: #030303;
+    --eds-color-info-1: #0a0b0c;
+    --eds-color-info-2: #1d2226;
+    --eds-color-info-3: #33607e;
+    --eds-color-info-4: #316f98;
+    --eds-color-info-5: #2e82b7;
+    --eds-color-info-6: #33607e;
+    --eds-color-info-7: #2d8bc5;
+    --eds-color-info-8: #5abbfb;
+    --eds-color-info-9: #7dceff;
+    --eds-color-info-10: #a2e0ff;
+    --eds-color-info-11: #c4eeff;
+    --eds-color-info-12: #b7e8ff;
+    --eds-color-info-13: #ecffff;
+    --eds-color-info-14: #2a3741;
+    --eds-color-info-15: #030304;
+    --eds-color-success-1: #0a0c0a;
+    --eds-color-success-2: #1e231e;
+    --eds-color-success-3: #3c673a;
+    --eds-color-success-4: #3e793c;
+    --eds-color-success-5: #418e3e;
+    --eds-color-success-6: #3c673a;
+    --eds-color-success-7: #439941;
+    --eds-color-success-8: #6eca6a;
+    --eds-color-success-9: #8cdb87;
+    --eds-color-success-10: #aceba8;
+    --eds-color-success-11: #c7f7c3;
+    --eds-color-success-12: #bcf2b8;
+    --eds-color-success-13: #e6ffe3;
+    --eds-color-success-14: #2c392b;
+    --eds-color-success-15: #030303;
+    --eds-color-warning-1: #0c0b0a;
+    --eds-color-warning-2: #27201b;
+    --eds-color-warning-3: #7e4e25;
+    --eds-color-warning-4: #97571b;
+    --eds-color-warning-5: #b46201;
+    --eds-color-warning-6: #7e4e25;
+    --eds-color-warning-7: #c36800;
+    --eds-color-warning-8: #f99539;
+    --eds-color-warning-9: #ffad63;
+    --eds-color-warning-10: #ffc791;
+    --eds-color-warning-11: #ffddb9;
+    --eds-color-warning-12: #ffd4aa;
+    --eds-color-warning-13: #fff7e6;
+    --eds-color-warning-14: #413226;
+    --eds-color-warning-15: #040303;
+    --eds-color-danger-1: #0d0a0a;
+    --eds-color-danger-2: #2a1e1e;
+    --eds-color-danger-3: #923a3c;
+    --eds-color-danger-4: #b03940;
+    --eds-color-danger-5: #d43745;
+    --eds-color-danger-6: #923a3c;
+    --eds-color-danger-7: #e53748;
+    --eds-color-danger-8: #ff8082;
+    --eds-color-danger-9: #ffa3a1;
+    --eds-color-danger-10: #ffc1bf;
+    --eds-color-danger-11: #ffd9d7;
+    --eds-color-danger-12: #ffd0ce;
+    --eds-color-danger-13: #fff5f4;
+    --eds-color-danger-14: #492d2c;
+    --eds-color-danger-15: #040303;
+  }
+}