@eui/styles 19.3.3-snapshot-1754410186755 → 19.3.3-snapshot-1754413875033

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

@@ -0,0 +1,33 @@
+@use 'hacks';
+
+@mixin eui-anim--flipInY {
+    @include hacks.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: var(--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,27 @@
+@use 'hacks';
+
+@mixin eui-anim--jackInTheBox {
+    @include hacks.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: var(--eui-base-animation-duration-base);
+}

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

@@ -0,0 +1,19 @@
+@use 'hacks';
+
+@mixin eui-anim--pop {
+	@include hacks.hacks();
+    @keyframes eui-anim--pop {
+        50% {
+            transform: scale(1.1);
+        }
+    }
+
+	&:hover,
+	&:focus,
+	&:active {
+		animation-name: eui-anim--pop;
+		animation-duration: var(--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,25 @@
+@use 'hacks';
+
+@mixin eui-anim--pulsar {
+    @include hacks.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: var(--eui-base-animation-duration-fast);
+        animation-iteration-count: 1;
+	}
+}

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

@@ -0,0 +1,22 @@
+@use 'hacks';
+
+@mixin eui-anim--pulse {
+    @include hacks.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: var(--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,21 @@
+@use 'hacks';
+
+@mixin eui-anim--slideInDown{
+    @include hacks.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: var(--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,20 @@
+@use 'hacks';
+
+@mixin eui-anim--slideInLeft {
+    @include hacks.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: var(--eui-base-animation-duration-medium);
+    backface-visibility: visible;
+}

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

@@ -0,0 +1,21 @@
+@use 'hacks';
+
+@mixin eui-anim--slideInRight {
+    @include hacks.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: var(--eui-base-animation-duration-medium);
+    backface-visibility: visible;
+}
+

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

@@ -0,0 +1,21 @@
+@use 'hacks';
+
+@mixin eui-anim--slideInUp {
+    @include hacks.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: var(--eui-base-animation-duration-medium);
+    backface-visibility: visible;
+    transition-timing-function: ease;
+}

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

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

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

@@ -0,0 +1,38 @@
+@use 'hacks';
+
+@mixin eui-anim--wobble {
+	@include hacks.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: var(--eui-base-animation-duration-slow);
+		animation-timing-function: var(--eui-base-animation-ease-in-out-timing-function);
+		animation-iteration-count: 1;
+	}
+}

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

@@ -0,0 +1,36 @@
+// DISPLAY HACKS - mixins used to quickly drop in hacks for each element on some devices/browsers
+
+// ENABLE HARDWARE ACCELERATION
+// Enables hardware acceleration on many mobile/tablet devices which will improve the performance of a transition effect,
+// as well as prevent other elements around the one transitioning from moving. Perspective also reduces blurryness of text in Chrome.
+@mixin hardwareAccel() {
+	transform: perspective(1px) translateZ(0);
+}
+
+// IMPROVE ANTI ALIAS
+// On many mobile/tablet devices, using transforms can cause a thin line to be drawn around an element.
+// To improve aliasing of these elements on mobile/tablet devices, a transparent box-shadow is applied.
+@mixin improveAntiAlias() {
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+// FORCE BLOCK LEVEL
+// Transforms need to be block-level to work
+@mixin forceBlockLevel() {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+// TAP HIGHLIGHT FIX
+// Prevent highlight colour when an element is tapped
+@mixin hideTapHighlightColor() {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+// APPLY THE HACKS
+@mixin hacks() {
+	@include hardwareAccel();    // Problem with background
+    // @include improveAntiAlias();
+    @include forceBlockLevel();
+    @include hideTapHighlightColor();
+}

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

@@ -0,0 +1,48 @@
+@forward 'hacks';
+@forward 'bob';
+@forward 'buzz';
+@forward 'fade-in';
+@forward 'fade-out';
+@forward 'flip-in-y';
+@forward 'jack-in-the-box';
+@forward 'pop';
+@forward 'pulsar';
+@forward 'pulse';
+@forward 'slide-in-down';
+@forward 'slide-in-left';
+@forward 'slide-in-right';
+@forward 'slide-in-up';
+@forward 'spin';
+@forward 'wobble';
+
+// Use animations
+@mixin eui-animation ($animation: null, $delay: 0s, $duration: var(--eui-base-animation-duration-base), $direction: var(--eui-base-animation-direction), $fillmode: var(--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: var(--eui-base-animation-transition-base);
+}
+@mixin eui-transition-ease {
+    transition: var(--eui-base-animation-transition-ease);
+}
+@mixin eui-transition-ease-in-out {
+    transition: var(--eui-base-animation-transition-ease-in-out);
+}
+@mixin eui-transition($transition...) {
+    @if length($transition) == 0 {
+        transition: var(--eui-base-animation-transition-base);
+    } @else {
+        transition: $transition;
+    }
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+}
+

package/dist/base/01-base/mixins/index.scss

@@ -0,0 +1,15 @@
+@forward 'animations';
+
+@forward 'animations.mixins';
+@forward 'accessibility.mixins';
+@forward 'icon-svg.mixins';
+@forward 'media.mixins';
+@forward 'other.mixins';
+@forward 'loading-indicator';
+
+@forward 'eui-scrollbars';
+@forward 'eui-border-radius';
+@forward 'eui-disabled';
+@forward 'eui-loading';
+@forward 'eui-input';
+@forward 'eui-resizable';

package/dist/base/01-base/variables.scss

@@ -0,0 +1,2 @@
+// ASSETS PATHS - overridden by dev-only for relative imports if any
+$eui-assets-base-path: '@eui/styles/dist/assets' !default;

package/dist/base/02-tokens/maps-dark-theme.scss

@@ -0,0 +1,131 @@
+// COLORS
+
+$color-map: (
+    branding: (
+        120: #003676,
+        110: #014592,
+        100: #004494,
+        80: #0057BD,
+        60: #0069E6,
+        40: #0F7DFF,
+        20: #3894FF,
+        10: #61AAFF,
+        5: #8AC0FF,
+        2: #DBECFF,
+        0: #fff
+    ),
+    primary: (
+        160: #fff,
+        140: #f3f6fa,
+        120: #d8e0fb,
+        110: #b1c0f8,
+        100: #89a1f4,
+        80: #5577f0,
+        60: #3860ed,
+        40: #2651eb,
+        20: #143fd9,
+        10: #1338bd,
+        5: #0f2fa2,
+        0: #0a1f6c
+    ),
+    neutral: (
+        0: #131313,
+        2: #1d1d1d,
+        3: #262626,
+        5: #2b2b2b,
+        10: #303030,
+        20: #595959,
+        40: #838383,
+        60: #acacac,
+        80: #d6d6d6,
+        100: #eaeaea,
+        110: #f5f5f5,
+        120: #f9f9f9,
+        140: #fcfcfc,
+        160: #fff        
+    ),
+    cta: (
+        160: #fff,
+        140: #fff9ef,
+        120: #ffebcc,
+        110: #ffe1b4,
+        100: #ffd392,
+        80: #ffcb7d,
+        60: #ffbe5c,
+        40: #fea439,
+        20: #fc8713,
+        10: #ed6c09,
+        5: #c55109,
+        0: #a84304
+    ),    
+    accent: (
+        160: #fff,
+        140: #fffcf7,
+        120: #fff2de,
+        110: #ffe5be,
+        100: #ffd89d,
+        80: #ffcb7c,
+        60: #ffbe5c,
+        40: #ffb74d,
+        20: #ffad33,
+        10: #ffa724,
+        5: #ff9d0a,
+        0: #e08700
+    ),
+    info: (
+        0: #033863,
+        5: #044e8b,
+        10: #04579b,
+        20: #0462ae,
+        40: #046abd,
+        60: #0578d6,
+        80: #2791e7,
+        100: #51a6ec,
+        110: #8cc5f2,
+        120: #c8e3f9,
+        140: #f0f7fd,
+        160: #fff
+    ),
+    success: (
+        160: #fff,
+        140: #f4faf6,
+        120: #d3ecda,
+        110: #a7d9b6,
+        100: #7cc791,
+        80: #50b46d,
+        60: #24a148,
+        40: #209141,
+        20: #1d813a,
+        10: #197132,
+        5: #16612b,
+        0: #0e401d
+    ),
+    warning: (
+        160: #fff,
+        140: #fefaf3,
+        120: #fdeacf,
+        110: #fad6a0,
+        100: #f8c170,
+        80: #f5ad41,
+        60: #f39811,
+        40: #db890f,
+        20: #c27a0e,
+        10: #aa6a0c,
+        5: #925b0a,
+        0: #613d07
+    ),
+    danger: (
+        160: #fff,
+        140: #fdf4f4,
+        120: #f8d2d4,
+        110: #f0a5a9,
+        100: #e9787e,
+        80: #e14b53,
+        60: #da1e28,
+        40: #c41b24,
+        20: #ae1820,
+        10: #99151c,
+        5: #831218,
+        0: #570c10
+    )
+);