@eui/styles 18.0.0-next.73 → 18.0.0-next.75

package/dist/base/02-tokens/typography/theme-default.scss

@@ -0,0 +1,210 @@
+@use '../_ecl/ec/typography' as EclEcTypography;
+
+// ECL EC defaults
+
+// $font-size: (
+//   'xs': 0.75rem,
+//   's': 0.875rem,
+//   'm': 1rem,
+//   'l': 1.25rem,
+//   'xl': 1.5rem,
+//   '2xl': 1.75rem,
+//   '3xl': 2rem,
+//   '4xl': 2.5rem,
+// ) !default;
+
+$ecl-fs: (
+    'xs': map-get(EclEcTypography.$font-size, 'xs'),
+    's': map-get(EclEcTypography.$font-size, 's'),
+    'm': map-get(EclEcTypography.$font-size, 'm'),
+    'l': map-get(EclEcTypography.$font-size, 'l'),
+    'xl': map-get(EclEcTypography.$font-size, 'xl'),
+    '2xl': map-get(EclEcTypography.$font-size, '2xl'),
+    '3xl': map-get(EclEcTypography.$font-size, '3xl'),
+    '4xl': map-get(EclEcTypography.$font-size, '4xl'),
+    '5xl': 2.75rem,  // NOT EXISTING IN ECL EC
+    '6xl': 3rem  // NOT EXISTING IN ECL EC
+);
+
+// ECL EC defaults
+
+// $line-height: (
+//   'xs': 1.25rem,
+//   's': 1.5rem,
+//   'm': 1.75rem,
+//   'l': 2rem,
+//   'xl': 2.25rem,
+//   '2xl': 2.5rem,
+//   '3xl': 2.75rem,
+//   '4xl': 3rem,
+// ) !default;
+
+$ecl-lh-p: (
+    'xs': map-get(EclEcTypography.$line-height, 'xs'),
+    's': map-get(EclEcTypography.$line-height, 's'),
+    'm': map-get(EclEcTypography.$line-height, 'm'),
+    'l': map-get(EclEcTypography.$line-height, 'l'),
+    'xl': map-get(EclEcTypography.$line-height, 'xl'),
+    '2xl': map-get(EclEcTypography.$line-height, '2xl'),
+    '3xl': map-get(EclEcTypography.$line-height, '3xl'),
+    '4xl': map-get(EclEcTypography.$line-height, '4xl'),
+    '5xl': 3.25rem, // NOT EXISTING IN ECL EC
+    '6xl': 3.50rem // NOT EXISTING IN ECL EC
+);
+
+// ECL EC compensations
+
+$ecl-lh: (
+    'xs': 1rem,
+    's': 1rem,
+    'm': 1.25rem,
+    'l': 1.5rem,
+    'xl': 1.75rem,
+    '2xl': 2rem,
+    '3xl': 2.5rem,
+    '4xl': 2.75rem,
+    '5xl': 3rem,
+    '6xl': 3.25rem,
+);
+
+
+$eui-base-tokens-fonts: (
+  'xs':             normal normal 400 #{map-get($ecl-fs,'xs') + '/' + map-get($ecl-lh, 'xs')} var(--eui-f-family),
+  'xs-p':           normal normal 400 #{map-get($ecl-fs,'xs') + '/' + map-get($ecl-lh-p, 'xs')} var(--eui-f-family),
+  'xs-b':        normal normal 700 #{map-get($ecl-fs,'xs') + '/' + map-get($ecl-lh, 'xs')} var(--eui-f-family),
+  'xs-b-p':      normal normal 700 #{map-get($ecl-fs,'xs') + '/' + map-get($ecl-lh-p, 'xs')} var(--eui-f-family),
+  's':              normal normal 400 #{map-get($ecl-fs, 's') + '/' + map-get($ecl-lh, 's')} var(--eui-f-family),
+  's-p':            normal normal 400 #{map-get($ecl-fs, 's') + '/' + map-get($ecl-lh-p, 's')} var(--eui-f-family),
+  's-b':         normal normal 700 #{map-get($ecl-fs, 's') + '/' + map-get($ecl-lh, 's')} var(--eui-f-family),
+  's-b-p':       normal normal 700 #{map-get($ecl-fs, 's') + '/' + map-get($ecl-lh-p, 's')} var(--eui-f-family),
+  'm':              normal normal 400 #{map-get($ecl-fs, 'm') + '/' + map-get($ecl-lh, 'm')} var(--eui-f-family),
+  'm-p':            normal normal 400 #{map-get($ecl-fs, 'm') + '/' + map-get($ecl-lh-p, 'm')} var(--eui-f-family),
+  'm-b':         normal normal 700 #{map-get($ecl-fs, 'm') + '/' + map-get($ecl-lh, 'm')} var(--eui-f-family),
+  'm-b-p':       normal normal 700 #{map-get($ecl-fs, 'm') + '/' + map-get($ecl-lh-p, 'm')} var(--eui-f-family),
+  'l':              normal normal 400 #{map-get($ecl-fs, 'l') + '/' + map-get($ecl-lh, 'l')} var(--eui-f-family),
+  'l-p':            normal normal 400 #{map-get($ecl-fs, 'l') + '/' + map-get($ecl-lh-p, 'l')} var(--eui-f-family),
+  'l-b':         normal normal 700 #{map-get($ecl-fs, 'l') + '/' + map-get($ecl-lh, 'l')} var(--eui-f-family),
+  'l-b-p':       normal normal 700 #{map-get($ecl-fs, 'l') + '/' + map-get($ecl-lh-p, 'l')} var(--eui-f-family),
+  'xl':             normal normal 400 #{map-get($ecl-fs, 'xl') + '/' + map-get($ecl-lh, 'xl')} var(--eui-f-family),
+  'xl-p':           normal normal 400 #{map-get($ecl-fs, 'xl') + '/' + map-get($ecl-lh-p, 'xl')} var(--eui-f-family),
+  'xl-b':        normal normal 700 #{map-get($ecl-fs, 'xl') + '/' + map-get($ecl-lh, 'xl')} var(--eui-f-family),
+  'xl-b-p':      normal normal 700 #{map-get($ecl-fs, 'xl') + '/' + map-get($ecl-lh-p, 'xl')} var(--eui-f-family),
+  '2xl':            normal normal 400 #{map-get($ecl-fs, '2xl') + '/' + map-get($ecl-lh, '2xl')} var(--eui-f-family),
+  '2xl-p':          normal normal 400 #{map-get($ecl-fs, '2xl') + '/' + map-get($ecl-lh-p, '2xl')} var(--eui-f-family),
+  '2xl-b':       normal normal 700 #{map-get($ecl-fs, '2xl') + '/' + map-get($ecl-lh, '2xl')} var(--eui-f-family),
+  '2xl-b-p':     normal normal 700 #{map-get($ecl-fs, '2xl') + '/' + map-get($ecl-lh-p, '2xl')} var(--eui-f-family),
+  '3xl':            normal normal 400 #{map-get($ecl-fs, '3xl') + '/' + map-get($ecl-lh, '3xl')} var(--eui-f-family),
+  '3xl-p':          normal normal 400 #{map-get($ecl-fs, '3xl') + '/' + map-get($ecl-lh-p, '3xl')} var(--eui-f-family),
+  '3xl-b':       normal normal 700 #{map-get($ecl-fs, '3xl') + '/' + map-get($ecl-lh, '3xl')} var(--eui-f-family),
+  '3xl-b-p':     normal normal 700 #{map-get($ecl-fs, '3xl') + '/' + map-get($ecl-lh-p, '3xl')} var(--eui-f-family),
+  '4xl':            normal normal 400 #{map-get($ecl-fs, '4xl') + '/' + map-get($ecl-lh, '4xl')} var(--eui-f-family),
+  '4xl-p':          normal normal 400 #{map-get($ecl-fs, '4xl') + '/' + map-get($ecl-lh-p, '4xl')} var(--eui-f-family),
+  '4xl-b':       normal normal 700 #{map-get($ecl-fs, '4xl') + '/' + map-get($ecl-lh, '4xl')} var(--eui-f-family),
+  '4xl-b-p':     normal normal 700 #{map-get($ecl-fs, '4xl') + '/' + map-get($ecl-lh-p, '4xl')} var(--eui-f-family),
+  '5xl':            normal normal 400 #{map-get($ecl-fs, '5xl') + '/' + map-get($ecl-lh, '5xl')} var(--eui-f-family),
+  '5xl-p':          normal normal 400 #{map-get($ecl-fs, '5xl') + '/' + map-get($ecl-lh-p, '5xl')} var(--eui-f-family),
+  '5xl-b':       normal normal 700 #{map-get($ecl-fs, '5xl') + '/' + map-get($ecl-lh, '5xl')} var(--eui-f-family),
+  '5xl-b-p':     normal normal 700 #{map-get($ecl-fs, '5xl') + '/' + map-get($ecl-lh-p, '5xl')} var(--eui-f-family),
+  '6xl':            normal normal 400 #{map-get($ecl-fs, '6xl') + '/' + map-get($ecl-lh, '6xl')} var(--eui-f-family),
+  '6xl-p':          normal normal 400 #{map-get($ecl-fs, '6xl') + '/' + map-get($ecl-lh-p, '6xl')} var(--eui-f-family),
+  '6xl-b':       normal normal 700 #{map-get($ecl-fs, '6xl') + '/' + map-get($ecl-lh, '6xl')} var(--eui-f-family),
+  '6xl-b-p':     normal normal 700 #{map-get($ecl-fs, '6xl') + '/' + map-get($ecl-lh-p, '6xl')} var(--eui-f-family)
+);
+
+$eui-base-tokens-font-sizes: (
+    'xs': map-get($ecl-fs, 'xs'),
+    's': map-get($ecl-fs, 's'),
+    'm': map-get($ecl-fs, 'm'),
+    'l': map-get($ecl-fs, 'l'),
+    'xl': map-get($ecl-fs, 'xl'),
+    '2xl': map-get($ecl-fs, '2xl'),
+    '3xl': map-get($ecl-fs, '3xl'),
+    '4xl': map-get($ecl-fs, '4xl'),
+    '5xl': map-get($ecl-fs, '5xl'),
+    '6xl': map-get($ecl-fs, '6xl')
+);
+
+$eui-base-context-font-sizes: (
+    'xs': 'xs',
+    's': 's',
+    'm': 'm',
+    'l': 'l',
+    'xl': 'xl',
+    '2xl': '2xl',
+    '3xl': '3xl',
+    '4xl': '4xl',
+    '5xl': '5xl',
+    '6xl': '6xl'
+);
+
+$eui-base-context-fonts: (
+    'xs': 'xs-p',
+    // 'xs-prolonged': 'xs-p',
+    'xs-compact': 'xs',
+    'xs-bold': 'xs-b-p',
+    // 'xs-bold-prolonged': 'xs-b-p',
+    'xs-bold-compact': 'xs-b',
+
+    's': 's-p',
+    // 's-prolonged': 's-p',
+    's-compact': 's',
+    's-bold': 's-b-p',
+    // 's-bold-prolonged': 's-b-p',
+    's-bold-compact': 's-b',
+
+    'm': 'm-p',
+    // 'm-prolonged': 'm-p',
+    'm-compact': 'm',
+    'm-bold': 'm-b-p',
+    // 'm-bold-prolonged': 'm-b-p',
+    'm-bold-compact': 'm-b',
+
+    'l': 'l-p',
+    // 'l-prolonged': 'l-p',
+    'l-compact': 'l',
+    'l-bold': 'l-b-p',
+    // 'l-bold-prolonged': 'l-b-p',
+    'l-bold-compact': 'l-b',
+
+    'xl': 'xl-p',
+    // 'xl-prolonged': 'xl-p',
+    'xl-compact': 'xl',
+    'xl-bold': 'xl-b-p',
+    // 'xl-bold-prolonged': 'xl-b-p',
+    'xl-bold-compact': 'xl-b',
+
+    '2xl': '2xl-p',
+    // '2xl-prolonged': '2xl-p',
+    '2xl-compact': '2xl',
+    '2xl-bold': '2xl-b-p',
+    // '2xl-bold-prolonged': '2xl-b-p',
+    '2xl-bold-compact': '2xl-b',
+
+    '3xl': '3xl-p',
+    // '3xl-prolonged': '3xl-p',
+    '3xl-compact': '3xl',
+    '3xl-bold': '3xl-b-p',
+    // '3xl-bold-prolonged': '3xl-b-p',
+    '3xl-bold-compact': '3xl-b',
+
+    '4xl': '4xl-p',
+    // '4xl-prolonged': '4xl-p',
+    '4xl-compact': '4xl',
+    '4xl-bold': '4xl-b-p',
+    // '4xl-bold-prolonged': '4xl-b-p',
+    '4xl-bold-compact': '4xl-b',
+
+    '5xl': '5xl-p',
+    // '5xl-prolonged': '5xl-p',
+    '5xl-compact': '5xl',
+    '5xl-bold': '5xl-b-p',
+    // '5xl-bold-prolonged': '5xl-b-p',
+    '5xl-bold-compact': '5xl-b',
+
+    '6xl': '6xl-p',
+    // '6xl-prolonged': '6xl-p',
+    '6xl-compact': '6xl',
+    '6xl-bold': '6xl-b-p',
+    // '6xl-bold-prolonged': '6xl-b-p',
+    '6xl-bold-compact': '6xl-b',
+);

