diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9271.md b/packages/eui-theme-borealis/changelogs/upcoming/9271.md new file mode 100644 index 00000000000..59b42ab4139 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/9271.md @@ -0,0 +1 @@ +- Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 62ce9d39747..68a938fdd34 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -356,6 +356,11 @@ const component_colors: _EuiThemeComponentColors = { ([backgroundBaseHighlighted]) => backgroundBaseHighlighted, ['colors.backgroundBaseHighlighted'] ), + tourStepIndicatorInactiveColor: SEMANTIC_COLORS.shade50, + tourStepIndicatorActiveColor: computed( + ([backgroundFilledSuccess]) => backgroundFilledSuccess, + ['colors.backgroundFilledSuccess'] + ), treeViewItemBackgroundHover: computed( ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, @@ -421,5 +426,11 @@ export const components: _EuiThemeComponents = { tableRowBackgroundMarked: SEMANTIC_COLORS.warning140, tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130, tableFooterBackground: SEMANTIC_COLORS.shade135, + + tourStepIndicatorInactiveColor: SEMANTIC_COLORS.shade100, + tourStepIndicatorActiveColor: computed( + ([backgroundFilledSuccess]) => backgroundFilledSuccess, + ['colors.backgroundFilledSuccess'] + ), }, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/9271.md b/packages/eui-theme-common/changelogs/upcoming/9271.md new file mode 100644 index 00000000000..8579684b35f --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/9271.md @@ -0,0 +1 @@ +- Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index de62c87eacb..4541af2a6cf 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -149,6 +149,8 @@ export type _EuiThemeComponentColors = { tooltipBorderFloating: ColorModeSwitch; tourFooterBackground: ColorModeSwitch; + tourStepIndicatorInactiveColor: ColorModeSwitch; + tourStepIndicatorActiveColor: ColorModeSwitch; treeViewItemBackgroundHover: ColorModeSwitch; }; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png index e6ccaa2a2c3..e4cad28ede5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png index c1b06e0ca75..67d6e9ac045 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png index d14aec544bc..010397dd176 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png index 01d94e5d382..fea1fb6518a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png index 50d5efa1664..11399b3e56c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png index c2e8cbab125..a8683d3ccbe 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png index 4dfd053f390..5a7436db41c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png index a6591815e54..8778cf944ca 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/9271.md b/packages/eui/changelogs/upcoming/9271.md new file mode 100644 index 00000000000..1518c3f33f6 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9271.md @@ -0,0 +1,2 @@ +- Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` +- Remapped `EuiBeacon` component `success` variant to use `success` color token instead of `accentSecondary` diff --git a/packages/eui/src/components/beacon/beacon.styles.ts b/packages/eui/src/components/beacon/beacon.styles.ts index 6d09f4370e3..e8678c02b6e 100644 --- a/packages/eui/src/components/beacon/beacon.styles.ts +++ b/packages/eui/src/components/beacon/beacon.styles.ts @@ -106,7 +106,7 @@ export const euiBeaconStyles = (euiThemeContext: UseEuiTheme) => { `, subdued: css(_colorCSS(euiTheme.colors.textSubdued)), primary: css(_colorCSS(euiTheme.colors.primary)), - success: css(_colorCSS(euiTheme.colors.accentSecondary)), + success: css(_colorCSS(euiTheme.colors.success)), warning: css(_colorCSS(euiTheme.colors.warning)), danger: css(_colorCSS(euiTheme.colors.danger)), accent: css(_colorCSS(euiTheme.colors.accent)), diff --git a/packages/eui/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap b/packages/eui/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap index 8bbfb02e6a5..bbdce6b926e 100644 --- a/packages/eui/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap +++ b/packages/eui/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap @@ -7,7 +7,7 @@ exports[`EuiTourStepIndicator can be complete 1`] = ` data-test-subj="test subject string" > complete @@ -22,7 +22,7 @@ exports[`EuiTourStepIndicator can be incomplete 1`] = ` data-test-subj="test subject string" > incomplete @@ -38,7 +38,7 @@ exports[`EuiTourStepIndicator is rendered 1`] = ` > active diff --git a/packages/eui/src/components/tour/tour_step_indicator.tsx b/packages/eui/src/components/tour/tour_step_indicator.tsx index 3ba0f411cb0..d01b568b971 100644 --- a/packages/eui/src/components/tour/tour_step_indicator.tsx +++ b/packages/eui/src/components/tour/tour_step_indicator.tsx @@ -11,6 +11,7 @@ import classNames from 'classnames'; import { css } from '@emotion/react'; import { CommonProps } from '../common'; +import { useEuiTheme } from '../../services'; import { EuiIcon } from '../icon'; import { EuiI18n } from '../i18n'; @@ -27,7 +28,10 @@ export interface EuiTourStepIndicatorProps export const EuiTourStepIndicator: FunctionComponent< EuiTourStepIndicatorProps > = ({ className, number, status, ...rest }) => { + const { euiTheme } = useEuiTheme(); const classes = classNames('euiTourStepIndicator', className); + const inactiveColor = euiTheme.components.tourStepIndicatorInactiveColor; + const activeColor = euiTheme.components.tourStepIndicatorActiveColor; let indicatorIcon: ReactNode; if (status === 'active') { @@ -37,7 +41,7 @@ export const EuiTourStepIndicator: FunctionComponent< )} @@ -47,7 +51,7 @@ export const EuiTourStepIndicator: FunctionComponent< indicatorIcon = ( {(isComplete: string) => ( - + )} ); @@ -55,7 +59,7 @@ export const EuiTourStepIndicator: FunctionComponent< indicatorIcon = ( {(isIncomplete: string) => ( - + )} );