[DO NOT MERGE] Spike: Resolving color calculations

packages/eui/src-docs/src/components/with_theme/theme_context.tsx

@@ -32,7 +32,7 @@ const defaultState = {
   themeLanguage: THEME_LANGS[0],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   changeThemeLanguage: (language: THEME_LANGUAGES['id']) => {},
-  theme: THEME_NAMES[0],
+  theme: THEME_NAMES[2],
   changeTheme: (themeValue: EUI_THEME['value']) => {
     applyTheme(themeValue);
   },

packages/eui/src-docs/src/index.js

@@ -19,6 +19,8 @@ import { ThemeProvider } from './components/with_theme/theme_context';
 
 registerTheme('light', [themeLight]);
 registerTheme('dark', [themeDark]);
+registerTheme('new_light', [themeLight]);
+registerTheme('new_dark', [themeDark]);
 
 // Set up app
 

packages/eui/src-docs/src/views/app_context.js

@@ -36,6 +36,12 @@ export const AppContext = ({ children }) => {
   const { theme } = useContext(ThemeContext);
   const locale = useSelector((state) => getLocale(state));
 
+  // NOTE: temp. override solution
+  // TODO: remove once not needed for testing
+  const overrides = JSON.parse(
+    localStorage.getItem('eui-theme-overrides') || '{}'
+  );
+
   const mappingFuncs = {
     'en-xa': translateUsingPseudoLocale,
   };
@@ -57,6 +63,7 @@ export const AppContext = ({ children }) => {
       }}
       theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
       colorMode={theme.includes('light') ? 'light' : 'dark'}
+      modify={overrides}
     >
       <Helmet>
         <link

packages/eui/src/components/badge/color_utils.ts

@@ -8,15 +8,15 @@
 
 import chroma from 'chroma-js';
 
-import { UseEuiTheme, isColorDark, tint } from '../../services';
+import { UseEuiTheme, isColorDark } from '../../services';
 import {
   euiButtonColor,
   euiButtonFillColor,
 } from '../../themes/amsterdam/global_styling/mixins';
 import { chromaValid, parseColor } from '../color_picker/utils';
 
 export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   return {
     // Colors shared between buttons and badges
@@ -31,16 +31,10 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => {
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: {
       ...getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade),
-      borderColor:
-        colorMode === 'DARK'
-          ? tint(euiTheme.border.color, 0.15)
-          : euiTheme.border.color,
+      borderColor: euiTheme.colors.borderHollow,
     },
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(
-      euiThemeContext,
-      tint(euiTheme.colors.lightShade, 0.3)
-    ),
+    subdued: getBadgeColors(euiThemeContext, euiTheme.colors.borderSubdued),
     accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText),
   };
 };

packages/eui/src/components/button/button.tsx

