From 057dd00acc9be38b68cb1023da3d54070a2fa84e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 09:57:38 -0700
Subject: [PATCH 01/10] Delete `@euiLink` mixins

---
 packages/eui/changelogs/upcoming/8031.md      |  4 ++++
 .../eui/src/global_styling/mixins/_index.scss |  1 -
 .../eui/src/global_styling/mixins/_link.scss  | 11 ---------
 .../global_styling/mixins/_index.scss         |  1 -
 .../global_styling/mixins/_link.scss          | 23 -------------------
 5 files changed, 4 insertions(+), 36 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/8031.md
 delete mode 100644 packages/eui/src/global_styling/mixins/_link.scss
 delete mode 100644 packages/eui/src/themes/amsterdam/global_styling/mixins/_link.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
new file mode 100644
index 00000000000..d49efc3b439
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Removed the following Sass mixins due to low external usage:
+  - `euiLink`
diff --git a/packages/eui/src/global_styling/mixins/_index.scss b/packages/eui/src/global_styling/mixins/_index.scss
index 7d0cba8a92e..ff8c8fae4e2 100644
--- a/packages/eui/src/global_styling/mixins/_index.scss
+++ b/packages/eui/src/global_styling/mixins/_index.scss
@@ -8,7 +8,6 @@
 @import 'button';
 @import 'form';
 @import 'loading';
-@import 'link';
 @import 'panel';
 @import 'range';
 @import 'tool_tip';
diff --git a/packages/eui/src/global_styling/mixins/_link.scss b/packages/eui/src/global_styling/mixins/_link.scss
deleted file mode 100644
index 98dac59b9cc..00000000000
--- a/packages/eui/src/global_styling/mixins/_link.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@mixin euiLink {
-  text-align: left;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:focus {
-    text-decoration: underline;
-  }
-}
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
index 368502427d1..3c3311963be 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -10,7 +10,6 @@
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
 @import '../../../../global_styling/mixins/loading';
-@import 'link';
 @import '../../../../global_styling/mixins/panel';
 @import '../../../../global_styling/mixins/range';
 @import '../../../../global_styling/mixins/tool_tip';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_link.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_link.scss
deleted file mode 100644
index 9d30a5346d2..00000000000
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_link.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@mixin euiLink {
-  text-align: left;
-  font-weight: $euiButtonFontWeight;
-
-  &:hover {
-    @include euiLinkHover;
-  }
-
-  &:focus {
-    @include euiFocusRing(null, 'outer');
-    @include euiLinkFocus;
-  }
-}
-
-@mixin euiLinkHover {
-  text-decoration: underline;
-}
-
-@mixin euiLinkFocus {
-  text-decoration: underline;
-  // stylelint-disable-next-line declaration-no-important
-  text-decoration-thickness: $euiBorderWidthThick !important;
-}

From a0882f61fc24f26c9828e3f6cc4296eb9bb4a05b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:02:55 -0700
Subject: [PATCH 02/10] Delete unused `state` mixins

- `euiFocusRing` and `euiFocusBackground` have usages in Kibana
---
 packages/eui/changelogs/upcoming/8031.md      |  4 +++
 .../src/global_styling/mixins/_states.scss    | 33 -------------------
 .../global_styling/mixins/_states.scss        | 33 -------------------
 3 files changed, 4 insertions(+), 66 deletions(-)

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index d49efc3b439..fd97de71fba 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -1,4 +1,8 @@
 **CSS-in-JS conversions**
 
 - Removed the following Sass mixins due to low external usage:
+  - `euiHoverState`
+  - `euiFocusState`
+  - `euiDisabledState`
+  - `euiInteractiveStates`
   - `euiLink`
diff --git a/packages/eui/src/global_styling/mixins/_states.scss b/packages/eui/src/global_styling/mixins/_states.scss
index a2d1bc83aef..403660a41e5 100644
--- a/packages/eui/src/global_styling/mixins/_states.scss
+++ b/packages/eui/src/global_styling/mixins/_states.scss
@@ -15,36 +15,3 @@
 @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);