package/dist/base/02-tokens/typography/theme-ecl-eu.scss

@@ -0,0 +1,240 @@
+@use '../_ecl/eu/typography' as EclEuTypography;
+
+// ECL EU defaults
+
+// $font-size: (
+//   '2xs': 0.625rem,
+//   'xs': 0.75rem,
+//   's': 0.875rem,
+//   'm': 1rem,
+//   'l': 1.125rem,
+//   'xl': 1.25rem,
+//   '2xl': 1.5rem,
+//   '3xl': 1.75rem,
+//   '4xl': 2rem,
+//   '5xl': 2.25rem,
+//   '6xl': 2.625rem,
+// ) !default;
+
+$ecl-fs-eu: (
+    '2xs': map-get(EclEuTypography.$font-size, '2xs'),
+    'xs': map-get(EclEuTypography.$font-size, 'xs'),
+    's': map-get(EclEuTypography.$font-size, 's'),
+    'm': map-get(EclEuTypography.$font-size, 'm'),
+    'l': map-get(EclEuTypography.$font-size, 'l'),
+    'xl': map-get(EclEuTypography.$font-size, 'xl'),
+    '2xl': map-get(EclEuTypography.$font-size, '2xl'),
+    '3xl': map-get(EclEuTypography.$font-size, '3xl'),
+    '4xl': map-get(EclEuTypography.$font-size, '4xl'),
+    '5xl': map-get(EclEuTypography.$font-size, '5xl'),
+    '6xl': map-get(EclEuTypography.$font-size, '6xl'),
+);
+
+// ECL EU defaults
+
+// $line-height: (
+//   '2xs': 1rem,
+//   'xs': 1rem,
+//   's': 1rem,
+//   'm': 1.25rem,
+//   'l': 1.5rem,
+//   'xl': 1.5rem,
+//   '2xl': 1.75rem,
+//   '3xl': 2rem,
+//   '4xl': 2.5rem,
+//   '5xl': 2.75rem,
+//   '6xl': 3.25rem,
+// ) !default;
+
+$ecl-lh-eu: (
+    '2xs': map-get(EclEuTypography.$line-height, '2xs'),
+    'xs': map-get(EclEuTypography.$line-height, 'xs'),
+    's': map-get(EclEuTypography.$line-height, 's'),
+    'm': map-get(EclEuTypography.$line-height, 'm'),
+    'l': map-get(EclEuTypography.$line-height, 'l'),
+    'xl': map-get(EclEuTypography.$line-height, 'xl'),
+    '2xl': map-get(EclEuTypography.$line-height, '2xl'),
+    '3xl': map-get(EclEuTypography.$line-height, '3xl'),
+    '4xl': map-get(EclEuTypography.$line-height, '4xl'),
+    '5xl': map-get(EclEuTypography.$line-height, '5xl'),
+    '6xl': map-get(EclEuTypography.$line-height, '6xl')
+);
+
+// ECL EU prolonged defaults
+// $line-height-prolonged: (
+//   'xs': 1.25rem,
+//   's': 1.25rem,
+//   'm': 1.5rem,
+//   'l': 1.75rem,
+//   'xl': 1.75rem,
+// ) !default;
+
+
+$ecl-lh-eu-p: (
+    '2xs': 1rem, // NOT EXIST IN ECL EU
+    'xs': map-get(EclEuTypography.$line-height-prolonged, 'xs'),
+    's': map-get(EclEuTypography.$line-height-prolonged, 's'),
+    'm': map-get(EclEuTypography.$line-height-prolonged, 'm'),
+    'l': map-get(EclEuTypography.$line-height-prolonged, 'l'),
+    'xl': map-get(EclEuTypography.$line-height-prolonged, 'xl'),
+    '2xl': 2rem, // NOT EXIST IN ECL EU
+    '3xl': 2.5rem, // NOT EXIST IN ECL EU
+    '4xl': 2.75rem, // NOT EXIST IN ECL EU
+    '5xl': 3rem, // NOT EXIST IN ECL EU
+    '6xl': 3.25rem // NOT EXIST IN ECL EU
+);
+
+
+$eui-base-tokens-fonts-ecl-eu: (
+  '2xs':            normal normal 400 #{map-get($ecl-fs-eu,'2xs') + '/' + map-get($ecl-lh-eu, '2xs')} var(--eui-f-family),
+  '2xs-p':          normal normal 400 #{map-get($ecl-fs-eu,'2xs') + '/' + map-get($ecl-lh-eu-p, '2xs')} var(--eui-f-family),
+  '2xs-b':       normal normal 700 #{map-get($ecl-fs-eu,'2xs') + '/' + map-get($ecl-lh-eu, '2xs')} var(--eui-f-family),
+  '2xs-b-p':     normal normal 700 #{map-get($ecl-fs-eu,'2xs') + '/' + map-get($ecl-lh-eu-p, '2xs')} var(--eui-f-family),
+  'xs':             normal normal 400 #{map-get($ecl-fs-eu,'xs') + '/' + map-get($ecl-lh-eu, 'xs')} var(--eui-f-family),
+  'xs-p':           normal normal 400 #{map-get($ecl-fs-eu,'xs') + '/' + map-get($ecl-lh-eu-p, 'xs')} var(--eui-f-family),
+  'xs-b':        normal normal 700 #{map-get($ecl-fs-eu,'xs') + '/' + map-get($ecl-lh-eu, 'xs')} var(--eui-f-family),
+  'xs-b-p':      normal normal 700 #{map-get($ecl-fs-eu,'xs') + '/' + map-get($ecl-lh-eu-p, 'xs')} var(--eui-f-family),
+  's':              normal normal 400 #{map-get($ecl-fs-eu, 's') + '/' + map-get($ecl-lh-eu, 's')} var(--eui-f-family),
+  's-p':            normal normal 400 #{map-get($ecl-fs-eu, 's') + '/' + map-get($ecl-lh-eu-p, 's')} var(--eui-f-family),
+  's-b':         normal normal 700 #{map-get($ecl-fs-eu, 's') + '/' + map-get($ecl-lh-eu, 's')} var(--eui-f-family),
+  's-b-p':       normal normal 700 #{map-get($ecl-fs-eu, 's') + '/' + map-get($ecl-lh-eu-p, 's')} var(--eui-f-family),
+  'm':              normal normal 400 #{map-get($ecl-fs-eu, 'm') + '/' + map-get($ecl-lh-eu, 'm')} var(--eui-f-family),
+  'm-p':            normal normal 400 #{map-get($ecl-fs-eu, 'm') + '/' + map-get($ecl-lh-eu-p, 'm')} var(--eui-f-family),
+  'm-b':         normal normal 700 #{map-get($ecl-fs-eu, 'm') + '/' + map-get($ecl-lh-eu, 'm')} var(--eui-f-family),
+  'm-b-p':       normal normal 700 #{map-get($ecl-fs-eu, 'm') + '/' + map-get($ecl-lh-eu-p, 'm')} var(--eui-f-family),
+  'l':              normal normal 400 #{map-get($ecl-fs-eu, 'l') + '/' + map-get($ecl-lh-eu, 'l')} var(--eui-f-family),
+  'l-p':            normal normal 400 #{map-get($ecl-fs-eu, 'l') + '/' + map-get($ecl-lh-eu-p, 'l')} var(--eui-f-family),
+  'l-b':         normal normal 700 #{map-get($ecl-fs-eu, 'l') + '/' + map-get($ecl-lh-eu, 'l')} var(--eui-f-family),
+  'l-b-p':       normal normal 700 #{map-get($ecl-fs-eu, 'l') + '/' + map-get($ecl-lh-eu-p, 'l')} var(--eui-f-family),
+  'xl':             normal normal 400 #{map-get($ecl-fs-eu, 'xl') + '/' + map-get($ecl-lh-eu, 'xl')} var(--eui-f-family),
+  'xl-p':           normal normal 400 #{map-get($ecl-fs-eu, 'xl') + '/' + map-get($ecl-lh-eu-p, 'xl')} var(--eui-f-family),
+  'xl-b':        normal normal 700 #{map-get($ecl-fs-eu, 'xl') + '/' + map-get($ecl-lh-eu, 'xl')} var(--eui-f-family),
+  'xl-b-p':      normal normal 700 #{map-get($ecl-fs-eu, 'xl') + '/' + map-get($ecl-lh-eu-p, 'xl')} var(--eui-f-family),
+  '2xl':            normal normal 400 #{map-get($ecl-fs-eu, '2xl') + '/' + map-get($ecl-lh-eu, '2xl')} var(--eui-f-family),
+  '2xl-p':          normal normal 400 #{map-get($ecl-fs-eu, '2xl') + '/' + map-get($ecl-lh-eu-p, '2xl')} var(--eui-f-family),
+  '2xl-b':       normal normal 700 #{map-get($ecl-fs-eu, '2xl') + '/' + map-get($ecl-lh-eu, '2xl')} var(--eui-f-family),
+  '2xl-b-p':     normal normal 700 #{map-get($ecl-fs-eu, '2xl') + '/' + map-get($ecl-lh-eu-p, '2xl')} var(--eui-f-family),
+  '3xl':            normal normal 400 #{map-get($ecl-fs-eu, '3xl') + '/' + map-get($ecl-lh-eu, '3xl')} var(--eui-f-family),
+  '3xl-p':          normal normal 400 #{map-get($ecl-fs-eu, '3xl') + '/' + map-get($ecl-lh-eu-p, '3xl')} var(--eui-f-family),
+  '3xl-b':       normal normal 700 #{map-get($ecl-fs-eu, '3xl') + '/' + map-get($ecl-lh-eu, '3xl')} var(--eui-f-family),
+  '3xl-b-p':     normal normal 700 #{map-get($ecl-fs-eu, '3xl') + '/' + map-get($ecl-lh-eu-p, '3xl')} var(--eui-f-family),
+  '4xl':            normal normal 400 #{map-get($ecl-fs-eu, '4xl') + '/' + map-get($ecl-lh-eu, '4xl')} var(--eui-f-family),
+  '4xl-p':          normal normal 400 #{map-get($ecl-fs-eu, '4xl') + '/' + map-get($ecl-lh-eu-p, '4xl')} var(--eui-f-family),
+  '4xl-b':       normal normal 700 #{map-get($ecl-fs-eu, '4xl') + '/' + map-get($ecl-lh-eu, '4xl')} var(--eui-f-family),
+  '4xl-b-p':     normal normal 700 #{map-get($ecl-fs-eu, '4xl') + '/' + map-get($ecl-lh-eu-p, '4xl')} var(--eui-f-family),
+  '5xl':            normal normal 400 #{map-get($ecl-fs-eu, '5xl') + '/' + map-get($ecl-lh-eu, '5xl')} var(--eui-f-family),
+  '5xl-p':          normal normal 400 #{map-get($ecl-fs-eu, '5xl') + '/' + map-get($ecl-lh-eu-p, '5xl')} var(--eui-f-family),
+  '5xl-b':       normal normal 700 #{map-get($ecl-fs-eu, '5xl') + '/' + map-get($ecl-lh-eu, '5xl')} var(--eui-f-family),
+  '5xl-b-p':     normal normal 700 #{map-get($ecl-fs-eu, '5xl') + '/' + map-get($ecl-lh-eu-p, '5xl')} var(--eui-f-family),
+  '6xl':            normal normal 400 #{map-get($ecl-fs-eu, '6xl') + '/' + map-get($ecl-lh-eu, '6xl')} var(--eui-f-family),
+  '6xl-p':          normal normal 400 #{map-get($ecl-fs-eu, '6xl') + '/' + map-get($ecl-lh-eu-p, '6xl')} var(--eui-f-family),
+  '6xl-b':       normal normal 700 #{map-get($ecl-fs-eu, '6xl') + '/' + map-get($ecl-lh-eu, '6xl')} var(--eui-f-family),
+  '6xl-b-p':     normal normal 700 #{map-get($ecl-fs-eu, '6xl') + '/' + map-get($ecl-lh-eu-p, '6xl')} var(--eui-f-family)
+);
+
+$eui-base-tokens-font-sizes-ecl-eu: (
+    '2xs': map-get($ecl-fs-eu, '2xs'),
+    'xs': map-get($ecl-fs-eu, 'xs'),
+    's': map-get($ecl-fs-eu, 's'),
+    'm': map-get($ecl-fs-eu, 'm'),
+    'l': map-get($ecl-fs-eu, 'l'),
+    'xl': map-get($ecl-fs-eu, 'xl'),
+    '2xl': map-get($ecl-fs-eu, '2xl'),
+    '3xl': map-get($ecl-fs-eu, '3xl'),
+    '4xl': map-get($ecl-fs-eu, '4l'),
+    '5xl': map-get($ecl-fs-eu, '5xl'),
+    '6xl': map-get($ecl-fs-eu, '6xl')
+);
+
+$eui-base-context-font-sizes-ecl-eu: (
+    '2xs': '2xs',
+    'xs': 'xs',
+    's': 's',
+    'm': 'm',
+    'l': 'l',
+    'xl': 'xl',
+    '2xl': '2xl',
+    '3xl': '3xl',
+    '4xl': '4xl',
+    '5xl': '5xl',
+    '6xl': '6xl'
+);
+
+$eui-base-context-fonts-ecl-eu: (
+    '2xs': '2xs',
+    '2xs-prolonged': '2xs-p',
+    '2xs-compact': '2xs',
+    '2xs-bold': '2xs-b',
+    '2xs-bold-prolonged': '2xs-b-p',
+    '2xs-bold-compact': '2xs-b',
+
+    'xs': 'xs',
+    'xs-prolonged': 'xs-p',
+    'xs-compact': 'xs',
+    'xs-bold': 'xs-b',
+    'xs-bold-prolonged': 'xs-b-p',
+    'xs-bold-compact': 'xs-b',
+
+    's': 's',
+    's-prolonged': 's-p',
+    's-compact': 's',
+    's-bold': 's-b',
+    's-bold-prolonged': 's-b-p',
+    's-bold-compact': 's-b',
+
+    'm': 'm',
+    'm-prolonged': 'm-p',
+    'm-compact': 'm',
+    'm-bold': 'm-b',
+    'm-bold-prolonged': 'm-b-p',
+    'm-bold-compact': 'm-b',
+
+    'l': 'l',
+    'l-prolonged': 'l-p',
+    'l-compact': 'l',
+    'l-bold': 'l-b',
+    'l-bold-prolonged': 'l-b-p',
+    'l-bold-compact': 'l-b',
+
+    'xl': 'xl',
+    'xl-prolonged': 'xl-p',
+    'xl-compact': 'xl',
+    'xl-bold': 'xl-b',
+    'xl-bold-prolonged': 'xl-b-p',
+    'xl-bold-compact': 'xl-b',
+
+    '2xl': '2xl',
+    '2xl-prolonged': '2xl-p',
+    '2xl-compact': '2xl',
+    '2xl-bold': '2xl-b',
+    '2xl-bold-prolonged': '2xl-b-p',
+    '2xl-bold-compact': '2xl-b',
+
+    '3xl': '3xl',
+    '3xl-prolonged': '3xl-p',
+    '3xl-compact': '3xl',
+    '3xl-bold': '3xl-b',
+    '3xl-bold-prolonged': '3xl-b-p',
+    '3xl-bold-compact': '3xl-b',
+
+    '4xl': '4xl',
+    '4xl-prolonged': '4xl-p',
+    '4xl-compact': '4xl',
+    '4xl-bold': '4xl-b',
+    '4xl-bold-prolonged': '4xl-b-p',
+    '4xl-bold-compact': '4xl-b',
+
+    '5xl': '5xl',
+    '5xl-prolonged': '5xl-p',
+    '5xl-compact': '5xl',
+    '5xl-bold': '5xl-b',
+    '5xl-bold-prolonged': '5xl-b-p',
+    '5xl-bold-compact': '5xl-b',
+
+    '6xl': '6xl',
+    '6xl-prolonged': '6xl-p',
+    '6xl-compact': '6xl',
+    '6xl-bold': '6xl-b',
+    '6xl-bold-prolonged': '6xl-b-p',
+    '6xl-bold-compact': '6xl-b',
+);

