@elastic/eui 107.0.1 → 108.0.0

package/src/global_styling/functions/_colors.scss

@@ -1,138 +0,0 @@
-// Converting a normal hex color to RBG
-@function hexToRGB($color) {
-  @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
-}
-
-// Mixes a provided color with white.
-@function tint($color, $percent) {
-  @return mix($euiColorGhost, $color, $percent);
-}
-
-// Mixes a provided color with black.
-@function shade($color, $percent) {
-  @return mix($euiColorInk, $color, $percent);
-}
-
-// For theming. Checks the text color and tells us whether it's light or dark.
-// Based on that we either tint (add white) or shade (add black).
-@function tintOrShade($color, $tint, $shade) {
-  @if (lightness($euiColorTextParagraph) > 50) {
-    @return shade($color, $shade);
-  } @else {
-    @return tint($color, $tint);
-  }
-}
-
-// The reverse of the above
-@function shadeOrTint($color, $shade, $tint) {
-  @if (lightness($euiColorTextParagraph) < 50) {
-    @return shade($color, $shade);
-  } @else {
-    @return tint($color, $tint);
-  }
-}
-
-// Similar to above, but uses the light or dark color based
-// on whether it's the light or dark theme
-@function lightOrDarkTheme($lightColor, $darkColor) {
-  @if (lightness($euiColorTextParagraph) < 50) {
-    @return $lightColor;
-  } @else {
-    @return $darkColor;
-  }
-}
-
-// Calculates luminance, which is better than brightness for checking colors
-// pow, nth functions come from the _math.scss functions
-@function luminance($color) {
-  // 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, pow(($rgb + .055) / 1.055, 2.4));
-
-    $rgba2: append($rgba2, $rgb);
-  }
-
-  @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3);
-}
-
-// Calculate contrast
-@function contrastRatio($background, $foreground) {
-  $backgroundLum: luminance($background) + .05;
-  $foregroundLum: luminance($foreground) + .05;
-
-  @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum);
-}
-
-// Given $color, decide whether $lightText or $darkText should be used as the text color
-// ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has
-//     a higher contrast than #FFF against a #EEE background.
-@function chooseLightOrDarkText($background, $lightText: $euiColorGhost, $darkText: $euiColorInk) {
-  $lightContrast: contrastRatio($background, $lightText);
-  $darkContrast: contrastRatio($background, $darkText);
-
-  @if ($lightContrast > $darkContrast) {
-    @return $lightText;
-  } @else {
-    @return $darkText;
-  }
-}
-
-// Given a $foreground and a $background, make the $foreground AA accessibility by slightly
-// adjusting it till the contrast is high enough
-// By default it will compare against the page background color
-
-// ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until
-//     it had higher than 4.5 contrast on a white background.
-$euiContrastRatioText: 4.5;
-@function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: $euiContrastRatioText) {
-  $contrast: contrastRatio($foreground, $background);
-
-  // Determine the lightness factor of the background color first to
-  // determine whether to shade or tint the foreground.
-  $brightness: lightness($background);
-
-  $highContrastTextColor: $foreground;
-
-  @while ($contrast < $ratio) {
-    @if ($brightness > 50) {
-      $highContrastTextColor: shade($highContrastTextColor, 5%);
-    } @else {
-      $highContrastTextColor: tint($highContrastTextColor, 5%);
-    }
-
-    $contrast: contrastRatio($highContrastTextColor, $background);
-
-    @if (lightness($highContrastTextColor) < 5) {
-      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.';
-      @return $highContrastTextColor;
-    }
-
-    @if (lightness($highContrastTextColor) > 95) {
-      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.';
-      @return $highContrastTextColor;
-    }
-  }
-
-  @return $highContrastTextColor;
-}
-
-// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background.
-// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0.
-// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked.
-// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)
-$euiContrastRatioGraphic: 3;
-@function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) {
-  @return makeHighContrastColor($color, $background, $euiContrastRatioGraphic);
-}
-
-// Disabled content only needs a contrast of at least 2 because there is no interaction available
-$euiContrastRatioDisabled: 2;
-@function makeDisabledContrastColor($color, $background: $euiPageBackgroundColor) {
-  @return makeHighContrastColor($color, $background, $euiContrastRatioDisabled);
-}