-  }
-}
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_states.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_states.scss
index 81279d81b98..d9b6b3957a5 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_states.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_states.scss
@@ -39,36 +39,3 @@
 @mixin euiFocusBackground($color: $euiColorPrimary) {
   background-color: transparentize($color, $euiFocusTransparency);
 }
-
-@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);
-  }
-}

From 1227e97b90e6d6398d0e97e5a0eef50843970e38 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:26:10 -0700
Subject: [PATCH 03/10] Delete unused `euiLoading` mixin

---
 packages/eui/changelogs/upcoming/8031.md                    | 1 +
 packages/eui/src/global_styling/mixins/_index.scss          | 1 -
 packages/eui/src/global_styling/mixins/_loading.scss        | 6 ------
 .../src/themes/amsterdam/global_styling/mixins/_index.scss  | 1 -
 4 files changed, 1 insertion(+), 8 deletions(-)
 delete mode 100644 packages/eui/src/global_styling/mixins/_loading.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index fd97de71fba..4a7e57071df 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -6,3 +6,4 @@
   - `euiDisabledState`
   - `euiInteractiveStates`
   - `euiLink`
+  - `euiLoadingSpinnerBorderColors`
diff --git a/packages/eui/src/global_styling/mixins/_index.scss b/packages/eui/src/global_styling/mixins/_index.scss
index ff8c8fae4e2..1af4d10ef50 100644
--- a/packages/eui/src/global_styling/mixins/_index.scss
+++ b/packages/eui/src/global_styling/mixins/_index.scss
@@ -7,7 +7,6 @@
 
 @import 'button';
 @import 'form';
-@import 'loading';
 @import 'panel';
 @import 'range';
 @import 'tool_tip';
diff --git a/packages/eui/src/global_styling/mixins/_loading.scss b/packages/eui/src/global_styling/mixins/_loading.scss
deleted file mode 100644
index 0f72a8433f7..00000000000
--- a/packages/eui/src/global_styling/mixins/_loading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@function euiLoadingSpinnerBorderColors(
-  $main: $euiColorLightShade,
-  $highlight: $euiColorPrimary
-) {
-  @return $highlight $main $main $main;
-}
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
index 3c3311963be..af710b14876 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -9,7 +9,6 @@
 
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
-@import '../../../../global_styling/mixins/loading';
 @import '../../../../global_styling/mixins/panel';
 @import '../../../../global_styling/mixins/range';
 @import '../../../../global_styling/mixins/tool_tip';

From 4e09233815824886dd72d772e046fb6aeb87fc57 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:27:20 -0700
Subject: [PATCH 04/10] Delete unused `euiRange` mixins and variables

---
 packages/eui/changelogs/upcoming/8031.md      | 26 ++++++++
 .../eui/src/global_styling/mixins/_index.scss |  1 -
 .../eui/src/global_styling/mixins/_range.scss | 62 -------------------
 .../src/global_styling/variables/_form.scss   | 24 -------
 .../global_styling/mixins/_index.scss         |  1 -
 5 files changed, 26 insertions(+), 88 deletions(-)
 delete mode 100644 packages/eui/src/global_styling/mixins/_range.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index 4a7e57071df..b4c640aad2a 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -1,5 +1,23 @@
 **CSS-in-JS conversions**
 
