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

package/dist/base/02-tokens/_ecl/ec/typography.scss

@@ -0,0 +1,155 @@
+@use 'sass:map';
+
+// Screen
+$font-family: (
+  'default': (
+    arial,
+    sans-serif,
+  ),
+) !default;
+$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;
+$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;
+$font-weight: (
+  'regular': 400,
+  'bold': 700,
+) !default;
+$font: (
+  'xs': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xs'
+    ) + '/' + map.get($line-height, 'xs')} #{map.get($font-family, 'default')},
+  's': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 's') +
+    '/' + map.get($line-height, 's')} #{map.get($font-family, 'default')},
+  'm': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'm') +
+    '/' + map.get($line-height, 'm')} #{map.get($font-family, 'default')},
+  'l': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'l') +
+    '/' + map.get($line-height, 'l')} #{map.get($font-family, 'default')},
+  'xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xl'
+    ) + '/' + map.get($line-height, 'xl')} #{map.get($font-family, 'default')},
+  '2xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '2xl'
+    ) + '/' + map.get($line-height, '2xl')} #{map.get($font-family, 'default')},
+  '3xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '3xl'
+    ) + '/' + map.get($line-height, '3xl')} #{map.get($font-family, 'default')},
+  '4xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '4xl'
+    ) + '/' + map.get($line-height, '4xl')} #{map.get($font-family, 'default')},
+) !default;
+
+// Print
+$font-family-print: (
+  'default': (
+    verdana,
+    sans-serif,
+  ),
+  'alt': (
+    arial,
+    sans-serif,
+  ),
+) !default;
+$font-size-print: (
+  'xs': 7.88pt,
+  's': 9.19pt,
+  'm': 10.5pt,
+  'l': 13.13pt,
+  'xl': 15.75pt,
+  '2xl': 18.38pt,
+  '3xl': 21pt,
+  '4xl': 26.5pt,
+) !default;
+$line-height-print: (
+  'xs': 15pt,
+  's': 18pt,
+  'm': 21pt,
+  'l': 24pt,
+  'xl': 27pt,
+  '2xl': 30pt,
+  '3xl': 33pt,
+  '4xl': 36pt,
+) !default;
+$font-weight-print: (
+  'regular': 400,
+  'bold': 600,
+) !default;
+$font-print: (
+  'xs': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xs'
+    ) + '/' + map.get($line-height-print, 'xs')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  's': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      's'
+    ) + '/' + map.get($line-height-print, 's')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'm': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'm'
+    ) + '/' + map.get($line-height-print, 'm')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'l': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'l'
+    ) + '/' + map.get($line-height-print, 'l')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xl'
+    ) + '/' + map.get($line-height-print, 'xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '2xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '2xl'
+    ) + '/' + map.get($line-height-print, '2xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '3xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '3xl'
+    ) + '/' + map.get($line-height-print, '3xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '4xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '4xl'
+    ) + '/' + map.get($line-height-print, '4xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+) !default;

package/dist/base/02-tokens/_ecl/ec/z-index.scss

@@ -0,0 +1,8 @@
+$z-index: (
+  'highlight': 1,
+  'navigation': 10,
+  'dropdown': 15,
+  'modal': 50,
+  'overlay': 100,
+  'max': 9999,
+) !default;

package/dist/base/02-tokens/_ecl/eu/color.scss

@@ -0,0 +1,136 @@
+$color: (
+  // Semantic colours
+  'primary': #0e47cb,
+  'primary-140': #082b7a,
+  'primary-130': #0a328e,
+  'primary-120': #0b39a2,
+  'primary-100': #0e47cb,
+  'primary-80': #3e6cd5,
+  'primary-60': #6e91e0,
+  'primary-40': #9fb5ea,
+  'primary-20': #cfdaf5,
+  'primary-10': #e7edfa,
+  'primary-5': #f3f6fc,
+  'secondary': #fc0,
+  'secondary-140': #997a00,
+  'secondary-120': #e6b800,
+  'secondary-100': #fc0,
+  'secondary-80': #ffd633,
+  'secondary-60': #ffe066,
+  'secondary-40': #ffeb99,
+  'secondary-20': #fff5cc,
+  'secondary-10': #fffae6,
+  'dark': #262b38,
+  'dark-140': #171a22,
+  'dark-120': #1e222d,
+  'dark-100': #262b38,
+  'dark-80': #515560,
+  'dark-60': #7d8088,
+  'dark-40': #a8aaaf,
+  'dark-20': #d4d5d7,
+  'info': #0e47cb,
+  'info-5': #f3f6fc,
+  'success': #008d66,
+  'success-100': #008d66,
+  'success-5': #f2fcf9,
+  'warning': #cc4e00,
+  'warning-100': #cc4e00,
+  'warning-5': #fff7f2,
+  'error': #bf0036,
+  'error-100': #bf0036,
+  'error-80': #ef0044,
+  'error-5': #fef2f5,
+
+  // Accent colors
+  'accent': #00e9ff,
+  'accent-100': #00e9ff,
+  'accent-30': #b3f8ff,
+
+  // Other colors
+  'branding': #0e47cb,
+  'visited': #510dcd,
+  'visited-100': #510dcd,
+  'visited-40': #bf9af1,
+  'black': #000,
+  'white': #fff,
+
+  // Full pallettes
+  'blue-140': #082b7a,
+  'blue-130': #0a328e,
+  'blue-120': #0b39a2,
+  'blue-110': #0d40b7,
+  'blue-100': #0e47cb,
+  'blue-80': #3e6cd5,
+  'blue-60': #6e91e0,
+  'blue-40': #9fb5ea,
+  'blue-20': #cfdaf5,
+  'blue-10': #e7edfa,
+  'blue-5': #f3f6fc,
+  'green-140': #007957,
+  'green-130': #008d66,
+  'green-120': #00a174,
+  'green-110': #00b583,
+  'green-100': #00c991,
+  'green-80': #33d4a7,
+  'green-60': #66dfbd,
+  'green-40': #99e9d3,
+  'green-20': #ccf4e9,
+  'green-10': #e6faf4,
+  'green-5': #f2fcf9,
+  'grey-140': #171a22,
+  'grey-130': #1b1e27,
+  'grey-120': #1e222d,
+  'grey-110': #222732,
+  'grey-100': #262b38,
+  'grey-80': #515560,
+  'grey-60': #7d8088,
+  'grey-40': #a8aaaf,
+  'grey-20': #d4d5d7,
+  'grey-10': #e9eaeb,
+  'grey-5': #f4f5f5,
+  'grey-3': #f9f9f9,
+  'orange-140': #993b00,
+  'orange-130': #b34500,
+  'orange-120': #cc4e00,
+  'orange-110': #e65800,
+  'orange-100': #ff6200,
+  'orange-80': #ff8133,
+  'orange-60': #ff914d,
+  'orange-40': #ffb180,
+  'orange-20': #ffd0b3,
+  'orange-10': #ffefe6,
+  'orange-5': #fff7f2,
+  'purple-140': #31087b,
+  'purple-130': #390990,
+  'purple-120': #410aa4,
+  'purple-110': #490cb9,
+  'purple-100': #510dcd,
+  'purple-80': #743dd7,
+  'purple-60': #976ee1,
+  'purple-40': #bf9af1,
+  'purple-20': #dccff5,
+  'purple-10': #eee7fa,
+  'purple-5': #f6f3fc,
+  'red-140': #8f0029,
+  'red-130': #a70030,
+  'red-120': #bf0036,
+  'red-110': #d7003d,
+  'red-100': #ef0044,
+  'red-80': #f23369,
+  'red-60': #f5668f,
+  'red-40': #f999b4,
+  'red-20': #fcccda,
+  'red-10': #fde6ec,
+  'red-5': #fef2f5,
+  'yellow-140': #997a00,
+  'yellow-130': #b38f00,
+  'yellow-120': #cca300,
+  'yellow-110': #e6b800,
+  'yellow-100': #fc0,
+  'yellow-80': #ffd633,
+  'yellow-60': #ffe066,
+  'yellow-40': #ffeb99,
+  'yellow-20': #fff5cc,
+  'yellow-10': #fffae6,
+  'yellow-5': #fffcf2
+) !default;

package/dist/base/02-tokens/_ecl/eu/form.scss

@@ -0,0 +1,23 @@
+$form-width: (
+  's': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 30%,
+    'breakpoint-l': 158px,
+    'breakpoint-xl': 158px,
+  ),
+  'm': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 50%,
+    'breakpoint-l': 253px,
+    'breakpoint-xl': 253px,
+  ),
+  'l': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 100%,
+    'breakpoint-l': 443px,
+    'breakpoint-xl': 443px,
+  ),
+) !default;