package/src/global_styling/functions/_index.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';

package/src/global_styling/functions/_math.scss

@@ -1 +0,0 @@
-@import 'math_pow';

package/src/global_styling/functions/_math_pow.scss

@@ -1,82 +0,0 @@
-/**
-The MIT License (MIT)
-
-Copyright (c) 2015 strarsis https://github.com/strarsis/sass-math-pow
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
- */
-
-@function pow($number, $exp) {
-  $exp1: round($exp);
-  $result: powInt($number, $exp1);
-
-  @if ($exp1 != $exp) {
-    $result: $result * mathExp(($exp - $exp1) * mathLn($number));
-  }
-
-  @return $result;
-}
-
-@function powInt($number, $exp) {
-  @if $exp == 0 {
-    @return 1;
-  } @else if $exp < 0 {
-    @return 1 / powInt($number, -$exp);
-  } @else {
-    $e: floor($exp / 2);
-    $pow: pow($number, $e);
-    @if $e * 2 == $exp {
-      @return $pow * $pow;
-    } @else {
-      @return $pow * $pow * $number;
-    }
-  }
-}
-
-@function mathExp($value) {
-  $item: 1;
-  $result: 1;
-
-  @for $index from 1 to 100 {
-    $item: $item * $value / $index;
-    $result: $result + $item;
-  }
-
-  @return $result;
-}
-
-@function mathLn($value) {
-  $tenExp: 0;
-  $lnTen: 2.30258509;
-
-  @while ($value > 1) {
-    $tenExp: $tenExp + 1;
-    $value: $value / 10;
-  }
-
-  $item: -1;
-  $result: 0;
-
-  @for $index from 1 to 100 {
-    $item: $item * (1 - $value);
-    $result: $result + $item / $index;
-  }
-
-  @return $result + $tenExp * $lnTen;
-}

package/src/global_styling/index.scss

@@ -1,3 +0,0 @@
-// Core
-
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

package/src/global_styling/mixins/_helpers.scss