+- Removed the following component-specific Sass variables:
+  - `$euiRangeTrackColor`
+  - `$euiRangeHighlightColor`
+  - `$euiRangeThumbHeight`
+  - `$euiRangeThumbWidth`
+  - `$euiRangeThumbBorderColor`
+  - `$euiRangeThumbBackgroundColor`
+  - `$euiRangeTrackWidth`
+  - `$euiRangeTrackHeight`
+  - `$euiRangeTrackCompressedHeight`
+  - `$euiRangeTrackBorderWidth`
+  - `$euiRangeTrackBorderColor`
+  - `$euiRangeTrackRadius`
+  - `$euiRangeDisabledOpacity`
+  - `$euiRangeHighlightHeight`
+  - `$euiRangeHighlightCompressedHeight`
+  - `$euiRangeHeight`
+  - `$euiRangeCompressedHeight`
 - Removed the following Sass mixins due to low external usage:
   - `euiHoverState`
   - `euiFocusState`
@@ -7,3 +25,11 @@
   - `euiInteractiveStates`
   - `euiLink`
   - `euiLoadingSpinnerBorderColors`
+  - `euiRangeTrackSize`
+  - `euiRangeTrackPerBrowser`
+  - `euiRangeThumbBorder`
+  - `euiRangeThumbBoxShadow`
+  - `euiRangeThumbFocusBoxShadow`
+  - `euiRangeThumbStyle`
+  - `euiRangeThumbPerBrowser`
+  - `euiRangeThumbFocus`
diff --git a/packages/eui/src/global_styling/mixins/_index.scss b/packages/eui/src/global_styling/mixins/_index.scss
index 1af4d10ef50..b5d6db6392d 100644
--- a/packages/eui/src/global_styling/mixins/_index.scss
+++ b/packages/eui/src/global_styling/mixins/_index.scss
@@ -8,5 +8,4 @@
 @import 'button';
 @import 'form';
 @import 'panel';
-@import 'range';
 @import 'tool_tip';