package/dist/base/03-vars/_internal-icons.vars.scss

@@ -0,0 +1,7 @@
+:root {
+    --eui-internal-icon-checkmark-path: url('#{$eui-assets-base-path}/icons/eui-internals/check.svg');
+    --eui-internal-icon-remove-path: url('#{$eui-assets-base-path}/icons/eui-internals/remove.svg');
+    --eui-internal-icon-ellipse-path: url('#{$eui-assets-base-path}/icons/eui-internals/ellipse.svg');
+    --eui-internal-icon-external-path: url('#{$eui-assets-base-path}/icons/eui-internals/external.svg');
+    --eui-internal-icon-chevron-down-path: url('#{$eui-assets-base-path}/icons/eui-internals/chevron-down.svg');
+}

package/dist/base/03-vars/_module-dark.scss

@@ -0,0 +1 @@
+@import 'colors/theme-dark-base';

package/dist/base/03-vars/_module-ecl-eu.scss

@@ -0,0 +1,4 @@
+@import 'colors/theme-ecl-eu-base';
+@import 'spacings/theme-ecl-eu-base';
+@import 'typography/theme-ecl-eu-base';
+@import 'typography/theme-ecl-eu-context';

package/dist/base/03-vars/_module-eui-legacy-hc.scss

@@ -0,0 +1 @@
+@import 'colors/theme-eui-legacy-hc-base';

