@elastic/eui-theme-common 0.0.1

package/src/global_styling/functions/_colors.scss

@@ -0,0 +1,138 @@
+// 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($euiTextColor) > 50) {
+    @return shade($color, $shade);
+  } @else {
+    @return tint($color, $tint);
+  }
+}
+
+// The reverse of the above
+@function shadeOrTint($color, $shade, $tint) {
+  @if (lightness($euiTextColor) < 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($euiTextColor) < 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

@@ -0,0 +1,5 @@
+// Math needs to be first in the load order
+@import 'math';
+
+// Using math, we have functions to manipulate contrast / luminosity for accessibility
+@import 'colors';

package/src/global_styling/functions/_math.scss

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

package/src/global_styling/functions/_math_pow.scss

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

@@ -0,0 +1,18 @@
+// Core
+
+// Functions need to be first, since we use them in our variables and mixin definitions
+@import 'functions/index';
+
+// Variables come next, and are used in some mixins
+@import 'variables/index';
+
+// Mixins provide generic code expansion through helpers
+@import 'mixins/index';
+
+// Utility classes provide one-off selectors for common css problems
+@import 'utility/index';
+
+// The reset file has moved to global_styles.tsx
+
+// Customization of the React Date Picker
+@import 'react_date_picker/index';

package/src/global_styling/mixins/_button.scss

@@ -0,0 +1,149 @@
+// Provides a solid reset and base for handling sizing layout
+// Does not include any visual styles
+@mixin euiButtonBase {
+  display: inline-block;
+  appearance: none;
+  cursor: pointer;
+  height: $euiButtonHeight;
+  line-height: $euiButtonHeight; // prevents descenders from getting cut off
+  text-align: center;
+  white-space: nowrap;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+// Adds the focus (and hover) animation for translating up 1px
+@mixin euiButtonFocus {
+  @include euiCanAnimate {
+    transition: transform $euiAnimSpeedNormal ease-in-out, background-color $euiAnimSpeedNormal ease-in-out;
+
+    &:hover:not(:disabled) {
+      transform: translateY(-1px);
+    }
+
+    &:focus {
+      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+    }
+  }
+}
+
+// All of the button base styles including the base, focus, font, and initial styles
+// Does not include individual alterations like color or sizes
+@mixin euiButton {
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
+  @include euiButtonFocus;
+
+  font-weight: $euiButtonFontWeight;
+  text-decoration: none;
+  outline-offset: -1px;
+
+  &:hover:not(:disabled),
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+// Correctly lays out the contents of a button when using the proper dom elements of:
+// <button>
+//   <span className="__content">
+//     {icon/spinner}
+//     {child}
+//   </span>
+// </button>
+// 1. Apply margin to all but last item in the flex.
+// 2. Margin gets flipped because of the row-reverse.
+@mixin euiButtonContent($isReverse: false) {
+  height: 100%;
+  width: 100%;
+  vertical-align: middle;
+
+  .euiButtonContent__icon,
+  .euiButtonContent__spinner {
+    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
+  }
+
+  @if ($isReverse) {
+    flex-direction: row-reverse;
+
+    > * + * {
+      margin-inline-start: 0; // 1, 2
+      margin-inline-end: $euiSizeS; // 1, 2
+    }
+  } @else {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > * + * {
+      margin-inline-start: $euiSizeS; // 1
+    }
+  }
+}
+
+@mixin euiButtonContentDisabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    text-decoration: none;
+  }
+
+  .euiButtonContent__spinner {
+    border-color: euiLoadingSpinnerBorderColors(currentColor);
+  }
+}
+
+/*
+ * Creates the Amsterdam style of button with a transparent background
+ */
+@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) {
+  $backgroundColor: $color;
+
+  @if (map-has-key($euiButtonTypes, $color)) {
+    $backgroundColor: map-get($euiButtonTypes, $color);
+  }
+
+  $percentConversion: $transparency * 100%;
+  // This variable simulates the possibly darkest background the button could be on
+  // Simulates the 20% opaque color on top of the page background color
+  $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion);
+  // Then we can calculate the darkest text color needed
+  color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated);
+  // But still use transparency
+  background-color: transparentize($backgroundColor, $transparency);
+
+  @if ($includeStates) {
+    &:not([class*='isDisabled']) {
+      &:hover,
+      &:focus {
+        // Duplicated from inert state simply to override default theme
+        background-color: transparentize($backgroundColor, $transparency);
+      }
+    }
+  }
+}
+
+/*
+ * Creates the Amsterdam style of fill button
+ */
+@mixin euiButtonFillStyle($color: 'primary') {
+  $backgroundColor: $color;
+
+  @if (map-has-key($euiButtonTypes, $color)) {
+    $backgroundColor: map-get($euiButtonTypes, $color);
+  }
+
+  background-color: $backgroundColor;
+  color: chooseLightOrDarkText($backgroundColor);
+}
+
+// Keyframe animation declarations can be found in
+// utility/animations.scss

