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

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

@@ -0,0 +1,122 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const typography = {
+  documentation: 'ui-body',
+  typography: {
+    fontFamily: 'Inter',
+  },
+  fontFamilySize: {
+    xs: {
+      fontSize: 10.5,
+      trackingTight: -1.149999976158142,
+      trackingNormal: 0,
+      trackingWide: 1.149999976158142,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 16,
+      lineHeightSquished: 12,
+    },
+    sm: {
+      fontSize: 12,
+      trackingTight: -1.3200000524520874,
+      trackingNormal: 0,
+      trackingWide: 1.3200000524520874,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 16,
+      lineHeightSquished: 12,
+    },
+    md: {
+      fontSize: 14,
+      trackingTight: -1.5399999618530273,
+      trackingNormal: 0,
+      trackingWide: 1.5399999618530273,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 20,
+      lineHeightSquished: 16,
+    },
+    lg: {
+      fontSize: 16,
+      trackingTight: -1.7599999904632568,
+      trackingNormal: 0,
+      trackingWide: 1.7599999904632568,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 24,
+      lineHeightSquished: 20,
+    },
+    xl: {
+      fontSize: 18.5,
+      trackingTight: -1.7599999904632568,
+      trackingNormal: 0,
+      trackingWide: 2.0350000858306885,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 24,
+      lineHeightSquished: 20,
+    },
+    twoXl: {
+      fontSize: 21,
+      trackingTight: -2.309999942779541,
+      trackingNormal: 0,
+      trackingWide: 2.309999942779541,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 28,
+      lineHeightSquished: 24,
+    },
+    threeXl: {
+      fontSize: 24.5,
+      trackingTight: -2.694999933242798,
+      trackingNormal: 0,
+      trackingWide: 2.694999933242798,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 32,
+      lineHeightSquished: 28,
+    },
+    fourXl: {
+      fontSize: 28,
+      trackingTight: -3.0799999237060547,
+      trackingNormal: 0,
+      trackingWide: 3.0799999237060547,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 32,
+      lineHeightSquished: 28,
+    },
+    fiveXl: {
+      fontSize: 32,
+      trackingTight: -3.5199999809265137,
+      trackingNormal: 0,
+      trackingWide: 300,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 36,
+      lineHeightSquished: 32,
+    },
+    sixXl: {
+      fontSize: 37,
+      trackingTight: -4.070000171661377,
+      trackingNormal: 0,
+      trackingWide: 4.070000171661377,
+      fontWeightLighter: 300,
+      fontWeightNormal: 400,
+      fontWeightBolder: 500,
+      lineHeightDefault: 40,
+      lineHeightSquished: 36,
+    },
+  },
+} as const

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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

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

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

