@equinor/eds-tokens 2.3.0 → 2.3.2

package/dist/types/tokens/ts/semantic/light.d.ts

@@ -0,0 +1,212 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+export declare const semantic: {
+    readonly background: {
+        readonly container: {
+            readonly canvas: {
+                readonly default: "#f8f8f8";
+            };
+            readonly card: {
+                readonly default: "#ffffff";
+            };
+            readonly popover: {
+                readonly default: "#ffffff";
+                readonly inverted: "#404040";
+            };
+            readonly sheet: {
+                readonly dialog: {
+                    readonly default: "#ffffff";
+                };
+            };
+        };
+        readonly surface: {
+            readonly accent: {
+                readonly default: {
+                    readonly default: "#cae4e7";
+                    readonly hover: "#20565c";
+                    readonly pressed: "#ffffff";
+                };
+                readonly selected: {
+                    readonly default: "#a2cdd2";
+                    readonly hover: "#87c0c6";
+                    readonly pressed: "#6cb2b9";
+                };
+                readonly subtle: {
+                    readonly default: "#ddeff1";
+                    readonly hover: "#bbdbdf";
+                    readonly pressed: "#87c0c6";
+                };
+            };
+            readonly default: {
+                readonly active: "#ebebeb";
+                readonly default: "#f8f8f8";
+                readonly disabled: "#f8f8f8";
+                readonly hover: "#ebebeb";
+                readonly muted: "#f8f8f8";
+                readonly pressed: "#e1e1e1";
+                readonly readOnly: "#f8f8f8";
+                readonly selected: {
+                    readonly default: "#ddeff1";
+                    readonly hover: "#cfe7e9";
+                    readonly pressed: "#bbdbdf";
+                };
+            };
+        };
+    };
+    readonly border: {
+        readonly default: "#d4d4d4";
+        readonly disabled: "#a4a4a4";
+        readonly emphasized: "#b4b4b4";
+        readonly focus: "#5cade5";
+        readonly hover: "#a4a4a4";
+        readonly selected: "#1e383a";
+        readonly subtle: "#ebebeb";
+    };
+    readonly cornerRadius: {
+        readonly none: 0;
+        readonly pill: 9999;
+        readonly rounded: 4;
+        readonly roundedOuter: 6;
+    };
+    readonly fontFamily: {
+        readonly header: "Equinor";
+        readonly ui: "Inter";
+    };
+    readonly fontWeight: {
+        readonly bolder: 500;
+        readonly lighter: 300;
+        readonly normal: 400;
+    };
+    readonly icon: {
+        readonly accent: "#1e383a";
+        readonly accentHover: "#cae4e7";
+        readonly accentPressed: "#ffffff";
+        readonly colorOnDark: "#dedede";
+        readonly colorOnLight: "#404040";
+        readonly disabled: "#c4c4c4";
+        readonly muted: "#a4a4a4";
+        readonly onAccent: "#dedede";
+        readonly primary: "#5b5b5b";
+        readonly secondary: "#868686";
+    };
+    readonly overlay: {
+        readonly scrim: "#1d1d1d1a";
+    };
+    readonly spacing: {
+        readonly twoXl: 28;
+        readonly twoXs: 6;
+        readonly threeXl: 32;
+        readonly threeXs: 4;
+        readonly fourXs: 2;
+        readonly lg: 20;
+        readonly md: 16;
+        readonly none: 0;
+        readonly sm: 12;
+        readonly xl: 24;
+        readonly xs: 8;
+    };
+    readonly status: {
+        readonly warning: {
+            readonly default: "#fff6f0";
+            readonly emphased: {
+                readonly default: "#c86a00";
+                readonly hover: "#753c00";
+                readonly selected: "#603204";
+            };
+            readonly hover: "#fbdac1";
+            readonly selected: "#f0b689";
+        };
+    };
+    readonly text: {
+        readonly accent: "#1d8fcf";
+        readonly colorOnDark: "#dedede";
+        readonly colorOnLight: "#404040";
+        readonly disabled: "#a4a4a4";
+        readonly muted: "#a4a4a4";
+        readonly onAccent: "#dedede";
+        readonly pressed: "#006192";
+        readonly primary: "#404040";
+        readonly secondary: "#868686";
+        readonly status: {
+            readonly onDark: "#ffffff";
+            readonly onLight: "#753c00";
+        };
+    };
+    readonly typography: {
+        readonly header: {
+            readonly twoXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 28;
+            };
+            readonly threeXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 32;
+            };
+            readonly fourXl: {
+                readonly fontSize: 32;
+                readonly lineHeight: 32;
+            };
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly lineHeight: 24;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly lineHeight: 20;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly lineHeight: 16;
+            };
+            readonly xl: {
+                readonly fontSize: 21;
+                readonly lineHeight: 24;
+            };
+            readonly xs: {
+                readonly fontSize: 12;
+                readonly lineHeight: 16;
+            };
+        };
+        readonly ui: {
+            readonly twoXl: {
+                readonly fontSize: 21;
+                readonly lineHeight: 28;
+            };
+            readonly threeXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 32;
+            };
+            readonly fourXl: {
+                readonly fontSize: 28;
+                readonly lineHeight: 32;
+            };
+            readonly fiveXl: {
+                readonly fontSize: 32;
+                readonly lineHeight: 36;
+            };
+            readonly lg: {
+                readonly fontSize: 16;
+                readonly lineHeight: 24;
+            };
+            readonly md: {
+                readonly fontSize: 14;
+                readonly lineHeight: 20;
+            };
+            readonly sm: {
+                readonly fontSize: 12;
+                readonly lineHeight: 16;
+            };
+            readonly xl: {
+                readonly fontSize: 18;
+                readonly lineHeight: 24;
+            };
+            readonly xs: {
+                readonly fontSize: 10;
+                readonly lineHeight: 16;
+            };
+        };
+    };
+};
+export type Semantic = typeof semantic;

