[User Profile Settings] Implement toggle for high contrast mode

src/platform/packages/shared/kbn-user-profile-components/index.ts

@@ -25,6 +25,7 @@ export type {
 export type {
   UserProfileData,
   UserSettingsData,
+  ContrastModeValue,
   DarkModeValue,
   UserProfileAvatarData,
 } from './src/types';

src/platform/packages/shared/kbn-user-profile-components/src/types.ts

@@ -29,11 +29,14 @@ export interface UserProfileAvatarData {
 
 export type DarkModeValue = 'system' | 'dark' | 'light' | 'space_default';
 
+export type ContrastModeValue = 'system' | 'standard' | 'high';
+
 /**
  * User settings stored in the data object of the User Profile
  */
 export interface UserSettingsData {
   darkMode?: DarkModeValue;
+  contrastMode?: ContrastModeValue;
   solutionNavOptOut?: boolean;
 }
 

src/platform/packages/shared/react/kibana_context/root/eui_provider.tsx

@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import * as Rx from 'rxjs';
 import React, { FC, PropsWithChildren, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
@@ -22,12 +23,16 @@ import {
 import type { UserProfileService } from '@kbn/core-user-profile-browser';
 import type { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 
+interface UserSettings {
+  contrastMode: 'system' | 'standard' | 'high';
+}
+
 /**
  * Props for the KibanaEuiProvider.
  */
 export interface KibanaEuiProviderProps extends Pick<EuiProviderProps<{}>, 'modify' | 'colorMode'> {
   theme: ThemeServiceStart;
-  userProfile?: Pick<UserProfileService, 'getUserProfile$'>; // TODO: use this to access a "high contrast mode" flag from user settings. Pass the flag to EuiProvider, when it is supported in EUI.
+  userProfile?: Pick<UserProfileService, 'getUserProfile$'>;
   globalStyles?: boolean;
 }
 
@@ -66,6 +71,7 @@ const cache = { default: emotionCache, global: globalCache, utility: utilitiesCa
  */
 export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> = ({
   theme,
+  userProfile,
   globalStyles: globalStylesProp,
   colorMode: colorModeProp,
   modify,
@@ -89,6 +95,19 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   // colorMode provided by the `theme`.
   const colorMode = colorModeProp || themeColorMode;
 
+  const getUserProfile$ = useMemo(
+    () => userProfile?.getUserProfile$ ?? Rx.of,
+    [userProfile?.getUserProfile$]
+  );
+  const userProfileData = useObservable(getUserProfile$(), null);
+
+  // If the high contrast mode value is undefined, EUI will use the OS level setting.
+  const userSettings = userProfileData?.userSettings as UserSettings | undefined;
+  let highContrastMode: boolean | undefined;
+  if (userSettings?.contrastMode && userSettings?.contrastMode !== 'system') {
+    highContrastMode = userSettings.contrastMode === 'high';
+  }
+
   // This logic was drawn from the Core theme provider, and wasn't present (or even used)
   // elsewhere.  Should be a passive addition to anyone using the older theme provider(s).
   const globalStyles = globalStylesProp === false ? false : undefined;
@@ -101,8 +120,8 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
         colorMode,
         globalStyles,
         utilityClasses: globalStyles,
+        highContrastMode,
         theme: _theme,
-        highContrastMode: false,
       }}
     >
       {children}