[Visual Refresh] Resolve Amsterdam specific theme imports

packages/eui-theme-common/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.202",
+    "chroma-js": "^2.4.2",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
@@ -32,6 +33,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@emotion/react": "^11.11.0",
+    "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

packages/eui-theme-common/src/global_styling/functions/index.ts

@@ -8,3 +8,4 @@
 
 export * from './size';
 export * from './math';
+export * from './shadows';

packages/eui-theme-common/src/global_styling/functions/shadows.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import chroma from 'chroma-js';
+import {
+  COLOR_MODES_STANDARD,
+  EuiThemeColorModeStandard,
+} from '../../services/theme/types';
+
+// Create a CSS color value using whose opacity is determined based
+// on either a light or dark theme. We use a multiplier
+// of 1 for light themes and 2.5 for dark themes
+export const getShadowColor = (
+  color: string,
+  opacity: number,
+  colorMode: EuiThemeColorModeStandard
+) => {
+  const themeOpacity =
+    colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
+  return chroma(color).alpha(themeOpacity).css();
+};

packages/eui-theme-common/src/global_styling/index.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
-export * from './types';
+export * from '../services/theme/types';
 export * from './functions';
 export * from './variables';
+export * from './mixins';

packages/eui/src/global_styling/variables/_colors_vis.ts → packages/eui-theme-common/src/global_styling/mixins/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis';
+export * from './shadow';

packages/eui-theme-common/src/global_styling/mixins/shadow.ts

@@ -0,0 +1,170 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { UseEuiTheme } from '../../services/theme/types';
+import { getShadowColor } from '../functions';
+import {
+  _EuiThemeShadowSize,
+  _EuiThemeShadowCustomColor,
+} from '../variables/shadow';
+
+export interface EuiShadowCustomColor {
+  color?: string;
+}
+
+/**
+ * euiSlightShadow
+ */
+export const euiShadowXSmall = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
+  0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)};
+`;
+};
+
+/**
+ * bottomShadowSmall
+ */
+export const euiShadowSmall = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)},
+  0 1.9px 4px ${getShadowColor(color, 0.05, colorMode)},
+  0 4.5px 10px ${getShadowColor(color, 0.05, colorMode)};
+`;
+};
+
+/**
+ * bottomShadowMedium
+ */
+export const euiShadowMedium = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color, property }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+
+  if (property === 'filter') {
+    // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
+    return `filter: drop-shadow(0 5.7px 9px ${getShadowColor(
+      color,
+      0.2,
+      colorMode
+    )});`;
+  } else {
+    return `box-shadow:
+      0 .9px 4px ${getShadowColor(color, 0.08, colorMode)},
+      0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)},
+      0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)},
+      0 15px 15px ${getShadowColor(color, 0.04, colorMode)};`;
+  }
+};
+
+/**
+ * bottomShadow
+ */
+export const euiShadowLarge = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
+  0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)},
+  0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)},
+  0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
+`;
+};
+
+/**
+ * bottomShadowLarge
+ */
+export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+  reverse?: boolean;
+}
+export const euiShadowXLarge = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color, reverse }: EuiShadowXLarge = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)},
+  0 ${reverse ? '-' : ''}9.4px 24px ${getShadowColor(color, 0.09, colorMode)},
+  0 ${reverse ? '-' : ''}21.8px 43px ${getShadowColor(color, 0.08, colorMode)};
+`;
+};
+
+/**
+ * slightShadowHover
+ */
+export const euiSlightShadowHover = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
+  0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)},
+  0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)},
+  0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
+`;
+};
+
+/**
+ * bottomShadowFlat
+ *
+ * Similar to shadow medium but without the bottom depth.
+ * Useful for popovers that drop UP rather than DOWN.
+ */
+export const euiShadowFlat = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 0 .8px ${getShadowColor(color, 0.06, colorMode)},
+  0 0 2px ${getShadowColor(color, 0.04, colorMode)},
+  0 0 5px ${getShadowColor(color, 0.04, colorMode)},
+  0 0 17px ${getShadowColor(color, 0.03, colorMode)};
+`;
+};
+
+export const euiShadow = (
+  euiThemeContext: UseEuiTheme,
+  size: _EuiThemeShadowSize = 'l',
+  { color }: _EuiThemeShadowCustomColor = {}
+) => {
+  switch (size) {
+    case 'xs':
+      return euiShadowXSmall(euiThemeContext, { color });
+    case 's':
+      return euiShadowSmall(euiThemeContext, { color });
+    case 'm':
+      return euiShadowMedium(euiThemeContext, { color });
+    case 'l':
+      return euiShadowLarge(euiThemeContext, { color });
+    case 'xl':
+      return euiShadowXLarge(euiThemeContext, { color });
+
+    default:
+      console.warn('Please provide a valid size option to useEuiShadow');
+      return '';
+  }
+};

packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { _EuiThemeBreakpoints } from './breakpoint';
+
+export const breakpoint: _EuiThemeBreakpoints = {
+  xl: 1200,
+  l: 992,
+  m: 768,
+  s: 575,
+  xs: 0,
+};

packages/eui-theme-common/src/global_styling/variables/borders.ts

@@ -7,7 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export interface _EuiThemeBorderWidthValues {
   /**

packages/eui-theme-common/src/global_styling/variables/buttons.ts

@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 
 export type _EuiThemeButtonColors = {
   backgroundPrimary: ColorModeSwitch;

packages/eui-theme-common/src/global_styling/variables/colors.ts

@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 
 /**
  * Top 5 colors

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 import { _EuiThemeButtonColors } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 

packages/eui-theme-common/src/global_styling/variables/forms.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export type _EuiThemeForm = {
   maxWidth: string;

packages/eui-theme-common/src/global_styling/variables/index.ts

@@ -9,6 +9,8 @@
 export * from './animations';
 export * from './borders';
 export * from './breakpoint';
+export * from './_breakpoint';
+export * from './breakpoint';
 export * from './colors';
 export * from './levels';
 export * from './size';

packages/eui-theme-common/src/global_styling/variables/states.ts

@@ -7,7 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export interface _EuiThemeFocus {
   /**

packages/eui-theme-common/src/global_styling/types.ts → packages/eui-theme-common/src/services/theme/types.ts

@@ -8,18 +8,21 @@
 
 import type { CSSObject } from '@emotion/react';
 
-import type { RecursivePartial, ValueOf } from '../types';
+import type { RecursivePartial, ValueOf } from '../../types';
 
-import { _EuiThemeAnimation } from './variables/animations';
-import { _EuiThemeBreakpoints } from './variables/breakpoint';
-import { _EuiThemeBorder } from './variables/borders';
-import { _EuiThemeColors } from './variables/colors';
-import { _EuiThemeBase, _EuiThemeSizes } from './variables/size';
-import { _EuiThemeFont } from './variables/typography';
-import { _EuiThemeFocus } from './variables/states';
-import { _EuiThemeLevels } from './variables/levels';
-import { _EuiThemeComponents } from './variables/components';
-import { _EuiThemeFlags } from './variables';
+import { _EuiThemeAnimation } from '../../global_styling/variables/animations';
+import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint';
+import { _EuiThemeBorder } from '../../global_styling/variables/borders';
+import { _EuiThemeColors } from '../../global_styling/variables/colors';
+import {
+  _EuiThemeBase,
+  _EuiThemeSizes,
+} from '../../global_styling/variables/size';
+import { _EuiThemeFont } from '../../global_styling/variables/typography';
+import { _EuiThemeFocus } from '../../global_styling/variables/states';
+import { _EuiThemeLevels } from '../../global_styling/variables/levels';
+import { _EuiThemeComponents } from '../../global_styling/variables/components';
+import { _EuiThemeFlags } from '../../global_styling/variables';
 
 export const COLOR_MODES_STANDARD = {
   light: 'LIGHT',
@@ -108,3 +111,9 @@ export type EuiThemeNested = {
   setNearestThemeCSSVariables: Function;
   themeCSSVariables?: CSSObject;
 };
+
+export interface UseEuiTheme<T extends {} = {}> {
+  euiTheme: EuiThemeComputed<T>;
+  colorMode: EuiThemeColorModeStandard;
+  modifications: EuiThemeModifications<T>;
+}

packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx

@@ -10,7 +10,7 @@ import {
   keysOf,
 } from '../../../../../src';
 
-import { breakpoint as breakpoints } from '../../../../../src/themes/amsterdam/global_styling/variables/_breakpoint';
+import { breakpoint as breakpoints } from '@elastic/eui-theme-common';
 const breakpointKeys = keysOf(breakpoints);
 
 import { GuideSection } from '../../../components/guide_section/guide_section';

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

@@ -7,9 +7,10 @@
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadowFlat } from '@elastic/eui-theme-common';
+
 import { euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 
 const euiBottomBarAppear = keyframes`
   0% {

packages/eui/src/components/button/button_icon/button_icon.styles.ts

@@ -15,7 +15,7 @@ import {
   _EuiButtonColor,
   euiButtonEmptyColor,
   euiButtonSizeMap,
-} from '../../../themes/amsterdam/global_styling/mixins/button';
+} from '../../../global_styling/mixins/_button';
 
 import { euiButtonBaseCSS } from '../button_display/_button_display.styles';