[High Contrast Mode] Ranges, color pickers, and date pickers

packages/eui/src/components/form/range/dual_range.tsx

@@ -579,13 +579,13 @@ export class EuiDualRangeClass extends Component<
     const leftThumbStyles = leftThumbColor
       ? {
           ...leftThumbPosition,
-          backgroundColor: euiRangeLevelColor(leftThumbColor, theme.euiTheme),
+          backgroundColor: euiRangeLevelColor(leftThumbColor, theme),
         }
       : leftThumbPosition;
     const rightThumbStyles = rightThumbColor
       ? {
           ...rightThumbPosition,
-          backgroundColor: euiRangeLevelColor(rightThumbColor, theme.euiTheme),
+          backgroundColor: euiRangeLevelColor(rightThumbColor, theme),
         }
       : rightThumbPosition;
 

packages/eui/src/components/form/range/range.styles.ts

@@ -29,12 +29,16 @@ export const euiRangeVariables = (euiThemeContext: UseEuiTheme) => {
     thumbWidth: thumbWidth,
     thumbBorderWidth: euiTheme.border.width.thick,
     thumbBorderColor: euiTheme.colors.emptyShade,
-    thumbBackgroundColor: euiTheme.colors.darkShade, // same as highlightColor
+    get thumbBackgroundColor() {
+      return this.highlightColor;
+    },
 
     trackWidth: '100%',
     trackHeight: trackHeight,
     trackBorderWidth: '0px',
-    trackBorderColor: euiTheme.colors.lightShade, // same as trackColor
+    get trackBorderColor() {
+      return this.trackColor;
+    },
     trackBorderRadius: euiTheme.border.radius.medium,
 
     tickHeight: trackHeight,
@@ -83,7 +87,7 @@ export const euiRangeThumbBorder = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiRangeThumbBoxShadow = (euiThemeContext: UseEuiTheme) => {
-  const euiTheme = euiThemeContext.euiTheme;
+  const { euiTheme } = euiThemeContext;
   const shadowColor = `rgba(${hexToRgb(euiTheme.colors.shadow)}, .2)`;
 
   const range = euiRangeVariables(euiThemeContext);

packages/eui/src/components/form/range/range_levels.styles.ts

@@ -55,7 +55,6 @@ export const euiRangeLevelsStyles = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiRangeLevelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
   const range = euiRangeVariables(euiThemeContext);
 
   return {
@@ -78,16 +77,16 @@ export const euiRangeLevelStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     primary: css`
-      background-color: ${euiRangeLevelColor('primary', euiTheme)};
+      background-color: ${euiRangeLevelColor('primary', euiThemeContext)};
     `,
     success: css`
-      background-color: ${euiRangeLevelColor('success', euiTheme)};
+      background-color: ${euiRangeLevelColor('success', euiThemeContext)};
     `,
     warning: css`
-      background-color: ${euiRangeLevelColor('warning', euiTheme)};
+      background-color: ${euiRangeLevelColor('warning', euiThemeContext)};
     `,
     danger: css`
-      background-color: ${euiRangeLevelColor('danger', euiTheme)};
+      background-color: ${euiRangeLevelColor('danger', euiThemeContext)};
     `,
     customColor: css``,
   };

packages/eui/src/components/form/range/range_levels_colors.ts

@@ -18,16 +18,16 @@ export const LEVEL_COLORS = [
 ] as const;
 export type EuiRangeLevelColor = (typeof LEVEL_COLORS)[number];
 
-export const isNamedLevelColor = (color?: EuiRangeLevelColor | string) =>
+export const isNamedLevelColor = (
+  color?: EuiRangeLevelColor | string
+): color is EuiRangeLevelColor =>
   LEVEL_COLORS.includes(color as EuiRangeLevelColor);
 
 export const euiRangeLevelColor = (
   color: EuiRangeLevelColor | string,
-  euiTheme: UseEuiTheme['euiTheme']
+  { euiTheme }: UseEuiTheme
 ) => {
-  return isNamedLevelColor(color)
-    ? euiTheme.colors[color as EuiRangeLevelColor]
-    : color;
+  return isNamedLevelColor(color) ? euiTheme.colors[color] : color;
 };
 
 export const getLevelColor = (levels: EuiRangeLevel[], value: number) => {

packages/eui/src/components/form/range/range_slider.tsx

@@ -87,7 +87,7 @@ export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps> = ({
 
   const sliderStyle = useMemo(() => {
     return logicalStyles({
-      color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme),
+      color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme),
       ...style,
     });
   }, [thumbColor, euiTheme, style]);