package/dist/base/02-tokens/_ecl/eu/icon.scss

@@ -0,0 +1,20 @@
+$icon: (
+  '2xs': 0.75rem,
+  'xs': 1rem,
+  's': 1.25rem,
+  'm': 1.5rem,
+  'l': 2rem,
+  'xl': 2.5rem,
+  '2xl': 3rem,
+  'fluid': 1em,
+) !default;
+$icon-print: (
+  '2xs': 9pt,
+  'xs': 12pt,
+  's': 15pt,
+  'm': 18pt,
+  'l': 24pt,
+  'xl': 30pt,
+  '2xl': 36pt,
+  'fluid': 1em,
+) !default;

package/dist/base/02-tokens/_ecl/eu/layout.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+
+$breakpoint: (
+  'xs': 0,
+  's': 480px,
+  'm': 768px,
+  'l': 996px,
+  'xl': 1140px,
+) !default;
+$container: (
+  's': 768px,
+  'm': 996px,
+  'l': 1140px,
+  'xl': 1140px,
+) !default;
+$grid: (
+  'gutter': 2rem,
+  'columns': 12,
+) !default;
+$grid-gutter-width: (
+  'xs': map.get($grid, 'gutter'),
+  's': map.get($grid, 'gutter'),
+  'm': map.get($grid, 'gutter'),
+  'l': map.get($grid, 'gutter'),
+  'xl': map.get($grid, 'gutter'),
+) !default;
+$max-width: 580px !default;