@@ -1,117 +0,0 @@
-// Helper mixins
-
-// Set scroll bar appearance on Chrome (and firefox).
-@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') {
-  // Firefox's scrollbar coloring cascades, but the sizing does not,
-  // so it's being added to this mixin for allowing support wherever custom scrollbars are
-  scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support
-
-  @if ($size == 'thin') {
-    scrollbar-width: thin;
-  }
-
-  // stylelint-disable selector-no-vendor-prefix
-  &::-webkit-scrollbar {
-    width: $euiScrollBar;
-    height: $euiScrollBar;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparentize($thumbColor, .5);
-    background-clip: content-box;
-    border-radius: $euiScrollBar;
-
-    @if ($size == 'thin') {
-      border: $euiScrollBarCornerThin solid $trackBackgroundColor;
-    } @else {
-      border: $euiScrollBarCorner solid $trackBackgroundColor;
-    }
-  }
-
-  &::-webkit-scrollbar-corner,
-  &::-webkit-scrollbar-track {
-    background-color: $trackBackgroundColor;
-  }
-}
-
-/**
- * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
- *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
- *    Others like Safari, won't show anything at all.
- * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
- */
-
-// Just overflow and scrollbars
-@mixin euiYScroll {
-  @include euiScrollBar;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &:focus {
-    outline: none; /* 1 */
-  }
-
-  &[tabindex='0']:focus:focus-visible {
-    outline-style: auto; /* 2 */
-  }
-}
-
-@mixin euiXScroll {
-  @include euiScrollBar;
-  overflow-x: auto;
-
-  &:focus {
-    outline: none; /* 1 */
-  }
-
-  &[tabindex='0']:focus:focus-visible {
-    outline-style: auto; /* 2 */
-  }
-}
-
-// The full overflow with shadow
-@mixin euiYScrollWithShadows {
-  @include euiYScroll;
-  @include euiOverflowShadow('y');
-}
-
-@mixin euiXScrollWithShadows {
-  @include euiXScroll;
-  @include euiOverflowShadow('x');
-}
-
-// Hiding elements offscreen to only be read by screen reader
-// See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
-@mixin euiScreenReaderOnly {
-  // Take the element out of the layout
-  position: absolute;
-  // Keep it vertically inline
-  top: auto;
-  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text
-  left: -10000px;
-  // The element must have a size (for some screen readers)
-  width: 1px;
-  height: 1px;
-  // But reduce the visible size to nothing
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  // And ensure no overflows occur
-  overflow: hidden;
-  // Chrome requires the negative margin to not cause overflows of parent containers
-  margin: -1px;
-}
-
-// Doesn't have reduced motion turned on
-@mixin euiCanAnimate {
-  @media screen and (prefers-reduced-motion: no-preference) {
-    @content;
-  }
-}
-
-// Does have reduced motion turned on
-@mixin euiCantAnimate {
-  @media screen and (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}

package/src/global_styling/mixins/_index.scss

@@ -1,8 +0,0 @@
-@import 'responsive';
-@import 'shadow';
-@import 'size';
-@import 'typography';
-@import 'helpers';
-@import 'states';
-
-@import 'tool_tip'; // Needed by Elastic Charts

package/src/global_styling/mixins/_responsive.scss

@@ -1,44 +0,0 @@
-// A sem-complicated mixin for breakpoints, that takes any number of
-// named breakpoints that exists in $euiBreakpoints.
-
-@mixin euiBreakpoint($sizes...) {
-  // Loop through each size parameter
-  @each $size in $sizes {
-    // Store the location of the size in the list to check against
-    $index: index($euiBreakpointKeys, $size);
-
-    // Check to make sure it exists in the allowed breakpoint names
-    @if ( $index ) {
-
-      // Set the min size to the value of the size
-      $minSize: map-get($euiBreakpoints, $size);
-
-      // If it is the last item, don't give it a max-width
-      @if ( $index == length($euiBreakpointKeys) ) {
-        @media only screen and (min-width: $minSize) {
-          @content;
-        }
-        // If it's not the last item, add a max-width
-      } @else {
-
-        // Set the max size to the value of the next size (-1px as to not overlap)
-        $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px;
-
-        // If it's the the first item, don't set a min-width
-        @if ( $index == 1 ) {
-          @media only screen and (max-width: $maxSize) {
-            @content;
-          }
-          // Otherwise it should have a min and max width
-        } @else {
-          @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
-            @content;
-          }
-        }
-      }
-      // If it's not a known breakpoint, throw a warning
-    } @else {
-      @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'";
-    }
-  }
-}

package/src/global_styling/mixins/_shadow.scss

