@orchestrator-ui/orchestrator-ui-components 7.1.1 → 7.2.1

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -103,27 +103,27 @@ describe('flattenArrayProps', () => {
 });
 
 describe('getWorkflowTargetColor', () => {
-    it('should return successText color for CREATE', () => {
+    it('should return textSuccess color for CREATE', () => {
         const theme = {
             colors: {
-                successText: 'successTextColor',
+                textSuccess: 'textSuccessColor',
             },
         } as EuiThemeComputed;
 
         expect(getWorkflowTargetColor(WorkflowTarget.CREATE, theme)).toBe(
-            'successTextColor',
+            'textSuccessColor',
         );
     });
 
-    it('should return primaryText color for MODIFY', () => {
+    it('should return textPrimary color for MODIFY', () => {
         const theme = {
             colors: {
-                primaryText: 'primaryTextColor',
+                textPrimary: 'textPrimaryColor',
             },
         } as EuiThemeComputed;
 
         expect(getWorkflowTargetColor(WorkflowTarget.MODIFY, theme)).toBe(
-            'primaryTextColor',
+            'textPrimaryColor',
         );
     });
 
@@ -154,14 +154,14 @@ describe('getWorkflowTargetColor', () => {
     it('should return body color for unknown targets', () => {
         const theme = {
             colors: {
-                body: 'bodyColor',
+                backgroundBaseDisabled: 'gray',
             },
         } as EuiThemeComputed;
 
         // Test with an unknown target
         expect(
             getWorkflowTargetColor('UNKNOWN_TARGET' as WorkflowTarget, theme),
-        ).toBe('bodyColor');
+        ).toBe('gray');
     });
 });
 

package/src/components/WfoSubscription/utils/utils.ts

@@ -68,9 +68,9 @@ export const getWorkflowTargetColor = (
     // Data returned from graphql can't always be depended on to be lowercase
     switch (workflowTarget.toLocaleLowerCase()) {
         case WorkflowTarget.CREATE:
-            return theme.colors.successText;
+            return theme.colors.textSuccess;
         case WorkflowTarget.MODIFY:
-            return theme.colors.primaryText;
+            return theme.colors.textPrimary;
         case WorkflowTarget.SYSTEM:
         case WorkflowTarget.VALIDATE:
             return theme.colors.warning;
@@ -78,9 +78,9 @@ export const getWorkflowTargetColor = (
             return theme.colors.accent;
         case WorkflowTarget.TERMINATE:
             return theme.colors.danger;
+        default:
+            return theme.colors.backgroundBaseDisabled;
     }
-
-    return theme.colors.body;
 };
 
 export const getWorkflowTargetIconContent = (

package/src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx

@@ -35,7 +35,11 @@ export const WfoSummaryCardHeader: FC<WfoSummaryCardHeaderProps> = ({
 
     return (
         <EuiFlexItem grow={0}>
-            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+            <EuiPanel
+                hasShadow={false}
+                css={{ backgroundColor: theme.colors.backgroundBaseSubdued }}
+                paddingSize="l"
+            >
                 <EuiFlexGroup alignItems="center">
                     <EuiAvatar
                         iconSize="l"

package/src/components/WfoSummary/WfoSummaryCardHeader/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoSummaryCardHeaderStyles = ({ theme }: WfoTheme) => {
+export const getWfoSummaryCardHeaderStyles = ({ theme }: WfoThemeHelpers) => {
     const avatarStyle = css({
         maxHeight: theme.base * 3,
         maxWidth: theme.base * 3,

package/src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx

@@ -37,7 +37,9 @@ export const WfoSummaryCardListItem: FC<WfoSummaryCardListItemProps> = ({
             <EuiFlexGroup css={listItemContainerStyle} gutterSize="none">
                 <EuiFlexItem>
                     <EuiTextColor
-                        color={url ? theme.colors.link : theme.colors.title}
+                        color={
+                            url ? theme.colors.link : theme.colors.textHeading
+                        }
                         css={listItemTitleStyle}
                     >
                         {title}

package/src/components/WfoSummary/WfoSummaryCardList/styles.ts

@@ -1,14 +1,15 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoSummaryCardListStyles = ({ theme }: WfoTheme) => {
+export const getWfoSummaryCardListStyles = ({ theme }: WfoThemeHelpers) => {
     const listContainerStyle = css({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
         flexGrow: 1,
-        borderColor: theme.colors.lightShade,
+        borderColor: theme.colors.borderBaseSubdued,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
     });
 
     const listHeaderStyle = css({

package/src/components/WfoSummary/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoSummaryCardsStyles = ({ theme }: WfoTheme) => {
+export const getWfoSummaryCardsStyles = ({ theme }: WfoThemeHelpers) => {
     const cardContainerStyle = css({
         height: theme.base * 36,
         minWidth: theme.base * 25,

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -50,6 +50,7 @@ export type WfoAdvancedTableProps<T extends object> = Omit<
     error?: WfoGraphqlError[];
     onUpdateQueryString: (queryString: string) => void;
     onExportData?: () => void;
+    disableSearch?: boolean;
 };
 
 export const WfoAdvancedTable = <T extends object>({
@@ -63,6 +64,7 @@ export const WfoAdvancedTable = <T extends object>({
     error,
     onUpdateQueryString,
     onExportData,
+    disableSearch = false,
     ...tableProps
 }: WfoAdvancedTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
@@ -92,7 +94,7 @@ export const WfoAdvancedTable = <T extends object>({
                     css={{ cursor: 'pointer' }}
                     onClick={() => setSelectedDataForDetailModal(row)}
                 >
-                    <WfoArrowsExpand color={theme.colors.mediumShade} />
+                    <WfoArrowsExpand color={theme.colors.borderBasePlain} />
                 </EuiFlexItem>
             ),
         },
@@ -159,18 +161,22 @@ export const WfoAdvancedTable = <T extends object>({
         <>
             <EuiFlexGroup alignItems="center">
                 <EuiFlexItem>
-                    <WfoSearchField
-                        queryString={queryString}
-                        onUpdateQueryString={onUpdateQueryString}
-                    />
+                    {!disableSearch && (
+                        <WfoSearchField
+                            queryString={queryString}
+                            onUpdateQueryString={onUpdateQueryString}
+                        />
+                    )}
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                        onClick={() => setShowSearchModal(true)}
-                        iconSize={'xl'}
-                        iconType={'iInCircle'}
-                        aria-label={t('searchModalTitle')}
-                    />
+                    {!disableSearch && (
+                        <EuiButtonIcon
+                            onClick={() => setShowSearchModal(true)}
+                            iconSize={'xl'}
+                            iconType={'info'}
+                            aria-label={t('searchModalTitle')}
+                        />
+                    )}
                 </EuiFlexItem>
                 <EuiButton onClick={() => setShowSettingsModal(true)}>
                     {t('editColumns')}

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -34,7 +34,7 @@ export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({
                             <WfoClipboardCopy
                                 width={16}
                                 height={16}
-                                color={theme.colors.mediumShade}
+                                color={theme.colors.backgroundBaseDisabled}
                             />
                         </div>
                     )}

package/src/components/WfoTable/WfoFirstPartUUID/styles.ts

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 export const COPY_ICON_CLASS = 'copyIcon';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const uuidFieldStyle = css({
         fontWeight: theme.font.weight.medium,
         display: 'flex',

package/src/components/WfoTable/WfoSortButtons/WfoSortButton.tsx

@@ -24,7 +24,11 @@ export const WfoSortButton: FC<WfoSortButtonProps> = ({
             onClick={() => isActive && onClick?.()}
         >
             <WfoIconComponent
-                color={isActive ? theme.colors.title : theme.colors.lightShade}
+                color={
+                    isActive
+                        ? theme.colors.textHeading
+                        : theme.colors.borderBaseSubdued
+                }
             />
         </button>
     );

package/src/components/WfoTable/WfoStatusColorField/styles.ts

@@ -2,9 +2,9 @@ import { tint } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { TABLE_ROW_HEIGHT } from '@/components';
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoStatusColorFieldStyles = ({ theme }: WfoTheme) => {
+export const getWfoStatusColorFieldStyles = ({ theme }: WfoThemeHelpers) => {
     const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
 
     const getStatusColorFieldStyle = (color: string) =>

package/src/components/WfoTable/WfoTable/WfoGroupedTable/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoGroupedTableStyles = ({ theme }: WfoTheme) => {
+export const getWfoGroupedTableStyles = ({ theme }: WfoThemeHelpers) => {
     // Matches the default width of a EuiButtonIcon component
     const expandRowButtonWidth = '24px';
     const marginBetweenButtonAndGroupLabel = theme.size.m;
@@ -10,7 +10,7 @@ export const getWfoGroupedTableStyles = ({ theme }: WfoTheme) => {
     const innerTableHeaderStyle = css({
         fontSize: theme.size.m,
         textAlign: 'left',
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
     });
 
     const expandableRowContainerStyle = css({

package/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -18,7 +18,11 @@ import { getPageCount } from '../utils/tableUtils';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
 import { getWfoTableStyles } from './styles';
-import { getColumnWidthsFromConfig, getSortedVisibleColumns } from './utils';
+import {
+    getColumnWidthsFromConfig,
+    getSortedVisibleColumns,
+    usePageIndexBoundsGuard,
+} from './utils';
 
 export type Pagination = {
     pageSize: number;
@@ -133,6 +137,8 @@ export const WfoTable = <T extends object>({
 }: WfoTableProps<T>) => {
     const [localColumnWidths, setLocalColumnWidths] =
         useState<LocalColumnWidths>(getColumnWidthsFromConfig(columnConfig));
+    const dataLength = data.length;
+    usePageIndexBoundsGuard({ dataLength, isLoading, pagination });
 
     const parentRef = useRef<HTMLDivElement>(null);
 
@@ -191,7 +197,7 @@ export const WfoTable = <T extends object>({
     }, {} as WfoTableColumnConfig<T>);
 
     const rowVirtualizer = useVirtualizer({
-        count: data.length,
+        count: dataLength,
         getScrollElement: () => parentRef.current,
         estimateSize: () => ROW_HEIGHT,
         overscan: 10,
@@ -231,7 +237,7 @@ export const WfoTable = <T extends object>({
                             />
                         </thead>
                     )}
-                    {data.length === 0 ? (
+                    {dataLength === 0 ? (
                         <tbody css={isLoading && bodyLoadingStyle}>
                             <tr css={rowStyle}>
                                 <td

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx

@@ -22,14 +22,14 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
                 width={16}
                 className={SORTABLE_ICON_CLASS}
                 css={{ visibility: 'hidden' }}
-                color={theme.colors.subduedText}
+                color={theme.colors.textSubdued}
             />
         );
     }
 
     return sortDirection === SortOrder.ASC ? (
-        <WfoArrowUp color={theme.colors.subduedText} />
+        <WfoArrowUp color={theme.colors.textSubdued} />
     ) : (
-        <WfoArrowDown color={theme.colors.subduedText} />
+        <WfoArrowDown color={theme.colors.textSubdued} />
     );
 };

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts

@@ -1,31 +1,31 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 import { SortOrder } from '@/types';
 
 export const HEADER_CELL_TITLE_BUTTON_CLASS = 'headerCellTitleButton';
 export const HEADER_CELL_SORT_BUTTON_CLASS = 'headerCellSortButton';
 export const SORTABLE_ICON_CLASS = 'sortableIcon';
 
-export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
+export const getWfoBasicTableStyles = ({ theme }: WfoThemeHelpers) => {
     const radius = theme.border.radius.medium;
 
     const basicTableStyle = css({
         table: {
-            backgroundColor: theme.colors.emptyShade,
+            backgroundColor: theme.colors.backgroundBaseNeutral,
         },
 
         // The lines between rows
         'tr>td': {
-            borderColor: theme.colors.lightShade,
+            borderColor: theme.colors.borderBaseSubdued,
         },
 
         '.euiTableCellContent__text': {
             display: 'flex',
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
         },
         thead: {
-            backgroundColor: theme.colors.lightShade,
+            backgroundColor: theme.colors.borderBaseSubdued,
             'tr>:first-child': {
                 borderTopLeftRadius: radius,
             },
@@ -35,7 +35,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         },
         tbody: {
             'tr.euiTableRow:hover': {
-                backgroundColor: theme.colors.lightestShade,
+                backgroundColor: theme.colors.backgroundBasePlain,
             },
         },
     });
@@ -55,7 +55,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
 
     const dropDownTableStyle = css({
         thead: {
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
             'tr>:first-child': {
                 borderTopLeftRadius: 0,
             },
@@ -64,7 +64,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
             },
         },
         tbody: {
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
         },
     });
 
@@ -72,7 +72,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         basicTableStyle,
         {
             'tr.euiTableRow-isExpandedRow': {
-                backgroundColor: theme.colors.lightestShade,
+                backgroundColor: theme.colors.backgroundBasePlain,
             },
         },
     ]);

package/src/components/WfoTable/WfoTable/styles.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 
 import { css, keyframes } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 import {
     HEADER_CELL_TITLE_BUTTON_CLASS,
@@ -10,7 +10,10 @@ import {
 } from './WfoTableHeaderCell/styles';
 import { TABLE_ROW_HEIGHT } from './constants';
 
-export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
+export const getWfoTableStyles = ({
+    theme,
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const radius = theme.border.radius.medium;
 
     const tableLoadingLineKeyframes = keyframes({
@@ -41,13 +44,9 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     });
 
     const headerStyle = css({
-        position: 'sticky',
-        top: 0,
-        zIndex: 3,
-        backgroundColor: theme.colors.lightShade,
+        backgroundColor: theme.colors.borderBaseSubdued,
         fontSize: theme.size.m,
         textAlign: 'left',
-
         'tr>:first-child': {
             borderTopLeftRadius: radius,
         },
@@ -73,23 +72,23 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         height: TABLE_ROW_HEIGHT,
         borderStyle: 'solid',
         borderWidth: '0 0 1px 0',
-        borderColor: theme.colors.lightShade,
+        borderColor: theme.colors.borderBaseSubdued,
         position: 'relative',
     });
 
     const dataRowStyle = css({
         '&:hover': {
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
         },
     });
 
     const expandedRowStyle = css({
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
     });
 
     const sortableHeaderCellStyle = css({
         paddingRight: 0,
-        '&:hover': {
+        [`&:hover`]: {
             [`.${SORTABLE_ICON_CLASS}`]: {
                 visibility: 'visible',
             },
@@ -142,8 +141,8 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         zIndex: theme.levels.menu,
         '&:active, &:focus': {
             transition: 'background-color 0.15s',
-            backgroundColor: isDarkThemeActive
-                ? theme.colors.mediumShade
+            backgroundColor: isDarkModeActive
+                ? theme.colors.textHeading
                 : theme.colors.header,
         },
         '&::after': {
@@ -151,7 +150,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
             paddingTop: theme.base - (theme.base / 16) * 2,
             content: `"|"`, // Inserts a vertical line
             fontSize: theme.size.m,
-            color: theme.colors.mediumShade,
+            color: theme.colors.backgroundBaseAccent,
             cursor: 'col-resize',
             opacity: 0.6,
             zIndex: theme.levels.navigation,

package/src/components/WfoTable/WfoTable/utils.ts

@@ -1,4 +1,6 @@
-import { LocalColumnWidths, TableColumnKeys } from '@/components';
+import { useEffect } from 'react';
+
+import { LocalColumnWidths, Pagination, TableColumnKeys } from '@/components';
 import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
@@ -93,3 +95,29 @@ export const getColumnWidthsFromConfig = <T extends object>(
         return columnWidths;
     }, {} as LocalColumnWidths);
 };
+
+export const usePageIndexBoundsGuard = ({
+    dataLength,
+    isLoading,
+    pagination,
+}: {
+    dataLength: number;
+    isLoading: boolean;
+    pagination?: Pagination;
+}) => {
+    useEffect(() => {
+        if (!pagination) return;
+
+        const { pageIndex, pageSize, totalItemCount, onChangePage } =
+            pagination;
+
+        const maxPage = Math.max(
+            0,
+            Math.floor(((totalItemCount ?? 1) - 1) / pageSize),
+        );
+
+        if (!isLoading && dataLength === 0 && pageIndex > maxPage) {
+            onChangePage?.(maxPage);
+        }
+    }, [dataLength, isLoading, pagination]);
+};

package/src/components/WfoTable/WfoTableSettingsModal/styles.ts

@@ -1,17 +1,17 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
-export const getWfoTableSettingsModalStyles = (wfoTheme: WfoTheme) => {
-    const { formFieldBaseStyle } = getFormFieldsBaseStyle(wfoTheme);
-
-    const { theme } = wfoTheme;
+export const getWfoTableSettingsModalStyles = (
+    wfoThemeHelpers: WfoThemeHelpers,
+) => {
+    const { formFieldBaseStyle } = getFormFieldsBaseStyle(wfoThemeHelpers);
 
     const formRowStyle = css({
         justifyContent: 'space-between',
         '.euiFormLabel': {
-            color: theme.colors.text,
+            color: wfoThemeHelpers.theme.colors.textParagraph,
         },
     });
 

package/src/components/WfoTable/utils/constants.ts

@@ -15,6 +15,7 @@ export const METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY =
 export const METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY =
     'metadataProductBlocksTable';
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
+export const METADATA_SCHEDULES_LOCAL_STORAGE_KEY = 'metadataScheduleTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
 export const METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY = 'metadataTasksTable';

package/src/components/WfoTable/utils/tableUtils.ts

@@ -64,7 +64,6 @@ export const getQueryStringHandler =
                 ? `${queryString}*`
                 : queryString;
         setDataDisplayParam('queryString', query);
-        setDataDisplayParam('pageIndex', 0);
     };
 
 export const getPageCount = (pagination: Pagination) =>

package/src/components/WfoTableCodeBlock/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const tableCodeBlockMarginStyle = css({
         margin: theme.size.base,
         marginTop: theme.size.l,

package/src/components/WfoTextAnchor/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const textAnchorStyle = css({
         marginTop: theme.size.xxs,
         marginLeft: 0,

package/src/components/WfoTimeline/styles.ts

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 import { StepStatus } from '@/types';
 
 import { TimelinePosition } from './WfoTimeline';
 
-export const getTimelineStyles = ({ theme }: WfoTheme) => {
+export const getTimelineStyles = ({ theme }: WfoThemeHelpers) => {
     const TIMELINE_HEIGHT = theme.base * 2.5;
     const TIMELINE_OUTLINE_WIDTH = theme.base * 0.75;
 
@@ -30,7 +30,7 @@ export const getTimelineStyles = ({ theme }: WfoTheme) => {
             case StepStatus.RUNNING:
             case StepStatus.PENDING:
             default:
-                return theme.colors.mediumShade;
+                return theme.colors.textDisabled;
         }
     };
 
@@ -44,9 +44,9 @@ export const getTimelineStyles = ({ theme }: WfoTheme) => {
     };
 
     const timelinePanelStyle = css({
-        backgroundColor: theme.colors.body,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
         borderRadius: theme.border.radius.medium,
-        outline: `${timelineOutlineWidthPx} solid ${theme.colors.emptyShade}`,
+        outline: `${timelineOutlineWidthPx} solid ${theme.colors.backgroundBaseNeutral}`,
         height: timelineHeightPx,
         marginTop: timelineOutlineWidthPx,
         marginBottom: timelineOutlineWidthPx,
@@ -90,7 +90,7 @@ export const getTimelineStyles = ({ theme }: WfoTheme) => {
                     return theme.colors.primary;
                 case TimelinePosition.FUTURE:
                 default:
-                    return theme.colors.lightShade;
+                    return theme.colors.borderBaseSubdued;
             }
         };
 
@@ -101,7 +101,7 @@ export const getTimelineStyles = ({ theme }: WfoTheme) => {
                 case TimelinePosition.CURRENT:
                 case TimelinePosition.FUTURE:
                 default:
-                    return theme.colors.lightShade;
+                    return theme.colors.borderBaseSubdued;
             }
         };
 
@@ -129,7 +129,7 @@ export const getTimelineStyles = ({ theme }: WfoTheme) => {
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: '50%',
-            backgroundColor: theme.colors.emptyShade,
+            backgroundColor: theme.colors.backgroundBaseNeutral,
             height: hasContent
                 ? stepWithValueOuterDiameter
                 : emptyStepOuterDiameter,