@elastic/eui 107.0.0 → 108.0.0

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;
-  }
-}

package/src/global_styling/mixins/_typography.scss

@@ -1,166 +0,0 @@
-// stylelint-disable property-no-vendor-prefix
-// stylelint-disable declaration-no-important
-
-@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$size / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$size / $euiFontSize}em;
-  }
-}
-
-// It can also be applied to calculate paddings
-@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$elementSize / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$elementSize / $elementFontSize}em;
-  }
-}
-
-// Spit out rem and px
-@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    font-size: $size;
-    font-size: fontSizeToRemOrEm($size, 'rem');
-  } @else if ($sizingMethod == 'em') {
-    font-size: fontSizeToRemOrEm($size, 'em');
-  }
-}
-
-@mixin lineHeightFromBaseline($multiplier: 3) {
-  line-height: lineHeightFromBaseline($multiplier);
-}
-
-// Some mixins that help us deal with browser scaling of text more consistently.
-// Essentially, fonts across eui should scale against the root html element, not
-// against parent inheritance.
-
-// Our base fonts
-
-@mixin euiFont {
-  font-family: $euiFontFamily;
-  font-weight: $euiFontWeightRegular;
-  letter-spacing: -.005em;
-  -webkit-text-size-adjust: 100%;
-  font-kerning: normal;
-}
-
-@mixin euiCodeFont {
-  font-family: $euiCodeFontFamily;
-  letter-spacing: normal;
-}
-
-@mixin euiText {
-  color: $euiColorTextParagraph;
-  font-weight: $euiFontWeightRegular;
-}
-
-@mixin euiTitle($size: 'm') {
-  @include euiTextBreakWord;
-  color: $euiColorTextHeading;
-
-  @if (map-has-key($euiTitles, $size)) {
-    @each $property, $value in map-get($euiTitles, $size) {
-      @if ($property == 'font-size') {
-        @include fontSize($value);
-      } @else {
-        #{$property}: $value;
-      }
-    }
-  } @else {
-    @include fontSize($size);
-    @include lineHeightFromBaseline(3);
-  }
-}
-
-// Font sizing extends, using rem mixin
-
-@mixin euiFontSizeXS {
-  @include fontSize($euiFontSizeXS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeS {
-  @include fontSize($euiFontSizeS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSize {
-  @include fontSize($euiFontSize);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeM {
-  @include fontSize($euiFontSizeM);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeL {
-  @include fontSize($euiFontSizeL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXL {
-  @each $property, $value in map-get($euiTitles, 'm') {
-    @if ($property == 'font-size') {
-      @include fontSize($value);
-    } @else {
-      #{$property}: $value;
-    }
-  }
-  line-height: 1.25;
-}
-
-@mixin euiFontSizeXXL {
-  @each $property, $value in map-get($euiTitles, 'l') {
-    @if ($property == 'font-size') {
-      @include fontSize($value);
-    } @else {
-      #{$property}: $value;
-    }
-  }
-  line-height: 1.25;
-}
-
-@mixin euiTextBreakWord {
-  // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
-  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
-  word-break: break-word;
-}
-
-/**
- * Text truncation
- *
- * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
- *
- * 1. Ensure that the node has a maximum width after which truncation can occur.
- */
-@mixin euiTextTruncate {
-  max-width: 100%; // 1
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
-
-@mixin euiNumberFormat {
-  font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data
-}
-
-/**
- * Text weight shifting
- *
- * When changing the font-weight based the state of the component
- * this mixin will ensure that the sizing is dependent on the boldest
- * weight so it doesn't shifter sibling content.
- */
-@mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') {
-  &::after {
-    display: block;
-    content: attr(#{$attr});
-    font-weight: $fontWeight;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-}

package/src/global_styling/variables/_animations.scss

@@ -1,6 +0,0 @@
-// Animations
-
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/animations'
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss

package/src/global_styling/variables/_borders.scss

@@ -1,3 +0,0 @@
-// Borders
-
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/borders'

package/src/global_styling/variables/_buttons.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons'

package/src/global_styling/variables/_font_weight.scss

@@ -1,4 +0,0 @@
-// Separated out to its own file for easy import into docs
-
-// Font weights
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/font_weight'

package/src/global_styling/variables/_form.scss

@@ -1,2 +0,0 @@
-// Form
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form'

package/src/global_styling/variables/_index.scss

@@ -1,22 +0,0 @@
-// --------------------------------------------------------------------------------------
-// EUI global variables
-// --------------------------------------------------------------------------------------
-// This module contains all global variables available within EUI. Every variable in this
-// document should be prefixed with $eui. This lets us know where the variable is
-// coming from when looking inside the individual component files. Any component local
-// variables should be declared at the top of those documents prefixed with $componentName.
-
-// Global colors are established and importer per theme, before this manifest
-// Import order is important. Size, vis colors, ...etc are used in other variables.
-@import 'size';
-@import 'animations';
-@import 'font_weight';
-@import 'typography';
-@import 'borders';
-@import 'responsive';
-@import 'shadows';
-@import 'states';
-@import 'z_index';
-
-@import 'buttons';
-@import 'form';

package/src/global_styling/variables/_responsive.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'

package/src/global_styling/variables/_shadows.scss

@@ -1,2 +0,0 @@
-// Shadows
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/shadows'

package/src/global_styling/variables/_size.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'

package/src/global_styling/variables/_states.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states'

package/src/global_styling/variables/_typography.scss

@@ -1 +0,0 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'

package/src/global_styling/variables/_z_index.scss

@@ -1,2 +0,0 @@
-// Z-Index
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/z_index'