@equinor/eds-tokens 2.3.0-beta.2 → 2.3.0

package/instructions/typography.md

@@ -51,10 +51,10 @@ Apply data attributes to set the typographic context, then use the CSS variables
 ```css
 .text {
   font-family: var(--eds-typography-font-family);
-  font-size: calc(var(--eds-typography-font-size) * 1px);
+  font-size: var(--eds-typography-font-size);
   font-weight: var(--eds-typography-font-weight);
-  line-height: calc(var(--eds-typography-line-height) * 1px);
-  letter-spacing: calc(var(--eds-typography-tracking) * 1px);
+  line-height: var(--eds-typography-line-height);
+  letter-spacing: var(--eds-typography-tracking);
 }
 ```
 
@@ -65,8 +65,8 @@ When `data-font-size` is set, additional variables are resolved automatically:
 ```css
 .icon-next-to-text {
   /* Icon size and gap scale with font size */
-  width: calc(var(--eds-typography-icon-size) * 1px);
-  gap: calc(var(--eds-typography-gap-horizontal) * 1px);
+  width: var(--eds-typography-icon-size);
+  gap: var(--eds-typography-gap-horizontal);
 }
 ```
 
@@ -91,67 +91,83 @@ Change typographic properties by updating data attributes -- no CSS changes need
 </small>
 ```
 
-## TypeScript Tokens
+## Using Typography in TypeScript / JavaScript
 
-Typography tokens are available as nested TypeScript objects with `as const` for type safety.
+The CSS cascade is what composes the five axes into a final style. Targets without a cascade -- React Native, server-side rendering, design tooling, plain JS -- read the family matrix directly and pick the variant they want.
 
-### Import
+### Direct token import
+
+Two files are emitted, one per font family. Each is a fully resolved matrix keyed by size, with nested axes inside each size cell:
 
 ```typescript
-import { typography } from '@equinor/eds-tokens/ts/typography/font-size-md'
-import { typography } from '@equinor/eds-tokens/ts/typography/font-family-header'
-import { typography } from '@equinor/eds-tokens/ts/typography/font-weight-normal'
-import { typography } from '@equinor/eds-tokens/ts/typography/line-height-default'
-import { typography } from '@equinor/eds-tokens/ts/typography/tracking-tight'
+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,    // 300 | 400 | 500
+  lineHeight: md.lineHeight.default,   // pixels
+  letterSpacing: md.tracking.normal,
+}
+// { fontFamily: 'Inter', fontSize: 14, fontWeight: 400,
+//   lineHeight: 20, letterSpacing: 0 }
 ```
 
-### Available Files
+The size cell also exposes family-independent extras for chip- and button-like layouts:
 
-Each mode of each axis has its own file:
+```typescript
+const md = ui.fontFamilySize.md
+md.iconSize       // matches the size axis
+md.gapHorizontal  // matches the size axis
+md.gapVertical
+```
 
-| Axis | Files |
-|------|-------|
-| Font family | `font-family-header`, `font-family-ui` |
-| Font size | `font-size-xs`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-size-xl`, `font-size-2xl`, `font-size-3xl`, `font-size-4xl`, `font-size-5xl`, `font-size-6xl` |
-| Font weight | `font-weight-lighter`, `font-weight-normal`, `font-weight-bolder` |
-| Line height | `line-height-default`, `line-height-squished` |
-| Tracking | `tracking-tight`, `tracking-normal`, `tracking-wide`, `tracking-loose` |
+### Deriving variant types
 
-### Usage
+Variant names are encoded in the data, so consumers don't have to hand-roll axis-name lookups:
 
 ```typescript
-import { typography } from '@equinor/eds-tokens/ts/typography/font-size-md'
-
-// Font size files contain resolved values for that size
-typography.typography['font-size']        // '16'
-typography.typography['line-height-default'] // '20'
-typography.typography['font-weight-normal'] // '400'
+type FontFamily   = 'ui' | 'header'
+type FontSize     = keyof typeof ui.fontFamilySize           // 'xs' | 'sm' | ... | 'sixXl'
+type FontWeight   = keyof typeof ui.fontFamilySize.md.fontWeight   // 'lighter' | 'normal' | 'bolder'
+type LineHeight   = keyof typeof ui.fontFamilySize.md.lineHeight   // 'default' | 'squished'
+type Tracking     = keyof typeof ui.fontFamilySize.md.tracking     // 'tight' | 'normal' | 'wide'
 ```
 