diff --git a/packages/eui/src/global_styling/mixins/_range.scss b/packages/eui/src/global_styling/mixins/_range.scss
deleted file mode 100644
index ec47e39e2d6..00000000000
--- a/packages/eui/src/global_styling/mixins/_range.scss
+++ /dev/null
@@ -1,62 +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; }
-  &::-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;
-}
diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss
index 162cf7bdd89..46e8c572094 100644
--- a/packages/eui/src/global_styling/variables/_form.scss
+++ b/packages/eui/src/global_styling/variables/_form.scss
@@ -33,27 +33,3 @@ $euiFormControlIconSizes: (
 $euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
 $euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
 $euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;
-
-// Range
-$euiRangeTrackColor: $euiColorLightShade !default;
-$euiRangeHighlightColor: $euiColorDarkShade !default;
-
-$euiRangeThumbHeight: $euiSize !default;
-$euiRangeThumbWidth: $euiSize !default;
-$euiRangeThumbBorderColor: $euiColorEmptyShade !default;
-$euiRangeThumbBackgroundColor: $euiRangeHighlightColor;
-
-$euiRangeTrackWidth: 100% !default;
-$euiRangeTrackHeight: $euiSizeM / 2 !default;
-$euiRangeTrackCompressedHeight: $euiSizeXS;
-$euiRangeTrackBorderWidth: 0 !default;
-$euiRangeTrackBorderColor: $euiRangeTrackColor !default;
-$euiRangeTrackRadius: $euiBorderRadius !default;
-
-$euiRangeDisabledOpacity: .25 !default;
-
-$euiRangeHighlightHeight: $euiRangeTrackHeight !default;
-$euiRangeHighlightCompressedHeight: $euiRangeTrackCompressedHeight !default;
-
-$euiRangeHeight: $euiFormControlHeight !default;
-$euiRangeCompressedHeight: $euiFormControlCompressedHeight !default;
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
index af710b14876..444b2c2a75f 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -10,5 +10,4 @@
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
 @import '../../../../global_styling/mixins/panel';
-@import '../../../../global_styling/mixins/range';
 @import '../../../../global_styling/mixins/tool_tip';

From 7a51e4b2242a3ad1bd25b3c741b2ce66cdc5775b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:32:18 -0700
Subject: [PATCH 05/10] Delete unused `$euiPage` width vars

---
 packages/eui/changelogs/upcoming/8031.md                        | 2 ++
 packages/eui/src/global_styling/variables/_index.scss           | 1 -
 packages/eui/src/global_styling/variables/_page.scss            | 2 --
 .../src/themes/amsterdam/global_styling/variables/_index.scss   | 1 -
 .../src/themes/amsterdam/global_styling/variables/_page.scss    | 1 -
 5 files changed, 2 insertions(+), 5 deletions(-)
 delete mode 100644 packages/eui/src/global_styling/variables/_page.scss
 delete mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_page.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index b4c640aad2a..32ff0aca172 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -1,6 +1,8 @@
 **CSS-in-JS conversions**
 
 - Removed the following component-specific Sass variables:
+  - `$euiPageSidebarMinWidth`
+  - `$euiPageDefaultMaxWidth`
   - `$euiRangeTrackColor`
   - `$euiRangeHighlightColor`
   - `$euiRangeThumbHeight`
diff --git a/packages/eui/src/global_styling/variables/_index.scss b/packages/eui/src/global_styling/variables/_index.scss
index 6971a19d892..e3e369d3acb 100644
--- a/packages/eui/src/global_styling/variables/_index.scss
+++ b/packages/eui/src/global_styling/variables/_index.scss
@@ -21,6 +21,5 @@
 
 @import 'buttons';
 @import 'form';
-@import 'page';
 @import 'panel';
 @import 'tool_tip';
diff --git a/packages/eui/src/global_styling/variables/_page.scss b/packages/eui/src/global_styling/variables/_page.scss
deleted file mode 100644
index df423080152..00000000000
--- a/packages/eui/src/global_styling/variables/_page.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$euiPageDefaultMaxWidth: 1000px !default;
-$euiPageSidebarMinWidth: $euiSizeL * 8 !default;
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
index eccda1f6d3b..39af9351fff 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
@@ -3,5 +3,4 @@
 @import 'states';
 
 @import 'buttons';
-@import 'page';
 @import 'typography';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_page.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_page.scss
deleted file mode 100644
index 318cae55681..00000000000
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_page.scss
+++ /dev/null
@@ -1 +0,0 @@
-$euiPageDefaultMaxWidth: map-get($euiBreakpoints, 'xl');

From f102cd4fd7cc9015d9888da79efcc35a489d8e7b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:35:09 -0700
Subject: [PATCH 06/10] Delete unused `$euiPanel` variables

+ replace src-docs usage
---
 packages/eui/changelogs/upcoming/8031.md      |  3 +++
 .../playground/_playground_compiler.scss      |  2 +-
 .../src/global_styling/variables/_index.scss  |  1 -
 .../src/global_styling/variables/_panel.scss  | 21 -------------------
 4 files changed, 4 insertions(+), 23 deletions(-)
 delete mode 100644 packages/eui/src/global_styling/variables/_panel.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index 32ff0aca172..44a964f7173 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -3,6 +3,9 @@
 - Removed the following component-specific Sass variables:
   - `$euiPageSidebarMinWidth`
   - `$euiPageDefaultMaxWidth`
+  - `$euiPanelPaddingModifiers`
+  - `$euiPanelBorderRadiusModifiers`
+  - `$euiPanelBackgroundColorModifiers`
   - `$euiRangeTrackColor`
   - `$euiRangeHighlightColor`
   - `$euiRangeThumbHeight`
diff --git a/packages/eui/src-docs/src/services/playground/_playground_compiler.scss b/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
index 05003000d06..0434661ddf8 100644
--- a/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
+++ b/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
@@ -12,7 +12,7 @@
 }
 
 .playground__tableWrapper {
-  background-color: map-get($euiPanelBackgroundColorModifiers, 'subdued');
+  background-color: $euiPageBackgroundColor;
 }
 
 .playground__title {
diff --git a/packages/eui/src/global_styling/variables/_index.scss b/packages/eui/src/global_styling/variables/_index.scss
index e3e369d3acb..3ee291c8822 100644
--- a/packages/eui/src/global_styling/variables/_index.scss
+++ b/packages/eui/src/global_styling/variables/_index.scss
@@ -21,5 +21,4 @@
 
 @import 'buttons';
 @import 'form';
-@import 'panel';
 @import 'tool_tip';
diff --git a/packages/eui/src/global_styling/variables/_panel.scss b/packages/eui/src/global_styling/variables/_panel.scss
deleted file mode 100644
index 0a2bb6a46f5..00000000000
--- a/packages/eui/src/global_styling/variables/_panel.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-$euiPanelPaddingModifiers: (
-  'paddingSmall':  $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge':  $euiSizeL
-) !default;
-
-$euiPanelBorderRadiusModifiers: (
-  'borderRadiusNone': 0,
-  'borderRadiusMedium': $euiBorderRadius,
-) !default;
-
-$euiPanelBackgroundColorModifiers: (
-  'transparent': transparent,
-  'plain': $euiColorEmptyShade,
-  'subdued': $euiPageBackgroundColor,
-  'accent':  tintOrShade($euiColorAccent, 90%, 70%),
-  'primary': tintOrShade($euiColorPrimary, 90%, 70%),
-  'success': tintOrShade($euiColorSuccess, 90%, 70%),
-  'warning': tintOrShade($euiColorWarning, 90%, 70%),
-  'danger':  tintOrShade($euiColorDanger, 90%, 70%),
-) !default;

From 3ba5c0f363df71a8185114c37bf3ae308a574d53 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:39:46 -0700
Subject: [PATCH 07/10] Delete unused `$euiToolTip` variables and unused
 animation mixin

- sadly the first two tooltip mixins are still being used, but we can localize the Sass variables there to prevent them from being exported
---
 packages/eui/changelogs/upcoming/8031.md                 | 4 ++++
 packages/eui/src/global_styling/mixins/_tool_tip.scss    | 8 ++++----
 packages/eui/src/global_styling/variables/_index.scss    | 1 -
 packages/eui/src/global_styling/variables/_tool_tip.scss | 9 ---------
 4 files changed, 8 insertions(+), 14 deletions(-)
 delete mode 100644 packages/eui/src/global_styling/variables/_tool_tip.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index 44a964f7173..9038d67b4b7 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -23,6 +23,9 @@
   - `$euiRangeHighlightCompressedHeight`
   - `$euiRangeHeight`
   - `$euiRangeCompressedHeight`
+  - `$euiTooltipAnimations`
+  - `$euiTooltipBackgroundColor`
+  - `$euiTooltipBorderColor`
 - Removed the following Sass mixins due to low external usage:
   - `euiHoverState`
   - `euiFocusState`
@@ -38,3 +41,4 @@
   - `euiRangeThumbStyle`
   - `euiRangeThumbPerBrowser`
   - `euiRangeThumbFocus`
+  - `euiToolTipAnimation`
diff --git a/packages/eui/src/global_styling/mixins/_tool_tip.scss b/packages/eui/src/global_styling/mixins/_tool_tip.scss
index 83b062274dc..b1d19deaf9e 100644
--- a/packages/eui/src/global_styling/mixins/_tool_tip.scss
+++ b/packages/eui/src/global_styling/mixins/_tool_tip.scss
@@ -1,5 +1,9 @@
 @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;
@@ -19,7 +23,3 @@
   padding-bottom: $euiSizeXS;
   margin-bottom: $euiSizeXS;
 }