package/dist/base/03-vars/_module-eui-legacy.scss

@@ -0,0 +1,27 @@
+@import 'colors/theme-eui-legacy-base';
+@import 'colors/theme-eui-legacy-context';
+
+// legacy var names for backward compatibility
+html.eui-t-eui-legacy {
+
+    // spacings
+    @each $spacing, $value in $eui-base-context-spacings {
+        --eui-base-spacing-#{$spacing}: var(--eui-bs-#{$spacing});
+    }
+
+    // colors
+    @each $color, $shades in $eui-base-tokens-colors-eui-legacy {
+        @each $shade, $value in $shades {
+            $base-color: $color;
+
+            @if $color == 'neutral' {
+                $base-color: 'grey'
+            }
+
+            --eui-base-color-#{$base-color + '-' + $shade}: #{$value};
+            --eui-base-color-#{$base-color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+
+    // others
+}

package/dist/base/03-vars/_module.scss

@@ -0,0 +1,25 @@
+@import 'colors/theme-default-base';
+@import 'colors/theme-default-context';
+
+@import 'spacings/theme-default-base';
+@import 'spacings/theme-default-context';
+
+@import 'typography/theme-default-base';
+@import 'typography/theme-default-context';
+
+@import 'border-radius/theme-default-base';
+@import 'border-radius/theme-default-context';
+
+@import 'border-width/theme-default-base';
+@import 'border-width/theme-default-context';
+
+@import 'shadows/theme-default-base';
+@import 'shadows/theme-default-context';
+
+@import 'layout/theme-default-base';
+@import 'layout/theme-default-context';
+
+@import 'tokens.vars';
+@import 'other.vars';
+
+@import 'internal-icons.vars';

package/dist/base/03-vars/_other.vars.scss

@@ -0,0 +1,27 @@
+:root {
+    --eui-base-line-height: 1.5;
+    --eui-base-scale-factor: 1;
+
+    // Animations related
+    --eui-base-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    --eui-base-animation-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --eui-base-animation-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    --eui-base-animation-ease-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);    // ease
+    --eui-base-animation-ease-in-out-timing-function: ease-in-out;
+
+    --eui-base-animation-duration-fast: 0.25s;
+    --eui-base-animation-duration-medium: 0.5s;
+    --eui-base-animation-duration-slow: 1s;
+    --eui-base-animation-duration-base: 500ms;
+    --eui-base-animation-duration: var(--eui-base-animation-duration-base);
+
+    --eui-base-animation-transition-base: all 0.2s #{var(--eui-base-animation-linear-out-slow-in-timing-function)};
+    --eui-base-animation-transition-ease: all 0.2s #{var(--eui-base-animation-ease-timing-function)};
+    --eui-base-animation-transition-ease-in-out: all 0.2s #{var(--eui-base-animation-ease-in-out-timing-function)};
+    --eui-base-animation-transition-ease-in-out-1s: all 1s #{var(--eui-base-animation-ease-in-out-timing-function)};
+
+    --eui-base-animation-delay: 0s;
+    --eui-base-animation-direction: normal;
+    --eui-base-animation-fill-mode: forwards;    // this prevents the animation from restarting
+    --eui-base-animation-background-color: var(--eui-c-primary-lighter);  // #cfcfdf;
+}

package/dist/base/03-vars/_tokens.vars.scss

@@ -0,0 +1,26 @@
+:root {
+
+    // ICON-SIZES
+    @each $icon-size, $value in $eui-base-tokens-icon-sizes {
+        --eui-bis-#{$icon-size}: #{$value};
+    }
+    @each $icon-size, $value in $eui-base-tokens-icon-sizes {
+        --eui-is-#{$icon-size}: var(--eui-bis-#{$icon-size});
+    }
+
+    // Z-INDEXES
+    @each $idx, $value in $eui-base-tokens-z-indexes {
+        --eui-bzi-#{$idx}: #{$value};
+    }
+    @each $idx, $value in $eui-base-tokens-z-indexes {
+        --eui-zi-#{$idx}: var(--eui-bzi-#{$idx});
+    }
+
+    // OPACITY
+    @each $idx, $value in $eui-base-tokens-opacity {
+        --eui-bo-#{$idx}: #{$value};
+    }
+    @each $idx, $value in $eui-base-tokens-opacity {
+        --eui-o-#{$idx}: var(--eui-bo-#{$idx});
+    }
+}

package/dist/base/03-vars/border-radius/theme-default-base.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $br, $value in $eui-base-tokens-border-radius {
+        --eui-bbr-#{$br}: #{$value};
+    }
+}

