@@ -38,24 +38,24 @@ exports[`EuiHue accepts a color 1`] = `
exports[`EuiHue is rendered 1`] = `
Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
diff --git a/packages/eui/src/components/color_picker/_color_picker.scss b/packages/eui/src/components/color_picker/_color_picker.scss
deleted file mode 100644
index f3657a38090..00000000000
--- a/packages/eui/src/components/color_picker/_color_picker.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.euiColorPicker {
- position: relative;
- width: $euiColorPickerWidth;
-}
-
-.euiColorPicker__swatches {
- display: flex;
- flex-wrap: wrap;
- margin: -$euiSizeS / 2;
-}
-
-.euiColorPicker__swatch-item {
- margin: $euiSizeS / 2;
-}
-
-// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
-.euiSwatchInput__stroke {
- fill: none;
- stroke: transparentize($euiColorFullShade, .8);
-}
-
-.euiColorPicker__popoverPanel--pickerOnly {
- // Override of EuiPanel padding
- // stylelint-disable-next-line declaration-no-important
- padding-bottom: 0 !important;
-}
-
-.euiColorPicker__input {
- // Manually account for custom left icon / color swatch preview
- --euiFormControlLeftIconsCount: 1;
-}
-
-.euiColorPicker__alphaRange {
- .euiRangeInput {
- min-width: 0;
- }
-}
diff --git a/packages/eui/src/components/color_picker/_color_picker_swatch.scss b/packages/eui/src/components/color_picker/_color_picker_swatch.scss
deleted file mode 100644
index ba8c5adebfd..00000000000
--- a/packages/eui/src/components/color_picker/_color_picker_swatch.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-.euiColorPickerSwatch {
- display: inline-block;
- height: $euiSizeL;
- width: $euiSizeL;
- border-radius: $euiBorderRadius / 2;
- cursor: pointer;
- border: solid 1px transparentize($euiColorFullShade, .9);
- box-shadow: inset 0 0 0 1px transparentize($euiColorEmptyShade, .95);
-
- &:disabled {
- cursor: default;
- }
-
- &:focus {
- @include euiFocusRing;
- }
-}
diff --git a/packages/eui/src/components/color_picker/_hue.scss b/packages/eui/src/components/color_picker/_hue.scss
deleted file mode 100644
index fd1fffe95b0..00000000000
--- a/packages/eui/src/components/color_picker/_hue.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-// This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
-.euiHue {
- // stylelint-disable color-no-hex
- background: linear-gradient(to right,
- #FF3232 0%,
- #FFF130 20%,
- #45FF30 35%,
- #28FFF0 52%,
- #282CFF 71%,
- #FF28FB 88%,
- #FF0094 100%
- );
- // stylelint-enable color-no-hex
- height: $euiSizeL;
- margin: $euiSizeXS 0;
- position: relative;
-
- // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
- &::before,
- &::after {
- content: '';
- left: 0;
- position: absolute;
- height: $euiSizeS;
- background: $euiColorEmptyShade;
- width: 100%;
- }
-
- &::after {
- bottom: 0;
- }
-}
-
-// The range itself is the same height
-.euiHue__range {
- @include euiRangeThumbPerBrowser {
- @include euiCustomControl($type: 'round');
- @include euiRangeThumbStyle;
- }
-
- position: relative;
- height: $euiSizeL;
- width: calc(100% + 2px); // Allow for overlap
- margin: 0 -1px; // Use ^ overlap to allow thumb to fully cover gradient ends
- appearance: none;
- background: transparent;
- z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
-
- // Resets for the range
-
- // Disable linter for these very unique vendor controls
- // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
- &::-webkit-slider-thumb {
- -webkit-appearance: none;
- margin-top: 0;
- }
-
- &::-ms-thumb {
- margin-top: 0;
- }
-
- &::-ms-track {
- height: $euiSizeL;
- background: transparent;
- border-color: transparent;
- color: transparent;
- }
-
- &::-moz-focus-outer {
- border: none;
- }
-
- &::-ms-fill-lower,
- &::-ms-fill-upper {
- background: transparent;
- }
-
- // Thumb has trouble with animation, so we make something similar to `@include euiFocusRing`
- &:focus {
- @include euiRangeThumbPerBrowser {
- box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
- border-color: $euiColorPrimary;
- }
-
- // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
- outline: none;
- }
-}
diff --git a/packages/eui/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss
deleted file mode 100644
index 41255ed1181..00000000000
--- a/packages/eui/src/components/color_picker/_index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'color_picker';
-@import 'color_picker_swatch';
-@import 'hue';
-@import 'saturation';
-@import 'color_palette_picker/index';
-@import 'color_palette_display/index';
\ No newline at end of file
diff --git a/packages/eui/src/components/color_picker/_saturation.scss b/packages/eui/src/components/color_picker/_saturation.scss
deleted file mode 100644
index 53d32cdab97..00000000000
--- a/packages/eui/src/components/color_picker/_saturation.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-
-.euiSaturation {
- position: relative;
- width: 100%;
- padding-bottom: 100%;
- border-radius: $euiBorderRadius / 2;
- touch-action: none; // prevent TouchMove events from scrolling page
- z-index: 3; // Required to be above the hue slider, which can overlap
-
- .euiSaturation__lightness,
- .euiSaturation__saturation {
- position: absolute;
- top: -1px; // hides a slight color inconsistency
- bottom: 0;
- left: 0;
- right: 0;
- border-radius: $euiBorderRadius / 2;
- }
-
- .euiSaturation__lightness {
- background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1);
- }
-
- .euiSaturation__saturation {
- background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1);
- }
-
- .euiSaturation__indicator {
- position: absolute;
- height: $euiColorPickerIndicatorSize;
- width: $euiColorPickerIndicatorSize;
- border-radius: 100%;
- margin-top: $euiColorPickerIndicatorSize * -.5;
- margin-left: $euiColorPickerIndicatorSize * -.5;
- border: 1px solid $euiColorDarkestShade;
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- border-radius: 100%;
- border: 1px solid $euiColorLightestShade;
- }
- }
-
- &:focus {
- outline: none; // Hide focus ring because of `tabindex=0` on Safari
-
- .euiSaturation__indicator {
- box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
- border-color: $euiColorPrimary;
- }
- }
-}
diff --git a/packages/eui/src/components/color_picker/_variables.scss b/packages/eui/src/components/color_picker/_variables.scss
deleted file mode 100644
index 3bc15347438..00000000000
--- a/packages/eui/src/components/color_picker/_variables.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$euiColorPickerValueRange0: rgba(255, 255, 255, 1);
-$euiColorPickerValueRange1: rgba(255, 255, 255, 0);
-$euiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
-$euiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
-$euiColorPickerIndicatorSize: $euiSizeM;
-$euiColorPickerWidth: ($euiSizeL * 5) + ($euiSizeS * 4); // 5 columns of swatches + margins + border
diff --git a/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
index cc478348f6f..02b8d337d96 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
@@ -3,12 +3,12 @@
exports[`EuiColorPaletteDisplay is rendered 1`] = `
@@ -43,7 +43,7 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`