-```typescript
-import { typography } from '@equinor/eds-tokens/ts/typography/font-family-header'
+### React Native
 
-// Font family files contain the family and all size-specific values
-typography.typography['font-family']      // 'Equinor'
-typography['font-family-size'].md['font-size'] // '16'
-```
+Pass `String(...)` over the weight when handing it to `<Text style>` (RN expects string fontWeight):
 
-### Naming Conversion
+```typescript
+import { Text, StyleSheet } from 'react-native'
+import { typography as ui } from '@equinor/eds-tokens/ts/typography/font-family-ui'
+
+const md = ui.fontFamilySize.md
+
+const styles = StyleSheet.create({
+  body: {
+    fontFamily: ui.typography.fontFamily,
+    fontSize: md.fontSize,
+    fontWeight: String(md.fontWeight.normal) as '400',
+    lineHeight: md.lineHeight.default,
+    letterSpacing: md.tracking.normal,
+  },
+})
+```
 
-CSS variable segments map to TypeScript object keys:
+### What's not exported
 
-| CSS variable | TypeScript path |
-|---|---|
-| `--eds-typography-font-size` | `typography.typography['font-size']` |
-| `--eds-typography-font-weight` | `typography.typography['font-weight']` |
-| `--eds-typography-tracking` | `typography.typography.tracking` |
+The other axis files (`font-weight-*`, `line-height-*`, `tracking-*`) and the per-size files (`font-size-{xs..6xl}`) intentionally do **not** ship as TypeScript. Their values depend on the active mode of another axis at runtime, so a static TypeScript export cannot represent them without silently picking one cell of the matrix. The two family files are the only TS surface — everything you need to compose a style lives on a single size cell within them.
 
 ## Output Formats
 
 | Format | Import path | Use case |
 |--------|-------------|----------|
 | **CSS variables** | `@equinor/eds-tokens/css/variables` | Standard web styling via data attributes |
-| **TypeScript (nested)** | `@equinor/eds-tokens/ts/typography/*` | Type-safe access with autocomplete |
+| **TypeScript matrix** | `@equinor/eds-tokens/ts/typography/font-family-{ui,header}` | Direct matrix access for non-CSS consumers (RN, SSR, design tooling) |
 
 ## Best Practices
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-tokens",
-  "version": "2.3.0-beta.2",
+  "version": "2.3.0",
   "description": "Design tokens for the Equinor Design System",
   "type": "module",
   "exports": {
@@ -45,15 +45,44 @@
     "tokens.css",
     "elements.css"
   ],
