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

package/README.md

@@ -133,7 +133,17 @@ const darkSurface = darkSemanticNested.bg.neutral.surface // "#262626"
 
 * **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)
+* **Typography** -- Font sizes, line heights, and font families (requires font files, see below)
+
+### Font loading
+
+The typography system requires two font families: **Equinor** (headings) and **Inter** (UI/body text). Load both via the EDS variable font stylesheet:
+
+```html
+<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
+```
+
+> **Note:** The older `equinor-font.css` only includes the Equinor font. Components using `data-font-family="ui"` (Button, TextField, Input, etc.) will fall back to a generic sans-serif if Inter is not loaded.
 
 ### Typography variables that adapt to data-attributes
   * Font family setup (UI and Header fonts)

package/build/js/spacing/comfortable.d.ts

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION: string;
 export const SIZING_ICON_XS: number;
 export const SIZING_ICON_XS_CONTAINER: number;
 export const SIZING_ICON_SM: number;

package/build/js/spacing/comfortable.js

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION = "Comfortable";
 export const SIZING_ICON_XS = 14;
 export const SIZING_ICON_XS_CONTAINER = 8;
 export const SIZING_ICON_SM = 16;

package/build/js/spacing/spacious.d.ts

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION: string;
 export const SIZING_ICON_XS: number;
 export const SIZING_ICON_XS_CONTAINER: number;
 export const SIZING_ICON_SM: number;

package/build/js/spacing/spacious.js

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const DOCUMENTATION = "Spacious";
 export const SIZING_ICON_XS = 16;
 export const SIZING_ICON_XS_CONTAINER = 8;
 export const SIZING_ICON_SM = 18;

package/build/ts/color/color-scheme/dark-color-scheme.ts

@@ -0,0 +1,116 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const color = {
+  bgFloating: '#202223',
+  bgBackdrop: '#738696',
+  bgInput: '#0b0b0b',
+  borderFocus: '#2d8bc5',
+  textLink: '#5abbfb',
+  bgDisabled: '#525c65',
+  borderDisabled: '#738696',
+  textDisabled: '#738696',
+  accent: {
+    '1': '#0a0b0b',
+    '2': '#1e2323',
+    '3': '#3c6266',
+    '4': '#3e7378',
+    '5': '#41878e',
+    '6': '#3c6266',
+    '7': '#439199',
+    '8': '#6ec0c9',
+    '9': '#8cd2da',
+    '10': '#ace3e9',
+    '11': '#c7f1f6',
+    '12': '#bcebf1',
+    '13': '#e6ffff',
+    '14': '#2c3839',
+    '15': '#030303',
+  },
+  neutral: {
+    '1': '#0b0b0b',
+    '2': '#202223',
+    '3': '#525c65',
+    '4': '#5d6b76',
+    '5': '#6b7d8b',
+    '6': '#525c65',
+    '7': '#738696',
+    '8': '#9fb4c6',
+    '9': '#b4c7d7',
+    '10': '#cadae7',
+    '11': '#deeaf4',
+    '12': '#d6e3ee',
+    '13': '#f5fdff',
+    '14': '#333639',
+    '15': '#030303',
+  },
+  info: {
+    '1': '#0a0b0c',
+    '2': '#1d2226',
+    '3': '#33607e',
+    '4': '#316f98',
+    '5': '#2e82b7',
+    '6': '#33607e',
+    '7': '#2d8bc5',
+    '8': '#5abbfb',
+    '9': '#7dceff',
+    '10': '#a2e0ff',
+    '11': '#c4eeff',
+    '12': '#b7e8ff',
+    '13': '#ecffff',
+    '14': '#2a3741',
+    '15': '#030304',
+  },
+  success: {
+    '1': '#0a0c0a',
+    '2': '#1e231e',
+    '3': '#3c673a',
+    '4': '#3e793c',
+    '5': '#418e3e',
+    '6': '#3c673a',
+    '7': '#439941',
+    '8': '#6eca6a',
+    '9': '#8cdb87',
+    '10': '#aceba8',
+    '11': '#c7f7c3',
+    '12': '#bcf2b8',
+    '13': '#e6ffe3',
+    '14': '#2c392b',
+    '15': '#030303',
+  },
+  warning: {
+    '1': '#0c0b0a',
+    '2': '#27201b',
+    '3': '#7e4e25',
+    '4': '#97571b',
+    '5': '#b46201',
+    '6': '#7e4e25',
+    '7': '#c36800',
+    '8': '#f99539',
+    '9': '#ffad63',
+    '10': '#ffc791',
+    '11': '#ffddb9',
+    '12': '#ffd4aa',
+    '13': '#fff7e6',
+    '14': '#413226',
+    '15': '#040303',
+  },
+  danger: {
+    '1': '#0d0a0a',
+    '2': '#2a1e1e',
+    '3': '#923a3c',
+    '4': '#b03940',
+    '5': '#d43745',
+    '6': '#923a3c',
+    '7': '#e53748',
+    '8': '#ff8082',
+    '9': '#ffa3a1',
+    '10': '#ffc1bf',
+    '11': '#ffd9d7',
+    '12': '#ffd0ce',
+    '13': '#fff5f4',
+    '14': '#492d2c',
+    '15': '#040303',
+  },
+} as const

package/build/ts/color/color-scheme/dark-semantic.ts

@@ -0,0 +1,162 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const color = {
+  bg: {
+    neutral: {
+      canvas: '#0b0b0b',
+      surface: '#202223',
+      fillMuted: {
+        default: '#525c65',
+        hover: '#5d6b76',
+        active: '#6b7d8b',
+      },
+      fillEmphasis: {
+        default: '#b4c7d7',
+        hover: '#cadae7',
+        active: '#deeaf4',
+      },
+    },
+    accent: {
+      canvas: '#0a0b0b',
+      surface: '#1e2323',
+      fillMuted: {
+        default: '#3c6266',
+        hover: '#3e7378',
+        active: '#41878e',
+      },
+      fillEmphasis: {
+        default: '#8cd2da',
+        hover: '#ace3e9',
+        active: '#c7f1f6',
+      },
+    },
+    success: {
+      canvas: '#0a0c0a',
+      surface: '#1e231e',
+      fillMuted: {
+        default: '#3c673a',
+        hover: '#3e793c',
+        active: '#418e3e',
+      },
+      fillEmphasis: {
+        default: '#8cdb87',
+        hover: '#aceba8',
+        active: '#c7f7c3',
+      },
+    },
+    info: {
+      canvas: '#0a0b0c',
+      surface: '#1d2226',
+      fillMuted: {
+        default: '#33607e',
+        hover: '#316f98',
+        active: '#2e82b7',
+      },
+      fillEmphasis: {
+        default: '#7dceff',
+        hover: '#a2e0ff',
+        active: '#c4eeff',
+      },
+    },
+    warning: {
+      canvas: '#0c0b0a',
+      surface: '#27201b',
+      fillMuted: {
+        default: '#7e4e25',
+        hover: '#97571b',
+        active: '#b46201',
+      },
+      fillEmphasis: {
+        default: '#ffad63',
+        hover: '#ffc791',
+        active: '#ffddb9',
+      },
+    },
+    danger: {
+      canvas: '#0d0a0a',
+      surface: '#2a1e1e',
+      fillMuted: {
+        default: '#923a3c',
+        hover: '#b03940',
+        active: '#d43745',
+      },
+      fillEmphasis: {
+        default: '#ffa3a1',
+        hover: '#ffc1bf',
+        active: '#ffd9d7',
+      },
+    },
+  },
+  border: {
+    neutral: {
+      subtle: '#525c65',
+      medium: '#738696',
+      strong: '#9fb4c6',
+    },
+    accent: {
+      subtle: '#3c6266',
+      medium: '#439199',
+      strong: '#6ec0c9',
+    },
+    success: {
+      subtle: '#3c673a',
+      medium: '#439941',
+      strong: '#6eca6a',
+    },
+    info: {
+      subtle: '#33607e',
+      medium: '#2d8bc5',
+      strong: '#5abbfb',
+    },
+    warning: {
+      subtle: '#7e4e25',
+      medium: '#c36800',
+      strong: '#f99539',
+    },
+    danger: {
+      subtle: '#923a3c',
+      medium: '#e53748',
+      strong: '#ff8082',
+    },
+  },
+  text: {
+    neutral: {
+      subtle: '#d6e3ee',
+      strong: '#f5fdff',
+      subtleOnEmphasis: '#333639',
+      strongOnEmphasis: '#030303',
+    },
+    accent: {
+      subtle: '#bcebf1',
+      strong: '#e6ffff',
+      subtleOnEmphasis: '#2c3839',
+      strongOnEmphasis: '#030303',
+    },
+    success: {
+      subtle: '#bcf2b8',
+      strong: '#e6ffe3',
+      subtleOnEmphasis: '#2c392b',
+      strongOnEmphasis: '#030303',
+    },
+    info: {
+      subtle: '#b7e8ff',
+      strong: '#ecffff',
+      subtleOnEmphasis: '#2a3741',
+      strongOnEmphasis: '#030304',
+    },
+    warning: {
+      subtle: '#ffd4aa',
+      strong: '#fff7e6',
+      subtleOnEmphasis: '#413226',
+      strongOnEmphasis: '#040303',
+    },
+    danger: {
+      subtle: '#ffd0ce',
+      strong: '#fff5f4',
+      subtleOnEmphasis: '#492d2c',
+      strongOnEmphasis: '#040303',
+    },
+  },
+} as const

package/build/ts/color/color-scheme/light-color-scheme.ts

@@ -0,0 +1,116 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const color = {
+  bgFloating: '#ffffff',
+  bgBackdrop: '#aeaeae',
+  bgInput: '#f5f5f5',
+  borderFocus: '#6fb6e9',
+  textLink: '#0070a9',
+  bgDisabled: '#e1e1e1',
+  borderDisabled: '#aeaeae',
+  textDisabled: '#aeaeae',
+  accent: {
+    '1': '#eaf8fa',
+    '2': '#f6ffff',
+    '3': '#cfe7e9',
+    '4': '#bbdbdf',
+    '5': '#a2cdd2',
+    '6': '#bbdbdf',
+    '7': '#7cbac1',
+    '8': '#21767e',
+    '9': '#206f77',
+    '10': '#205c62',
+    '11': '#20565c',
+    '12': '#1f6369',
+    '13': '#141f20',
+    '14': '#cae4e7',
+    '15': '#ffffff',
+  },
+  neutral: {
+    '1': '#f5f5f5',
+    '2': '#ffffff',
+    '3': '#e1e1e1',
+    '4': '#d4d4d4',
+    '5': '#c4c4c4',
+    '6': '#d4d4d4',
+    '7': '#aeaeae',
+    '8': '#696969',
+    '9': '#636363',
+    '10': '#525252',
+    '11': '#4d4d4d',
+    '12': '#585858',
+    '13': '#1d1d1d',
+    '14': '#dedede',
+    '15': '#ffffff',
+  },
+  info: {
+    '1': '#e7f8ff',
+    '2': '#f4ffff',
+    '3': '#cae6fa',
+    '4': '#b5daf5',
+    '5': '#99cbf0',
+    '6': '#b5daf5',
+    '7': '#6fb6e9',
+    '8': '#0070a9',
+    '9': '#006aa0',
+    '10': '#085883',
+    '11': '#0e5279',
+    '12': '#015e8d',
+    '13': '#121e27',
+    '14': '#c5e3f9',
+    '15': '#ffffff',
+  },
+  success: {
+    '1': '#eafbe8',
+    '2': '#f6fff5',
+    '3': '#cfeacc',
+    '4': '#bbe0b8',
+    '5': '#a2d49e',
+    '6': '#bbe0b8',
+    '7': '#7cc278',
+    '8': '#227e22',
+    '9': '#207720',
+    '10': '#20621f',
+    '11': '#215c1f',
+    '12': '#20691f',
+    '13': '#142114',
+    '14': '#cae8c7',
+    '15': '#ffffff',
+  },
+  warning: {
+    '1': '#fff1e2',
+    '2': '#fffcf0',
+    '3': '#fbdac1',
+    '4': '#f6caaa',
+    '5': '#f0b689',
+    '6': '#f6caaa',
+    '7': '#e89959',
+    '8': '#a34e00',
+    '9': '#9b4900',
+    '10': '#813e00',
+    '11': '#773a00',
+    '12': '#8a4100',
+    '13': '#27190e',
+    '14': '#fad6bc',
+    '15': '#ffffff',
+  },
+  danger: {
+    '1': '#ffecea',
+    '2': '#fff9f8',
+    '3': '#ffd0ce',
+    '4': '#ffbcba',
+    '5': '#ffa3a1',
+    '6': '#ffbcba',
+    '7': '#ff7a7d',
+    '8': '#c6002d',
+    '9': '#bc002a',
+    '10': '#9a1026',
+    '11': '#8e1525',
+    '12': '#a50827',
+    '13': '#2e1414',
+    '14': '#ffcbc9',
+    '15': '#ffffff',
+  },
+} as const

package/build/ts/color/color-scheme/light-semantic.ts

@@ -0,0 +1,162 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const color = {
+  bg: {
+    neutral: {
+      canvas: '#f5f5f5',
+      surface: '#ffffff',
+      fillMuted: {
+        default: '#e1e1e1',
+        hover: '#d4d4d4',
+        active: '#c4c4c4',
+      },
+      fillEmphasis: {
+        default: '#636363',
+        hover: '#525252',
+        active: '#4d4d4d',
+      },
+    },
+    accent: {
+      canvas: '#eaf8fa',
+      surface: '#f6ffff',
+      fillMuted: {
+        default: '#cfe7e9',
+        hover: '#bbdbdf',
+        active: '#a2cdd2',
+      },
+      fillEmphasis: {
+        default: '#206f77',
+        hover: '#205c62',
+        active: '#20565c',
+      },
+    },
+    success: {
+      canvas: '#eafbe8',
+      surface: '#f6fff5',
+      fillMuted: {
+        default: '#cfeacc',
+        hover: '#bbe0b8',
+        active: '#a2d49e',
+      },
+      fillEmphasis: {
+        default: '#207720',
+        hover: '#20621f',
+        active: '#215c1f',
+      },
+    },
+    info: {
+      canvas: '#e7f8ff',
+      surface: '#f4ffff',
+      fillMuted: {
+        default: '#cae6fa',
+        hover: '#b5daf5',
+        active: '#99cbf0',
+      },
+      fillEmphasis: {
+        default: '#006aa0',
+        hover: '#085883',
+        active: '#0e5279',
+      },
+    },
+    warning: {
+      canvas: '#fff1e2',
+      surface: '#fffcf0',
+      fillMuted: {
+        default: '#fbdac1',
+        hover: '#f6caaa',
+        active: '#f0b689',
+      },
+      fillEmphasis: {
+        default: '#9b4900',
+        hover: '#813e00',
+        active: '#773a00',
+      },
+    },
+    danger: {
+      canvas: '#ffecea',
+      surface: '#fff9f8',
+      fillMuted: {
+        default: '#ffd0ce',
+        hover: '#ffbcba',
+        active: '#ffa3a1',
+      },
+      fillEmphasis: {
+        default: '#bc002a',
+        hover: '#9a1026',
+        active: '#8e1525',
+      },
+    },
+  },
+  border: {
+    neutral: {
+      subtle: '#d4d4d4',
+      medium: '#aeaeae',
+      strong: '#696969',
+    },
+    accent: {
+      subtle: '#bbdbdf',
+      medium: '#7cbac1',
+      strong: '#21767e',
+    },
+    success: {
+      subtle: '#bbe0b8',
+      medium: '#7cc278',
+      strong: '#227e22',
+    },
+    info: {
+      subtle: '#b5daf5',
+      medium: '#6fb6e9',
+      strong: '#0070a9',
+    },
+    warning: {
+      subtle: '#f6caaa',
+      medium: '#e89959',
+      strong: '#a34e00',
+    },
+    danger: {
+      subtle: '#ffbcba',
+      medium: '#ff7a7d',
+      strong: '#c6002d',
+    },
+  },
+  text: {
+    neutral: {
+      subtle: '#585858',
+      strong: '#1d1d1d',
+      subtleOnEmphasis: '#dedede',
+      strongOnEmphasis: '#ffffff',
+    },
+    accent: {
+      subtle: '#1f6369',
+      strong: '#141f20',
+      subtleOnEmphasis: '#cae4e7',
+      strongOnEmphasis: '#ffffff',
+    },
+    success: {
+      subtle: '#20691f',
+      strong: '#142114',
+      subtleOnEmphasis: '#cae8c7',
+      strongOnEmphasis: '#ffffff',
+    },
+    info: {
+      subtle: '#015e8d',
+      strong: '#121e27',
+      subtleOnEmphasis: '#c5e3f9',
+      strongOnEmphasis: '#ffffff',
+    },
+    warning: {
+      subtle: '#8a4100',
+      strong: '#27190e',
+      subtleOnEmphasis: '#fad6bc',
+      strongOnEmphasis: '#ffffff',
+    },
+    danger: {
+      subtle: '#a50827',
+      strong: '#2e1414',
+      subtleOnEmphasis: '#ffcbc9',
+      strongOnEmphasis: '#ffffff',
+    },
+  },
+} as const