@equinor/eds-tokens 1.0.0 → 1.1.2

package/README.md

@@ -1,6 +1,6 @@
 # @equinor/eds-tokens
 
-[Design tokens] used in the Equinor Design System (EDS), such as colours, spacings and typography.
+[Design tokens] used in the <abbr title="Equinor Design System">EDS</abbr>, including colors, spacing, typography, and more. These tokens are synchronized with Figma variables and provide a single source of truth for design decisions across the design system.
 
 ## Installation
 
@@ -10,28 +10,128 @@ pnpm add @equinor/eds-tokens
 
 ## Usage
 
-```js 
-import { tokens } from '@equinor/eds-tokens'
+The package provides two token systems:
+
+* **CSS Variables (Recommended)** -- Modern, theme-aware design tokens synced from Figma
+* **Legacy Tokens** -- Original token format, still supported for backward compatibility
+
+---
+
+## 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.
+
+### Using CSS Variables in CSS
+
+Import the variables stylesheet:
+
+```css
+@import '@equinor/eds-tokens/css/variables';
+```
+
+Then use the CSS custom properties in your styles:
+
+```css
+.my-component {
+  background-color: var(--eds-color-bg-neutral-surface);
+  color: var(--eds-color-text-neutral-strong);
+  border: 1px solid var(--eds-color-border-neutral-subtle);
+  padding: var(--eds-spacing-inline-md);
+  border-radius: var(--eds-spacing-border-radius-rounded);
+}
 ```
 
-CSS custom properties are also available:
+The variables automatically respond to color scheme changes:
 
 ```css
