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

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/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,

package/src/components/WfoTree/styles.ts

@@ -1,7 +1,6 @@
-import type { WfoTheme } from '@/hooks';
+import type { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = (wfoTheme: WfoTheme) => {
-    const { theme, toSecondaryColor } = wfoTheme;
+export const getStyles = ({ theme, toSecondaryColor }: WfoThemeHelpers) => {
     const expandIconContainerStyle = {
         cursor: 'pointer',
     };
@@ -25,7 +24,7 @@ export const getStyles = (wfoTheme: WfoTheme) => {
                 textDecoration: 'underline',
             },
             border: isOutsideCurrentSubscription
-                ? `1px dashed ${theme.colors.lightShade}`
+                ? `1px dashed ${theme.colors.borderBaseSubdued}`
                 : 'none',
         };
     };
@@ -34,9 +33,9 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         return {
             ...treeItemStyle(isOutsideCurrentSubscription),
             backgroundColor: isOutsideCurrentSubscription
-                ? theme.colors.lightShade
+                ? theme.colors.borderBaseSubdued
                 : toSecondaryColor(theme.colors.primary),
-            color: theme.colors.primaryText,
+            color: theme.colors.textPrimary,
         };
     };
 

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -176,11 +176,15 @@ export const WfoStep = React.forwardRef(
                                     >
                                         {(isExpanded && (
                                             <WfoChevronUp
-                                                color={theme.colors.text}
+                                                color={
+                                                    theme.colors.textParagraph
+                                                }
                                             />
                                         )) || (
                                             <WfoChevronDown
-                                                color={theme.colors.text}
+                                                color={
+                                                    theme.colors.textParagraph
+                                                }
                                             />
                                         )}
                                     </EuiFlexItem>

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx

@@ -73,25 +73,28 @@ export const WfoStepStatusIcon = ({
             case StepStatus.SUSPEND:
                 return [
                     stepStateSuspendIconStyle,
-                    theme.colors.warningText,
+                    theme.colors.textWarning,
                     true,
-                    theme.colors.warningText,
+                    theme.colors.textWarning,
                 ];
             case StepStatus.PENDING:
-                return [stepStatePendingIconStyle, theme.colors.darkShade];
+                return [
+                    stepStatePendingIconStyle,
+                    theme.colors.backgroundBaseAccent,
+                ];
             case StepStatus.FAILED:
                 return [
                     stepStateFailedIconStyle,
-                    theme.colors.dangerText,
+                    theme.colors.textDanger,
                     true,
-                    theme.colors.dangerText,
+                    theme.colors.textDanger,
                 ];
             case StepStatus.SKIPPED:
                 return [
                     stepStateSuccessIconStyle,
-                    theme.colors.primaryText,
+                    theme.colors.textPrimary,
                     true,
-                    theme.colors.darkShade,
+                    theme.colors.backgroundBaseAccent,
                 ];
             case StepStatus.FORM:
                 return [stepStateSuccessIconStyle, theme.colors.link];
@@ -99,9 +102,9 @@ export const WfoStepStatusIcon = ({
             default:
                 return [
                     stepStateSuccessIconStyle,
-                    theme.colors.primaryText,
+                    theme.colors.textPrimary,
                     true,
-                    theme.colors.successText,
+                    theme.colors.textSuccess,
                 ];
         }
     })();

package/src/components/WfoWorkflowSteps/WfoTraceback/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 codeBlockStyle = css({
         marginTop: theme.size.m,
         marginBottom: theme.size.l,

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -116,7 +116,7 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
                         <WfoCode
                             color={
                                 isRunningWorkflow
-                                    ? theme.colors.disabledText
+                                    ? theme.colors.backgroundBaseDisabled
                                     : theme.colors.link
                             }
                         />

package/src/components/WfoWorkflowSteps/styles.ts

@@ -1,15 +1,16 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 export const getWorkflowStepsStyles = ({
     theme,
     toSecondaryColor,
-}: WfoTheme) => {
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const SPACE_BETWEEN_STEPS = theme.base * 1.5;
 
     const stepSpacerStyle = css({
-        borderLeft: `1px solid ${theme.colors.darkShade}`,
+        borderLeft: `1px solid ${theme.colors.backgroundBaseAccent}`,
         height: `${SPACE_BETWEEN_STEPS}px`,
         marginLeft: '36px',
     });
@@ -60,13 +61,15 @@ export const getWorkflowStepsStyles = ({
 
     const stepDurationStyle = {
         fontSize: theme.size.m,
-        color: theme.colors.disabled,
+        color: theme.colors.textSubdued,
         fontWeight: theme.font.weight.semiBold,
     };
 
     const stepStateSuccessIconStyle = css({
         ...stepStateIcon,
-        backgroundColor: toSecondaryColor(theme.colors.primary),
+        backgroundColor: isDarkModeActive
+            ? toSecondaryColor(theme.colors.link)
+            : theme.colors.backgroundLightPrimary,
     });
 
     const stepStateSuspendIconStyle = css({
@@ -76,7 +79,7 @@ export const getWorkflowStepsStyles = ({
 
     const stepStatePendingIconStyle = css({
         ...stepStateIcon,
-        backgroundColor: toSecondaryColor(theme.colors.darkShade),
+        backgroundColor: toSecondaryColor(theme.colors.backgroundBaseAccent),
     });
     const stepStateFailedIconStyle = css({
         ...stepStateIcon,

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -60,7 +60,7 @@ export default function WfoConfirmationDialog({
                     <EuiModal
                         css={confirmationDialogStyling}
                         className="confirm-modal"
-                        onClose={onCancel}
+                        onClose={() => onCancel}
                         initialFocus="[name=popfirst]"
                     >
                         <EuiModalHeader>

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.2.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.2.1';

package/src/hooks/useOrchestratorTheme.ts

@@ -1,37 +1,39 @@
-import {
-    EuiThemeColorModeStandard,
-    shade,
-    tint,
-    useEuiTheme,
-} from '@elastic/eui';
-
-import { WfoThemeComputed } from '@/theme';
+import { EuiThemeColorMode, shade, tint, useEuiTheme } from '@elastic/eui';
+
+import { WfoComputedModifications, WfoComputedTheme } from '@/theme';
 import { ColorModes } from '@/types';
 
-export type WfoTheme = {
-    theme: WfoThemeComputed;
+export type WfoThemeHelpers = Readonly<{
+    theme: WfoComputedTheme;
     multiplyByBaseUnit: (multiplier: number) => number;
     toSecondaryColor: (color: string) => string;
-    colorMode: EuiThemeColorModeStandard;
-    isDarkThemeActive: boolean;
-};
+    colorMode: EuiThemeColorMode;
+    isDarkModeActive: boolean;
+}>;
+
+export const shadeOrchestratorColor = (color: string) =>
+    shade(color, 0.65).toString();
+export const tintOrchestratorColor = (color: string) =>
+    tint(color, 0.8).toString();
 
-export const useOrchestratorTheme = (): WfoTheme => {
-    const { euiTheme, colorMode } = useEuiTheme<WfoThemeComputed>();
-    const isDarkThemeActive = colorMode === ColorModes.DARK;
+export const useOrchestratorTheme = (): WfoThemeHelpers => {
+    const { euiTheme, colorMode } = useEuiTheme<WfoComputedModifications>();
+    const isDarkModeActive = colorMode === ColorModes.DARK;
 
     const baseUnit = euiTheme.base;
 
     const multiplyByBaseUnit = (multiplier: number) => baseUnit * multiplier;
 
     const toSecondaryColor = (color: string) =>
-        isDarkThemeActive ? shade(color, 0.65) : tint(color, 0.8);
+        isDarkModeActive
+            ? shadeOrchestratorColor(color)
+            : tintOrchestratorColor(color);
 
     return {
         theme: euiTheme,
         multiplyByBaseUnit,
         toSecondaryColor,
         colorMode,
-        isDarkThemeActive,
+        isDarkModeActive,
     };
 };

package/src/hooks/useWithOrchestratorTheme.ts

@@ -1,9 +1,9 @@
 import { useOrchestratorTheme } from './useOrchestratorTheme';
-import type { WfoTheme } from './useOrchestratorTheme';
+import type { WfoThemeHelpers } from './useOrchestratorTheme';
 
 export function useWithOrchestratorTheme<T>(
-    getStylesFunction: (theme: WfoTheme) => T,
+    getStylesFunction: (wfoThemeHelpers: WfoThemeHelpers) => T,
 ) {
-    const wfoTheme = useOrchestratorTheme();
-    return getStylesFunction(wfoTheme);
+    const wfoThemeHelpers = useOrchestratorTheme();
+    return getStylesFunction(wfoThemeHelpers);
 }

package/src/pages/processes/WfoProcessDetail.tsx

@@ -230,7 +230,7 @@ export const WfoProcessDetail = ({
                             <WfoRefresh
                                 color={
                                     retryButtonIsDisabled
-                                        ? theme.colors.subduedText
+                                        ? theme.colors.textSubdued
                                         : theme.colors.link
                                 }
                             />
@@ -247,7 +247,7 @@ export const WfoProcessDetail = ({
                             <WfoXCircleFill
                                 color={
                                     abortButtonIsDisabled
-                                        ? theme.colors.subduedText
+                                        ? theme.colors.textSubdued
                                         : theme.colors.danger
                                 }
                             />
@@ -269,7 +269,7 @@ export const WfoProcessDetail = ({
                                     <WfoXCircleFill
                                         color={
                                             deleteButtonIsDisabled
-                                                ? theme.colors.subduedText
+                                                ? theme.colors.textSubdued
                                                 : theme.colors.danger
                                         }
                                     />