@elastic/eui-theme-common 0.0.1

package/src/global_styling/mixins/_helpers.scss

@@ -0,0 +1,126 @@
+// 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');
+}
+
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+@mixin euiFullHeight {
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+// 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

@@ -0,0 +1,14 @@
+@import 'responsive';
+@import 'shadow';
+@import 'size';
+@import 'typography';
+@import 'helpers';
+@import 'states';
+
+@import 'button';
+@import 'form';
+@import 'loading';
+@import 'link';
+@import 'panel';
+@import 'range';
+@import 'tool_tip';

package/src/global_styling/mixins/_link.scss

@@ -0,0 +1,11 @@
+@mixin euiLink {
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    text-decoration: underline;
+  }
+}

package/src/global_styling/mixins/_loading.scss

@@ -0,0 +1,6 @@
+@function euiLoadingSpinnerBorderColors(
+  $main: $euiColorLightShade,
+  $highlight: $euiColorPrimary
+) {
+  @return $highlight $main $main $main;
+}

package/src/global_styling/mixins/_panel.scss

@@ -0,0 +1,55 @@
+@mixin euiPanel($selector) {
+  @if variable-exists(selector) == false {
+    @error 'A $selector must be provided to @mixin euiPanel().';
+  } @else {
+    #{$selector} {
+      flex-grow: 1;
+
+      &#{$selector}--flexGrowZero {
+        flex-grow: 0;
+      }
+
+      &#{$selector}--hasShadow {
+        @include euiBottomShadowMedium;
+      }
+
+      &#{$selector}--hasBorder {
+        border: $euiBorderThin;
+        box-shadow: none;
+      }
+
+      &#{$selector}--isClickable {
+        // transition the shadow
+        transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+        &:enabled { // This is a good selector for buttons since it doesn't exist on divs
+          // in case of button wrapper which inherently is inline-block and no width
+          display: block;
+          width: 100%;
+          text-align: left;
+        }
+
+        &:hover,
+        &:focus {
+          @include euiBottomShadow;
+          transform: translateY(-2px);
+          cursor: pointer;
+        }
+      }
+
+      // Border Radii
+      @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
+        &#{$selector}--#{$modifier} {
+          border-radius: $amount;
+        }
+      }
+
+      // Background colors
+      @each $modifier, $amount in $euiPanelBackgroundColorModifiers {
+        &#{$selector}--#{$modifier} {
+          background-color: $amount;
+        }
+      }
+    }
+  }
+}

package/src/global_styling/mixins/_range.scss

@@ -0,0 +1,62 @@
+/*
+The CSS in JS version of this file lives in:
+  - src/components/form/range/range.styles.ts
+
+The following files still use the Sass version:
+  - src/themes/amsterdam/overrides/_color_stops.scss
+  - src/themes/amsterdam/overrides/_hue.scss
+*/
+
+@mixin euiRangeTrackSize($compressed: false) {
+  height: $euiRangeTrackHeight;
+  width: $euiRangeTrackWidth;
+
+  @if ($compressed) {
+    height: $euiRangeTrackCompressedHeight;
+  }
+}
+
+@mixin euiRangeTrackPerBrowser {
+  &::-webkit-slider-runnable-track { @content; }
+  &::-moz-range-track { @content; }
+  &::-ms-fill-lower { @content; }
+  &::-ms-fill-upper { @content; }
+}
+
+@mixin euiRangeThumbBorder {
+  border: 2px solid $euiRangeThumbBorderColor;
+}
+
+@mixin euiRangeThumbBoxShadow {
+  box-shadow:
+    0 0 0 1px $euiRangeThumbBorderColor,
+    0 2px 2px -1px rgba($euiShadowColor, .2),
+    0 1px 5px -2px rgba($euiShadowColor, .2);
+}
+
+@mixin euiRangeThumbFocusBoxShadow {
+  box-shadow: 0 0 0 2px $euiFocusRingColor;
+}
+
+@mixin euiRangeThumbStyle {
+  @include euiRangeThumbBoxShadow;
+  @include euiRangeThumbBorder;
+  cursor: pointer;
+  background-color: $euiRangeThumbBackgroundColor;
+  padding: 0;
+  height: $euiRangeThumbHeight;
+  width: $euiRangeThumbWidth;
+  box-sizing: border-box;  // required for firefox or the border makes the width and height to increase
+}
+
+@mixin euiRangeThumbPerBrowser {
+  &::-webkit-slider-thumb { @content; }
+  &::-moz-range-thumb { @content; }
+  &::-ms-thumb { @content; }
+}
+
+@mixin euiRangeThumbFocus {
+  @include euiRangeThumbBorder;
+  @include euiRangeThumbFocusBoxShadow;
+  background-color: $euiColorPrimary;
+}

package/src/global_styling/mixins/_responsive.scss

@@ -0,0 +1,44 @@
+// 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

@@ -0,0 +1,108 @@
+@function shadowOpacity($opacity) {
+  @if (lightness($euiTextColor) < 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));
+  }
+}
+
+@mixin euiSlightShadowHover($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));
+}
+
+// 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

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

package/src/global_styling/mixins/_states.scss

@@ -0,0 +1,50 @@
+@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%));
+}
+
+@mixin euiHoverState {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+@mixin euiFocusState($color: $euiColorPrimary) {
+  @include euiHoverState;
+  @include euiFocusBackground($color);
+}
+
+@mixin euiDisabledState($color: $euiButtonColorDisabledText) {
+  cursor: not-allowed;
+  text-decoration: none;
+
+  @if ($color) {
+    color: $color;
+  }
+}
+
+@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) {
+  &:hover {
+    @include euiHoverState;
+  }
+
+  &:focus {
+    @include euiFocusState($focusColor);
+  }
+
+  &:disabled {
+    @include euiDisabledState($disabledColor);
+  }
+}

package/src/global_styling/mixins/_tool_tip.scss

@@ -0,0 +1,25 @@
+@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;
+  }
+}
+
+@mixin euiToolTipTitle {
+  font-weight: $euiFontWeightBold;
+  border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor;
+  padding-bottom: $euiSizeXS;
+  margin-bottom: $euiSizeXS;
+}

package/src/global_styling/mixins/_typography.scss

@@ -0,0 +1,167 @@
+// 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%;
+  -ms-text-size-adjust: 100%;
+  font-kerning: normal;
+}
+
+@mixin euiCodeFont {
+  font-family: $euiCodeFontFamily;
+  letter-spacing: normal;
+}
+
+@mixin euiText {
+  color: $euiTextColor;
+  font-weight: $euiFontWeightRegular;
+}
+
+@mixin euiTitle($size: 'm') {
+  @include euiTextBreakWord;
+  color: $euiTitleColor;
+
+  @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;
+  }
+}