Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

mgadewoll · 2025-12-16T15:17:41Z

FYI: If light and dark have the same computed token, it's not needed to define it for dark again as the token already switches accordingly. You can keep it, or remove it as you prefer.

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor`

-Original file line number
+Diff line change
@@ Expand Up / @@ -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,
@@ Expand Down Expand Up / @@ -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']
+        ),
       },
     };

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor`

-Original file line number
+Diff line change
@@ Expand Up / @@ -149,6 +149,8 @@ export type _EuiThemeComponentColors = { @@
       tooltipBorderFloating: ColorModeSwitch;
       tourFooterBackground: ColorModeSwitch;
+      tourStepIndicatorInactiveColor: ColorModeSwitch;
+      tourStepIndicatorActiveColor: ColorModeSwitch;
       treeViewItemBackgroundHover: ColorModeSwitch;
     };
@@ Expand Down @@

Original file line number	Diff line number	Diff line change
		@@ -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`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

Uh oh!

Diff view

Diff view

There are no files selected for viewing

mgadewoll Dec 16, 2025

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up @@
         `,
         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)),
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ exports[`EuiTourStepIndicator can be complete 1`] = ` @@
       data-test-subj="test subject string"
     >
       <span
-        color="subdued"
+        color="#A2B1C9"
         data-euiicon-type="dot"
       >
         complete
@@ Expand All / @@ -22,7 +22,7 @@ exports[`EuiTourStepIndicator can be incomplete 1`] = ` @@
       data-test-subj="test subject string"
     >
       <span
-        color="subdued"
+        color="#A2B1C9"
         data-euiicon-type="dot"
       >
         incomplete
@@ Expand All / @@ -38,7 +38,7 @@ exports[`EuiTourStepIndicator is rendered 1`] = ` @@
     >
       <span
         aria-current="step"
-        color="success"
+        color="#008A5E"
         data-euiicon-type="dot"
       >
         active
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand All / @@ -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') {
@@ Expand All / @@ -37,7 +41,7 @@ export const EuiTourStepIndicator: FunctionComponent< @@
               <EuiIcon
                 type="dot"
                 aria-label={isActive}
-                color="success"
+                color={activeColor}
                 aria-current="step"
               />
             )}
@@ Expand All / @@ -47,15 +51,15 @@ export const EuiTourStepIndicator: FunctionComponent< @@
         indicatorIcon = (
           <EuiI18n token="euiTourStepIndicator.isComplete" default="complete">
             {(isComplete: string) => (
-              <EuiIcon type="dot" aria-label={isComplete} color="subdued" />
+              <EuiIcon type="dot" aria-label={isComplete} color={inactiveColor} />
             )}
           </EuiI18n>
         );
       } else if (status === 'incomplete') {
         indicatorIcon = (
           <EuiI18n token="euiTourStepIndicator.isIncomplete" default="incomplete">
             {(isIncomplete: string) => (
-              <EuiIcon type="dot" aria-label={isIncomplete} color="subdued" />
+              <EuiIcon type="dot" aria-label={isIncomplete} color={inactiveColor} />
             )}
           </EuiI18n>
         );
@@ Expand Down @@

Tokens clean-up for EuiTour (non-active dots color and beacon color) #9271

Uh oh!

Tokens clean-up for EuiTour (non-active dots color and beacon color) #9271

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

mgadewoll Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271