@elastic/eui 62.0.3 → 63.0.0

package/src/components/token/_token.scss

@@ -1,85 +0,0 @@
-.euiToken {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: 100%;
-    margin: auto;
-  }
-}
-
-.euiToken--circle {
-  border-radius: 50%;
-}
-
-.euiToken--square {
-  // These are pretty small elements, the standard size
-  // is just slightly too large.
-  border-radius: $euiBorderRadius - 1px;
-}
-
-.euiToken--xsmall {
-  width: $euiSizeM;
-  height: $euiSizeM;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--small {
-  width: $euiSize;
-  height: $euiSize;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--medium {
-  width: $euiSizeL;
-  height: $euiSizeL;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeS;
-  }
-}
-
-.euiToken--large {
-  width: $euiSizeXL;
-  height: $euiSizeXL;
-
-  &.euiToken--rectangle {
-    padding: 0 ($euiSize * .5);
-  }
-}
-
-.euiToken--rectangle {
-  box-sizing: content-box;
-}
-
-@each $type in $euiTokenTypeKeys {
-  .euiToken--#{$type} {
-    $color: map-get(map-get($euiTokenTypes, $type), 'graphic');
-    $backgroundColor: tintOrShade($color, 90%, 70%);
-    $fillColor: makeHighContrastColor($color, $backgroundColor);
-
-    // Without a background, the fill color should be the graphic color
-    color: $color;
-
-    &.euiToken--light {
-      color: $fillColor;
-      background-color: $backgroundColor;
-      box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%);
-    }
-
-    // Dark tokens uses the main color as the background against light or dark text
-    $color: map-get(map-get($euiTokenTypes, $type), 'behindText');
-
-    &.euiToken--dark {
-      background-color: $color;
-      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-    }
-  }
-}

package/src/components/token/_variables.scss

@@ -1,13 +0,0 @@
-// sass-lint:disable indentation
-
-$euiTokenGrayColor: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade);
-
-// Appends the gray color to the color blind palette
-$euiTokenTypes: map-merge($euiPaletteColorBlind, (
-  'gray': (
-    graphic: $euiTokenGrayColor,
-    behindText: $euiTokenGrayColor,
-  )
-));
-
-$euiTokenTypeKeys: map-keys($euiTokenTypes);

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

@@ -1,71 +0,0 @@
-// sass-lint:disable nesting-depth
-
-.euiHeaderBreadcrumbs {
-  line-height: $euiSize;
-  margin-left: $euiSizeS;
-  margin-right: $euiSizeS;
-
-  // Only the header breadcrumbs get the new Amsterdam style so that there can
-  // still be default text only breadcrumbs for places like EuiControlBar
-  .euiBreadcrumb__content {
-    @include euiButtonDefaultStyle($euiTextColor);
-    font-size: $euiFontSizeXS;
-    line-height: $euiSize;
-    font-weight: $euiFontWeightMedium;
-    padding: $euiSizeXS $euiSize;
-    clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%);
-
-    &.euiLink {
-      @include euiButtonDefaultStyle($euiColorPrimary);
-
-      &:focus {
-        @include euiFocusRing(null, 'inner');
-
-        // Turn clip path off and add full border-radius when in focus so the focus ring looks correct.
-        // This won't work in Safari, but that's ok
-        &:focus-visible {
-          border-radius: $euiBorderRadius;
-          clip-path: none;
-        }
-      }
-    }
-  }
-
-  .euiBreadcrumb {
-    // Remove separator
-    &::after {
-      display: none;
-    }
-
-    &:not(.euiBreadcrumb--last) {
-      margin-right: -$euiSizeXS;
-    }
-
-    &:first-child {
-      .euiBreadcrumb__content {
-        padding-left: $euiSizeM;
-        border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
-        clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%);
-      }
-    }
-
-    // In case the item is first AND last, aka only, just make it a fully rounded item.
-    // Needs to come after `:first-child` for specificity
-    &:only-child {
-      .euiBreadcrumb__content {
-        clip-path: none;
-        padding-left: $euiSizeM;
-        padding-right: $euiSizeM;
-        border-radius: $euiBorderRadius;
-      }
-    }
-  }
-
-  .euiBreadcrumb--last {
-    .euiBreadcrumb__content {
-      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-      padding-right: $euiSizeM;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%);
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-.euiToast {
-  border: none;
-  border-radius: $euiBorderRadius;
-}
-
-$euiToastTypes: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger
-);
-
-@each $name, $color in $euiToastTypes {
-  .euiToast--#{$name} {
-    border-top: 2px solid $color;
-  }
-}
-
-.euiToastHeader__title {
-  font-weight: $euiFontWeightBold;
-}

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

@@ -1,4 +0,0 @@
-.euiToken--square {
-  // Same border radius as the legacy theme
-  border-radius: $euiBorderRadiusSmall - 1px;
-}

package/test-env/services/hooks/useIsWithinBreakpoints.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _breakpoint = require("../breakpoint");
-
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * falls within any of the named breakpoints.
- *
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {boolean} isActive Manages whether the resize handler should be active
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
- */
-function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}