@elastic/eui-theme-common 5.0.0 → 7.0.0

package/lib/cjs/global_styling/mixins/shadow.d.ts

@@ -44,7 +44,6 @@ export declare const euiSlightShadowHover: (euiThemeContext: UseEuiTheme, option
 /**
  * @deprecated - use euiShadowXSmall instead
  *
- * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */

package/lib/cjs/global_styling/mixins/shadow.js

@@ -122,7 +122,6 @@ var euiSlightShadowHover = exports.euiSlightShadowHover = function euiSlightShad
 /**
  * @deprecated - use euiShadowXSmall instead
  *
- * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */

package/lib/cjs/global_styling/variables/borders.d.ts

@@ -15,7 +15,7 @@ export interface _EuiThemeBorderWidthValues {
 export interface _EuiThemeBorderRadiusValues {
     /**
      * Primary corner radius size
-     * - Default value: 4px (6px in Amsterdam)
+     * - Default value: 4px
      */
     medium: CSSProperties['borderRadius'];
     /**

package/lib/cjs/global_styling/variables/colors.d.ts

@@ -234,6 +234,7 @@ export declare type _EuiThemeBorderColors = {
     borderBaseDanger: ColorModeSwitch;
     borderBasePlain: ColorModeSwitch;
     borderBaseSubdued: ColorModeSwitch;
+    borderBaseProminent: ColorModeSwitch;
     borderBaseDisabled: ColorModeSwitch;
     /**
      * Border used for floating elements on dark mode (e.g. popovers or tooltips)
@@ -241,8 +242,8 @@ export declare type _EuiThemeBorderColors = {
      */
     borderBaseFloating: ColorModeSwitch;
     borderBaseFormsColorSwatch: ColorModeSwitch;
-    borderBaseFormsControl: ColorModeSwitch;
     borderInteractiveFormsHoverPlain: ColorModeSwitch;
+    borderInteractiveFormsHoverProminent: ColorModeSwitch;
     borderInteractiveFormsHoverDanger: ColorModeSwitch;
     borderStrongPrimary: ColorModeSwitch;
     borderStrongAccent: ColorModeSwitch;

package/lib/cjs/global_styling/variables/components.d.ts

@@ -67,7 +67,6 @@ export declare type _EuiThemeComponentColors = {
     filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
     flyoutFooterBackground: ColorModeSwitch;
     flyoutCloseButtonInsideBackground: ColorModeSwitch;
-    keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;
     listGroupItemBackgroundPrimaryActive: ColorModeSwitch;
     listGroupItemBackgroundSubduedActive: ColorModeSwitch;
     listGroupItemBackgroundHover: ColorModeSwitch;

package/lib/cjs/global_styling/variables/flags.d.ts

@@ -1,12 +1,7 @@
 export declare type EuiThemeVariantFlags = {
-    buttonVariant: 'classic' | 'refresh';
-    formVariant: 'classic' | 'refresh';
     shadowVariant: 'classic' | 'refresh';
 };
 /**
  * Theme specific setting flags
  */
-export declare type _EuiThemeFlags = {
-    hasGlobalFocusColor: boolean;
-    hasVisColorAdjustment: boolean;
-} & EuiThemeVariantFlags;
+export declare type _EuiThemeFlags = EuiThemeVariantFlags;

package/lib/cjs/services/theme/types.d.ts

@@ -81,3 +81,8 @@ export interface UseEuiTheme<T extends {} = {}> {
     highContrastMode: EuiThemeHighContrastMode;
     modifications: EuiThemeModifications<T>;
 }
+export interface EUI_THEME {
+    text: string;
+    value: string;
+    provider?: EuiThemeSystem;
+}

package/lib/cjs/services/vis_color_store.d.ts

@@ -6,28 +6,24 @@ export declare type VisColorStoreEvents = keyof typeof VIS_COLOR_STORE_EVENTS;
 declare type EventId = string;
 export declare type _EuiVisColorStore = {
     visColors: _EuiThemeVisColors;
-    hasVisColorAdjustment: boolean;
-    setVisColors: (colors: _EuiThemeVisColors, hasVisColorAdjustment?: boolean) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: any) => EventId;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
 };
 declare class EuiVisColorStoreImpl implements _EuiVisColorStore {
     private _visColors;
-    private _hasVisColorAdjustment;
     private events;
     constructor(dependencies: {
         defaultColors: _EuiThemeVisColors;
-        hasVisColorAdjustment: boolean;
     });
     get visColors(): _EuiVisColorStore['visColors'];
-    get hasVisColorAdjustment(): _EuiVisColorStore['hasVisColorAdjustment'];
-    setVisColors: (colors: _EuiThemeVisColors, hasColorAdjustment?: boolean | undefined) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: NonNullable<any>) => string;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
     private publishUpdate;
 }
 export declare class EuiVisColorStore {
     private static instance;
-    static getInstance(defaultColors: _EuiThemeVisColors, hasVisColorAdjustment: boolean): EuiVisColorStoreImpl;
+    static getInstance(defaultColors: _EuiThemeVisColors): EuiVisColorStoreImpl;
 }
 export {};

package/lib/cjs/services/vis_color_store.js

@@ -28,14 +28,10 @@ var EuiVisColorStoreImpl = /*#__PURE__*/function () {
     var _this = this;
     _classCallCheck(this, EuiVisColorStoreImpl);
     _defineProperty(this, "_visColors", void 0);
-    _defineProperty(this, "_hasVisColorAdjustment", void 0);
     _defineProperty(this, "events", {});
-    _defineProperty(this, "setVisColors", function (colors, hasColorAdjustment) {
-      if (!(0, _isEqual["default"])(_this._visColors, colors) || hasColorAdjustment !== _this._hasVisColorAdjustment) {
+    _defineProperty(this, "setVisColors", function (colors) {
+      if (!(0, _isEqual["default"])(_this._visColors, colors)) {
         _this._visColors = colors;
-        if (hasColorAdjustment != null) {
-          _this._hasVisColorAdjustment = hasColorAdjustment;
-        }
         _this.publishUpdate(VIS_COLOR_STORE_EVENTS.UPDATE, _this._visColors);
       }
     });
@@ -61,18 +57,12 @@ var EuiVisColorStoreImpl = /*#__PURE__*/function () {
       });
     });
     this._visColors = dependencies.defaultColors;
-    this._hasVisColorAdjustment = dependencies.hasVisColorAdjustment;
   }
   return _createClass(EuiVisColorStoreImpl, [{
     key: "visColors",
     get: function get() {
       return this._visColors;
     }
-  }, {
-    key: "hasVisColorAdjustment",
-    get: function get() {
-      return this._hasVisColorAdjustment;
-    }
   }]);
 }();
 var EuiVisColorStore = exports.EuiVisColorStore = /*#__PURE__*/function () {
@@ -81,11 +71,10 @@ var EuiVisColorStore = exports.EuiVisColorStore = /*#__PURE__*/function () {
   }
   return _createClass(EuiVisColorStore, null, [{
     key: "getInstance",
-    value: function getInstance(defaultColors, hasVisColorAdjustment) {
+    value: function getInstance(defaultColors) {
       if (!this.instance) {
         this.instance = new EuiVisColorStoreImpl({
-          defaultColors: defaultColors,
-          hasVisColorAdjustment: hasVisColorAdjustment
+          defaultColors: defaultColors
         });
       }
       return this.instance;

package/lib/cjs/services/vis_color_store.test.js

@@ -18,7 +18,7 @@ var visColors = {
   euiColorVis0: '#aabbcc'
 };
 describe('EuiVisColorStore', function () {
-  var visColorStore = _vis_color_store.EuiVisColorStore.getInstance(visColors, false);
+  var visColorStore = _vis_color_store.EuiVisColorStore.getInstance(visColors);
   var updateFn;
   beforeEach(function () {
     updateFn = jest.fn();
@@ -37,10 +37,6 @@ describe('EuiVisColorStore', function () {
       visColorStore.setVisColors(customColors);
       expect(visColorStore.visColors).toEqual(customColors);
     });
-    it('updates hasVisColorAdjustment', function () {
-      visColorStore.setVisColors(customColors, true);
-      expect(visColorStore.hasVisColorAdjustment).toEqual(true);
-    });
   });
   describe('subcribe and unsubscribe', function () {
     it('subscribes to store updates', function () {

package/lib/esm/global_styling/mixins/shadow.d.ts

@@ -44,7 +44,6 @@ export declare const euiSlightShadowHover: (euiThemeContext: UseEuiTheme, option
 /**
  * @deprecated - use euiShadowXSmall instead
  *
- * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */

package/lib/esm/global_styling/mixins/shadow.js

@@ -95,7 +95,6 @@ export const euiSlightShadowHover = (euiThemeContext, options) => {
 /**
  * @deprecated - use euiShadowXSmall instead
  *
- * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */

package/lib/esm/global_styling/variables/borders.d.ts

@@ -15,7 +15,7 @@ export interface _EuiThemeBorderWidthValues {
 export interface _EuiThemeBorderRadiusValues {
     /**
      * Primary corner radius size
-     * - Default value: 4px (6px in Amsterdam)
+     * - Default value: 4px
      */
     medium: CSSProperties['borderRadius'];
     /**

package/lib/esm/global_styling/variables/colors.d.ts

@@ -234,6 +234,7 @@ export declare type _EuiThemeBorderColors = {
     borderBaseDanger: ColorModeSwitch;
     borderBasePlain: ColorModeSwitch;
     borderBaseSubdued: ColorModeSwitch;
+    borderBaseProminent: ColorModeSwitch;
     borderBaseDisabled: ColorModeSwitch;
     /**
      * Border used for floating elements on dark mode (e.g. popovers or tooltips)
@@ -241,8 +242,8 @@ export declare type _EuiThemeBorderColors = {
      */
     borderBaseFloating: ColorModeSwitch;
     borderBaseFormsColorSwatch: ColorModeSwitch;
-    borderBaseFormsControl: ColorModeSwitch;
     borderInteractiveFormsHoverPlain: ColorModeSwitch;
+    borderInteractiveFormsHoverProminent: ColorModeSwitch;
     borderInteractiveFormsHoverDanger: ColorModeSwitch;
     borderStrongPrimary: ColorModeSwitch;
     borderStrongAccent: ColorModeSwitch;

package/lib/esm/global_styling/variables/components.d.ts

@@ -67,7 +67,6 @@ export declare type _EuiThemeComponentColors = {
     filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
     flyoutFooterBackground: ColorModeSwitch;
     flyoutCloseButtonInsideBackground: ColorModeSwitch;
-    keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;
     listGroupItemBackgroundPrimaryActive: ColorModeSwitch;
     listGroupItemBackgroundSubduedActive: ColorModeSwitch;
     listGroupItemBackgroundHover: ColorModeSwitch;

package/lib/esm/global_styling/variables/flags.d.ts

@@ -1,12 +1,7 @@
 export declare type EuiThemeVariantFlags = {
-    buttonVariant: 'classic' | 'refresh';
-    formVariant: 'classic' | 'refresh';
     shadowVariant: 'classic' | 'refresh';
 };
 /**
  * Theme specific setting flags
  */
-export declare type _EuiThemeFlags = {
-    hasGlobalFocusColor: boolean;
-    hasVisColorAdjustment: boolean;
-} & EuiThemeVariantFlags;
+export declare type _EuiThemeFlags = EuiThemeVariantFlags;

package/lib/esm/services/theme/types.d.ts

@@ -81,3 +81,8 @@ export interface UseEuiTheme<T extends {} = {}> {
     highContrastMode: EuiThemeHighContrastMode;
     modifications: EuiThemeModifications<T>;
 }
+export interface EUI_THEME {
+    text: string;
+    value: string;
+    provider?: EuiThemeSystem;
+}

package/lib/esm/services/vis_color_store.d.ts

@@ -6,28 +6,24 @@ export declare type VisColorStoreEvents = keyof typeof VIS_COLOR_STORE_EVENTS;
 declare type EventId = string;
 export declare type _EuiVisColorStore = {
     visColors: _EuiThemeVisColors;
-    hasVisColorAdjustment: boolean;
-    setVisColors: (colors: _EuiThemeVisColors, hasVisColorAdjustment?: boolean) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: any) => EventId;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
 };
 declare class EuiVisColorStoreImpl implements _EuiVisColorStore {
     private _visColors;
-    private _hasVisColorAdjustment;
     private events;
     constructor(dependencies: {
         defaultColors: _EuiThemeVisColors;
-        hasVisColorAdjustment: boolean;
     });
     get visColors(): _EuiVisColorStore['visColors'];
-    get hasVisColorAdjustment(): _EuiVisColorStore['hasVisColorAdjustment'];
-    setVisColors: (colors: _EuiThemeVisColors, hasColorAdjustment?: boolean | undefined) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: NonNullable<any>) => string;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
     private publishUpdate;
 }
 export declare class EuiVisColorStore {
     private static instance;
-    static getInstance(defaultColors: _EuiThemeVisColors, hasVisColorAdjustment: boolean): EuiVisColorStoreImpl;
+    static getInstance(defaultColors: _EuiThemeVisColors): EuiVisColorStoreImpl;
 }
 export {};

package/lib/esm/services/vis_color_store.js

@@ -13,13 +13,9 @@ export const VIS_COLOR_STORE_EVENTS = {
 class EuiVisColorStoreImpl {
     constructor(dependencies) {
         this.events = {};
-        this.setVisColors = (colors, hasColorAdjustment) => {
-            if (!isEqual(this._visColors, colors) ||
-                hasColorAdjustment !== this._hasVisColorAdjustment) {
+        this.setVisColors = (colors) => {
+            if (!isEqual(this._visColors, colors)) {
                 this._visColors = colors;
-                if (hasColorAdjustment != null) {
-                    this._hasVisColorAdjustment = hasColorAdjustment;
-                }
                 this.publishUpdate(VIS_COLOR_STORE_EVENTS.UPDATE, this._visColors);
             }
         };
@@ -46,21 +42,16 @@ class EuiVisColorStoreImpl {
                 });
         };
         this._visColors = dependencies.defaultColors;
-        this._hasVisColorAdjustment = dependencies.hasVisColorAdjustment;
     }
     get visColors() {
         return this._visColors;
     }
-    get hasVisColorAdjustment() {
-        return this._hasVisColorAdjustment;
-    }
 }
 export class EuiVisColorStore {
-    static getInstance(defaultColors, hasVisColorAdjustment) {
+    static getInstance(defaultColors) {
         if (!this.instance) {
             this.instance = new EuiVisColorStoreImpl({
                 defaultColors,
-                hasVisColorAdjustment,
             });
         }
         return this.instance;

package/lib/esm/services/vis_color_store.test.js

@@ -11,7 +11,7 @@ const visColors = {
     euiColorVis0: '#aabbcc',
 };
 describe('EuiVisColorStore', () => {
-    const visColorStore = EuiVisColorStore.getInstance(visColors, false);
+    const visColorStore = EuiVisColorStore.getInstance(visColors);
     let updateFn;
     beforeEach(() => {
         updateFn = jest.fn();
@@ -31,10 +31,6 @@ describe('EuiVisColorStore', () => {
             visColorStore.setVisColors(customColors);
             expect(visColorStore.visColors).toEqual(customColors);
         });
-        it('updates hasVisColorAdjustment', () => {
-            visColorStore.setVisColors(customColors, true);
-            expect(visColorStore.hasVisColorAdjustment).toEqual(true);
-        });
     });
     describe('subcribe and unsubscribe', () => {
         it('subscribes to store updates', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-common",
-  "version": "5.0.0",
+  "version": "7.0.0",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {

package/src/global_styling/mixins/_index.scss

@@ -4,10 +4,4 @@
 @import 'helpers';
 @import 'states';
 
-@import 'button';
-@import 'form';
-@import 'loading';
-@import 'link';
-@import 'panel';
-@import 'range';
 @import 'tool_tip';

package/src/global_styling/mixins/_states.scss

@@ -1,4 +1,4 @@
-@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
+@mixin euiFocusRing($size: 'small') {
   @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

package/src/global_styling/mixins/_button.scss

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

@@ -1,272 +0,0 @@
-@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; }
-  &:-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: $euiColorTextParagraph;
-
-  @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: $euiColorTextParagraph;
-  -webkit-text-fill-color: $euiColorTextParagraph; // 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;
-  }
-}

package/src/global_styling/mixins/_link.scss

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

package/src/global_styling/mixins/_loading.scss

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

package/src/global_styling/mixins/_panel.scss

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

@@ -1,59 +0,0 @@
-/*
-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; }
-}
-
-@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; }
-}
-
-@mixin euiRangeThumbFocus {
-  @include euiRangeThumbBorder;
-  @include euiRangeThumbFocusBoxShadow;
-  background-color: $euiColorPrimary;
-}