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

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

@@ -0,0 +1,120 @@
+@use '../_ecl/ec/color' as eclColorsEC;
+
+$eui-base-tokens-colors: (
+    branding: (
+        120: getColorVariant(map-get(eclColorsEC.$color, 'branding'), 120),
+        100: map-get(eclColorsEC.$color, 'branding'),
+        80: getColorVariant(map-get(eclColorsEC.$color, 'branding'), 80),
+    ),
+    primary: getPaletteContext(
+        map-get(eclColorsEC.$color, 'primary-100'),
+        (
+            160: map-get(eclColorsEC.$color, 'primary-160'),
+            140: map-get(eclColorsEC.$color, 'primary-140'),
+            130: #1338bd,
+            120: map-get(eclColorsEC.$color, 'primary-120'),
+            110: #2651eb,
+            80: map-get(eclColorsEC.$color, 'primary-80'),
+            60: map-get(eclColorsEC.$color, 'primary-60'),
+            40: map-get(eclColorsEC.$color, 'primary-40'),
+            20: map-get(eclColorsEC.$color, 'primary-20'),
+            10: #ebeffd,
+            5: #f5f7fe,
+            0: #fff
+        )
+    ),
+    // take default eui-dark #303030 generated, as we don't have all palette for ECL EC dark
+    neutral: getPaletteContext(
+        #303030,
+        (
+            5: #f5f5f5,
+            2: #fcfcfc,
+            0: #fff
+        ),
+        true
+    ),
+    info: getPaletteContext(
+        map-get(eclColorsEC.$color, 'info'),
+        (
+            160: map-get(eclColorsEC.$color, 'primary-160'),
+            140: map-get(eclColorsEC.$color, 'primary-140'),
+            130: #1338bd,
+            120: map-get(eclColorsEC.$color, 'primary-120'),
+            110: #2651eb,
+            80: map-get(eclColorsEC.$color, 'primary-80'),
+            60: map-get(eclColorsEC.$color, 'primary-60'),
+            40: map-get(eclColorsEC.$color, 'primary-40'),
+            20: map-get(eclColorsEC.$color, 'primary-20'),
+            10: #ebeffd,
+            5: #f5f7fe,
+            0: #fff
+        )
+    ), // AA OK
+    success: getPaletteContext(
+        map-get(eclColorsEC.$color, 'success'),
+        (
+            0: #fff
+        )
+    ),
+    warning: getPaletteContext(
+        map-get(eclColorsEC.$color, 'warning'),
+        (
+            0: #fff
+        )
+    ),
+    danger: getPaletteContext(
+        map-get(eclColorsEC.$color, 'error'),
+        (
+            0: #fff
+        )
+    ),
+    accent: getPaletteContext(
+        map-get(eclColorsEC.$color, 'secondary-100'),
+        (
+            160: map-get(eclColorsEC.$color, 'secondary-160'),
+            130: #ffa724,
+            140: map-get(eclColorsEC.$color, 'secondary-140'),
+            120: map-get(eclColorsEC.$color, 'secondary-120'),
+            110: #ffb74d,
+            80: map-get(eclColorsEC.$color, 'secondary-80'),
+            60: map-get(eclColorsEC.$color, 'secondary-60'),
+            40: map-get(eclColorsEC.$color, 'secondary-40'),
+            20: map-get(eclColorsEC.$color, 'secondary-20'),
+            10: #fff9ef,
+            5: #fffcf7,
+            0: #fff
+        )
+    )
+);
+
+
+$eui-base-context-colors: (
+    neutral: (
+        base: '100', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20',
+        bg: '10', bg-light: '5'
+    ),
+    branding: (
+        base: '100', dark: '120', light: '80'
+    ),
+    primary: (
+        base: '100', darker: '130', dark: '110', light: '80', lighter: '40', lightest: '20',
+        bg: '10', bg-light: '5'
+    ),
+    info: (
+        base: '100', darker: '130', dark: '110', light: '80', lighter: '40', lightest: '20',
+        bg: '10', bg-light: '5'
+    ),
+    accent: (
+        base: '100', darker: '130', dark: '110', light: '80', lighter: '60', lightest: '20',
+        bg: '10', bg-light: '5'
+    ),
+    success: (
+        base: '120', darker: '140', dark: '130', light: '100', bg: '10', bg-light: '5'
+    ),
+    warning: (
+        base: '100', darker: '120', dark: '110', light: '80', bg: '10', bg-light: '5'
+    ),
+    danger: (
+        base: '120', darker: '140', dark: '130', light: '100', bg: '10', bg-light: '5'
+    )
+);

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