-
-@mixin euiToolTipAnimation($side: 'top') {
-  animation: #{map-get($euiTooltipAnimations, $side)} $euiAnimSpeedSlow ease-out 0s forwards;
-}
diff --git a/packages/eui/src/global_styling/variables/_index.scss b/packages/eui/src/global_styling/variables/_index.scss
index 3ee291c8822..993979a78a5 100644
--- a/packages/eui/src/global_styling/variables/_index.scss
+++ b/packages/eui/src/global_styling/variables/_index.scss
@@ -21,4 +21,3 @@
 
 @import 'buttons';
 @import 'form';
-@import 'tool_tip';
diff --git a/packages/eui/src/global_styling/variables/_tool_tip.scss b/packages/eui/src/global_styling/variables/_tool_tip.scss
deleted file mode 100644
index 6bf4e1e4d9c..00000000000
--- a/packages/eui/src/global_styling/variables/_tool_tip.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default;
-$euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default;
-
-$euiTooltipAnimations: (
-  top: euiToolTipTop,
-  left: euiToolTipBottom,
-  bottom: euiToolTipLeft,
-  right: euiToolTipRight,
-) !default;

From c07904e686d476fa15ee62c2a802336226996e66 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 10:44:34 -0700
Subject: [PATCH 08/10] Delete unused `$euiButton` color variables

