diff --git a/src-docs/src/views/theme/other/_shadow_js.tsx b/src-docs/src/views/theme/other/_shadow_js.tsx index 979d05472cb..42aedd95da8 100644 --- a/src-docs/src/views/theme/other/_shadow_js.tsx +++ b/src-docs/src/views/theme/other/_shadow_js.tsx @@ -15,7 +15,6 @@ import { import { getPropsFromComponent } from '../../../services/props/get_props'; import { getDescription } from '../../../services/props/get_description'; -// TODO: Update imports import { useEuiShadow, useEuiShadowFlat, diff --git a/src/components/bottom_bar/bottom_bar.styles.ts b/src/components/bottom_bar/bottom_bar.styles.ts index 86b511c254e..3c707337cfb 100644 --- a/src/components/bottom_bar/bottom_bar.styles.ts +++ b/src/components/bottom_bar/bottom_bar.styles.ts @@ -23,34 +23,38 @@ const euiBottomBarAppear = keyframes` } `; -export const euiBottomBarStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ - // Base - // Text color needs to be reapplied to properly scope the forced `colorMode` - euiBottomBar: css` - ${euiShadowFlat(euiTheme, undefined, colorMode)}; - background: ${shade(euiTheme.colors.lightestShade, 0.5)}; - color: ${euiTheme.colors.text}; - ${euiCanAnimate} { - animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} - ${euiTheme.animation.resistance}; - } - `, - static: css``, - fixed: css` - z-index: ${Number(euiTheme.levels.header) - 2}; - `, - sticky: css` - z-index: ${Number(euiTheme.levels.header) - 2}; - `, - // Padding - s: css` - padding: ${euiTheme.size.s}; - `, - m: css` - padding: ${euiTheme.size.base}; - `, - l: css` - padding: ${euiTheme.size.l}; - `, - none: '', -}); +export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + // Base + // Text color needs to be reapplied to properly scope the forced `colorMode` + euiBottomBar: css` + ${euiShadowFlat(euiThemeContext)}; + background: ${shade(euiTheme.colors.lightestShade, 0.5)}; + color: ${euiTheme.colors.text}; + ${euiCanAnimate} { + animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} + ${euiTheme.animation.resistance}; + } + `, + static: css``, + fixed: css` + z-index: ${Number(euiTheme.levels.header) - 2}; + `, + sticky: css` + z-index: ${Number(euiTheme.levels.header) - 2}; + `, + // Padding + s: css` + padding: ${euiTheme.size.s}; + `, + m: css` + padding: ${euiTheme.size.base}; + `, + l: css` + padding: ${euiTheme.size.l}; + `, + none: '', + }; +}; diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts index 079107f2d45..8a66c4d5d8f 100644 --- a/src/themes/amsterdam/global_styling/mixins/shadow.ts +++ b/src/themes/amsterdam/global_styling/mixins/shadow.ts @@ -8,7 +8,6 @@ import { useEuiTheme, UseEuiTheme } from '../../../../services/theme'; import { getShadowColor } from '../functions'; -import { createStyleHookFromMixin } from '../../../../global_styling/utils'; import { _EuiThemeShadowSize, _EuiThemeShadowCustomColor, @@ -22,11 +21,10 @@ export interface EuiShadowCustomColor { * euiSlightShadow */ export const euiShadowXSmall = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .8px .8px ${getShadowColor(color, 0.04, colorMode)}, @@ -38,11 +36,10 @@ box-shadow: * bottomShadowSmall */ export const euiShadowSmall = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)}, @@ -55,11 +52,10 @@ box-shadow: * bottomShadowMedium */ export const euiShadowMedium = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .9px 4px -1px ${getShadowColor(color, 0.08, colorMode)}, @@ -73,12 +69,10 @@ box-shadow: * bottomShadow */ export const euiShadowLarge = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; - + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -95,12 +89,10 @@ export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor { reverse?: boolean; } export const euiShadowXLarge = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color, reverse }: EuiShadowXLarge = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color, reverse }: EuiShadowXLarge = {} ) => { - const color = _color || colors.shadow; - + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)}, @@ -114,11 +106,10 @@ box-shadow: * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there */ export const euiSlightShadowHover = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -127,9 +118,12 @@ box-shadow: 0 23px 35px ${getShadowColor(color, 0.05, colorMode)}; `; }; -export const useEuiSlightShadowHover = createStyleHookFromMixin( - euiSlightShadowHover -); +export const useEuiSlightShadowHover = ( + color?: _EuiThemeShadowCustomColor['color'] +) => { + const euiThemeContext = useEuiTheme(); + return euiSlightShadowHover(euiThemeContext, { color }); +}; /** * bottomShadowFlat @@ -138,52 +132,52 @@ export const useEuiSlightShadowHover = createStyleHookFromMixin( * Useful for popovers that drop UP rather than DOWN. */ export const euiShadowFlat = ( - { colors }: UseEuiTheme['euiTheme'], - color: _EuiThemeShadowCustomColor['color'] = undefined, - colorMode: UseEuiTheme['colorMode'] + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const _color = color || colors.shadow; + 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)}; + 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 useEuiShadowFlat = createStyleHookFromMixin(euiShadowFlat); +export const useEuiShadowFlat = ( + color?: _EuiThemeShadowCustomColor['color'] +) => { + const euiThemeContext = useEuiTheme(); + return euiShadowFlat(euiThemeContext, { color }); +}; -// One hook to rule them all -interface EuiShadowStyles { - size?: _EuiThemeShadowSize; - color?: _EuiThemeShadowCustomColor['color']; -} export const euiShadow = ( - euiTheme: UseEuiTheme['euiTheme'], - { size = 'l', color = undefined }: EuiShadowStyles = {}, - colorMode: UseEuiTheme['colorMode'] + euiThemeContext: UseEuiTheme, + size: _EuiThemeShadowSize = 'l', + { color }: _EuiThemeShadowCustomColor = {} ) => { switch (size) { case 'xs': - return euiShadowXSmall(euiTheme, { color }, colorMode); + return euiShadowXSmall(euiThemeContext, { color }); case 's': - return euiShadowSmall(euiTheme, { color }, colorMode); + return euiShadowSmall(euiThemeContext, { color }); case 'm': - return euiShadowMedium(euiTheme, { color }, colorMode); + return euiShadowMedium(euiThemeContext, { color }); case 'l': - return euiShadowLarge(euiTheme, { color }, colorMode); + return euiShadowLarge(euiThemeContext, { color }); case 'xl': - return euiShadowXLarge(euiTheme, { color }, colorMode); + return euiShadowXLarge(euiThemeContext, { color }); default: console.warn('Please provide a valid size option to useEuiShadow'); return ''; } }; + export const useEuiShadow = ( - size: EuiShadowStyles['size'] = 'l', - color?: EuiShadowStyles['color'] + size: _EuiThemeShadowSize = 'l', + color?: _EuiThemeShadowCustomColor['color'] ) => { - const { euiTheme, colorMode } = useEuiTheme(); - return euiShadow(euiTheme, { size, color }, colorMode); + const euiThemeContext = useEuiTheme(); + return euiShadow(euiThemeContext, size, { color }); }; diff --git a/upcoming_changelogs/5892.md b/upcoming_changelogs/5892.md new file mode 100644 index 00000000000..ef115da79c5 --- /dev/null +++ b/upcoming_changelogs/5892.md @@ -0,0 +1,2 @@ +- Updated all CSS-in-JS shadow functions parameters to match a `(euiTheme, { color? })` order +- Updated `euiShadow()` parameters to `(euiTheme, size, { color? })`