@@ -0,0 +1,115 @@
+@use '../_ecl/eu/color' as eclColorsEU;
+
+$eui-base-tokens-colors-ecl-eu: (
+    branding: (
+        120: getColorVariant(map-get(eclColorsEU.$color, 'branding'), 120),
+        100: map-get(eclColorsEU.$color, 'branding'),
+        80: getColorVariant(map-get(eclColorsEU.$color, 'branding'), 80)
+    ),
+    primary: getPaletteContext(
+        map-get(eclColorsEU.$color, 'primary-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'primary-140'),
+            130: map-get(eclColorsEU.$color, 'primary-130'),
+            120: map-get(eclColorsEU.$color, 'primary-120'),
+            80: map-get(eclColorsEU.$color, 'primary-80'),
+            60: map-get(eclColorsEU.$color, 'primary-60'),
+            40: map-get(eclColorsEU.$color, 'primary-40'),
+            20: map-get(eclColorsEU.$color, 'primary-20'),
+            10: map-get(eclColorsEU.$color, 'primary-10'),
+            5: map-get(eclColorsEU.$color, 'primary-5')
+        )
+    ),
+    neutral: getPaletteContext(
+        map-get(eclColorsEU.$color, 'grey-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'grey-140'),
+            130: map-get(eclColorsEU.$color, 'grey-130'),
+            120: map-get(eclColorsEU.$color, 'grey-120'),
+            110: map-get(eclColorsEU.$color, 'grey-110'),
+            80: map-get(eclColorsEU.$color, 'grey-80'),
+            60: map-get(eclColorsEU.$color, 'grey-60'),
+            40: map-get(eclColorsEU.$color, 'grey-40'),
+            20: map-get(eclColorsEU.$color, 'grey-20'),
+            10: map-get(eclColorsEU.$color, 'grey-10'),
+            5: map-get(eclColorsEU.$color, 'grey-5'),
+            2: map-get(eclColorsEU.$color, 'grey-3'),
+        )
+        , true
+    ),
+    info: getPaletteContext(
+        map-get(eclColorsEU.$color, 'blue-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'blue-140'),
+            130: map-get(eclColorsEU.$color, 'blue-130'),
+            120: map-get(eclColorsEU.$color, 'blue-120'),
+            110: map-get(eclColorsEU.$color, 'blue-110'),
+            80: map-get(eclColorsEU.$color, 'blue-80'),
+            60: map-get(eclColorsEU.$color, 'blue-60'),
+            40: map-get(eclColorsEU.$color, 'blue-40'),
+            20: map-get(eclColorsEU.$color, 'blue-20'),
+            10: map-get(eclColorsEU.$color, 'blue-10'),
+            5: map-get(eclColorsEU.$color, 'blue-5')
+        )
+    ),
+    success: getPaletteContext(
+        map-get(eclColorsEU.$color, 'green-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'green-140'),
+            130: map-get(eclColorsEU.$color, 'green-130'),
+            120: map-get(eclColorsEU.$color, 'green-120'),
+            110: map-get(eclColorsEU.$color, 'green-110'),
+            80: map-get(eclColorsEU.$color, 'green-80'),
+            60: map-get(eclColorsEU.$color, 'green-60'),
+            40: map-get(eclColorsEU.$color, 'green-40'),
+            20: map-get(eclColorsEU.$color, 'green-20'),
+            10: map-get(eclColorsEU.$color, 'green-10'),
+            5: map-get(eclColorsEU.$color, 'green-5')
+        )
+    ),
+    warning: getPaletteContext(
+        map-get(eclColorsEU.$color, 'orange-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'orange-140'),
+            130: map-get(eclColorsEU.$color, 'orange-130'),
+            120: map-get(eclColorsEU.$color, 'orange-120'),
+            110: map-get(eclColorsEU.$color, 'orange-110'),
+            80: map-get(eclColorsEU.$color, 'orange-80'),
+            60: map-get(eclColorsEU.$color, 'orange-60'),
+            40: map-get(eclColorsEU.$color, 'orange-40'),
+            20: map-get(eclColorsEU.$color, 'orange-20'),
+            10: map-get(eclColorsEU.$color, 'orange-10'),
+            5: map-get(eclColorsEU.$color, 'orange-5')
+        )
+    ),
+    danger: getPaletteContext(
+        map-get(eclColorsEU.$color, 'red-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'red-140'),
+            130: map-get(eclColorsEU.$color, 'red-130'),
+            120: map-get(eclColorsEU.$color, 'red-120'),
+            110: map-get(eclColorsEU.$color, 'red-110'),
+            80: map-get(eclColorsEU.$color, 'red-80'),
+            60: map-get(eclColorsEU.$color, 'red-60'),
+            40: map-get(eclColorsEU.$color, 'red-40'),
+            20: map-get(eclColorsEU.$color, 'red-20'),
+            10: map-get(eclColorsEU.$color, 'red-10'),
+            5: map-get(eclColorsEU.$color, 'red-5')
+        )
+    ),
+    accent: getPaletteContext(
+        map-get(eclColorsEU.$color, 'yellow-100'),
+        (
+            140: map-get(eclColorsEU.$color, 'yellow-140'),
+            130: map-get(eclColorsEU.$color, 'yellow-130'),
+            120: map-get(eclColorsEU.$color, 'yellow-120'),
+            110: map-get(eclColorsEU.$color, 'yellow-110'),
+            80: map-get(eclColorsEU.$color, 'yellow-80'),
+            60: map-get(eclColorsEU.$color, 'yellow-60'),
+            40: map-get(eclColorsEU.$color, 'yellow-40'),
+            20: map-get(eclColorsEU.$color, 'yellow-20'),
+            10: map-get(eclColorsEU.$color, 'yellow-10'),
+            5: map-get(eclColorsEU.$color, 'yellow-5')
+        )
+    )
+);