@@ -0,0 +1,9 @@
+/**
+ * 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

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

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

@@ -0,0 +1,9 @@
+/**
+ * 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

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

package/instructions/colors-dynamic.md

@@ -104,6 +104,35 @@ Use one of these values for the `data-color-appearance` attribute:
 - `warning` -- Cautionary states
 - `danger` -- Destructive or error states
 
+## JavaScript Tokens (Flat)
+
+The dynamic color tokens are available as flat ES6 exports with `SCREAMING_SNAKE_CASE` constants. These resolve to the concrete color values for each appearance.
+
+### Import
+
+```typescript
+import {
+  BG_FILL_EMPHASIS_DEFAULT,
+  TEXT_STRONG_ON_EMPHASIS,
+  BORDER_STRONG,
+} from '@equinor/eds-tokens/js/color/dynamic/accent'
+```
+
+Each appearance has its own file:
+
+- `@equinor/eds-tokens/js/color/dynamic/accent`
+- `@equinor/eds-tokens/js/color/dynamic/neutral`
+- `@equinor/eds-tokens/js/color/dynamic/success`
+- `@equinor/eds-tokens/js/color/dynamic/info`
+- `@equinor/eds-tokens/js/color/dynamic/warning`
+- `@equinor/eds-tokens/js/color/dynamic/danger`
+
+:::note
+
+The dynamic approach does **not** include a nested TypeScript format. Dynamic tokens are designed to be resolved at runtime via CSS variables and the `data-color-appearance` attribute. Use the CSS variables for dynamic usage and the JS constants when you need resolved values for a specific appearance.
+
+:::
+
 ## Best Practices
 
 - **Use abstraction** -- Write CSS once, reuse with different appearances

package/instructions/colors-static.md

@@ -72,6 +72,84 @@ Background fill-muted and fill-emphasis include state variants for hover and act
 }
 ```
 
+## TypeScript Tokens
+
+The static color tokens are also available as a nested TypeScript object with full type safety and autocomplete. The object mirrors the CSS variable hierarchy using camelCase keys and `as const` for literal type inference.
+
+### Import
+
+```typescript
+import { color } from '@equinor/eds-tokens/ts/color/static/semantic'
+```
+
+### Usage
+
+Access tokens through dot notation with full autocomplete:
+
+```typescript
+// Background tokens
+color.bg.accent.canvas          // resolved color value
+color.bg.neutral.surface
+color.bg.accent.fillMuted.default
+color.bg.accent.fillMuted.hover
+
+// Text tokens
+color.text.accent.strong
+color.text.neutral.subtleOnEmphasis
+
+// Border tokens
+color.border.danger.medium
+color.border.accent.strong
+```
+
+### Example: Styled components / CSS-in-JS
+
+```typescript
+import { color } from '@equinor/eds-tokens/ts/color/static/semantic'
+
+const styles = {
+  backgroundColor: color.bg.accent.fillEmphasis.default,
+  color: color.text.accent.strongOnEmphasis,
+  borderColor: color.border.accent.strong,
+}
+```
+
+### Example: Runtime token lookup
+
+```typescript
+import { color } from '@equinor/eds-tokens/ts/color/static/semantic'
+
+// Type-safe access to semantic categories
+const categories = ['accent', 'neutral', 'danger'] as const
+
+for (const cat of categories) {
+  console.log(color.bg[cat].canvas)
+}
+```
+
+### Naming Conversion
+
+CSS variable segments are converted to camelCase:
+
+| CSS variable | TypeScript path |
+|---|---|
+| `--eds-color-bg-accent-canvas` | `color.bg.accent.canvas` |
+| `--eds-color-bg-neutral-fill-muted-default` | `color.bg.neutral.fillMuted.default` |
+| `--eds-color-text-success-strong-on-emphasis` | `color.text.success.strongOnEmphasis` |
+| `--eds-color-border-danger-medium` | `color.border.danger.medium` |
+
+## JavaScript Tokens (Flat)
+
+A flat ES6 export with `SCREAMING_SNAKE_CASE` constants is also available:
+
+```typescript
+import {
+  BG_ACCENT_CANVAS,
+  TEXT_NEUTRAL_STRONG,
+  BORDER_DANGER_MEDIUM,
+} from '@equinor/eds-tokens/js/color/static/semantic'
+```
+
 ## Best Practices
 
 - **Be explicit** -- Choose the specific semantic category your element needs

package/instructions/colors.md

@@ -115,6 +115,19 @@ Both the static and dynamic libraries support light and dark modes automatically
 pnpm add @equinor/eds-tokens
 ```
 
+## Output Formats
+
+The color tokens are available in multiple formats:
+
+| Format | Import path | Use case |
+|--------|-------------|----------|
+| **CSS variables** | `@equinor/eds-tokens/css/variables` | Standard web styling |
+| **TypeScript (nested)** | `@equinor/eds-tokens/ts/color/static/*` | Type-safe access with autocomplete |
+| **JavaScript (flat)** | `@equinor/eds-tokens/js/color/static/*` | CSS-in-JS, utilities |
+| **JSON** | `@equinor/eds-tokens/json/color/*` | Tooling, custom transforms |
+
+See the static and dynamic guides for format-specific usage examples.
+
 ## Next Steps
 
 Choose your approach and refer to the specific guide: