@equinor/eds-tokens 2.3.2 → 3.0.0-beta.1

package/src/tokens/ts/density/relaxed.ts

@@ -0,0 +1,102 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+
+export const density = {
+  cornerRadius: {
+    none: 0,
+    pill: 9999,
+    rounded: 6,
+    roundedOuter: 8,
+  },
+  spacing: {
+    twoXl: 32,
+    twoXs: 8,
+    threeXl: 36,
+    threeXs: 6,
+    fourXs: 4,
+    lg: 24,
+    md: 20,
+    none: 0,
+    sm: 16,
+    xl: 28,
+    xs: 10,
+  },
+  typography: {
+    header: {
+      twoXl: {
+        fontSize: 28,
+        lineHeight: 32,
+      },
+      threeXl: {
+        fontSize: 32,
+        lineHeight: 32,
+      },
+      fourXl: {
+        fontSize: 36,
+        lineHeight: 36,
+      },
+      lg: {
+        fontSize: 21,
+        lineHeight: 24,
+      },
+      md: {
+        fontSize: 18,
+        lineHeight: 24,
+      },
+      sm: {
+        fontSize: 16,
+        lineHeight: 20,
+      },
+      xl: {
+        fontSize: 24,
+        lineHeight: 28,
+      },
+      xs: {
+        fontSize: 14,
+        lineHeight: 16,
+      },
+    },
+    ui: {
+      twoXl: {
+        fontSize: 24,
+        lineHeight: 32,
+      },
+      threeXl: {
+        fontSize: 28,
+        lineHeight: 32,
+      },
+      fourXl: {
+        fontSize: 32,
+        lineHeight: 36,
+      },
+      fiveXl: {
+        fontSize: 37,
+        lineHeight: 40,
+      },
+      lg: {
+        fontSize: 18,
+        lineHeight: 24,
+      },
+      md: {
+        fontSize: 16,
+        lineHeight: 24,
+      },
+      sm: {
+        fontSize: 14,
+        lineHeight: 20,
+      },
+      xl: {
+        fontSize: 21,
+        lineHeight: 28,
+      },
+      xs: {
+        fontSize: 12,
+        lineHeight: 16,
+      },
+    },
+  },
+} as const
+
+export type Density = typeof density

package/src/tokens/ts/font/default.ts

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+
+export const font = {
+  family: {
+    header: 'Equinor',
+    ui: 'Inter',
+  },
+  weight: {
+    bolder: 500,
+    lighter: 300,
+    normal: 400,
+  },
+} as const
+
+export type Font = typeof font

package/src/tokens/ts/primitives/default.ts

@@ -0,0 +1,171 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+
+export const primitives = {
+  fontFamily: {
+    equinor: 'Equinor',
+    inter: 'Inter',
+  },
+  lineheightScale: {
+    '100': {
+      default: 12,
+    },
+    '200': {
+      default: 16,
+    },
+    '300': {
+      default: 16,
+    },
+    '400': {
+      default: 20,
+    },
+    '500': {
+      default: 24,
+    },
+    '600': {
+      default: 24,
+    },
+    '700': {
+      default: 28,
+    },
+    '800': {
+      default: 32,
+    },
+    '900': {
+      default: 32,
+    },
+    '1000': {
+      default: 36,
+    },
+    '1100': {
+      default: 40,
+    },
+  },
+  spacing: {
+    '0': 0,
+    '6': 1,
+    '12': 2,
+    '19': 3,
+    '25': 4,
+    '37': 6,
+    '50': 8,
+    '62': 10,
+    '75': 12,
+    '87': 14,
+    '100': 16,
+    '125': 20,
+    '150': 24,
+    '175': 28,
+    '200': 32,
+    '225': 36,
+    '250': 40,
+    '275': 44,
+    '300': 48,
+    '325': 52,
+    '350': 56,
+    '375': 60,
+    '400': 64,
+    '450': 72,
+    '500': 80,
+    '550': 88,
+    '600': 96,
+    '700': 112,
+    '800': 128,
+    '900': 144,
+    '1000': 160,
+    '1100': 176,
+    '1200': 192,
+    '1300': 208,
+    '1400': 224,
+    '1500': 240,
+    '1600': 256,
+    '1700': 272,
+    '1800': 288,
+    '1900': 304,
+    '2000': 320,
+    '2100': 336,
+    '2200': 352,
+  },
+  typeScale: {
+    equinor: {
+      '100': {
+        fontSize: 10,
+      },
+      '200': {
+        fontSize: 12,
+      },
+      '300': {
+        fontSize: 14,
+      },
+      '400': {
+        fontSize: 16,
+      },
+      '500': {
+        fontSize: 18,
+      },
+      '600': {
+        fontSize: 21,
+      },
+      '700': {
+        fontSize: 24,
+      },
+      '800': {
+        fontSize: 28,
+      },
+      '900': {
+        fontSize: 32,
+      },
+      '1000': {
+        fontSize: 36,
+      },
+      '1100': {
+        fontSize: 42,
+      },
+    },
+    inter: {
+      '100': {
+        fontSize: 9,
+      },
+      '200': {
+        fontSize: 10,
+      },
+      '300': {
+        fontSize: 12,
+      },
+      '400': {
+        fontSize: 14,
+      },
+      '500': {
+        fontSize: 16,
+      },
+      '600': {
+        fontSize: 18,
+      },
+      '700': {
+        fontSize: 21,
+      },
+      '800': {
+        fontSize: 24,
+      },
+      '900': {
+        fontSize: 28,
+      },
+      '1000': {
+        fontSize: 32,
+      },
+      '1100': {
+        fontSize: 37,
+      },
+    },
+    trackingNormal: 0,
+  },
+  weightScale: {
+    bolder: 500,
+    lighter: 300,
+    normal: 400,
+  },
+} as const
+
+export type Primitives = typeof primitives

