@eui/styles 18.0.0-next.17 → 18.0.0-next.19

package/src/base/02-base/functions/_color.functions.scss

@@ -1,187 +0,0 @@
-@use "sass:math";
-
-@function toRGB($color) {
-    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
-        ")";
-}
-@function getContrast($color) {
-    $color-brightness: round(
-        (red($color) * 299) + (green($color) * 587) +
-            math.div((blue($color) * 114), 1000)
-    );
-    $light-color: round(
-        (red(#fff) * 299) + (green(#fff) * 587) +
-            math.div((blue(#fff) * 114), 1000)
-    );
-    @if abs($color-brightness) < math.div($light-color, 1.7) {
-        @return white;
-    } @else {
-        @return getColorVariant(map-get($eui-base-colors, "neutral"), 120);
-    }
-}
-
-@function col_r($color) {
-    @if $color <= 0.03928 {
-        @return $color / 12.92;
-    } @else {
-        @return pow((($color + 0.055) / 1.055), (2.4));
-    }
-}
-
-@function getContrastNew($bgColor, $lightColor: #fff, $darkColor: #404040) {
-    $r: red($bgColor);
-    $g: green($bgColor);
-    $b: blue($bgColor);
-    $ui_r: $r / 255;
-    $ui_g: $g / 255;
-    $ui_b: $b / 255;
-
-    $ui_r_c: col_r($ui_r);
-    $ui_g_c: col_r($ui_g);
-    $ui_b_c: col_r($ui_b);
-
-    $L: (0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c);
-    @if ($L > 0.179) {
-        @return $darkColor;
-    } @else {
-        @return $lightColor;
-    }
-}
-
-
-// method 1 check here : very accurate contrast compared to chrome extension contrast checker tool
-// https://gist.github.com/isGabe/8959422
-
-@function color_luminance($color) {
-    // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-    $rgba: red($color), green($color), blue($color);
-    $rgba2: ();
-
-    @for $i from 1 through 3 {
-      $rgb: nth($rgba, $i);
-      $rgb: $rgb / 255;
-
-      $rgb: if($rgb < .03928, $rgb / 12.92, math.pow(($rgb + .055) / 1.055, 2.4));
-
-      $rgba2: append($rgba2, $rgb);
-    }
-
-    @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
-  }
-
-  @function calculate-contrast($color1, $color2) {
-    // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-    $luminance1: color_luminance($color1) + .05;
-    $luminance2: color_luminance($color2) + .05;
-    $ratio: $luminance1 / $luminance2;
-
-    @if $luminance2 > $luminance1 {
-      $ratio: 1 / $ratio;
-    }
-
-    $ratio: round($ratio * 10) / 10;
-
-    @return $ratio;
-  }
-
-
-// https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass
-
-// NOT used as not accurate compared to chrome extension tool
-
-// @function sRGBToLinear($colorValue) {
-//     $colorValue: calc($colorValue / 255);
-//     @if $colorValue <= 0.04045 {
-//         @return calc($colorValue / 12.92);
-//     } @else {
-//         @return calc(math.pow($colorValue + 0.055, 2.4));
-//     }
-// }
-
-// @function calculate-contrast($value1, $value2) {
-//     $luminance1: (0.2126 * sRGBToLinear(red($value1))) +
-//         (0.7152 * sRGBToLinear(green($value1))) +
-//         (0.0722 * sRGBToLinear(blue($value1)));
-//     $luminance2: (0.2126 * sRGBToLinear(red($value2))) +
-//         (0.7152 * sRGBToLinear(green($value2))) +
-//         (0.0722 * sRGBToLinear(blue($value2)));
-
-//     @return calc(
-//         (max($luminance1, $luminance2) + 0.05) /
-//             (min($luminance1, $luminance2) + 0.05)
-//     );
-// }
-
-
-
-// TO BE TESTED to auto-calculated based on a certain ratio, creating high-contrast maps, etc...
-
-@function find-safe-color($color, $ratio: 4.5) {
-    $lightness: lightness($color);
-    $value: $color;
-    $contrast: 0;
-    $i: 0;
-
-    @if $lightness < 50 {
-        $value: lighten($value, 5%);
-        $contrast: calculate-contrast($color, $value);
-        $i: $i + 1;
-
-        @while $contrast < $ratio and $i < 20 {
-            $value: lighten($value, 5%);
-            $contrast: calculate-contrast($color, $value);
-            $i: $i + 1;
-        }
-    } @else {
-        $value: darken($value, 5%);
-        $contrast: calculate-contrast($color, $value);
-        $i: $i + 1;
-
-        @while $contrast < $ratio and $i < 20 {
-            $value: darken($value, 5%);
-            $contrast: calculate-contrast($color, $value);
-            $i: $i + 1;
-        }
-    }
-
-    @if $i >= 20 {
-        @debug "Color not safe";
-    }
-
-    @return ($value, $contrast);
-}
-
-// interesting to generate maps of same colors and corresponding to some defaults for some
-// categories of html elements where the colors are used : to be checked later
-
-@function wcag-safe-colors($base-color) {
-    $colors: ();
-
-    $wcag30: find-safe-color($base-color, 3);
-    $wcag45: find-safe-color($base-color);
-    $wcag70: find-safe-color($base-color, 7);
-
-    // Generate shades
-    $colors: map-merge(
-        $colors,
-        (
-            "base-color": $base-color,
-            "wcag20-aa-normal-color": nth($wcag45, 1),
-            "wcag20-aa-normal-ratio": nth($wcag45, 2),
-            "wcag20-aa-large-color": nth($wcag30, 1),
-            "wcag20-aa-large-ratio": nth($wcag30, 2),
-            "wcag21-aa-input-color": nth($wcag30, 1),
-            "wcag21-aa-input-ratio": nth($wcag30, 1),
-            "wcag21-aaa-normal-color": nth($wcag70, 1),
-            "wcag21-aaa-normal-ratio": nth($wcag70, 2),
-            "wcag21-aaa-large-color": nth($wcag45, 1),
-            "wcag21-aaa-large-ratio": nth($wcag45, 2),
-        )
-    );
-
-    @return $colors;
-}
-
-

package/src/base/02-base/functions/_module.scss

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

package/src/base/02-base/functions/_other.functions.scss

@@ -1,53 +0,0 @@
-@use "sass:math";
-
-@function v($var, $fallback: null) {
-    @if ($fallback) {
-        @return var(--#{$var}, #{$fallback});
-    } @else {
-        @return var(--#{$var});
-    }
-}
-@function map-deep-get($map, $keys...) {
-    @each $key in $keys {
-        @debug #{$map};
-        $map: map-get($map, $key);
-    }
-    @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);
-}
-@function to-rem($pxval) {
-    @if not unitless($pxval) {
-        $pxval: strip-units($pxval);
-    }
-    $base: 16px;
-    @if not unitless($base) {
-        $base: strip-units($base);
-    }
-    @return math.div($pxval, $base) * 1rem;
-}
-
-@function mapReverseValues($map) {
-    $keys: map-keys($map);
-    $map-reversed: ();
-
-    @for $i from length($keys) through 1 {
-        $currentPos: calc(length($keys) - $i + 1);
-
-        $map-reversed: map-merge(
-            $map-reversed,
-            (nth($keys, $currentPos): map-get($map, nth($keys, $i)))
-        );
-    }
-    @return $map-reversed;
-}

package/src/base/02-base/mixins/_accessibility.mixins.scss

@@ -1,28 +0,0 @@
-$outline-offset: -2px;
-$outline-size: 2px;
-
-// Call this mixin to enforce the accessibility visuals when on focus/active
-@mixin eui-accessible-focus($offset: $outline-offset, $size: $outline-size) {
-    &:active:not([readonly]),
-    &:focus:not([readonly]) {
-        outline: $size solid v(eui-base-color-accessible-focus);
-        outline-offset: $offset;
-        transition: none;
-    }
-
-    // &:focus-visible:not([readonly]) {
-    //     outline: $size solid v(eui-base-color-accessible-focus);
-    //     outline-offset: $offset;
-    //     transition: none;
-    // }
-
-    // Forced focusable element
-    [tabindex="0"] {
-        &:active:not([readonly]),
-        &:focus:not([readonly]) {
-            outline: $size solid v(eui-base-color-accessible-focus);
-            outline-offset: $offset;
-            transition: none;
-        }
-    }
-}

package/src/base/02-base/mixins/_color.mixins.scss

@@ -1,101 +0,0 @@
-@function getShadeFgColor($colorVariantBase) {
-    $fgShade: 100;
-
-    @if ($colorVariantBase == "warning") {
-        $fgShade: 130;
-    } @else if ($colorVariantBase == "accent") {
-        $fgShade: 140;
-    }
-    @return $fgShade;
-}
-
-@mixin eui-color-variant($colorVariantBase, $shade: 100) {
-    background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
-    border-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
-    color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-
-    .eui-icon-svg {
-        svg {
-            color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-            fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-        }
-    }
-}
-@mixin eui-color-variant-border($colorVariantBase, $shade: 100) {
-    border-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
-}
-
-@mixin eui-color-variant-icon($colorVariantBase, $shade: 100) {
-    .eui-icon-svg {
-        svg {
-            color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-            fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-        }
-    }
-}
-
-@mixin eui-color-variant-hover($colorVariantBase, $shade: 110) {
-    &:active,
-    &:focus,
-    &:hover {
-        background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
-        color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-        $borderShade: index(map-keys(map-get($eui-base-tokens-colors, $colorVariantBase)), $shade);
-
-        .eui-icon-svg {
-            svg {
-                color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-                fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
-            }
-        }
-    }
-}
-
-@mixin eui-color-variant-outline($colorVariantBase, $transparent: false) {
-    $fgShade: getShadeFgColor(($colorVariantBase));
-    @if $transparent {
-        background-color: transparent;
-        border: 1px solid transparent;
-    } @else {
-        background-color: var(--eui-base-color-white);
-        border: 1px solid var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-    }
-    color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-
-    .eui-icon-svg {
-        svg {
-            color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-            fill: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-        }
-    }
-}
-
-@mixin eui-color-variant-outline-hover($colorVariantBase, $shade: 10) {
-    &:active,
-    &:focus,
-    &:hover {
-        background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
-    }
-}
-
-@mixin eui-color-variant-fg($colorVariantBase, $shade: false) {
-    $fgShade: $shade;
-    @if ($shade == false) {
-        $fgShade: getShadeFgColor(($colorVariantBase));
-    }
-    color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-}
-
-@mixin eui-color-variant-fg-icon($colorVariantBase, $shade: false) {
-    $fgShade: $shade;
-    @if ($shade == false) {
-        $fgShade: getShadeFgColor(($colorVariantBase));
-    }
-
-    .eui-icon-svg {
-        svg {
-            color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-            fill: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
-        }
-    }
-}

package/src/base/02-base/mixins/_icon-svg.mixins.scss

@@ -1,74 +0,0 @@
-@mixin pseudoSvgIconCommon() {
-    height: 1rem;
-    width: 1rem;
-    content: '';
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    mask-size: cover;
-}
-@mixin pseudoSvgIconCommonSize() {
-    height: 1rem;
-    width: 1rem;
-}
-
-
-
-@mixin pseudoSvgIconCheckmarkWhite() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-checkmark-path);
-    background-color: v(eui-base-color-white);
-}
-@mixin pseudoSvgIconCheckmarkBlack() {
-    @include pseudoSvgIconCommonSize();
-    content: var(--eui-internal-icon-checkmark-path);
-}
-
-@mixin pseudoSvgIconRemoveWhite() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-remove-path);
-    background-color: v(eui-base-color-white);
-}
-@mixin pseudoSvgIconRemoveBlack() {
-    @include pseudoSvgIconCommonSize();
-    content: var(--eui-internal-icon-remove-path);
-}
-
-@mixin pseudoSvgIconExternalWhite() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-external-path);
-    background-color: v(eui-base-color-white);
-}
-@mixin pseudoSvgIconExternalPrimary() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-external-path);
-    background-color: v(eui-base-color-primary-100);
-}
-@mixin pseudoSvgIconExternalBlack() {
-    @include pseudoSvgIconCommonSize();
-    content: var(--eui-internal-icon-external-path);
-}
-
-@mixin pseudoSvgIconEllipseWhite() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-base-color-white);
-}
-@mixin pseudoSvgIconEllipsePrimary() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-base-color-primary-100);
-}
-@mixin pseudoSvgIconEllipseDanger() {
-    @include pseudoSvgIconCommon();
-    mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: v(eui-base-color-danger-100);
-}
-@mixin pseudoSvgIconEllipseBlack() {
-    @include pseudoSvgIconCommonSize();
-    content: var(--eui-internal-icon-ellipse-path);
-}
-
-@mixin pseudoSvgIconChevronDownBlack() {
-    @include pseudoSvgIconCommonSize();
-    content: var(--eui-internal-icon-chevron-down-path);
-}

