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

package/dist/base/01-base/mixins/animations/_buzz.scss

@@ -0,0 +1,54 @@
+@mixin eui-anim--buzz {
+    @include hacks();
+
+    @keyframes eui-anim--buzz {
+        10% {
+            transform: translateX(3px) rotate(2deg);
+        }
+
+        20% {
+            transform: translateX(-3px) rotate(-2deg);
+        }
+
+        30% {
+            transform: translateX(3px) rotate(2deg);
+        }
+
+        40% {
+            transform: translateX(-3px) rotate(-2deg);
+        }
+
+        50% {
+            transform: translateX(2px) rotate(1deg);
+        }
+
+        60% {
+            transform: translateX(-2px) rotate(-1deg);
+        }
+
+        70% {
+            transform: translateX(2px) rotate(1deg);
+        }
+
+        80% {
+            transform: translateX(-2px) rotate(-1deg);
+        }
+
+        90% {
+            transform: translateX(1px) rotate(0);
+        }
+
+        100% {
+            transform: translateX(-1px) rotate(0);
+        }
+    }
+
+    &:hover,
+	&:focus,
+	&:active {
+        animation-name: eui-anim--buzz;
+        animation-duration: v(eui-base-animation-duration-medium);
+        animation-timing-function: linear;
+        animation-iteration-count: 1;
+	}
+}

package/dist/base/01-base/mixins/animations/_fade-in.scss

@@ -0,0 +1,20 @@
+
+@mixin eui-anim--fadeIn {
+    @include hacks();
+    @keyframes eui-anim--fadeIn {
+        from {
+            offset: 0;
+            opacity: 0;
+            visibility: visible;
+        }
+
+        to {
+            offset: 1;
+            opacity: 1;
+        }
+    }
+    animation-name: eui-anim--fadeIn;
+    animation-duration: v(eui-base-animation-duration-fast);
+    backface-visibility: visible;
+    transition-timing-function: ease;
+}

package/dist/base/01-base/mixins/animations/_fade-out.scss

@@ -0,0 +1,20 @@
+
+@mixin eui-anim--fadeOut {
+    @include hacks();
+    @keyframes eui-anim--fadeOut {
+        from {
+            offset: 0;
+            opacity: 1;
+            visibility: visible;
+        }
+
+        to {
+            offset: 1;
+            opacity: 0;
+        }
+    }
+    animation-name: eui-anim--fadeOut;
+    animation-duration: v(eui-base-animation-duration-fast);
+    backface-visibility: visible;
+    transition-timing-function: ease;
+}

package/dist/base/01-base/mixins/animations/_flip-in-y.scss

@@ -0,0 +1,32 @@
+
+@mixin eui-anim--flipInY {
+    @include hacks();
+    @keyframes eui-anim--flipInY {
+        from {
+            animation-timing-function: ease-in;
+            opacity: 0;
+            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        }
+
+        40% {
+            animation-timing-function: ease-in;
+            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        }
+
+        60% {
+            opacity: 1;
+            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        }
+
+        80% {
+            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+        }
+
+        to {
+            transform: perspective(400px);
+        }
+    }
+    animation-name: eui-anim--flipInY;
+    animation-duration: v(eui-base-animation-duration-base);
+    backface-visibility: visible;    // mirror image of the front face being displayed useful when an element is rotated
+}

package/dist/base/01-base/mixins/animations/_jack-in-the-box.scss