package/src/global_styling/mixins/_form.scss

@@ -0,0 +1,273 @@
+@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
+  $iconSize: $euiSize;
+  $iconPadding: $euiFormControlPadding;
+  $marginBetweenIcons: $euiFormControlPadding / 2;
+
+  @if ($compressed) {
+    $iconPadding: $euiFormControlCompressedPadding;
+  }
+
+  @if variable-exists(numOfIcons) == false {
+    @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
+  } @else if $numOfIcons == 1 {
+    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
+  } @else if $numOfIcons == 2 {
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
+  } @else if $numOfIcons == 3 {
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
+  }
+}
+
+@mixin euiPlaceholderPerBrowser {
+  // stylelint-disable selector-no-vendor-prefix
+  // Each prefix must be its own content block
+  &::-webkit-input-placeholder { @content; opacity: 1; }
+  &::-moz-placeholder { @content; opacity: 1; }
+  &:-ms-input-placeholder { @content; opacity: 1; }
+  &:-moz-placeholder { @content; opacity: 1; }
+  &::placeholder { @content; opacity: 1; }
+}
+
+@function euiFormControlGradient($color: $euiColorPrimary) {
+  @return linear-gradient(to top,
+    $color,
+    $color 2px,
+    transparent 2px,
+    transparent 100%
+  );
+}
+
+@mixin euiFormControlText {
+  @include euiFont;
+  font-size: $euiFontSizeS;
+  color: $euiTextColor;
+
+  @include euiPlaceholderPerBrowser {
+    color: $euiFormControlPlaceholderText;
+  }
+}
+
+@mixin euiFormControlSize(
+  $height: $euiFormControlHeight,
+  $includeAlternates: false
+) {
+  // Default
+  max-width: $euiFormMaxWidth;
+  width: 100%;
+  height: $height;
+
+  @if ($includeAlternates) {
+    &--fullWidth {
+      max-width: 100%;
+    }
+
+    &--compressed {
+      height: $euiFormControlCompressedHeight;
+    }
+
+    &--inGroup {
+      height: 100%;
+    }
+  }
+}
+
+@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
+  @if ($isIconOptional) {
+    @at-root {
+      #{&}--withIcon {
+        @include euiFormControlLayoutPadding(1, $side, $compressed);
+      }
+    }
+  } @else {
+    @include euiFormControlLayoutPadding(1, $side, $compressed);
+  }
+}
+
+@mixin euiFormControlIsLoading($isNextToIcon: false) {
+  @at-root {
+    #{&}-isLoading {
+      @if ($isNextToIcon) {
+        @include euiFormControlLayoutPadding(2);
+      } @else {
+        @include euiFormControlLayoutPadding(1);
+      }
+    }
+
+    #{&}-isLoading#{&}--compressed {
+      @if ($isNextToIcon) {
+        @include euiFormControlLayoutPadding(2, $compressed: true);
+      } @else {
+        @include euiFormControlLayoutPadding(1, $compressed: true);
+      }
+    }
+  }
+}
+
+// 1. Must supply both values to background-size or some browsers apply the single value to both directions
+
+@mixin euiFormControlDefaultShadow($borderOnly: false) {
+  background-color: $euiFormBackgroundColor;
+  background-repeat: no-repeat;
+  background-size: 0% 100%; // 1
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      #{$euiFormControlBoxShadow},
+      inset 0 0 0 1px $euiFormBorderColor;
+  }
+
+  transition:
+    box-shadow $euiAnimSpeedFast ease-in,
+    background-image $euiAnimSpeedFast ease-in,
+    background-size $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
+
+  // Fixes bug in Firefox where adding a transition to the background-color
+  // caused a flash of differently styled dropdown.
+  @supports (-moz-appearance: none) {
+    // List *must* be in the same order as the above.
+    transition-property: box-shadow, background-image, background-size;
+  }
+}
+
+@mixin euiFormControlFocusStyle($borderOnly: false) {
+  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  background-image: euiFormControlGradient();
+  background-size: 100% 100%; // 1
+  outline: none; // Blanket remove all outlines relying on our own bottom border
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  }
+}
+
+@mixin euiFormControlInvalidStyle {
+  background-image: euiFormControlGradient($euiColorDanger);
+  background-size: 100%;
+}
+
+@mixin euiFormControlDisabledTextStyle {
+  color: $euiFormControlDisabledColor;
+  -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
+}
+
+@mixin euiFormControlDisabledStyle {
+  @include euiFormControlDisabledTextStyle;
+  cursor: not-allowed;
+  background: $euiFormBackgroundDisabledColor;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
+
+  @include euiPlaceholderPerBrowser {
+    color: $euiFormControlDisabledColor;
+  }
+}
+
+@mixin euiFormControlReadOnlyStyle {
+  cursor: default;
+  color: $euiTextColor;
+  -webkit-text-fill-color: $euiTextColor; // Required for Safari
+  // Use transparency since there is no border and in case form is on a non-white background
+  background: $euiFormBackgroundReadOnlyColor;
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
+}
+
+// 2. Override invalid state with focus state.
+
+@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
+  @include euiFormControlSize($includeAlternates: $includeSizes);
+  @include euiFormControlDefaultShadow;
+  @include euiFormControlText;
+
+  border: none;
+  border-radius: $euiFormControlBorderRadius;
+  padding: $euiFormControlPadding;
+
+  @if ($includeStates) {
+    &:invalid { // 2
+      @include euiFormControlInvalidStyle;
+    }
+
+    &:focus { // 2
+      @include euiFormControlFocusStyle;
+    }
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
+
+    // Needs to be set for autofill
+    &:-webkit-autofill {
+      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
+
+      ~ .euiFormControlLayoutIcons {
+        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
+      }
+    }
+  }
+
+  @if ($includeSizes) {
+    &--compressed {
+      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
+    }
+
+    &--inGroup {
+      // stylelint-disable-next-line declaration-no-important
+      box-shadow: none !important;
+      border-radius: 0;
+    }
+  }
+}
+
+@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
+  @include euiFormControlDefaultShadow($borderOnly: true);
+  padding: $euiFormControlCompressedPadding;
+  border-radius: $euiFormControlCompressedBorderRadius;
+
+  @if ($includeStates) {
+    &:invalid { // 2
+      @include euiFormControlInvalidStyle;
+    }
+
+    &:focus { // 2
+      @include euiFormControlFocusStyle($borderOnly: true);
+    }
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
+  }
+}
+
+@mixin euiHiddenSelectableInput {
+  position: absolute;
+  // stylelint-disable-next-line declaration-no-important
+  opacity: 0 !important; // Make sure it's still hidden when :disabled
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+// Adjusts form controls border radius
+@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
+  @if $internal == true {
+    $borderRadius: $borderRadius - 1;
+  }
+  @if $side == 'left' {
+    border-radius: $borderRadius 0 0 $borderRadius;
+  } @else if $side == 'right' {
+    border-radius: 0 $borderRadius $borderRadius 0;
+  }
+}