@eui/styles 19.0.1 → 19.0.2-snapshot-1734253017473

package/dist/base/01-base/functions/_other.functions.scss

@@ -15,14 +15,6 @@
     @return $map;
 }
 
-@function new-breakpoint($query: $feature $value) {
-    @if length($query) == 1 {
-        $query: $default-feature nth($query, 1);
-    } @else if is-even(length($query)) {
-        $query: append($query, 12);
-    }
-    @return $query;
-}
 @function strip-units($value) {
     @return math.div($value, $value * 0 + 1);
 }
@@ -36,5 +28,3 @@
     }
     @return math.div($pxval, $base) * 1rem;
 }
-
-

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

@@ -0,0 +1,2 @@
+@import 'other.functions';
+@import 'color.functions';

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

@@ -0,0 +1,3 @@
+@forward 'functions';
+@forward 'variables';
+@forward 'mixins';

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

@@ -60,7 +60,7 @@ $outline-size: 2px;
 }
 
 @mixin eui-accessible-focus-border() {
-    border-left: v(eui-s-2xs) solid transparent;
+    border-left: var(--eui-s-2xs) solid transparent;
 
     &:focus:not([readonly]) {
         border: var(--eui-s-2xs) solid var(--eui-c-focus-visible) !important;

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

@@ -1,9 +1,9 @@
 @mixin eui-anim-base {
-    animation-fill-mode: both; //v(eui-base-animation-fill-mode);
-    animation-delay: v(eui-base-animation-delay);
-    animation-direction: v(eui-base-animation-direction);
-    animation-duration: v(eui-base-animation-duration-base);
-    transition: v(eui-base-animation-transition-base);
+    animation-fill-mode: both; //var(--eui-base-animation-fill-mode);
+    animation-delay: var(--eui-base-animation-delay);
+    animation-direction: var(--eui-base-animation-direction);
+    animation-duration: var(--eui-base-animation-duration-base);
+    transition: var(--eui-base-animation-transition-base);
 }
 
 @mixin eui-anim-infinite {
@@ -12,13 +12,13 @@
 }
 @mixin eui-anim-fast {
     @include eui-anim-base();
-    animation-duration: v(eui-base-animation-duration-fast);
+    animation-duration: var(--eui-base-animation-duration-fast);
 }
 @mixin eui-anim-medium {
     @include eui-anim-base();
-    animation-duration: v(eui-base-animation-duration-medium);
+    animation-duration: var(--eui-base-animation-duration-medium);
 }
 @mixin eui-anim-slow {
     @include eui-anim-base();
-    animation-duration: v(eui-base-animation-duration-slow);
+    animation-duration: var(--eui-base-animation-duration-slow);
 }

package/dist/base/01-base/mixins/_eui-border-radius.scss

@@ -3,7 +3,7 @@
     @if ($radius) {
         border-radius: $radius;
     } @else {
-        border-radius: v(eui-border-radius-base);
+        border-radius: var(--eui-border-radius-base);
     }
 }
 @mixin eui-border-top-radius($radius) {

package/dist/base/01-base/mixins/_eui-clearable-input.scss

@@ -7,23 +7,23 @@
         width: 100%;
 
         .eui-input-text--clearable-icon {
-            bottom: calc(#{v(eui-s-s)} - 2px);
+            bottom: calc(#{var(--eui-s-s)} - 2px);
             cursor: pointer;
             position: absolute;
-            right: v(eui-s-s);
+            right: var(--eui-s-s);
             user-select: none;
             visibility: visible;
-            z-index: v(eui-zi-clearable-icon);
+            z-index: var(--eui-zi-clearable-icon);
 
             &:focus {
                 @include eui-accessible-focus();
             }
 
             > svg {
-                fill: v(eui-c-neutral-lighter);
+                fill: var(--eui-c-neutral-lighter);
 
                 &:hover {
-                    fill: v(eui-c-danger);
+                    fill: var(--eui-c-danger);
                 }
             }
         }

package/dist/base/01-base/mixins/_eui-disabled.scss

@@ -1,4 +1,4 @@
-@mixin eui-disabled($opacity: v(eui-o-50)) {
+@mixin eui-disabled($opacity: var(--eui-o-50)) {
     background-image: none;
     box-shadow: none;
     cursor: not-allowed !important;

package/dist/base/01-base/mixins/_eui-flex-column-wrapper.scss

@@ -7,13 +7,13 @@
 
     &__header {
         flex: 0 0 auto;
-        padding: v(eui-s-m) v(eui-s-m) v(eui-s-m) v(eui-s-s);
+        padding: var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) var(--eui-s-s);
         text-align: center;
 
         &-toolbar {
             align-items: center;
-            background-color: v(eui-c-neutral-bg);
-            border-bottom: 1px solid v(eui-c-neutral-lightest);
+            background-color: var(--eui-c-neutral-bg);
+            border-bottom: 1px solid var(--eui-c-neutral-lightest);
             display: flex;
             font: var(--eui-f-m-bold);
         }
@@ -26,10 +26,10 @@
     }
 
     &__footer {
-        background-color: v(eui-c-neutral-bg);
-        border-top: 1px solid v(eui-c-neutral-lightest);
+        background-color: var(--eui-c-neutral-bg);
+        border-top: 1px solid var(--eui-c-neutral-lightest);
         flex: 0 0 auto;
-        padding: v(eui-s-m);
+        padding: var(--eui-s-m);
         text-align: center;
     }
 }

package/dist/base/01-base/mixins/_eui-input.scss

@@ -1,24 +1,27 @@
+@use 'accessibility.mixins' as a11y;
+@use 'loading-indicator' as loadingIndicator;
+
 // TODO: this mixin should not be used an element that is not input.
 // eUI Inputs Layout & states commons
 // Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
 @mixin eui-input($element: input) {
     font: var(--eui-f-m);
     appearance: none;
-    background-color: v(eui-c-white);
-    border: 1px solid v(eui-c-neutral-lighter);
-    border-radius: v(eui-br-m);
+    background-color: var(--eui-c-white);
+    border: 1px solid var(--eui-c-neutral-lighter);
+    border-radius: var(--eui-br-m);
     box-shadow: none;
-    color: v(eui-c-text);
+    color: var(--eui-c-text);
     padding: calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 1px); // ECL aligned
     width: 100%;
-    @include eui-accessible-focus();
+    @include a11y.eui-accessible-focus();
 
     &:not([hidden]) {
         display: block;
     }
 
     &::placeholder {
-        color: v(eui-c-neutral-lighter) !important;
+        color: var(--eui-c-neutral-lighter) !important;
         opacity: 1;     // Firefox adds a lower opacity to the placeholder color
     }
 
@@ -41,9 +44,9 @@
 
     &[disabled]:not([readonly]),
     &--disabled:not([readonly]) {
-        background-color: v(eui-c-neutral-bg-light) !important;
-        border: 1px solid v(eui-c-neutral-lightest);
-        color: v(eui-c-neutral-light);
+        background-color: var(--eui-c-neutral-bg-light) !important;
+        border: 1px solid var(--eui-c-neutral-lightest);
+        color: var(--eui-c-neutral-light);
         @if $element == textarea {
             pointer-events: auto;
         } @else {
@@ -53,35 +56,35 @@
 
     &--invalid,
     &--danger {
-        border: 1px solid v(eui-c-danger);
+        border: 1px solid var(--eui-c-danger);
     }
 
     &--clearable {
-        padding-right: v(eui-s-2xl);
+        padding-right: var(--eui-s-2xl);
 
         &-icon {
             cursor: pointer;
             position: absolute;
-            right: v(eui-s-s);
+            right: var(--eui-s-s);
             user-select: none;
             visibility: visible;
-            @include eui-accessible-focus();
+            @include a11y.eui-accessible-focus();
 
             > svg {
-                fill: v(eui-c-neutral-lighter);
+                fill: var(--eui-c-neutral-lighter);
 
                 &:hover {
-                    fill: v(eui-c-danger);
+                    fill: var(--eui-c-danger);
                 }
             }
         }
     }
 
     &--loading {
-        padding-right: v(eui-s-2xl);
+        padding-right: var(--eui-s-2xl);
 
         &-icon {
-            @include eui-loading-indicator();
+            @include loadingIndicator.loading-indicator();
         }
     }
 }

package/dist/base/01-base/mixins/_eui-loading.scss

@@ -3,7 +3,7 @@
         animation: 0.8s linear infinite spin;
         border: 8px solid transparent;
         border-radius: 50%;
-        border-top-color: v(eui-c-primary);
+        border-top-color: var(--eui-c-primary);
         content: "";
         display: block;
         height: 80px;

package/dist/base/01-base/mixins/_eui-resizable.scss

@@ -1,4 +1,4 @@
-@mixin eui-resizable( $eui-resizable-bar-right-offset: unset, $eui-resizable-icon-top-offset: v(eui-s-m) ) {
+@mixin eui-resizable( $eui-resizable-bar-right-offset: unset, $eui-resizable-icon-top-offset: var(--eui-s-m) ) {
     .eui-resizable {
         .eui-resizable-bar {
             // For eui-page-column

package/dist/base/01-base/mixins/_eui-scrollbars.scss

@@ -18,7 +18,7 @@
             border-radius: $border-radius;
 
             &:hover {
-                background-color: v(eui-c-neutral-lighter);
+                background-color: var(--eui-c-neutral-lighter);
             }
         }
         @else {

package/dist/base/01-base/mixins/_icon-svg.mixins.scss

@@ -16,7 +16,7 @@
 @mixin pseudoSvgIconCheckmarkWhite() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-checkmark-path);
-    background-color: v(eui-c-white);
+    background-color: var(--eui-c-white);
 }
 @mixin pseudoSvgIconCheckmarkBlack() {
     @include pseudoSvgIconCommonSize();
@@ -26,7 +26,7 @@
 @mixin pseudoSvgIconRemoveWhite() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-remove-path);
-    background-color: v(eui-c-white);
+    background-color: var(--eui-c-white);
 }
 @mixin pseudoSvgIconRemoveBlack() {
     @include pseudoSvgIconCommonSize();
@@ -36,12 +36,12 @@
 @mixin pseudoSvgIconExternalWhite() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-external-path);
-    background-color: v(eui-c-white);
+    background-color: var(--eui-c-white);
 }
 @mixin pseudoSvgIconExternalPrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-external-path);
-    background-color: v(eui-c-primary);
+    background-color: var(--eui-c-primary);
 }
 @mixin pseudoSvgIconExternalBlack() {
     @include pseudoSvgIconCommonSize();
@@ -51,17 +51,17 @@
 @mixin pseudoSvgIconEllipseWhite() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-c-white);
+    background-color: var(--eui-c-white);
 }
 @mixin pseudoSvgIconEllipsePrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-c-primary);
+    background-color: var(--eui-c-primary);
 }
 @mixin pseudoSvgIconEllipseDanger() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-c-danger);