@@ -21,7 +21,7 @@ import {
   useEuiButtonColorCSS,
   useEuiButtonFocusCSS,
   _EuiButtonColor,
-} from '../../themes/amsterdam/global_styling/mixins/button';
+} from '../../global_styling/mixins/_button';
 import {
   EuiButtonDisplay,
   EuiButtonDisplayCommonProps,

packages/eui/src/components/flyout/flyout_resizable.tsx

@@ -173,7 +173,7 @@ export const EuiFlyoutResizable = forwardRef(
       >
         <EuiResizableButton
           isHorizontal
-          indicator="border"
+          indicator="handle"
           css={cssStyles}
           onMouseDown={onMouseDown}
           onTouchStart={onMouseDown}

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

@@ -6,21 +6,13 @@
  * Side Public License, v 1.
  */
 
-import {
-  UseEuiTheme,
-  shade,
-  tint,
-  darken,
-  transparentize,
-  makeHighContrastColor,
-} from '../../services';
+import { UseEuiTheme } from '../../services';
 import {
   logicalCSS,
   mathWithUnits,
   euiCanAnimate,
   euiFontSize,
 } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 
 // There are multiple components that only need the form max-width size &
 // don't need the extra overhead/color computing expense of every form var.
@@ -29,11 +21,8 @@ export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
   mathWithUnits(euiTheme.size.base, (x) => x * 25);
 
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
-  const isColorDark = colorMode === 'DARK';
-  const backgroundColor = isColorDark
-    ? shade(euiTheme.colors.lightestShade, 0.4)
-    : tint(euiTheme.colors.lightestShade, 0.6);
+  const { euiTheme } = euiThemeContext;
+  const backgroundColor = euiTheme.colors.formBackground;
 
   const controlHeight = euiTheme.size.xxl;
   const controlCompressedHeight = euiTheme.size.xl;
@@ -53,22 +42,13 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const colors = {
     textColor: euiTheme.colors.text,
     backgroundColor: backgroundColor,
-    backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.05),
+    backgroundDisabledColor: euiTheme.colors.formBackgroundDisabled,
     backgroundReadOnlyColor: euiTheme.colors.emptyShade,
-    borderColor: transparentize(
-      colorMode === 'DARK'
-        ? euiTheme.colors.ghost
-        : darken(euiTheme.border.color, 4),
-      0.1
-    ),
+    borderColor: euiTheme.colors.formBorderColor,
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
-    controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(
-      backgroundColor
-    ),
-    appendPrependBackground: isColorDark
-      ? shade(euiTheme.colors.lightShade, 0.15)
-      : tint(euiTheme.colors.lightShade, 0.5),
+    controlPlaceholderText: euiTheme.colors.formControlPlaceholderColor,
+    appendPrependBackground: euiTheme.colors.formAppendBackground,
   };
 
   const controlLayout = {
@@ -234,16 +214,9 @@ export const euiFormControlDefaultShadow = (
   `;
 };
 
-export const euiFormControlFocusStyles = ({
-  euiTheme,
-  colorMode,
-}: UseEuiTheme) => `
+export const euiFormControlFocusStyles = ({ euiTheme }: UseEuiTheme) => `
   --euiFormControlStateColor: ${euiTheme.colors.primary};
-  background-color: ${
-    colorMode === 'DARK'
-      ? shade(euiTheme.colors.emptyShade, 0.4)
-      : euiTheme.colors.emptyShade
-  };
+  background-color: ${euiTheme.colors.formBackgroundFocused};
   background-size: 100% 100%;
   outline: none; /* Remove all outlines and rely on our own bottom border gradient */
 `;
@@ -285,23 +258,19 @@ export const euiFormControlReadOnlyStyles = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   // Make the text color slightly less prominent than the default colors.text
   const textColor = euiTheme.colors.darkestShade;
 
-  const { backgroundColor } = euiButtonColor(euiThemeContext, 'primary');
-  const tintedBackgroundColor =
-    colorMode === 'DARK'
-      ? shade(backgroundColor, 0.5)
-      : tint(backgroundColor, 0.7);
+  const tintedBackgroundColor = euiTheme.colors.formAutofillBackground;
   // Hacky workaround to background-color, since Chrome doesn't normally allow overriding its styles
   // @see https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1
   const backgroundShadow = `inset 0 0 0 100vw ${tintedBackgroundColor}`;
 
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
-  const borderColor = transparentize(euiTheme.colors.primaryText, 0.2);
+  const borderColor = euiTheme.colors.formAutofillBorderColor;
   const invalidBorder = euiTheme.colors.danger;
   const borderShadow = (color: string) =>
     `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`;
@@ -332,7 +301,7 @@ const euiPlaceholderPerBrowser = (content: string) => `
  */
 
 export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const sizes = {
     control: euiTheme.size.base,
@@ -342,10 +311,7 @@ export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
 
   const colors = {
     unselected: euiTheme.colors.emptyShade,
-    unselectedBorder:
-      colorMode === 'DARK'
-        ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
-        : shade(euiTheme.colors.lightestShade, 0.4),
+    unselectedBorder: euiTheme.colors.formControlBorder,
     selected: euiTheme.colors.primary,
     selectedIcon: euiTheme.colors.emptyShade,
     disabled: euiTheme.colors.lightShade,

packages/eui/src/components/provider/provider.tsx

@@ -22,7 +22,7 @@ import {
   EuiGlobalStylesProps,
 } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
-import { EuiThemeAmsterdam } from '../../themes';
+import { EuiThemeNew } from '../../themes';
 
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
@@ -84,7 +84,7 @@ export interface EuiProviderProps<T>
 
 export const EuiProvider = <T extends {} = {}>({
   cache = fallbackCache,
-  theme = EuiThemeAmsterdam,
+  theme = EuiThemeNew,
   globalStyles: Globals = EuiGlobalStyles,
   utilityClasses: Utilities = EuiUtilityClasses,
   colorMode,