@@ -1,100 +0,0 @@
-@function shadowOpacity($opacity) {
-  @if (lightness($euiColorTextParagraph) < 50) {
-    @return $opacity * 1;
-  } @else {
-    @return $opacity * 2.5;
-  }
-}
-
-@mixin euiSlightShadow($color: $euiShadowColor) {
-  box-shadow:
-    0 .8px .8px rgba($color, shadowOpacity(.04)),
-    0 2.3px 2px rgba($color, shadowOpacity(.03));
-}
-
-@mixin euiBottomShadowSmall($color: $euiShadowColor) {
-  box-shadow:
-    0 .7px 1.4px rgba($color, shadowOpacity(.07)),
-    0 1.9px 4px rgba($color, shadowOpacity(.05)),
-    0 4.5px 10px rgba($color, shadowOpacity(.05));
-}
-
-@mixin euiBottomShadowMedium($color: $euiShadowColor) {
-  box-shadow:
-    0 .9px 4px -1px rgba($color, shadowOpacity(.08)),
-    0 2.6px 8px -1px rgba($color, shadowOpacity(.06)),
-    0 5.7px 12px -1px rgba($color, shadowOpacity(.05)),
-    0 15px 15px -1px rgba($color, shadowOpacity(.04));
-}
-
-// Similar to shadow medium but without the bottom depth. Useful for popovers
-// that drop UP rather than DOWN.
-@mixin euiBottomShadowFlat($color: $euiShadowColor) {
-  box-shadow:
-    0 0 .8px rgba($color, shadowOpacity(.06)),
-    0 0 2px rgba($color, shadowOpacity(.04)),
-    0 0 5px rgba($color, shadowOpacity(.04)),
-    0 0 17px rgba($color, shadowOpacity(.03));
-}
-
-@mixin euiBottomShadow($color: $euiShadowColor) {
-  box-shadow:
-    0 1px 5px rgba($color, shadowOpacity(.1)),
-    0 3.6px 13px rgba($color, shadowOpacity(.07)),
-    0 8.4px 23px rgba($color, shadowOpacity(.06)),
-    0 23px 35px rgba($color, shadowOpacity(.05));
-}
-
-@mixin euiBottomShadowLarge(
-  $color: $euiShadowColor,
-  $opacity: 0,
-  $reverse: false
-) {
-  @if ($reverse) {
-    box-shadow:
-      0 -2.7px 9px rgba($color, shadowOpacity(.13)),
-      0 -9.4px 24px rgba($color, shadowOpacity(.09)),
-      0 -21.8px 43px rgba($color, shadowOpacity(.08));
-  } @else {
-    box-shadow:
-      0 2.7px 9px rgba($color, shadowOpacity(.13)),
-      0 9.4px 24px rgba($color, shadowOpacity(.09)),
-      0 21.8px 43px rgba($color, shadowOpacity(.08));
-  }
-}
-
-// stylelint-disable color-named
-@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
-  $hideHeight: $euiScrollBarCornerThin * 1.25;
-  $gradient: null;
-  $gradientStart:
-    transparentize(red, .9) 0%,
-    transparentize(red, 0) $hideHeight;
-  $gradientEnd:
-    transparentize(red, 0) calc(100% - #{$hideHeight}),
-    transparentize(red, .9) 100%;
-  @if ($side == 'both' or $side == 'start' or $side == 'end') {
-    @if ($side == 'both') {
-      $gradient: $gradientStart, $gradientEnd;
-    } @else if ($side == 'start') {
-      $gradient: $gradientStart;
-    } @else {
-      $gradient: $gradientEnd;
-    }
-  } @else {
-    @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
-  }
-
-  @if ($direction == 'y') {
-    mask-image: linear-gradient(to bottom, #{$gradient});
-  } @else if ($direction == 'x') {
-    mask-image: linear-gradient(to right, #{$gradient});
-  } @else {
-    @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
-  }
-
-  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
-  // This workaround forces a stacking context on the scrolling container, which
-  // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
-  transform: translateZ(0);
-}

package/src/global_styling/mixins/_size.scss

@@ -1,4 +0,0 @@
-@mixin size($size) {
-  width: $size;
-  height: $size;
-}

package/src/global_styling/mixins/_states.scss

@@ -1,17 +0,0 @@
-@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
-  @if $size == 'large' {
-    // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty
-    // stylelint-disable-next-line declaration-no-important
-    animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important;
-  } @else {
-    // stylelint-disable-next-line declaration-no-important
-    animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important;
-  }
-}
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss
-
-@mixin euiFocusBackground($color: $euiColorPrimary) {
-  background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%));
-}

package/src/global_styling/mixins/_tool_tip.scss

@@ -1,18 +0,0 @@
-@mixin euiToolTipStyle($size: null) {
-  @include euiBottomShadow($color: $euiColorInk);
-
-  $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default;
-  $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default;
-
-  border-radius: $euiBorderRadius;
-  background-color: $euiTooltipBackgroundColor;
-  color: $euiColorGhost;
-  z-index: $euiZLevel9;
-  max-width: 256px;
-  overflow-wrap: break-word;
-  padding: $euiSizeS;
-
-  .euiHorizontalRule {
-    background-color: $euiTooltipBorderColor;
-  }
-}