package/src/base/02-base/mixins/_media.mixins.scss

@@ -1,26 +0,0 @@
-$default-feature: "min-width";
-@mixin media($query: $feature $value $columns) {
-    @if length($query) == 1 {
-        @media screen and ($default-feature: nth($query, 1)) {
-            @content;
-        }
-    }
-    @else {
-        $loop-to: length($query);
-        $media-query: "screen and ";
-        @if is-not(is-even(length($query))) {
-            $loop-to: $loop-to - 1;
-        }
-        $i: 1;
-        @while $i <=$loop-to {
-            $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
-            @if ($i + 1) != $loop-to {
-                $media-query: $media-query + "and ";
-            }
-            $i: $i+2;
-        }
-        @media #{$media-query} {
-            @content;
-        }
-    }
-}

package/src/base/02-base/mixins/_module.scss

@@ -1,8 +0,0 @@
-@import 'animations/module';
-
-@import 'accessibility.mixins';
-@import 'color.mixins';
-@import 'icon-svg.mixins';
-@import 'media.mixins';
-@import 'other.mixins';
-@import 'typography.mixins';

package/src/base/02-base/mixins/_other.mixins.scss

@@ -1,5 +0,0 @@
-@mixin eui-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}

package/src/base/02-base/mixins/_typography.mixins.scss