+  "keywords": [
+    "eds",
+    "design system",
+    "equinor",
+    "design tokens"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@types/node": "^25.5.2",
+    "copyfiles": "^2.4.1",
+    "lightningcss-cli": "^1.32.0",
+    "prettier": "3.8.3",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.60.3",
+    "rollup-plugin-delete": "^3.0.2",
+    "style-dictionary": "^5.4.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",
+    "@equinor/eds-tokens-build": "^1.1.0",
+    "@equinor/eds-tokens-sync": "^1.0.0"
+  },
   "scripts": {
     "build": "rollup -c && pnpm run types",
     "dev": "rollup -c -w",
     "types": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prettier:check": "prettier --check src/",
     "build:variables:color-scheme": "build-color-scheme-variables",
     "build:variables:semantic:static": "build-semantic-static-variables",
     "build:variables:semantic:dynamic": "build-semantic-dynamic-variables",
     "build:variables:elevation": "build-elevation-variables",
+    "_build:css:dark-scope": "build-dark-scope",
     "build:variables:color": "pnpm run build:variables:color-scheme && pnpm run build:variables:semantic:static && pnpm run build:variables:semantic:dynamic",
     "generate:tokens:color-core": "generate-colors palette-config.json tokens/GnovDpL3UV6X51Ot7Kv6Im",
     "generate:tokens:color-scheme": "generate-color-scheme-tokens",
@@ -66,7 +95,8 @@
     "_prebuild:css-copy-index": "copyfiles ./src/css/*.css ./build/css --flat",
     "_build:css:variables": "lightningcss --bundle ./build/css/index-variables.css -o ./build/css/variables.css",
     "_build:css-min-variables": "lightningcss --minify ./build/css/variables.css -o ./build/css/variables.min.css",
-    "_build:css": "pnpm run _prebuild:css-copy-index && pnpm run _build:css:variables && pnpm run build:variables:elevation && pnpm run _build:css-min-variables",
+    "_build:css:assert-no-light-dark": "node scripts/assert-no-light-dark.mjs",
+    "_build:css": "pnpm run _prebuild:css-copy-index && pnpm run _build:css:variables && pnpm run build:variables:elevation && pnpm run _build:css:dark-scope && pnpm run _build:css-min-variables && pnpm run _build:css:assert-no-light-dark",
     "clean": "rimraf build",
     "build:variables": "pnpm run clean && pnpm run build:variables:typography-and-spacing && pnpm run build:variables:color && pnpm run _build:css",
     "update-tokens:spacing-primitives": "sync-figma-to-tokens --file-key cpNchKjiIM19dPqTxE0fqg",
@@ -81,30 +111,5 @@
     "update-figma:color-dynamic": "sync-tokens-to-figma --file-key nyPaQ3QnI1UAcxKW4a0d2c",
     "update-tokens": "pnpm run update-tokens:foundations && pnpm run update-tokens:color-static && pnpm run update-tokens:color-dynamic && pnpm run update-tokens:spacing-primitives && pnpm run update-tokens:spacing-modes",
     "update-figma": "pnpm run update-figma:foundations && pnpm run update-figma:color-static && pnpm run update-figma:color-dynamic && pnpm run update-figma:spacing-primitives && pnpm run update-figma:spacing-modes"
-  },
-  "keywords": [
-    "eds",
-    "design system",
-    "equinor",
-    "design tokens"
-  ],
-  "devDependencies": {
-    "@equinor/eds-color-palette-generator": "workspace:^",
-    "@equinor/eds-tokens-build": "workspace:^",
-    "@equinor/eds-tokens-sync": "workspace:^",
-    "@rollup/plugin-babel": "^7.0.0",
-    "@rollup/plugin-commonjs": "^29.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@types/node": "^25.5.2",
-    "copyfiles": "^2.4.1",
-    "lightningcss-cli": "^1.32.0",
-    "prettier": "3.8.3",
-    "rimraf": "^6.1.3",
-    "rollup": "^4.60.1",
-    "rollup-plugin-delete": "^3.0.2",
-    "style-dictionary": "^5.4.0",
-    "style-dictionary-utils": "^6.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.8"
   }
-}
+}

