@elastic/eui 72.0.0 → 72.1.0

package/test-env/services/color/manipulation.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = exports.brighten = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -134,5 +134,17 @@ exports.lightness = lightness;
 var darken = function darken(color, amount) {
   return (0, _chromaJs.default)(color).darken(amount).hex();
 };
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.darken = darken;
+
+var brighten = function brighten(color, amount) {
+  return (0, _chromaJs.default)(color).brighten(amount).hex();
+};
 
-exports.darken = darken;
+exports.brighten = brighten;

package/test-env/services/index.js

@@ -12,83 +12,84 @@ var _exportNames = {
   comboBoxKeys: true,
   htmlIdGenerator: true,
   useGeneratedHtmlId: true,
+  CENTER_ALIGNMENT: true,
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
-  CENTER_ALIGNMENT: true,
-  useIsWithinBreakpoints: true,
-  useIsWithinMaxBreakpoint: true,
-  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
-  isColorDark: true,
-  isValidHex: true,
+  useIsWithinBreakpoints: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
+  brighten: true,
   calculateContrast: true,
   calculateLuminance: true,
-  hexToHsv: true,
-  hexToRgb: true,
-  hsvToHex: true,
-  hsvToRgb: true,
-  rgbToHex: true,
-  rgbToHsv: true,
-  VISUALIZATION_COLORS: true,
-  DEFAULT_VISUALIZATION_COLOR: true,
   colorPalette: true,
-  euiPaletteForLightBackground: true,
-  euiPaletteForDarkBackground: true,
+  darken: true,
+  DEFAULT_VISUALIZATION_COLOR: true,
+  desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
+  euiPaletteComplimentary: true,
+  euiPaletteCool: true,
+  euiPaletteForDarkBackground: true,
+  euiPaletteForLightBackground: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
+  euiPaletteGray: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
-  euiPaletteCool: true,
   euiPaletteWarm: true,
-  euiPaletteGray: true,
   getSteppedGradient: true,
-  transparentize: true,
-  tint: true,
-  shade: true,
-  tintOrShade: true,
-  shadeOrTint: true,
-  saturate: true,
-  desaturate: true,
+  hexToHsv: true,
+  hexToRgb: true,
+  hsvToHex: true,
+  hsvToRgb: true,
+  isColorDark: true,
+  isValidHex: true,
   lightness: true,
-  darken: true,
-  makeHighContrastColor: true,
   makeDisabledContrastColor: true,
+  makeHighContrastColor: true,
+  rgbToHex: true,
+  rgbToHsv: true,
+  saturate: true,
+  shade: true,
+  shadeOrTint: true,
+  tint: true,
+  tintOrShade: true,
+  transparentize: true,
+  VISUALIZATION_COLORS: true,
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
   copyToClipboard: true,
+  dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
   formatDate: true,
   formatNumber: true,
   formatText: true,
-  dateFormatAliases: true,
   isEvenlyDivisibleBy: true,
   isWithinRange: true,
   Pager: true,
+  calculatePopoverPosition: true,
+  findPopoverPosition: true,
   Random: true,
   getSecureRelForTarget: true,
-  toSentenceCase: true,
-  toInitials: true,
-  slugify: true,
+  Comparators: true,
   PropertySortType: true,
-  SortDirectionType: true,
-  SortDirection: true,
   SortableProperties: true,
-  Comparators: true,
-  calculatePopoverPosition: true,
-  findPopoverPosition: true,
+  SortDirection: true,
+  SortDirectionType: true,
+  slugify: true,
+  toInitials: true,
+  toSentenceCase: true,
+  throttle: true,
   getDurationAndPerformOnFrame: true,
   getTransitionTimings: true,
   getWaitDuration: true,
   performOnFrame: true,
-  EuiWindowEvent: true,
-  throttle: true
+  EuiWindowEvent: true
 };
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "accessibleClickKeys", {
     return _accessibility.accessibleClickKeys;
   }
 });