package/instructions/typography.md

@@ -4,11 +4,43 @@ applyTo: '**'
 
 # Typography System
 
-This guide introduces the EDS typography system -- how typographic properties are tokenised, controlled via data attributes, and consumed in CSS and TypeScript.
+This guide introduces the EDS typography system -- how typographic properties are tokenised and consumed in CSS and TypeScript.
 
-## Core Concepts
+There are two ways to apply typography:
 
-Typography in EDS is broken into five independent axes. Each axis has its own set of CSS variables and can be switched at runtime using a `data-*` attribute.
+1. **Static, per-element tokens (preferred for EDS 2.0 components in `/next`)** -- set `font-family`, `font-size`, and `line-height` directly in the component CSS using semantic tokens such as `--eds-typography-ui-body-md-font-size`. The size and family are part of the component's design; consumers do not switch them at runtime. See [Semantic typography tokens for component CSS](#semantic-typography-tokens-for-component-css).
+
+2. **Runtime data-attribute switching** -- set `data-font-family` / `data-font-size` / `data-line-height` etc. on an element to flip the active typography axis at runtime. Useful for `elements.css` (semantic HTML defaults) and ad-hoc consumer markup, but not the default choice inside a component's own CSS. See [Runtime data-attribute switching](#runtime-data-attribute-switching).
+
+If you are building a new component in `packages/eds-core-react/src/components/next/`, use approach 1. Approach 2 is documented for completeness and for cases where it is the right tool.
+
+## Semantic typography tokens for component CSS
+
+Components in `/next` use the per-size, per-role semantic tokens directly in their CSS:
+
+```css
+.eds-button {
+  font-family: var(--eds-typography-ui-body-font-family);
+  font-size: var(--eds-typography-ui-body-md-font-size);
+  line-height: var(--eds-typography-ui-body-md-line-height-squished);
+}
+```
+
+The token shape is `--eds-typography-{role}-{size}-{property}` where:
+
+- **role**: `ui-body` (UI / body copy, Inter) or `header` (headings, Equinor typeface)
+- **size**: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`
+- **property**: `font-size`, `line-height-default`, `line-height-squished`, `font-weight-{lighter,normal,bolder}`
+
+`font-family` is set once per role (`--eds-typography-{ui-body,header}-font-family`); it does not have a size segment.
+
+Reach for these tokens whenever the component's typography is fixed by design -- which is the common case. Do not add `data-font-*` attributes to the component's own elements for this; the tokens above already encode the size + role combination.
+
+For the underlying decision, including font-weight handling with `--_font-weight-{bolder,lighter}` for inline `strong`/`em` inheritance, see [ADR-0005: Typography approach for EDS 2.0](../../../documentation/adr/0005-typography-approach-for-eds-2.md).
+
+## Runtime data-attribute switching
+
+Typography in EDS is also broken into five independent axes. Each axis has its own set of generic CSS variables and can be switched at runtime using a `data-*` attribute. This is the mechanism that `elements.css` and other foundation-level styles use, and it is available for ad-hoc consumer markup.
 
 | Axis | Data attribute | Modes |
 |------|---------------|-------|
@@ -166,12 +198,12 @@ The other axis files (`font-weight-*`, `line-height-*`, `tracking-*`) and the pe
 
 | Format | Import path | Use case |
 |--------|-------------|----------|
-| **CSS variables** | `@equinor/eds-tokens/css/variables` | Standard web styling via data attributes |
+| **CSS variables** | `@equinor/eds-tokens/css/variables` | Component styling via per-role semantic tokens and runtime data-attribute switching |
 | **TypeScript matrix** | `@equinor/eds-tokens/ts/typography/font-family-{ui,header}` | Direct matrix access for non-CSS consumers (RN, SSR, design tooling) |
 
 ## Best Practices
 
-- **Use data attributes** -- Let the token system resolve the right values rather than hardcoding
+- **Prefer per-role semantic tokens in component CSS** -- inside `/next` components, set `font-family`, `font-size`, and `line-height` directly with `--eds-typography-{role}-{size}-{property}` tokens; reach for `data-font-*` only for `elements.css` defaults and ad-hoc consumer markup
 - **Scale together** -- Font size, icon size, and gap are designed to work as a unit
 - **Combine axes freely** -- Each axis is independent; mix and match as needed
 - **Test across sizes** -- Verify layouts work at all font size modes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-tokens",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Design tokens for the Equinor Design System",
   "type": "module",
   "exports": {
@@ -52,24 +52,25 @@
     "design tokens"
   ],
   "devDependencies": {
-    "@rollup/plugin-babel": "^7.0.0",
-    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
+    "@tokens-studio/studio-cli": "^0.1.7",
     "@types/node": "^25.5.2",
     "copyfiles": "^2.4.1",
     "lightningcss-cli": "^1.32.0",
-    "prettier": "3.8.3",
+    "prettier": "3.9.5",
     "rimraf": "^6.1.3",
-    "rollup": "^4.60.3",
+    "rollup": "^4.62.2",
     "rollup-plugin-delete": "^3.0.2",
-    "style-dictionary": "^5.4.0",
+    "style-dictionary": "^5.5.0",
     "style-dictionary-utils": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5",
-    "@equinor/eds-color-palette-generator": "^0.1.0",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10",
     "@equinor/eds-tokens-build": "^1.1.0",
-    "@equinor/eds-tokens-sync": "^1.0.0"
+    "@equinor/eds-tokens-sync": "^1.0.0",
+    "@equinor/eds-color-palette-generator": "^0.1.0"
   },
   "scripts": {
     "build": "rollup -c && pnpm run types",
@@ -77,6 +78,7 @@
     "types": "tsc",
     "test": "vitest run",
     "test:watch": "vitest",
+    "generate:ts-tokens": "node scripts/generate-ts-tokens.mjs",
     "prettier:check": "prettier --check src/",
     "build:variables:color-scheme": "build-color-scheme-variables",
     "build:variables:semantic:static": "build-semantic-static-variables",