package/dist/base/02-tokens/colors/theme-eui-legacy-hc.scss

@@ -0,0 +1,36 @@
+$euiColorsLegacyHc: (
+    'primary': #004494,
+    'dark-hc': #000000,
+    'info-hc': #005a92,
+    'success-hc': #136100,
+    'warning-hc': #ffaf4e,
+    'error-hc': #b50000,
+    'accent': #fc0,
+);
+
+$eui-base-tokens-colors-high-contrast-eui-legacy: (
+    branding: (
+        120: getColorVariant(map-get($euiColorsLegacyHc, 'primary'), 120),
+        100: map-get($euiColorsLegacyHc, 'primary'),
+        80: getColorVariant(map-get($euiColorsLegacyHc, 'primary'), 80)
+    ),
+    primary: getPaletteContext(map-get($euiColorsLegacyHc, 'primary')),
+    neutral: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'dark-hc'), false, true
+    ),
+    info: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'info-hc')
+    ),
+    success: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'success-hc')
+    ),
+    warning: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'warning-hc')
+    ),
+    danger: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'error-hc')
+    ),
+    accent: getPaletteContext(
+        map-get($euiColorsLegacyHc, 'accent')
+    )
+);

package/dist/base/02-tokens/colors/theme-eui-legacy.scss

@@ -0,0 +1,92 @@
+$euiColorsLegacy: (
+    'primary': #004494,
+    'dark': #303030,
+    'dark-hc': #000000,
+    'info': #006fb4,
+    'info-hc': #005a92,
+    'success': #467a39,
+    'success-hc': #136100,
+    'warning': #f29527,
+    'warning-hc': #ffaf4e,
+    'error': #da2131,
+    'error-hc': #b50000,
+    'accent': #fc0,
+);
+
+$eui-base-tokens-colors-eui-legacy: (
+    branding: (
+        120: getColorVariant(map-get($euiColorsLegacy, 'primary'), 120),
+        100: map-get($euiColorsLegacy, 'primary'),
+        75: getColorVariant(map-get($euiColorsLegacy, 'primary'), 80),
+    ),
+    primary: getPaletteLegacy(map-get($euiColorsLegacy, 'primary')),
+    neutral: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'dark'), (
+            2: #fcfcfc
+        ), true
+    ),
+    info: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'info'),
+        (
+            75: #2277ab
+        )
+    ),
+    success: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'success'),
+        (
+            75: #5d7d55
+        )
+    ),
+    warning: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'warning'),
+        (
+            140: getColorVariant(map-get($euiColorsLegacy, 'warning') , 160),
+            130: getColorVariant(map-get($euiColorsLegacy, 'warning'), 150),
+            120: getColorVariant(map-get($euiColorsLegacy, 'warning') , 140),
+        )
+    ),
+    danger: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'error'),
+        (
+            75: #c14b55
+        )
+    ),
+    accent: getPaletteLegacy(
+        map-get($euiColorsLegacy, 'accent'),
+        (
+            140: #896d00
+        )
+    )
+);
+
+
+$eui-base-context-colors-eui-legacy: (
+    neutral: (
+        base: '100', darker: '140', dark: '110', light: '75', lighter: '50', lightest: '25',
+        bg: '10', bg-light: '5'
+    ),
+    branding: (
+        base: '100', dark: '120', light: '75'
+    ),
+    primary: (
+        base: '100', darker: '140', dark: '120', light: '75', lighter: '50', lightest: '25',
+        bg: '10', bg-light: '5'
+    ),
+    info: (
+        base: '100', darker: '140', dark: '120', light: '75', lighter: '50', lightest: '25',
+        bg: '10', bg-light: '5'
+    ),
+    success: (
+        base: '100', darker: '160', dark: '120', light: '75', bg: '10', bg-light: '5'
+    ),
+    warning: (
+        base: '100', darker: '160', dark: '120', light: '75', bg: '10', bg-light: '5'
+    ),
+    danger: (
+        base: '100', darker: '160', dark: '120', light: '75', bg: '10', bg-light: '5'
+    ),
+    accent: (
+        base: '100', darker: '160', dark: '120', light: '75', lighter: '50', lightest: '25',
+        bg: '10', bg-light: '5'
+    ),
+);

package/dist/base/02-tokens/icons/_index.scss

@@ -0,0 +1 @@
+@import 'theme-default';

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

@@ -0,0 +1,14 @@
+@use '../_ecl/ec/icon' as EclEcIcon;
+
+$eui-base-tokens-icon-sizes: (
+    '2xs': map-get(EclEcIcon.$icon, '2xs'),
+    'xs': map-get(EclEcIcon.$icon, 'xs'),
+    's': map-get(EclEcIcon.$icon, 's'),
+    'm': map-get(EclEcIcon.$icon, 'm'),
+    'l': map-get(EclEcIcon.$icon, 'l'),
+    'xl': map-get(EclEcIcon.$icon, 'xl'),
+    '2xl': map-get(EclEcIcon.$icon, '2xl'),
+    '3xl': 3.5rem,
+    '4xl': 4rem,
+    'fluid': map-get(EclEcIcon.$icon, 'fluid'),
+);

package/dist/base/02-tokens/layout/_index.scss

@@ -0,0 +1 @@
+@import 'theme-default';

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

@@ -0,0 +1,35 @@
+@use '../_ecl/ec/layout' as EclEcLayout;
+
+// ECL EC DEFAULT
+
+// $breakpoint: (
+//   'xs': 0,
+//   's': 480px,
+//   'm': 768px,
+//   'l': 996px,
+//   'xl': 1140px,
+// ) !default;
+
+$eui-base-tokens-breakpoints: (
+    'xs': map-get(EclEcLayout.$breakpoint, 'xs'),
+    's': map-get(EclEcLayout.$breakpoint, 's'),
+    'm': map-get(EclEcLayout.$breakpoint, 'm'),
+    'l': map-get(EclEcLayout.$breakpoint, 'l'),
+    'xl': map-get(EclEcLayout.$breakpoint, 'xl'),
+    '2xl': 1400px,
+    '3xl': 1920px,
+    '4xl': 2560px,
+    '5xl': 3840px
+);
+
+$eui-base-context-breakpoints: (
+    'xs': 'xs',
+    'sm': 's',
+    'md': 'm',
+    'lg': 'l',
+    'xl': 'xl',
+    'xxl': '2xl',
+    'fhd': '3xl',
+    '2k': '4xl',
+    '4k': '5xl'
+);