@@ -0,0 +1,26 @@
+
+@mixin eui-anim--jackInTheBox {
+    @include hacks();
+    @keyframes eui-anim--jackInTheBox {
+        from {
+            opacity: 0;
+            transform: scale(0.1) rotate(30deg);
+            transform-origin: center bottom;
+        }
+
+        50% {
+            transform: rotate(-10deg);
+        }
+
+        70% {
+            transform: rotate(3deg);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+    animation-name: eui-anim--jackInTheBox;
+    animation-duration: v(eui-base-animation-duration-base);
+}

package/dist/base/01-base/mixins/animations/_module.scss

@@ -0,0 +1,48 @@
+
+// Use animations
+@mixin eui-animation ($animation: null, $delay: 0s, $duration: v(eui-base-animation-duration-base), $direction: v(eui-base-animation-direction), $fillmode: v(eui-base-animation-fill-mode)) {
+    @if ($animation) {
+        animation-delay: $delay;
+        animation-direction: $direction;
+        animation-duration: $duration;
+        animation-fill-mode: $fillmode;
+        animation-name: $animation;
+    }
+}
+
+@mixin eui-transition-base {
+    transition: v(eui-base-animation-transition-base);
+}
+@mixin eui-transition-ease {
+    transition: v(eui-base-animation-transition-ease);
+}
+@mixin eui-transition-ease-in-out {
+    transition: v(eui-base-animation-transition-ease-in-out);
+}
+@mixin eui-transition($transition...) {
+    @if length($transition) == 0 {
+        transition: v(eui-base-animation-transition-base);
+    } @else {
+        transition: $transition;
+    }
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+}
+
+@import "_hacks";
+@import 'bob';
+@import 'buzz';
+@import 'fade-in';
+@import 'fade-out';
+@import 'flip-in-y';
+@import 'jack-in-the-box';
+@import 'pop';
+@import 'pulsar';
+@import 'pulse';
+@import 'slide-in-down';
+@import 'slide-in-left';
+@import 'slide-in-right';
+@import 'slide-in-up';
+@import 'spin';
+@import 'wobble';

package/dist/base/01-base/mixins/animations/_pop.scss

@@ -0,0 +1,18 @@
+
+@mixin eui-anim--pop {
+	@include hacks();
+    @keyframes eui-anim--pop {
+        50% {
+            transform: scale(1.1);
+        }
+    }
+
+	&:hover,
+	&:focus,
+	&:active {
+		animation-name: eui-anim--pop;
+		animation-duration: v(eui-base-animation-duration-medium);
+		animation-timing-function: linear;
+		animation-iteration-count: 1;
+	}
+}

package/dist/base/01-base/mixins/animations/_pulsar.scss

@@ -0,0 +1,24 @@
+
+@mixin eui-anim--pulsar {
+    @include hacks();
+    @keyframes eui-anim--pulsar {
+        from {
+            transform: scale3d(1, 1, 1);
+        }
+
+        50% {
+            transform: scale3d(1.05, 1.05, 1.05);
+        }
+
+        to {
+            transform: scale3d(1, 1, 1);
+        }
+    }
+    &:hover,
+	&:focus,
+	&:active {
+        animation-name: eui-anim--pulsar;
+        animation-duration: v(eui-base-animation-duration-fast);
+        animation-iteration-count: 1;
+	}
+}

package/dist/base/01-base/mixins/animations/_pulse.scss

@@ -0,0 +1,21 @@
+
+@mixin eui-anim--pulse {
+    @include hacks();
+    @keyframes eui-anim--pulse {
+        to {
+            transform: scale(1.1);
+        }
+    }
+    transition: 1s ease-in-out;
+
+	&:hover,
+	&:focus,
+	&:active {
+		animation-name: eui-anim--pulse;
+		animation-duration: v(eui-base-animation-duration-medium);
+		animation-timing-function: ease-in-out;
+        animation-direction: alternate;
+        animation-iteration-count: 2;
+        transition: 1s ease-in-out;
+	}
+}

package/dist/base/01-base/mixins/animations/_slide-in-down.scss

@@ -0,0 +1,20 @@
+
+@mixin eui-anim--slideInDown{
+    @include hacks();
+    @keyframes eui-anim--slideInDown {
+        from {
+            offset: 0;
+            transform: translate3d(0, -100%, 0);
+            visibility: visible;
+        }
+
+        to {
+            offset: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    animation-name: eui-anim--slideInDown;
+    animation-duration: v(eui-base-animation-duration-medium);
+    backface-visibility: visible;
+    transition-timing-function: ease;
+}

package/dist/base/01-base/mixins/animations/_slide-in-left.scss

@@ -0,0 +1,19 @@
+
+@mixin eui-anim--slideInLeft {
+    @include hacks();
+    @keyframes eui-anim--slideInLeft {
+        from {
+            opacity: 0;
+            transform: translate3d(-50%, 0, 0);
+            visibility: visible;
+        }
+
+        to {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    animation-name: eui-anim--slideInLeft;
+    animation-duration: v(eui-base-animation-duration-medium);
+    backface-visibility: visible;
+}

package/dist/base/01-base/mixins/animations/_slide-in-right.scss

@@ -0,0 +1,20 @@
+
+@mixin eui-anim--slideInRight {
+    @include hacks();
+    @keyframes eui-anim--slideInRight {
+        from {
+            opacity: 0;
+            transform: translate3d(50%, 0, 0);
+            visibility: visible;
+        }
+
+        to {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    animation-name: eui-anim--slideInRight;
+    animation-duration: v(eui-base-animation-duration-medium);
+    backface-visibility: visible;
+}
+

package/dist/base/01-base/mixins/animations/_slide-in-up.scss

@@ -0,0 +1,20 @@
+
+@mixin eui-anim--slideInUp {
+    @include hacks();
+    @keyframes eui-anim--slideInUp {
+        from {
+            offset: 0;
+            transform: translate3d(0, 100%, 0);
+            visibility: visible;
+        }
+
+        to {
+            offset: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    animation-name: eui-anim--slideInUp;
+    animation-duration: v(eui-base-animation-duration-medium);
+    backface-visibility: visible;
+    transition-timing-function: ease;
+}

package/dist/base/01-base/mixins/animations/_spin.scss

@@ -0,0 +1,19 @@
+
+@mixin eui-anim--spin {
+    @include hacks();
+    @keyframes eui-anim--spin {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    &:hover,
+	&:focus,
+	&:active {
+        animation-name: eui-anim--spin;
+        animation-duration: v(eui-base-animation-duration-slow);;
+	}
+}

package/dist/base/01-base/mixins/animations/_wobble.scss

@@ -0,0 +1,38 @@
+
+
+@mixin eui-anim--wobble {
+	@include hacks();
+    @keyframes eui-anim--wobble {
+        16.65% {
+            transform: translateY(8px);
+        }
+
+        33.3% {
+            transform: translateY(-6px);
+        }
+
+        49.95% {
+            transform: translateY(4px);
+        }
+
+        66.6% {
+            transform: translateY(-2px);
+        }
+
+        83.25% {
+            transform: translateY(1px);
+        }
+
+        100% {
+            transform: translateY(0);
+        }
+    }
+	&:hover,
+	&:focus,
+	&:active {
+		animation-name: eui-anim--wobble;
+		animation-duration: v(eui-base-animation-duration-slow);
+		animation-timing-function: v(eui-base-animation-ease-in-out-timing-function);
+		animation-iteration-count: 1;
+	}
+}

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

@@ -0,0 +1,64 @@
+@use 'sass:color';
+
+$color: (
+  // Semantic colors
+  'primary': #3860ed,
+  'primary-180': #051036,
+  'primary-160': #0a1f6c,
+  'primary-140': #0f2fa2,
+  'primary-120': #143fd9,
+  'primary-100': #3860ed,
+  'primary-80': #5577f0,
+  'primary-60': #89a1f4,
+  'primary-40': #b1c0f8,
+  'primary-20': #d8e0fb,
+  'secondary': #ffbe5c,
+  'secondary-180': #8f5600,
+  'secondary-160': #e08700,
+  'secondary-140': #ff9d0a,
+  'secondary-120': #ffad33,
+  'secondary-100': #ffbe5c,
+  'secondary-80': #ffcb7c,
+  'secondary-60': #ffd89d,
+  'secondary-40': #ffe5be,
+  'secondary-20': #fff2de,
+  'dark': #26324b,
+  'dark-100': #26324b,
+  'dark-80': #546fa6,
+  'dark-60': #9ac,
+  'info': #3860ed,
+  'success': #24a148,
+  'error': #da1e28,
+  'warning': #f39811,
+  'background': #fcfcfc,
+
+  // Neutral colors
+  'neutral': #b9c5e9,
+  'neutral-180': #6c85d1,
+  'neutral-160': #7f95d7,
+  'neutral-140': #92a5dd,
+  'neutral-120': #a6b5e3,
+  'neutral-100': #b9c5e9,
+  'neutral-80': #cdd5ef,
+  'neutral-60': #e0e5f5,
+  'neutral-40': #f3f5fb,
+  'neutral-20': #fbfcfe,
+
+  // Accent colors
+  'accent': #bbb3ff,
+  'accent-160': #887de8,
+  'accent-140': #978cf2,
+  'accent-120': #a89efa,
+  'accent-100': #bbb3ff,
+  'accent-80': #bfb2ff,
+  'accent-60': #d1ccff,
+  'accent-40': #fafaff,
+
+  // Other colors
+  'branding': #004494,
+  'black': #000,
+  'white': #fff,
+  'stroke': color.adjust(#3860ed, $alpha: -0.5),
+  'overlay-light': color.adjust(#26324b, $alpha: -0.3),
+  'overlay-dark': color.adjust(#26324b, $alpha: -0.1)
+) !default;

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

@@ -0,0 +1,23 @@
+$form-width: (
+  's': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 225px,
+    'breakpoint-l': 218px,
+    'breakpoint-xl': 252px,
+  ),
+  'm': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 289px,
+    'breakpoint-l': 296px,
+    'breakpoint-xl': 350px,
+  ),
+  'l': (
+    'breakpoint-xs': 100%,
+    'breakpoint-s': 100%,
+    'breakpoint-m': 350px,
+    'breakpoint-l': 380px,
+    'breakpoint-xl': 443px,
+  ),
+) !default;

package/dist/base/02-tokens/_ecl/ec/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/ec/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/ec/media.scss

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

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

@@ -0,0 +1,28 @@
+@use 'sass:map';
+
+$border-radius: (
+  's': 2px,
+  'm': 4px,
+  'l': 6px,
+  'xl': 8px,
+) !default;
+$shadow-color: #26324b !default;
+$shadow-inline-color: #e0e5f5 !default;
+$shadow: (
+  '1': #{0 0 1px rgba($shadow-color, 0.06),
+  2px 2px 2px rgba($shadow-color, 0.05),
+  4px 4px 6px rgba($shadow-color, 0.05),
+  0 1px 0 $shadow-inline-color inset},
+  '6': #{0 0 6px rgba($shadow-color, 0.06),
+  12px 12px 12px rgba($shadow-color, 0.05),
+  24px 24px 36px rgba($shadow-color, 0.05),
+  0 1px 0 $shadow-inline-color inset},
+  '12': #{0 0 12px rgba($shadow-color, 0.06),
+  24px 24px 24px rgba($shadow-color, 0.05),
+  48px 48px 72px rgba($shadow-color, 0.05),
+  0 1px 0 $shadow-inline-color inset},
+  '16': #{0 0 16px rgba($shadow-color, 0.06),
+  32px 32px 32px rgba($shadow-color, 0.05),
+  64px 64px 96px rgba($shadow-color, 0.05),
+  0 1px 0 $shadow-inline-color inset},
+) !default;

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

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