- heights and the type map is still being used in Kibana
---
 packages/eui/changelogs/upcoming/8031.md                     | 4 ++++
 packages/eui/src/global_styling/variables/_buttons.scss      | 5 -----
 .../themes/amsterdam/global_styling/variables/_buttons.scss  | 4 ----
 .../themes/amsterdam/global_styling/variables/_index.scss    | 1 -
 4 files changed, 4 insertions(+), 10 deletions(-)
 delete mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.scss

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index 9038d67b4b7..3794d95ff21 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -1,6 +1,10 @@
 **CSS-in-JS conversions**
 
 - Removed the following component-specific Sass variables:
+  - `$euiButtonColorDisabled`
+  - `$euiButtonColorDisabledText`
+  - `$euiButtonColorGhostDisabled`
+  - `$euiButtonFontWeight`
   - `$euiPageSidebarMinWidth`
   - `$euiPageDefaultMaxWidth`
   - `$euiPanelPaddingModifiers`
diff --git a/packages/eui/src/global_styling/variables/_buttons.scss b/packages/eui/src/global_styling/variables/_buttons.scss
index 97304c0f5c0..56f11bb9421 100644
--- a/packages/eui/src/global_styling/variables/_buttons.scss
+++ b/packages/eui/src/global_styling/variables/_buttons.scss
@@ -2,11 +2,6 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 $euiButtonHeightXSmall: $euiSizeL !default;
 