-@import '@equinor/eds-tokens/css/variables-static.css'; /* or variables-dynamic.css */
+/* Applies to elements with data-color-scheme attribute */
+[data-color-scheme="dark"] {
+  /* Variables automatically use dark mode values */
+}
+
+/* Or use the native prefers-color-scheme */
+@media (prefers-color-scheme: dark) {
+  /* Variables automatically use dark mode values */
+}
+```
+
+### Using variables in JavaScript/TypeScript
+
+For scenarios where you need colour variables in JavaScript:
+
+#### Color Scheme Tokens
+
+Import the light and dark semantic color tokens:
+
+```typescript
+// Import semantic color scheme tokens
+import * as lightSemantic from '@equinor/eds-tokens/js/color/color-scheme/light-semantic'
+import * as darkSemantic from '@equinor/eds-tokens/js/color/color-scheme/dark-semantic'
+
+// Use semantic tokens with light/dark values
+const lightSurface = lightSemantic.BG_NEUTRAL_SURFACE
+const darkSurface = darkSemantic.BG_NEUTRAL_SURFACE
+
+const lightAccent = lightSemantic.BG_ACCENT_FILL_EMPHASIS_DEFAULT
+const darkAccent = darkSemantic.BG_ACCENT_FILL_EMPHASIS_DEFAULT
+
+const lightBorder = lightSemantic.BORDER_INFO_MEDIUM
+const darkBorder = darkSemantic.BORDER_INFO_MEDIUM
+```
+
+#### Spacing Tokens
+
+```typescript
+// Import spacing values for different density modes
+import * as comfortableSpacing from '@equinor/eds-tokens/js/spacing/comfortable'
+import * as spaciousSpacing from '@equinor/eds-tokens/js/spacing/spacious'
+
+// Use the values (numbers in pixels)
+const padding = comfortableSpacing.SPACING_INLINE_MD
+const borderRadius = comfortableSpacing.SPACING_BORDER_RADIUS_ROUNDED
+```
+
+### Available Token Categories
+
+* **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)
+
+### Spacing Density Modes
+
+The spacing system supports different density modes:
+
+* `comfortable` -- Default density for most applications
+* `spacious` -- Increased spacing for better readability
+
+---
+
+## Legacy Tokens (Backward Compatible)
+
+The original token format is still available for existing applications. These tokens use a structured JavaScript object format.
+
+### Using Legacy Tokens in JavaScript/TypeScript
+
+```javascript
+import { tokens } from '@equinor/eds-tokens'
+
+// Access token values
+const primaryColor = tokens.colors.interactive.primary__resting.rgba
+const spacing = tokens.spacings.comfortable.medium
+const typography = tokens.typography.heading.h1
 ```
 
-`variables-static.css` exposes tokens with fixed values, while
-`variables-dynamic.css` includes dynamic semantic color tokens.
+### Legacy Token Categories
 
-## Tokens
+* Clickbounds
+* Colors
+* Elevation
+* Shape
+* Spacing
+* Interaction states
+* Typography (`ot`, `woff` or `woff2` font required)
 
-- Clickbounds
-- Colors
-- Elevation
-- Shape
-- Spacing
-- Interaction states
-- Typography (`ot`, `woff` or `woff2` font required)
+> We recommend migrating to CSS Variables for new projects to benefit from automatic theme support and better performance.
 
 [design tokens]: https://css-tricks.com/what-are-design-tokens/
 
@@ -124,11 +224,11 @@ pnpm run update-figma
 
 ### How the variables are setup with references between collections
 
-The semantic variable references the first segment (collection) in the variable. For example, the first segment is “appearance” for the action variables. Variables defined in appearance point to the next segment, which for action variables would be prominence. In the prominence collection, we define a variable for each of the appearance modes so that these are represented in the context of each prominence mode. The variables in the “prominence” collection point to variables in the state collection, and again, we represent all the prominence modes as new variables in the state collection. For action variables, the journey ends here, and the variables in the state collection point to the light/dark color scheme variables in the color scheme collection. 
+The semantic variable references the first segment (collection) in the variable. For example, the first segment is “appearance” for the action variables. Variables defined in appearance point to the next segment, which for action variables would be prominence. In the prominence collection, we define a variable for each of the appearance modes so that these are represented in the context of each prominence mode. The variables in the “prominence” collection point to variables in the state collection, and again, we represent all the prominence modes as new variables in the state collection. For action variables, the journey ends here, and the variables in the state collection point to the light/dark color scheme variables in the color scheme collection.
 
 ### Tokens in code
 
-The color scheme collection variables support all the combinations of modes in the different collections and are used to generate tokens in code. All the combinations of modes in different collections must be provided here so that the code syntax matches tokens in the code. 
+The color scheme collection variables support all the combinations of modes in the different collections and are used to generate tokens in code. All the combinations of modes in different collections must be provided here so that the code syntax matches tokens in the code.
 
 
 ### How to setup variable collections in Figma

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

@@ -16,12 +16,12 @@
   --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(#121e27, #ecffff);
+  --eds-color-text-link: light-dark(#0070a9, #5abbfb);
   --eds-color-accent-1: light-dark(#eaf8fa, #0a0b0b);
   --eds-color-accent-2: light-dark(#f6ffff, #1e2323);
-  --eds-color-accent-3: light-dark(#c5e1e4, #3c6266);
-  --eds-color-accent-4: light-dark(#b1d6da, #3e7378);
-  --eds-color-accent-5: light-dark(#97c8cd, #41878e);
+  --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);
@@ -34,9 +34,9 @@
   --eds-color-accent-15: light-dark(#ffffff, #030303);
   --eds-color-neutral-1: light-dark(#f5f5f5, #0b0b0b);
   --eds-color-neutral-2: light-dark(#ffffff, #202223);
-  --eds-color-neutral-3: light-dark(#dbdbdb, #525c65);
-  --eds-color-neutral-4: light-dark(#cecece, #5d6b76);
-  --eds-color-neutral-5: light-dark(#bebebe, #6b7d8b);
+  --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);
@@ -49,9 +49,9 @@
   --eds-color-neutral-15: light-dark(#ffffff, #030303);
   --eds-color-info-1: light-dark(#e7f8ff, #0a0b0c);
   --eds-color-info-2: light-dark(#f4ffff, #1d2226);
-  --eds-color-info-3: light-dark(#c0e0f8, #33607e);
-  --eds-color-info-4: light-dark(#aad4f3, #316f98);
-  --eds-color-info-5: light-dark(#8dc5ee, #2e82b7);
+  --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);
@@ -64,11 +64,11 @@
   --eds-color-info-15: light-dark(#ffffff, #030304);
   --eds-color-success-1: light-dark(#eafbe8, #0a0c0a);
   --eds-color-success-2: light-dark(#f6fff5, #1e231e);
-  --eds-color-success-3: light-dark(#c5e5c2, #3c673a);
-  --eds-color-success-4: light-dark(#b1dbae, #3e793c);
-  --eds-color-success-5: light-dark(#97cf93, #418e3e);
+  --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-7: light-dark(#7cc278, #449941);
   --eds-color-success-8: light-dark(#227e22, #6eca6a);
   --eds-color-success-9: light-dark(#207720, #8cdb87);
   --eds-color-success-10: light-dark(#20621f, #aceba8);
@@ -79,9 +79,9 @@
   --eds-color-success-15: light-dark(#ffffff, #030303);
   --eds-color-warning-1: light-dark(#fff1e2, #0c0b0a);
   --eds-color-warning-2: light-dark(#fffcf0, #27201b);
-  --eds-color-warning-3: light-dark(#f9d2b6, #7e4e25);
-  --eds-color-warning-4: light-dark(#f4c29d, #97571b);
-  --eds-color-warning-5: light-dark(#eeae7c, #b46201);
+  --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);
@@ -94,11 +94,11 @@
   --eds-color-warning-15: light-dark(#ffffff, #040303);
   --eds-color-danger-1: light-dark(#ffecea, #0d0a0a);
   --eds-color-danger-2: light-dark(#fff9f8, #2a1e1e);
-  --eds-color-danger-3: light-dark(#ffc6c4, #923a3c);
-  --eds-color-danger-4: light-dark(#ffb2b0, #b03940);
-  --eds-color-danger-5: light-dark(#ff9897, #d43745);
+  --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-7: light-dark(#ff7a7c, #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);

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

@@ -7,7 +7,7 @@
   --eds-color-bg-backdrop: #738696;
   --eds-color-bg-input: #0b0b0b;
   --eds-color-border-focus: #2d8bc5;
-  --eds-color-text-link: #ecffff;
+  --eds-color-text-link: #5abbfb;
   --eds-color-accent-1: #0a0b0b;
   --eds-color-accent-2: #1e2323;
   --eds-color-accent-3: #3c6266;
@@ -59,7 +59,7 @@
   --eds-color-success-4: #3e793c;
   --eds-color-success-5: #418e3e;
   --eds-color-success-6: #3c673a;
-  --eds-color-success-7: #439941;
+  --eds-color-success-7: #449941;
   --eds-color-success-8: #6eca6a;
   --eds-color-success-9: #8cdb87;
   --eds-color-success-10: #aceba8;

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

@@ -0,0 +1,96 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-color-scheme="dark"] {
+  --eds-color-bg-neutral-canvas: #0b0b0b;
+  --eds-color-bg-neutral-surface: #202223;
+  --eds-color-bg-neutral-fill-muted-default: #525c65;
+  --eds-color-bg-neutral-fill-muted-hover: #5d6b76;
+  --eds-color-bg-neutral-fill-muted-active: #6b7d8b;
+  --eds-color-bg-neutral-fill-emphasis-default: #b4c7d7;
+  --eds-color-bg-neutral-fill-emphasis-hover: #cadae7;
+  --eds-color-bg-neutral-fill-emphasis-active: #deeaf4;
+  --eds-color-bg-accent-canvas: #0a0b0b;
+  --eds-color-bg-accent-surface: #1e2323;
+  --eds-color-bg-accent-fill-muted-default: #3c6266;
+  --eds-color-bg-accent-fill-muted-hover: #3e7378;
+  --eds-color-bg-accent-fill-muted-active: #41878e;
+  --eds-color-bg-accent-fill-emphasis-default: #8cd2da;
+  --eds-color-bg-accent-fill-emphasis-hover: #ace3e9;
+  --eds-color-bg-accent-fill-emphasis-active: #c7f1f6;
+  --eds-color-bg-success-canvas: #0a0c0a;
+  --eds-color-bg-success-surface: #1e231e;
+  --eds-color-bg-success-fill-muted-default: #3c673a;
+  --eds-color-bg-success-fill-muted-hover: #3e793c;
+  --eds-color-bg-success-fill-muted-active: #418e3e;
+  --eds-color-bg-success-fill-emphasis-default: #8cdb87;
+  --eds-color-bg-success-fill-emphasis-hover: #aceba8;
+  --eds-color-bg-success-fill-emphasis-active: #c7f7c3;
+  --eds-color-bg-info-canvas: #0a0b0c;
+  --eds-color-bg-info-surface: #1d2226;
+  --eds-color-bg-info-fill-muted-default: #33607e;
+  --eds-color-bg-info-fill-muted-hover: #316f98;
+  --eds-color-bg-info-fill-muted-active: #2e82b7;
+  --eds-color-bg-info-fill-emphasis-default: #7dceff;
+  --eds-color-bg-info-fill-emphasis-hover: #a2e0ff;
+  --eds-color-bg-info-fill-emphasis-active: #c4eeff;
+  --eds-color-bg-warning-canvas: #0c0b0a;
+  --eds-color-bg-warning-surface: #27201b;
+  --eds-color-bg-warning-fill-muted-default: #7e4e25;
+  --eds-color-bg-warning-fill-muted-hover: #97571b;
+  --eds-color-bg-warning-fill-muted-active: #b46201;
+  --eds-color-bg-warning-fill-emphasis-default: #ffad63;
+  --eds-color-bg-warning-fill-emphasis-hover: #ffc791;
+  --eds-color-bg-warning-fill-emphasis-active: #ffddb9;
+  --eds-color-bg-danger-canvas: #0d0a0a;
+  --eds-color-bg-danger-surface: #2a1e1e;
+  --eds-color-bg-danger-fill-muted-default: #923a3c;
+  --eds-color-bg-danger-fill-muted-hover: #b03940;
+  --eds-color-bg-danger-fill-muted-active: #d43745;
+  --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-border-neutral-subtle: #525c65;
+  --eds-color-border-neutral-medium: #738696;
+  --eds-color-border-neutral-strong: #9fb4c6;
+  --eds-color-border-accent-subtle: #3c6266;
+  --eds-color-border-accent-medium: #439199;
+  --eds-color-border-accent-strong: #6ec0c9;
+  --eds-color-border-success-subtle: #3c673a;
+  --eds-color-border-success-medium: #449941;
+  --eds-color-border-success-strong: #6eca6a;
+  --eds-color-border-info-subtle: #33607e;
+  --eds-color-border-info-medium: #2d8bc5;
+  --eds-color-border-info-strong: #5abbfb;
+  --eds-color-border-warning-subtle: #7e4e25;
+  --eds-color-border-warning-medium: #c36800;
+  --eds-color-border-warning-strong: #f99539;
+  --eds-color-border-danger-subtle: #923a3c;
+  --eds-color-border-danger-medium: #e53748;
+  --eds-color-border-danger-strong: #ff8082;
+  --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 */
+  --eds-color-text-neutral-strong-on-emphasis: #030303; /** Text or icons against colored backgrounds */
+  --eds-color-text-accent-subtle: #bcebf1; /** Used for text and icons */
+  --eds-color-text-accent-strong: #e6ffff; /** Used for text and icons */
+  --eds-color-text-accent-subtle-on-emphasis: #2c3839; /** Text or icons against colored backgrounds */
+  --eds-color-text-accent-strong-on-emphasis: #030303; /** Text or icons against colored backgrounds */
+  --eds-color-text-success-subtle: #bcf2b8; /** Used for text and icons */
+  --eds-color-text-success-strong: #e6ffe3; /** Used for text and icons */
+  --eds-color-text-success-subtle-on-emphasis: #2c392b; /** Text or icons against colored backgrounds */
+  --eds-color-text-success-strong-on-emphasis: #030303; /** Text or icons against colored backgrounds */
+  --eds-color-text-info-subtle: #b7e8ff; /** Used for text and icons */
+  --eds-color-text-info-strong: #ecffff; /** Used for text and icons */
+  --eds-color-text-info-subtle-on-emphasis: #2a3741; /** Text or icons against colored backgrounds */
+  --eds-color-text-info-strong-on-emphasis: #030304; /** Text or icons against colored backgrounds */
+  --eds-color-text-warning-subtle: #ffd4aa; /** Used for text and icons */
+  --eds-color-text-warning-strong: #fff7e6; /** Used for text and icons */
+  --eds-color-text-warning-subtle-on-emphasis: #413226; /** Text or icons against colored backgrounds */
+  --eds-color-text-warning-strong-on-emphasis: #040303; /** Text or icons against colored backgrounds */
+  --eds-color-text-danger-subtle: #ffd0ce; /** Used for text and icons */
+  --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 */
+}

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

@@ -7,12 +7,12 @@
   --eds-color-bg-backdrop: #aeaeae;
   --eds-color-bg-input: #f5f5f5;
   --eds-color-border-focus: #6fb6e9;
-  --eds-color-text-link: #121e27;
+  --eds-color-text-link: #0070a9;
   --eds-color-accent-1: #eaf8fa;
   --eds-color-accent-2: #f6ffff;
-  --eds-color-accent-3: #c5e1e4;
-  --eds-color-accent-4: #b1d6da;
-  --eds-color-accent-5: #97c8cd;
+  --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;
@@ -25,9 +25,9 @@
   --eds-color-accent-15: #ffffff;
   --eds-color-neutral-1: #f5f5f5;
   --eds-color-neutral-2: #ffffff;
-  --eds-color-neutral-3: #dbdbdb;
-  --eds-color-neutral-4: #cecece;
-  --eds-color-neutral-5: #bebebe;
+  --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;
@@ -40,9 +40,9 @@
   --eds-color-neutral-15: #ffffff;
   --eds-color-info-1: #e7f8ff;
   --eds-color-info-2: #f4ffff;
-  --eds-color-info-3: #c0e0f8;
-  --eds-color-info-4: #aad4f3;
-  --eds-color-info-5: #8dc5ee;
+  --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;
@@ -55,9 +55,9 @@
   --eds-color-info-15: #ffffff;
   --eds-color-success-1: #eafbe8;
   --eds-color-success-2: #f6fff5;
-  --eds-color-success-3: #c5e5c2;
-  --eds-color-success-4: #b1dbae;
-  --eds-color-success-5: #97cf93;
+  --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;
@@ -70,9 +70,9 @@
   --eds-color-success-15: #ffffff;
   --eds-color-warning-1: #fff1e2;
   --eds-color-warning-2: #fffcf0;
-  --eds-color-warning-3: #f9d2b6;
-  --eds-color-warning-4: #f4c29d;
-  --eds-color-warning-5: #eeae7c;
+  --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;
@@ -85,11 +85,11 @@
   --eds-color-warning-15: #ffffff;
   --eds-color-danger-1: #ffecea;
   --eds-color-danger-2: #fff9f8;
-  --eds-color-danger-3: #ffc6c4;
-  --eds-color-danger-4: #ffb2b0;
-  --eds-color-danger-5: #ff9897;
+  --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-7: #ff7a7c;
   --eds-color-danger-8: #c6002d;
   --eds-color-danger-9: #bc002a;
   --eds-color-danger-10: #9a1026;

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

@@ -0,0 +1,96 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-color-scheme="light"] {
+  --eds-color-bg-neutral-canvas: #f5f5f5;
+  --eds-color-bg-neutral-surface: #ffffff;
+  --eds-color-bg-neutral-fill-muted-default: #e1e1e1;
+  --eds-color-bg-neutral-fill-muted-hover: #d4d4d4;
+  --eds-color-bg-neutral-fill-muted-active: #c4c4c4;
+  --eds-color-bg-neutral-fill-emphasis-default: #636363;
+  --eds-color-bg-neutral-fill-emphasis-hover: #525252;
+  --eds-color-bg-neutral-fill-emphasis-active: #4d4d4d;
+  --eds-color-bg-accent-canvas: #eaf8fa;
+  --eds-color-bg-accent-surface: #f6ffff;
+  --eds-color-bg-accent-fill-muted-default: #cfe7e9;
+  --eds-color-bg-accent-fill-muted-hover: #bbdbdf;
+  --eds-color-bg-accent-fill-muted-active: #a2cdd2;
+  --eds-color-bg-accent-fill-emphasis-default: #206f77;
+  --eds-color-bg-accent-fill-emphasis-hover: #205c62;
+  --eds-color-bg-accent-fill-emphasis-active: #20565c;
+  --eds-color-bg-success-canvas: #eafbe8;
+  --eds-color-bg-success-surface: #f6fff5;
+  --eds-color-bg-success-fill-muted-default: #cfeacc;
+  --eds-color-bg-success-fill-muted-hover: #bbe0b8;
+  --eds-color-bg-success-fill-muted-active: #a2d49e;
+  --eds-color-bg-success-fill-emphasis-default: #207720;
+  --eds-color-bg-success-fill-emphasis-hover: #20621f;
+  --eds-color-bg-success-fill-emphasis-active: #215c1f;
+  --eds-color-bg-info-canvas: #e7f8ff;
+  --eds-color-bg-info-surface: #f4ffff;
+  --eds-color-bg-info-fill-muted-default: #cae6fa;
+  --eds-color-bg-info-fill-muted-hover: #b5daf5;
+  --eds-color-bg-info-fill-muted-active: #99cbf0;
+  --eds-color-bg-info-fill-emphasis-default: #006aa0;
+  --eds-color-bg-info-fill-emphasis-hover: #085883;
+  --eds-color-bg-info-fill-emphasis-active: #0e5279;
+  --eds-color-bg-warning-canvas: #fff1e2;
+  --eds-color-bg-warning-surface: #fffcf0;
+  --eds-color-bg-warning-fill-muted-default: #fbdac1;
+  --eds-color-bg-warning-fill-muted-hover: #f6caaa;
+  --eds-color-bg-warning-fill-muted-active: #f0b689;
+  --eds-color-bg-warning-fill-emphasis-default: #9b4900;
+  --eds-color-bg-warning-fill-emphasis-hover: #813e00;
+  --eds-color-bg-warning-fill-emphasis-active: #773a00;
+  --eds-color-bg-danger-canvas: #ffecea;
+  --eds-color-bg-danger-surface: #fff9f8;
+  --eds-color-bg-danger-fill-muted-default: #ffd0ce;
+  --eds-color-bg-danger-fill-muted-hover: #ffbcba;
+  --eds-color-bg-danger-fill-muted-active: #ffa3a1;
+  --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-border-neutral-subtle: #d4d4d4;
+  --eds-color-border-neutral-medium: #aeaeae;
+  --eds-color-border-neutral-strong: #696969;
+  --eds-color-border-accent-subtle: #bbdbdf;
+  --eds-color-border-accent-medium: #7cbac1;
+  --eds-color-border-accent-strong: #21767e;
+  --eds-color-border-success-subtle: #bbe0b8;
+  --eds-color-border-success-medium: #7cc278;
+  --eds-color-border-success-strong: #227e22;
+  --eds-color-border-info-subtle: #b5daf5;
+  --eds-color-border-info-medium: #6fb6e9;
+  --eds-color-border-info-strong: #0070a9;
+  --eds-color-border-warning-subtle: #f6caaa;
+  --eds-color-border-warning-medium: #e89959;
+  --eds-color-border-warning-strong: #a34e00;
+  --eds-color-border-danger-subtle: #ffbcba;
+  --eds-color-border-danger-medium: #ff7a7c;
+  --eds-color-border-danger-strong: #c6002d;
+  --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 */
+  --eds-color-text-neutral-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-accent-subtle: #1f6369; /** Used for text and icons */
+  --eds-color-text-accent-strong: #141f20; /** Used for text and icons */
+  --eds-color-text-accent-subtle-on-emphasis: #cae4e7; /** Text or icons against colored backgrounds */
+  --eds-color-text-accent-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-success-subtle: #20691f; /** Used for text and icons */
+  --eds-color-text-success-strong: #142114; /** Used for text and icons */
+  --eds-color-text-success-subtle-on-emphasis: #cae8c7; /** Text or icons against colored backgrounds */
+  --eds-color-text-success-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-info-subtle: #015e8d; /** Used for text and icons */
+  --eds-color-text-info-strong: #121e27; /** Used for text and icons */
+  --eds-color-text-info-subtle-on-emphasis: #c5e3f9; /** Text or icons against colored backgrounds */
+  --eds-color-text-info-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-warning-subtle: #8a4100; /** Used for text and icons */
+  --eds-color-text-warning-strong: #27190e; /** Used for text and icons */
+  --eds-color-text-warning-subtle-on-emphasis: #fad6bc; /** Text or icons against colored backgrounds */
+  --eds-color-text-warning-strong-on-emphasis: #ffffff; /** Text or icons against colored backgrounds */
+  --eds-color-text-danger-subtle: #a50827; /** Used for text and icons */
+  --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 */
+}

package/build/css/variables.css

@@ -11,12 +11,12 @@
   --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(#121e27, #ecffff);
+  --eds-color-text-link: light-dark(#0070a9, #5abbfb);
   --eds-color-accent-1: light-dark(#eaf8fa, #0a0b0b);
   --eds-color-accent-2: light-dark(#f6ffff, #1e2323);
-  --eds-color-accent-3: light-dark(#c5e1e4, #3c6266);
-  --eds-color-accent-4: light-dark(#b1d6da, #3e7378);
-  --eds-color-accent-5: light-dark(#97c8cd, #41878e);
+  --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);
@@ -29,9 +29,9 @@
   --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(#dbdbdb, #525c65);
-  --eds-color-neutral-4: light-dark(#cecece, #5d6b76);
-  --eds-color-neutral-5: light-dark(#bebebe, #6b7d8b);
+  --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);
@@ -44,9 +44,9 @@
   --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(#c0e0f8, #33607e);
-  --eds-color-info-4: light-dark(#aad4f3, #316f98);
-  --eds-color-info-5: light-dark(#8dc5ee, #2e82b7);
+  --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);
@@ -59,11 +59,11 @@
   --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(#c5e5c2, #3c673a);
-  --eds-color-success-4: light-dark(#b1dbae, #3e793c);
-  --eds-color-success-5: light-dark(#97cf93, #418e3e);
+  --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-7: light-dark(#7cc278, #449941);
   --eds-color-success-8: light-dark(#227e22, #6eca6a);
   --eds-color-success-9: light-dark(#207720, #8cdb87);
   --eds-color-success-10: light-dark(#20621f, #aceba8);
@@ -74,9 +74,9 @@
   --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(#f9d2b6, #7e4e25);
-  --eds-color-warning-4: light-dark(#f4c29d, #97571b);
-  --eds-color-warning-5: light-dark(#eeae7c, #b46201);
+  --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);
@@ -89,11 +89,11 @@
   --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(#ffc6c4, #923a3c);
-  --eds-color-danger-4: light-dark(#ffb2b0, #b03940);
-  --eds-color-danger-5: light-dark(#ff9897, #d43745);
+  --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-7: light-dark(#ff7a7c, #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);