@@ -1,112 +0,0 @@
-/** Common weight name mapping
-    @See the OpenType specification:
-    https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass
-    The numerical values 100 to 900 roughly correspond to the following common weight names:
-    100     Thin (Hairline)
-    200	    Extra Light (Ultra Light)
-    300	    Light
-    400	    Normal
-    500	    Medium
-    600	    Semi Bold (Demi Bold)
-    700	    Bold
-    800	    Extra Bold (Ultra Bold)
-    900	    Black (Heavy)
-**/
-
-// central mixing for getting definition over ECL tokens
-@mixin eui-font($size: m) {
-    font: map-get($eui-base-tokens-fonts, $size);
-}
-
-// shortcut for font-families
-@mixin eui-font-family() {
-    @include eui-font(m);
-}
-@mixin eui-font-family-normal() {
-    @include eui-font(m);
-}
-@mixin eui-font-family-s() {
-    @include eui-font(s);
-}
-@mixin eui-font-family-xs() {
-    @include eui-font(xs);
-}
-@mixin eui-font-family-l() {
-    @include eui-font(l);
-}
-@mixin eui-font-family-xl() {
-    @include eui-font(xl);
-}
-@mixin eui-font-family-2xl() {
-    @include eui-font(2xl);
-}
-@mixin eui-font-family-3xl() {
-    @include eui-font(3xl);
-}
-@mixin eui-font-family-4xl() {
-    @include eui-font(4xl);
-}
-
-// bold
-@mixin eui-font-family-bold() {
-    @include eui-font(m);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-xs() {
-    @include eui-font(xs);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-s() {
-    @include eui-font(s);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-l() {
-    @include eui-font(l);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-xl() {
-    @include eui-font(xl);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-2xl() {
-    @include eui-font(2xl);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-3xl() {
-    @include eui-font(3xl);
-    font-weight: 700;
-}
-@mixin eui-font-family-bold-4xl() {
-    @include eui-font(4xl);
-    font-weight: 700;
-}
-
-// light
-@mixin eui-font-family-light() {
-    @include eui-font(m);
-    font-weight: 300;
-}
-
-// italic
-@mixin eui-font-family-italic() {
-    @include eui-font(m);
-    font-style: italic;
-}
-@mixin eui-font-family-bold() {
-    @include eui-font(m);
-    font-weight: 700;
-}
-
-// bold italic
-@mixin eui-font-family-bold-italic() {
-    @include eui-font(m);
-    font-style: italic;
-    font-weight: 700;
-}
-
-// monospace
-@mixin eui-font-family-monospace() {
-    font-family: v(eui-base-font-family-monospace);
-    font-style: normal;
-    font-weight: 400;
-}

package/src/base/02-base/mixins/animations/__hacks.scss

@@ -1,36 +0,0 @@
-// 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/src/base/02-base/mixins/animations/_bob.scss

@@ -1,32 +0,0 @@
-@mixin eui-anim--bob {
-    @include hacks();
-
-    @keyframes eui-anim--bob {
-        0% {
-            transform: translateY(-8px);
-        }
-        50% {
-            transform: translateY(-4px);
-        }
-        100% {
-            transform: translateY(-8px);
-        }
-    }
-    @keyframes eui-anim--bob-float {
-        100% {
-            transform: translateY(-8px);
-        }
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-        animation-name: eui-anim--bob-float, eui-anim--bob;
-        animation-duration: 0.3s, 1.5s;
-        animation-delay: 0s, 0.3s;
-        animation-timing-function: ease-out, ease-in-out;
-        animation-iteration-count: 1, infinite;
-        animation-fill-mode: forwards;
-        animation-direction: normal, alternate;
-	}
-}