+    background-color: var(--eui-c-danger);
 }
 @mixin pseudoSvgIconEllipseBlack() {
     @include pseudoSvgIconCommonSize();

package/dist/base/01-base/mixins/{_eui-loading-indicator.scss → _loading-indicator.scss}

@@ -1,38 +1,38 @@
-@mixin eui-loading-indicator() {
+@mixin loading-indicator() {
     align-items: center;
     display: flex;
 
     &::after,
     &::before {
         content: '';
-        height: v(eui-s-l);
+        height: var(--eui-s-l);
         position: absolute;
-        right: v(eui-s-s);
-        width: v(eui-s-l);
+        right: var(--eui-s-s);
+        width: var(--eui-s-l);
     }
 
     &::before {
-        border: v(eui-s-2xs) solid rgba(0, 0, 0, 0.35);
+        border: var(--eui-s-2xs) solid rgba(0, 0, 0, 0.35);
         border-radius: 100%;
     }
 
     &::after {
-        animation: eui-loading 0.6s linear;
+        animation: loading 0.6s linear;
         animation-iteration-count: infinite;
-        border-color: v(eui-c-white) transparent transparent;
+        border-color: var(--eui-c-white) transparent transparent;
         border-radius: 100%;
         border-style: solid;
-        border-width: v(eui-s-2xs);
+        border-width: var(--eui-s-2xs);
         box-shadow: 0 0 0 1px transparent;
     }
 
     &--sm::after,
     &--sm::before {
-        height: v(eui-s-m);
-        width: v(eui-s-m);
+        height: var(--eui-s-m);
+        width: var(--eui-s-m);
     }
 
-    @keyframes eui-loading {
+    @keyframes loading {
         to { transform: rotate(360deg); }
     }
 }

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

@@ -1,5 +1,7 @@
+@use 'hacks';
+
 @mixin eui-anim--bob {
-    @include hacks();
+    @include hacks.hacks();
 
     @keyframes eui-anim--bob {
         0% {

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

@@ -1,5 +1,7 @@
+@use 'hacks';
+
 @mixin eui-anim--buzz {
-    @include hacks();
+    @include hacks.hacks();
 
     @keyframes eui-anim--buzz {
         10% {
@@ -47,7 +49,7 @@
 	&:focus,
 	&:active {
         animation-name: eui-anim--buzz;
-        animation-duration: v(eui-base-animation-duration-medium);
+        animation-duration: var(--eui-base-animation-duration-medium);
         animation-timing-function: linear;
         animation-iteration-count: 1;
 	}

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--fadeIn {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--fadeIn {
         from {
             offset: 0;
@@ -14,7 +15,7 @@
         }
     }
     animation-name: eui-anim--fadeIn;
-    animation-duration: v(eui-base-animation-duration-fast);
+    animation-duration: var(--eui-base-animation-duration-fast);
     backface-visibility: visible;
     transition-timing-function: ease;
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--fadeOut {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--fadeOut {
         from {
             offset: 0;
@@ -14,7 +15,7 @@
         }
     }
     animation-name: eui-anim--fadeOut;
-    animation-duration: v(eui-base-animation-duration-fast);
+    animation-duration: var(--eui-base-animation-duration-fast);
     backface-visibility: visible;
     transition-timing-function: ease;
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--flipInY {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--flipInY {
         from {
             animation-timing-function: ease-in;
@@ -27,6 +28,6 @@
         }
     }
     animation-name: eui-anim--flipInY;
-    animation-duration: v(eui-base-animation-duration-base);
+    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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--jackInTheBox {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--jackInTheBox {
         from {
             opacity: 0;
@@ -22,5 +23,5 @@
         }
     }
     animation-name: eui-anim--jackInTheBox;
-    animation-duration: v(eui-base-animation-duration-base);
+    animation-duration: var(--eui-base-animation-duration-base);
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--pop {
-	@include hacks();
+	@include hacks.hacks();
     @keyframes eui-anim--pop {
         50% {
             transform: scale(1.1);
@@ -11,7 +12,7 @@
 	&:focus,
 	&:active {
 		animation-name: eui-anim--pop;
-		animation-duration: v(eui-base-animation-duration-medium);
+		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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--pulsar {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--pulsar {
         from {
             transform: scale3d(1, 1, 1);
@@ -18,7 +19,7 @@
 	&:focus,
 	&:active {
         animation-name: eui-anim--pulsar;
-        animation-duration: v(eui-base-animation-duration-fast);
+        animation-duration: var(--eui-base-animation-duration-fast);
         animation-iteration-count: 1;
 	}
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--pulse {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--pulse {
         to {
             transform: scale(1.1);
@@ -12,7 +13,7 @@
 	&:focus,
 	&:active {
 		animation-name: eui-anim--pulse;
-		animation-duration: v(eui-base-animation-duration-medium);
+		animation-duration: var(--eui-base-animation-duration-medium);
 		animation-timing-function: ease-in-out;
         animation-direction: alternate;
         animation-iteration-count: 2;

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--slideInDown{
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--slideInDown {
         from {
             offset: 0;
@@ -14,7 +15,7 @@
         }
     }
     animation-name: eui-anim--slideInDown;
-    animation-duration: v(eui-base-animation-duration-medium);
+    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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--slideInLeft {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--slideInLeft {
         from {
             opacity: 0;
@@ -14,6 +15,6 @@
         }
     }
     animation-name: eui-anim--slideInLeft;
-    animation-duration: v(eui-base-animation-duration-medium);
+    animation-duration: var(--eui-base-animation-duration-medium);
     backface-visibility: visible;
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--slideInRight {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--slideInRight {
         from {
             opacity: 0;
@@ -14,7 +15,7 @@
         }
     }
     animation-name: eui-anim--slideInRight;
-    animation-duration: v(eui-base-animation-duration-medium);
+    animation-duration: var(--eui-base-animation-duration-medium);
     backface-visibility: visible;
 }
 

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--slideInUp {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--slideInUp {
         from {
             offset: 0;
@@ -14,7 +15,7 @@
         }
     }
     animation-name: eui-anim--slideInUp;
-    animation-duration: v(eui-base-animation-duration-medium);
+    animation-duration: var(--eui-base-animation-duration-medium);
     backface-visibility: visible;
     transition-timing-function: ease;
 }

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

@@ -1,6 +1,7 @@
+@use 'hacks';
 
 @mixin eui-anim--spin {
-    @include hacks();
+    @include hacks.hacks();
     @keyframes eui-anim--spin {
         from {
             transform: rotate(0deg);
@@ -14,6 +15,6 @@
 	&:focus,
 	&:active {
         animation-name: eui-anim--spin;
-        animation-duration: v(eui-base-animation-duration-slow);;
+        animation-duration: var(--eui-base-animation-duration-slow);;
 	}
 }

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

@@ -1,7 +1,7 @@
-
+@use 'hacks';
 
 @mixin eui-anim--wobble {
-	@include hacks();
+	@include hacks.hacks();
     @keyframes eui-anim--wobble {
         16.65% {
             transform: translateY(8px);
@@ -31,8 +31,8 @@
 	&: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-duration: var(--eui-base-animation-duration-slow);
+		animation-timing-function: var(--eui-base-animation-ease-in-out-timing-function);
 		animation-iteration-count: 1;
 	}
 }