package/dist/base/02-tokens/_ecl/eu/media.scss

@@ -0,0 +1,4 @@
+$media: (
+  's': 77px,
+  'm': 100px,
+) !default;

package/dist/base/02-tokens/_ecl/eu/shape.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+
+$border-radius: (
+  's': 2px,
+  'm': 4px,
+  'l': 6px,
+  'xl': 8px,
+) !default;
+$shadow-color: #09318e !default;
+$shadow: (
+  '1': #{0 2px 4px rgba($shadow-color, 0.08),
+  0 0 10px rgba($shadow-color, 0.04),
+  0 4px 5px rgba($shadow-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-color, 0.04)},
+  '2': #{0 3px 5px rgba($shadow-color, 0.04),
+  0 0 18px rgba($shadow-color, 0.04),
+  0 6px 10px rgba($shadow-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-color, 0.04)},
+  '3': #{0 7px 8px rgba($shadow-color, 0.08),
+  0 0 22px rgba($shadow-color, 0.04),
+  0 12px 17px rgba($shadow-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-color, 0.04)},
+  '4': #{0 11px 15px rgba($shadow-color, 0.08),
+  0 9px 46px rgba($shadow-color, 0.04),
+  0 24px 38px rgba($shadow-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-color, 0.04)},
+) !default;
+$shadow-inner: (
+  '1': #{0 2px 4px rgba($shadow-color, 0.08) inset,
+  0 0 10px rgba($shadow-color, 0.04) inset,
+  0 4px 5px rgba($shadow-color, 0.04) inset,
+  0 #{-4px} 4px rgba($shadow-color, 0.04) inset},
+  '2': #{0 3px 5px rgba($shadow-color, 0.04) inset,
+  0 0 18px rgba($shadow-color, 0.04) inset,
+  0 6px 10px rgba($shadow-color, 0.04) inset,
+  0 #{-4px} 4px rgba($shadow-color, 0.04) inset},
+) !default;
+$shadow-negative-color: #fff !default;
+$shadow-negative: (
+  '1': #{0 2px 4px rgba($shadow-negative-color, 0.08),
+  0 0 10px rgba($shadow-negative-color, 0.04),
+  0 4px 5px rgba($shadow-negative-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-negative-color, 0.04)},
+  '2': #{0 3px 5px rgba($shadow-negative-color, 0.04),
+  0 0 18px rgba($shadow-negative-color, 0.04),
+  0 6px 10px rgba($shadow-negative-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-negative-color, 0.04)},
+  '3': #{0 7px 8px rgba($shadow-negative-color, 0.08),
+  0 0 22px rgba($shadow-negative-color, 0.04),
+  0 12px 17px rgba($shadow-negative-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-negative-color, 0.04)},
+  '4': #{0 11px 15px rgba($shadow-color, 0.08),
+  0 9px 46px rgba($shadow-color, 0.04),
+  0 24px 38px rgba($shadow-color, 0.04),
+  0 #{-4px} 4px rgba($shadow-color, 0.04)},
+) !default;
+$shadow-negative-inner: (
+  '1': #{0 2px 4px rgba($shadow-negative-color, 0.08) inset,
+  0 0 10px rgba($shadow-negative-color, 0.04) inset,
+  0 4px 5px rgba($shadow-negative-color, 0.04) inset,
+  0 #{-4px} 4px rgba($shadow-negative-color, 0.04) inset},
+  '2': #{0 3px 5px rgba($shadow-negative-color, 0.04) inset,
+  0 0 18px rgba($shadow-negative-color, 0.04) inset,
+  0 6px 10px rgba($shadow-negative-color, 0.04) inset,
+  0 #{-4px} 4px rgba($shadow-negative-color, 0.04) inset},
+) !default;

package/dist/base/02-tokens/_ecl/eu/spacing.scss

@@ -0,0 +1,22 @@
+$spacing: (
+  '2xs': 0.25rem,
+  'xs': 0.5rem,
+  's': 0.75rem,
+  'm': 1rem,
+  'l': 1.5rem,
+  'xl': 2rem,
+  '2xl': 2.5rem,
+  '3xl': 3rem,
+  '4xl': 4rem,
+) !default;
+$spacing-print: (
+  '2xs': 0.1cm,
+  'xs': 0.21cm,
+  's': 0.31cm,
+  'm': 0.42cm,
+  'l': 0.63cm,
+  'xl': 0.84cm,
+  '2xl': 1.05cm,
+  '3xl': 1.26cm,
+  '4xl': 1.68cm,
+) !default;