-$euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
-// Only increase the contrast of background color to text to 2.0 for disabled
-$euiButtonColorDisabledText: makeDisabledContrastColor($euiButtonColorDisabled) !default;
-$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade) !default;
-
 // Modifier naming and colors.
 $euiButtonTypes: (
   primary: $euiColorPrimary,
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.scss
deleted file mode 100644
index f42b0c3264c..00000000000
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$euiButtonColorDisabled: $euiColorDisabled;
-$euiButtonColorDisabledText: $euiColorDisabledText;
-$euiButtonDefaultTransparency: .8;
-$euiButtonFontWeight: $euiFontWeightMedium;
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
index 39af9351fff..4d8a4e72925 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
@@ -2,5 +2,4 @@
 @import '../../../../global_styling/variables/index';
 @import 'states';
 
-@import 'buttons';
 @import 'typography';

From 1d52801090ffea7a8c6ebaa356b66f3e3cbddfd0 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 13:22:54 -0700
Subject: [PATCH 09/10] Temporarily restore button variable that elastic-charts
 relies on

---
 packages/eui/src/global_styling/variables/_buttons.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/eui/src/global_styling/variables/_buttons.scss b/packages/eui/src/global_styling/variables/_buttons.scss
index 56f11bb9421..4d4e8a5f0b1 100644
--- a/packages/eui/src/global_styling/variables/_buttons.scss
+++ b/packages/eui/src/global_styling/variables/_buttons.scss
@@ -12,3 +12,7 @@ $euiButtonTypes: (
   ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
   text: $euiColorDarkShade, // Reserved for special use cases
 ) !default;
+
+// TODO: Remove this once elastic-charts no longer uses this variable
+// @see https://github.com/elastic/elastic-charts/pull/2528
+$euiButtonColorDisabledText: $euiColorDisabledText;

From 69dd7d3175c190acf3b141cc9f869dce48e7d7eb Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 19 Sep 2024 13:38:09 -0700
Subject: [PATCH 10/10] Remove unused or single use form mixins/variables
 [pending external PRs]

---
 packages/eui/changelogs/upcoming/8031.md      |  20 ++
 .../eui/src/global_styling/mixins/_form.scss  | 245 ------------------
 .../src/global_styling/variables/_form.scss   |  14 -
 3 files changed, 20 insertions(+), 259 deletions(-)

diff --git a/packages/eui/changelogs/upcoming/8031.md b/packages/eui/changelogs/upcoming/8031.md
index 3794d95ff21..ec9e74a5a59 100644
--- a/packages/eui/changelogs/upcoming/8031.md
+++ b/packages/eui/changelogs/upcoming/8031.md
@@ -5,6 +5,10 @@
   - `$euiButtonColorDisabledText`
   - `$euiButtonColorGhostDisabled`
   - `$euiButtonFontWeight`
+  - `$euiFormControlIconSizes`
+  - `$euiFormControlLayoutGroupInputHeight`
+  - `$euiFormControlLayoutGroupInputCompressedHeight`
+  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
   - `$euiPageSidebarMinWidth`
   - `$euiPageDefaultMaxWidth`
   - `$euiPanelPaddingModifiers`
@@ -35,6 +39,22 @@
   - `euiFocusState`
   - `euiDisabledState`
   - `euiInteractiveStates`
+  - `euiFormControlStyle`
+  - `euiFormControlStyleCompressed`
+  - `euiFormControlFocusStyle`
+  - `euiFormControlInvalidStyle`
+  - `euiFormControlDisabledTextStyle`
+  - `euiFormControlDisabledStyle`
+  - `euiFormControlReadOnlyStyle`
+  - `euiFormControlText`
+  - `euiFormControlSize`
+  - `euiFormControlGradient`
+  - `euiFormControlLayoutPadding`
+  - `euiFormControlWithIcon`
+  - `euiFormControlIsLoading`
+  - `euiFormControlSideBorderRadius`
+  - `euiPlaceholderPerBrowser`
+  - `euiHiddenSelectableInput`
   - `euiLink`
   - `euiLoadingSpinnerBorderColors`
   - `euiRangeTrackSize`
diff --git a/packages/eui/src/global_styling/mixins/_form.scss b/packages/eui/src/global_styling/mixins/_form.scss
index 326a8491f87..6734ea60f98 100644
--- a/packages/eui/src/global_styling/mixins/_form.scss
+++ b/packages/eui/src/global_styling/mixins/_form.scss
@@ -1,108 +1,3 @@
-@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) {
@@ -131,143 +26,3 @@
     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;
-  }
-}
diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss
index 46e8c572094..49a4d620b11 100644
--- a/packages/eui/src/global_styling/variables/_form.scss
+++ b/packages/eui/src/global_styling/variables/_form.scss
@@ -19,17 +19,3 @@ $euiFormControlBoxShadow: 0 0 transparent !default;
 $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
 $euiFormInputGroupBorder: none !default;
-
-// Icons sizes
-$euiFormControlIconSizes: (
-  small: $euiSizeM,
-  medium: $euiSize,
-  large: $euiSizeL,
-  xLarge: $euiSizeXL,
-  xxLarge: $euiSizeXXL
-);
-
-// Control Layout
-$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
-$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
-$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;