package/build/ts/typography/font-size-2xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: '2xl',
-  typography: {
-    fontSize: 21,
-    lineHeightDefault: 28,
-    lineHeightSquished: 24,
-    iconSize: 32,
-    gapHorizontal: 13,
-    gapVertical: 13,
-    trackingTight: -2.309999942779541,
-    trackingNormal: 0,
-    trackingWide: 2.309999942779541,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-3xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: '3xl',
-  typography: {
-    fontSize: 24.5,
-    lineHeightDefault: 32,
-    lineHeightSquished: 28,
-    iconSize: 37,
-    gapHorizontal: 15,
-    gapVertical: 15,
-    trackingTight: -2.694999933242798,
-    trackingNormal: 0,
-    trackingWide: 2.694999933242798,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-4xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: '4xl',
-  typography: {
-    fontSize: 28,
-    lineHeightDefault: 32,
-    lineHeightSquished: 28,
-    iconSize: 42,
-    gapHorizontal: 17.5,
-    gapVertical: 17.5,
-    trackingTight: -3.0799999237060547,
-    trackingNormal: 0,
-    trackingWide: 3.0799999237060547,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-5xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: '5xl',
-  typography: {
-    fontSize: 32,
-    lineHeightDefault: 36,
-    lineHeightSquished: 32,
-    iconSize: 48,
-    gapHorizontal: 20,
-    gapVertical: 20,
-    trackingTight: -3.5199999809265137,
-    trackingNormal: 0,
-    trackingWide: 300,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-6xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: '6xl',
-  typography: {
-    fontSize: 37,
-    lineHeightDefault: 40,
-    lineHeightSquished: 36,
-    iconSize: 56,
-    gapHorizontal: 23,
-    gapVertical: 23,
-    trackingTight: -4.070000171661377,
-    trackingNormal: 0,
-    trackingWide: 4.070000171661377,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-lg.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: 'lg',
-  typography: {
-    fontSize: 16,
-    lineHeightDefault: 24,
-    lineHeightSquished: 20,
-    iconSize: 24,
-    gapHorizontal: 10,
-    gapVertical: 10,
-    trackingTight: -1.7599999904632568,
-    trackingNormal: 0,
-    trackingWide: 1.7599999904632568,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-md.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: 'md',
-  typography: {
-    fontSize: 14,
-    lineHeightDefault: 20,
-    lineHeightSquished: 16,
-    iconSize: 20,
-    gapHorizontal: 8.5,
-    gapVertical: 8.5,
-    trackingTight: -1.5399999618530273,
-    trackingNormal: 0,
-    trackingWide: 1.5399999618530273,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-sm.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: 'sm',
-  typography: {
-    fontSize: 12,
-    lineHeightDefault: 16,
-    lineHeightSquished: 12,
-    iconSize: 18,
-    gapHorizontal: 7.5,
-    gapVertical: 7.5,
-    trackingTight: -1.3200000524520874,
-    trackingNormal: 0,
-    trackingWide: 1.3200000524520874,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-xl.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: 'xl',
-  typography: {
-    fontSize: 18.5,
-    lineHeightDefault: 24,
-    lineHeightSquished: 20,
-    iconSize: 28,
-    gapHorizontal: 11.5,
-    gapVertical: 11.5,
-    trackingTight: -1.7599999904632568,
-    trackingNormal: 0,
-    trackingWide: 2.0350000858306885,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-size-xs.ts

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  documentation: 'xs',
-  typography: {
-    fontSize: 10.5,
-    lineHeightDefault: 16,
-    lineHeightSquished: 12,
-    iconSize: 16,
-    gapHorizontal: 6.5,
-    gapVertical: 6.5,
-    trackingTight: -1.149999976158142,
-    trackingNormal: 0,
-    trackingWide: 1.149999976158142,
-    fontWeightLighter: 300,
-    fontWeightNormal: 400,
-    fontWeightBolder: 500,
-  },
-} as const

package/build/ts/typography/font-weight-bolder.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    fontWeight: 500,
-  },
-} as const

package/build/ts/typography/font-weight-lighter.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    fontWeight: 300,
-  },
-} as const

package/build/ts/typography/font-weight-normal.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    fontWeight: 400,
-  },
-} as const

package/build/ts/typography/line-height-default.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    lineHeight: 16,
-  },
-} as const

package/build/ts/typography/line-height-squished.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    lineHeight: 12,
-  },
-} as const

package/build/ts/typography/tracking-loose.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    tracking: 1.149999976158142,
-  },
-} as const

package/build/ts/typography/tracking-normal.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    tracking: 0,
-  },
-} as const

package/build/ts/typography/tracking-tight.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    tracking: -1.149999976158142,
-  },
-} as const

package/build/ts/typography/tracking-wide.ts

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const typography = {
-  typography: {
-    tracking: 1.149999976158142,
-  },
-} as const