package/src/tokens/ts/semantic/dark.ts

@@ -0,0 +1,214 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+
+export const semantic = {
+  background: {
+    container: {
+      canvas: {
+        default: '#131414',
+      },
+      card: {
+        default: '#030303',
+      },
+      popover: {
+        default: '#030303',
+        inverted: '#d6e3ee',
+      },
+      sheet: {
+        dialog: {
+          default: '#030303',
+        },
+      },
+    },
+    surface: {
+      accent: {
+        default: {
+          default: '#2c3839',
+          hover: '#c7f1f6',
+          pressed: '#030303',
+        },
+        selected: {
+          default: '#41878e',
+          hover: '#3c6266',
+          pressed: '#439199',
+        },
+        subtle: {
+          default: '#191d1d',
+          hover: '#3e7378',
+          pressed: '#3c6266',
+        },
+      },
+      default: {
+        active: '#1b1c1d',
+        default: '#131414',
+        disabled: '#131414',
+        hover: '#1b1c1d',
+        muted: '#131414',
+        pressed: '#525c65',
+        readOnly: '#131414',
+        selected: {
+          default: '#191d1d',
+          hover: '#3c6266',
+          pressed: '#3e7378',
+        },
+      },
+    },
+  },
+  border: {
+    default: '#5d6b76',
+    disabled: '#738696',
+    emphasized: '#525c65',
+    focus: '#2d8bc5',
+    hover: '#738696',
+    selected: '#f1ffff',
+    subtle: '#1b1c1d',
+  },
+  cornerRadius: {
+    none: 0,
+    pill: 9999,
+    rounded: 4,
+    roundedOuter: 6,
+  },
+  fontFamily: {
+    header: 'Equinor',
+    ui: 'Inter',
+  },
+  fontWeight: {
+    bolder: 500,
+    lighter: 300,
+    normal: 400,
+  },
+  icon: {
+    accent: '#f1ffff',
+    accentHover: '#2c3839',
+    accentPressed: '#030303',
+    colorOnDark: '#333639',
+    colorOnLight: '#d6e3ee',
+    disabled: '#6b7d8b',
+    muted: '#738696',
+    onAccent: '#333639',
+    primary: '#cadae7',
+    secondary: '#9fb4c6',
+  },
+  overlay: {
+    scrim: '#1d1d1d1a',
+  },
+  spacing: {
+    twoXl: 28,
+    twoXs: 6,
+    threeXl: 32,
+    threeXs: 4,
+    fourXs: 2,
+    lg: 20,
+    md: 16,
+    none: 0,
+    sm: 12,
+    xl: 24,
+    xs: 8,
+  },
+  status: {
+    warning: {
+      default: '#161311',
+      emphased: {
+        default: '#f99539',
+        hover: '#ffdebe',
+        selected: '#ffd7b3',
+      },
+      hover: '#7e4e25',
+      selected: '#b46201',
+    },
+  },
+  text: {
+    accent: '#5abbfb',
+    colorOnDark: '#333639',
+    colorOnLight: '#d6e3ee',
+    disabled: '#738696',
+    muted: '#738696',
+    onAccent: '#333639',
+    pressed: '#b0deff',
+    primary: '#d6e3ee',
+    secondary: '#9fb4c6',
+    status: {
+      onDark: '#040303',
+      onLight: '#ffdebe',
+    },
+  },
+  typography: {
+    header: {
+      twoXl: {
+        fontSize: 24,
+        lineHeight: 28,
+      },
+      threeXl: {
+        fontSize: 24,
+        lineHeight: 32,
+      },
+      fourXl: {
+        fontSize: 32,
+        lineHeight: 32,
+      },
+      lg: {
+        fontSize: 18,
+        lineHeight: 24,
+      },
+      md: {
+        fontSize: 16,
+        lineHeight: 20,
+      },
+      sm: {
+        fontSize: 14,
+        lineHeight: 16,
+      },
+      xl: {
+        fontSize: 21,
+        lineHeight: 24,
+      },
+      xs: {
+        fontSize: 12,
+        lineHeight: 16,
+      },
+    },
+    ui: {
+      twoXl: {
+        fontSize: 21,
+        lineHeight: 28,
+      },
+      threeXl: {
+        fontSize: 24,
+        lineHeight: 32,
+      },
+      fourXl: {
+        fontSize: 28,
+        lineHeight: 32,
+      },
+      fiveXl: {
+        fontSize: 32,
+        lineHeight: 36,
+      },
+      lg: {
+        fontSize: 16,
+        lineHeight: 24,
+      },
+      md: {
+        fontSize: 14,
+        lineHeight: 20,
+      },
+      sm: {
+        fontSize: 12,
+        lineHeight: 16,
+      },
+      xl: {
+        fontSize: 18,
+        lineHeight: 24,
+      },
+      xs: {
+        fontSize: 10,
+        lineHeight: 16,
+      },
+    },
+  },
+} as const
+
+export type Semantic = typeof semantic

package/src/tokens/ts/semantic/light.ts

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