package/dist/base/02-tokens/shadows/_index.scss

@@ -0,0 +1 @@
+@import 'theme-default';

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

@@ -0,0 +1,28 @@
+@use '../_ecl/ec/shape' as EclEcShape;
+
+$eui-base-tokens-shadows: (
+    'none': none,
+
+    'ecl-1': map-get(EclEcShape.$shadow, '1'),
+    'ecl-6': map-get(EclEcShape.$shadow, '6'),
+    'ecl-12': map-get(EclEcShape.$shadow, '12'),
+    'ecl-16': map-get(EclEcShape.$shadow, '16'),
+
+    1: (0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)),
+    2: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
+    3: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12)),
+    4: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)),
+    6: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)),
+    8: (0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)),
+    9: (0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)),
+    12: (0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)),
+    16: (0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)),
+    24: (0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)),
+
+    z-depth-0: (0 1px 0 rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.08)),
+    z-depth-1: (0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)),
+    z-depth-2: (0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)),
+    z-depth-3: (0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)),
+    z-depth-4: (0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)),
+    z-depth-5: (0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)),
+);

package/dist/base/02-tokens/spacings/_index.scss

@@ -0,0 +1,2 @@
+@import 'theme-default';
+@import 'theme-ecl-eu';

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

@@ -0,0 +1,33 @@
+@use '../_ecl/ec/spacing' as EclEcSpacing;
+
+$eui-base-tokens-spacings: (
+    none: 0,
+    3xs: 0.125rem, // NOT EXISTING
+    2xs: map-get(EclEcSpacing.$spacing, '2xs'),  // 1
+    xs: map-get(EclEcSpacing.$spacing, 'xs'),    // 2
+    s: map-get(EclEcSpacing.$spacing, 's'),      // 3
+    m: map-get(EclEcSpacing.$spacing, 'm'),      // 4
+    l: map-get(EclEcSpacing.$spacing, 'l'),      // 5
+    xl: map-get(EclEcSpacing.$spacing, 'xl'),    // 6
+    2xl: map-get(EclEcSpacing.$spacing, '2xl'),  // 7
+    3xl: map-get(EclEcSpacing.$spacing, '3xl'),  // 8
+    4xl: map-get(EclEcSpacing.$spacing, '4xl'),  // 9
+    5xl: map-get(EclEcSpacing.$spacing, '5xl'),  // NEW ecl v4
+    6xl: map-get(EclEcSpacing.$spacing, '6xl')  // NEW ecl v4
+);
+
+$eui-base-context-spacings: (
+    none: 'none',
+    3xs: '3xs',
+    2xs: '2xs',
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    l: 'l',
+    xl: 'xl',
+    2xl: '2xl',
+    3xl: '3xl',
+    4xl: '4xl',
+    5xl: '5xl',
+    6xl: '6xl'
+);

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

@@ -0,0 +1,16 @@
+@use '../_ecl/eu/spacing' as EclEuSpacing;
+
+$eui-base-tokens-spacings-ecl-eu: (
+    none: 0,
+    2xs: map-get(EclEuSpacing.$spacing, '2xs'),  // 1
+    xs: map-get(EclEuSpacing.$spacing, 'xs'),    // 2
+    s: map-get(EclEuSpacing.$spacing, 's'),      // 3
+    m: map-get(EclEuSpacing.$spacing, 'm'),      // 4
+    l: map-get(EclEuSpacing.$spacing, 'l'),      // 5
+    xl: map-get(EclEuSpacing.$spacing, 'xl'),    // 6
+    2xl: map-get(EclEuSpacing.$spacing, '2xl'),  // 7
+    3xl: map-get(EclEuSpacing.$spacing, '3xl'),  // 8
+    4xl: map-get(EclEuSpacing.$spacing, '4xl'),  // 9
+    5xl: 5rem,  // not existing in ECL EU
+    6xl: 6rem // not existing in ECL EU
+)

package/dist/base/02-tokens/typography/_index.scss

@@ -0,0 +1,2 @@
+@import 'theme-default';
+@import 'theme-ecl-eu';