+Object.defineProperty(exports, "brighten", {
+  enumerable: true,
+  get: function get() {
+    return _color.brighten;
+  }
+});
 Object.defineProperty(exports, "calculateContrast", {
   enumerable: true,
   get: function get() {
@@ -630,24 +637,6 @@ Object.keys(_findElement).forEach(function (key) {
 
 var _format = require("./format");
 
-var _number = require("./number");
-
-var _paging = require("./paging");
-
-var _random = require("./random");
-
-var _security = require("./security");
-
-var _string = require("./string");
-
-var _sort = require("./sort");
-
-var _popover = require("./popover");
-
-var _transition = require("./transition");
-
-var _window_event = require("./window_event");
-
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {
@@ -662,7 +651,19 @@ Object.keys(_hooks).forEach(function (key) {
   });
 });
 
-var _throttle = require("./throttle");
+var _number = require("./number");
+
+var _paging = require("./paging");
+
+var _popover = require("./popover");
+
+var _random = require("./random");
+
+var _security = require("./security");
+
+var _sort = require("./sort");
+
+var _string = require("./string");
 
 var _theme = require("./theme");
 
@@ -678,6 +679,12 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
+var _throttle = require("./throttle");
+
+var _transition = require("./transition");
+
+var _window_event = require("./window_event");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/src/components/color_picker/color_stops/_color_stops.scss

@@ -1,101 +0,0 @@
-.euiColorStops:not(.euiColorStops-isDisabled) {
-  &:focus {
-    outline: 2px solid $euiFocusRingColor;
-  }
-}
-
-.euiColorStops__addContainer {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: $euiRangeThumbHeight;
-  margin-top: $euiRangeThumbHeight * -.5;
-
-  &:hover:not(.euiColorStops__addContainer-isDisabled) {
-    cursor: pointer;
-
-    .euiColorStops__addTarget {
-      opacity: .7;
-    }
-  }
-}
-
-.euiColorStops__addTarget {
-  @include euiCustomControl($type: 'round');
-  @include euiRangeThumbStyle;
-  position: absolute;
-  top: 0;
-  height: $euiRangeThumbHeight;
-  width: $euiRangeThumbHeight;
-  background-color: $euiColorLightestShade;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity $euiAnimSpeedFast;
-}
-
-.euiColorStop {
-  width: $euiColorPickerWidth;
-}
-
-.euiColorStopPopover.euiPopover {
-  position: absolute;
-  top: 50%;
-  width: $euiRangeThumbWidth;
-  height: $euiRangeThumbHeight;
-  margin-top: $euiRangeThumbHeight * -.5;
-}
-
-.euiColorStopPopover-hasFocus {
-  z-index: 3; // same z-index as .euiRangeThumb
-}
-
-.euiColorStopPopover__anchor {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
-  // Background color can potentially have opacity
-  // Pseudo element placed below the thumb to prevent the track from showing through
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: $euiRangeThumbHeight;
-    width: $euiRangeThumbHeight;
-    border-radius: $euiRangeThumbHeight;
-    background: $euiColorEmptyShade;
-  }
-}
-
-.euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  top: 0;
-  margin-top: 0;
-  pointer-events: auto;
-  cursor: grab;
-  border: solid ($euiSizeXS - 1px) $euiColorEmptyShade;
-  box-shadow:
-    0 0 0 1px $euiColorMediumShade,
-    0 2px 2px -1px rgba($euiShadowColor, .2),
-    0 1px 5px -2px rgba($euiShadowColor, .2);
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.euiColorStopPopover-isLoadingPanel {
-  // stylelint-disable-next-line declaration-no-important
-  visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel
-}
-
-.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) {
-  cursor: grabbing;
-}
-
-.euiColorStops__highlight {
-  color: $euiRangeTrackColor;
-}

package/src/components/color_picker/color_stops/_index.scss

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

package/src/themes/amsterdam/overrides/_color_stops.scss

@@ -1,58 +0,0 @@
-.euiColorStops__addTarget,
-.euiColorStops__addContainer {
-  z-index: 3; // same z-index as .euiRangeThumb
-}
-
-.euiColorStops__addTarget {
-  border: 1px solid $euiColorDarkShade;
-  box-shadow: none;
-}
-
-.euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  @include euiRangeThumbBorder;
-  @include euiRangeThumbBoxShadow;;
-
-  &:focus {
-    @include euiRangeThumbFocusBoxShadow;
-    outline: none;
-  }
-
-  // in Chrome/FF/Edge we don't want to focus on click
-  &:focus:not(:focus-visible) {
-    @include euiRangeThumbBoxShadow;
-    outline: none;
-  }
-}
-
-.euiColorStops:not(.euiColorStops-isDisabled) {
-  .euiRangeTrack::after {
-    transition-property: box-shadow;
-    // this `transition-delay` prevents Safari of adding the focus ring (box-shadow) every time we click the `EuiColorStops`
-    // the focus still appear when we drag a color stop in Safari
-    transition-delay: $euiAnimSpeedExtraFast;
-  }
-
-  &:focus {
-    outline: none;
-
-    .euiRangeTrack::after {
-      box-shadow:
-        0 0 0 1px rgba($euiColorEmptyShade, .8),
-        0 0 0 3px $euiFocusRingColor;
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    .euiRangeTrack::after {
-      box-shadow: none;
-    }
-  }
-}
-
-.euiColorStops__highlight {
-  color: $euiRangeTrackColor;
-
-  .euiRangeHighlight__progress {
-    background-color: $euiRangeTrackColor;
-  }
-}