package/dist/base/03-vars/border-radius/theme-default-context.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $br, $value in $eui-base-context-border-radius {
+        --eui-br-#{$br}: var(--eui-bbr-#{$br});
+    }
+}

package/dist/base/03-vars/border-width/theme-default-base.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $br, $value in $eui-base-tokens-border-width {
+        --eui-bbw-#{$br}: #{$value};
+    }
+}

package/dist/base/03-vars/border-width/theme-default-context.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $br, $value in $eui-base-context-border-width {
+        --eui-bw-#{$br}: var(--eui-bbw-#{$br});
+    }
+}

package/dist/base/03-vars/colors/theme-dark-base.scss

@@ -0,0 +1,9 @@
+html.eui-t-dark {
+    // COLOR SHADES
+    @each $color, $shades in $eui-base-tokens-colors-dark {
+        @each $shade, $value in $shades {
+            --eui-bc-#{$color + '-' + $shade}: #{$value};
+            --eui-bc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+}

package/dist/base/03-vars/colors/theme-default-base.scss

@@ -0,0 +1,11 @@
+:root {
+    --eui-bc-transparent: transparent;
+
+    // COLOR SHADES
+    @each $color, $shades in $eui-base-tokens-colors {
+        @each $shade, $value in $shades {
+            --eui-bc-#{$color + '-' + $shade}: #{$value};
+            --eui-bc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+}