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

package/src/components/WfoPydanticForm/fields/WfoReactSelect/styles.ts

@@ -1,8 +1,10 @@
+import { CSSObjectWithLabel } from 'react-select';
+
 import { css } from '@emotion/react';
 
-import type { WfoTheme } from '@/hooks';
+import type { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
+export const getWfoReactSelectStyles = (wfoTheme: WfoThemeHelpers) => {
     const { theme } = wfoTheme;
 
     const reactSelectInnerComponentStyles = {
@@ -12,20 +14,23 @@ export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
         ) => ({
             ...baseStyles,
             borderBottom: theme.border.thin,
-            borderColor: theme.colors.lightShade,
-            backgroundColor: theme.colors.lightestShade,
+            borderColor: theme.colors.borderBaseSubdued,
+            backgroundColor: theme.colors.backgroundBaseSubdued,
             color: state.isSelected
-                ? theme.colors.primaryText
-                : theme.colors.text,
+                ? theme.colors.textPrimary
+                : theme.colors.textParagraph,
+            '&:active': {
+                backgroundColor: theme.colors.backgroundLightPrimary,
+            },
         }),
         control: (baseStyles: object, state: { isFocused: boolean }) => {
             return {
                 ...baseStyles,
                 backgroundColor: state.isFocused
-                    ? theme.colors.emptyShade
-                    : theme.colors.lightestShade,
-                color: theme.colors.text,
-                border: `1px solid ${theme.colors.lightShade}`,
+                    ? theme.colors.backgroundBaseNeutral
+                    : theme.colors.backgroundBaseSubdued,
+                color: theme.colors.textParagraph,
+                border: `1px solid ${theme.colors.borderBaseSubdued}`,
                 borderColor: 'none',
                 '&:hover': {
                     borderColor: 'none',
@@ -34,7 +39,7 @@ export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
         },
         input: (baseStyles: object) => ({
             ...baseStyles,
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
         }),
         singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
             const opacity = state.isDisabled ? 0.6 : 1;
@@ -43,12 +48,30 @@ export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
                 ...baseStyles,
                 opacity,
                 transition,
-                color: theme.colors.text,
+                color: theme.colors.textParagraph,
             };
         },
         menu: (baseStyles: object) => ({
             ...baseStyles,
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
+        }),
+        dropdownIndicator: (
+            base: CSSObjectWithLabel,
+            state: { isDisabled: boolean },
+        ) => ({
+            ...base,
+            color: state.isDisabled
+                ? theme.colors.borderBaseSubdued
+                : theme.colors.textDisabled,
+        }),
+        indicatorSeparator: (
+            base: CSSObjectWithLabel,
+            state: { isDisabled: boolean },
+        ) => ({
+            ...base,
+            backgroundColor: state.isDisabled
+                ? theme.colors.borderBaseSubdued
+                : theme.colors.textDisabled,
         }),
     };
 

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-import type { WfoTheme } from '@/hooks';
+import type { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoObjectFieldStyles = () => {
     const wfoObjectFieldStyles = css({
@@ -14,18 +14,18 @@ export const getWfoObjectFieldStyles = () => {
     };
 };
 
-export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
+export const getCommonFormFieldStyles = ({ theme }: WfoThemeHelpers) => {
     const formRowStyle = css({
         marginBottom: theme.base * 2,
 
         '.euiText': {
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
         },
         '.euiFormLabel': {
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
             cursor: 'text',
             '&.euiFormLabel-isFocused': {
-                color: theme.colors.primaryText,
+                color: theme.colors.textPrimary,
             },
         },
         '.euiFormRow__labelWrapper': {
@@ -35,7 +35,7 @@ export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
     });
 
     const errorStyle = css({
-        color: theme.colors.dangerText,
+        color: theme.colors.textDanger,
     });
     return {
         errorStyle,
@@ -43,7 +43,7 @@ export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
     };
 };
 
-export const summaryFieldStyles = ({ theme }: WfoTheme) => {
+export const summaryFieldStyles = ({ theme }: WfoThemeHelpers) => {
     const summaryFieldStyle = css({
         'div.emailMessage': {
             td: {
@@ -68,7 +68,7 @@ export const summaryFieldStyles = ({ theme }: WfoTheme) => {
             },
             '.label': {
                 fontWeight: 'bold',
-                color: theme.colors.backgroundBaseSubdued,
+                color: theme.colors.backgroundBaseNeutral,
                 backgroundColor: theme.colors.primary,
                 borderRight: `2px solid ${theme.colors.borderBasePlain}`,
                 borderBottom: `1px solid ${theme.colors.borderBasePlain}`,

package/src/components/WfoSearchPage/WfoConditionRow/WfoPathChips.tsx

@@ -163,7 +163,7 @@ export const WfoPathChips: FC<WfoPathChipsProps> = ({
                                     key={`arrow-${index}`}
                                     type="arrowRight"
                                     size="s"
-                                    color={theme.colors.mediumShade}
+                                    color={theme.colors.backgroundBaseDisabled}
                                     title=""
                                     style={{
                                         flexShrink: 0,

package/src/components/WfoSearchPage/WfoConditionRow/WfoSelectedPathDisplay.tsx

@@ -20,10 +20,10 @@ export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
             onClick={onEdit}
             style={{
                 cursor: 'pointer',
-                border: `1px solid ${theme.colors.lightShade}`,
+                border: `1px solid ${theme.colors.borderBaseSubdued}`,
                 borderRadius: theme.border.radius.medium,
                 padding: `${theme.size.s} ${theme.size.m}`,
-                backgroundColor: theme.colors.emptyShade,
+                backgroundColor: theme.colors.backgroundBaseNeutral,
                 minHeight: '40px',
                 display: 'flex',
                 alignItems: 'center',
@@ -43,7 +43,10 @@ export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
                             responsive={false}
                         >
                             <EuiFlexItem grow={false}>
-                                <EuiText size="s" color={theme.colors.text}>
+                                <EuiText
+                                    size="s"
+                                    color={theme.colors.textParagraph}
+                                >
                                     {getFieldNameFromFullPath(condition.path)}:
                                 </EuiText>
                             </EuiFlexItem>
@@ -52,7 +55,7 @@ export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
                                     size="s"
                                     style={{
                                         backgroundColor:
-                                            theme.colors.lightestShade,
+                                            theme.colors.backgroundBasePlain,
                                         color: theme.colors.primary,
                                         padding: `${theme.size.xxs} ${theme.size.xs}`,
                                         borderRadius: theme.border.radius.small,
@@ -64,7 +67,7 @@ export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
                             </EuiFlexItem>
                         </EuiFlexGroup>
                     ) : (
-                        <EuiText size="s" color={theme.colors.text}>
+                        <EuiText size="s" color={theme.colors.textParagraph}>
                             {condition.path}
                         </EuiText>
                     )}

package/src/components/WfoSearchPage/WfoFilterGroup/WfoFilterGroup.tsx

@@ -226,7 +226,7 @@ export const FilterGroup: FC<FilterGroupProps> = ({
                     <EuiCallOut
                         title={t('emptyGroupTitle')}
                         color="primary"
-                        iconType="iInCircle"
+                        iconType="info"
                         size="s"
                     >
                         <p>{t('emptyGroupDescription')}</p>

package/src/components/WfoSettings/styles.ts

@@ -1,20 +1,19 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoFlushSettingsStyle = (wfoTheme: WfoTheme) => {
-    const { theme } = wfoTheme;
+export const getWfoFlushSettingsStyle = ({ theme }: WfoThemeHelpers) => {
     const comboboxStyle = css({
         // .euiComboBox is needed to override eui styling (more specific)
         '&.euiComboBox': {
             '.euiComboBox__inputWrap': {
-                border: `1px solid ${theme.colors.lightShade}`,
+                border: `1px solid ${theme.colors.borderBaseSubdued}`,
                 boxShadow: 'none',
-                backgroundColor: theme.colors.body,
+                backgroundColor: theme.colors.backgroundBasePlain,
             },
             '&.euiComboBox-isOpen': {
                 '.euiComboBox__inputWrap': {
-                    backgroundColor: theme.colors.emptyShade,
+                    backgroundColor: theme.colors.backgroundBaseNeutral,
                 },
             },
         },

package/src/components/WfoStartButton/WfoStartButtonComboBox.tsx

@@ -41,19 +41,15 @@ export const WfoStartButtonComboBox = ({
     startWorkflowFilters,
 }: WfoStartButtonComboBoxProps) => {
     const [isPopoverOpen, setPopoverOpen] = useState(false);
-    const { theme, isDarkThemeActive } = useOrchestratorTheme();
+    const { theme } = useOrchestratorTheme();
     const { selectableStyle } = useWithOrchestratorTheme(getStyles);
 
     const Button = (
         <EuiButton
             onClick={() => setPopoverOpen(!isPopoverOpen)}
-            iconType={
-                isProcess
-                    ? 'plus'
-                    : () => <WfoPlusCircleFill color={theme.colors.ghost} />
-            }
+            iconType={() => <WfoPlusCircleFill color={theme.colors.ghost} />}
             fullWidth={isProcess}
-            fill={!isProcess || isDarkThemeActive}
+            fill
         >
             {buttonText}
         </EuiButton>
@@ -113,6 +109,7 @@ export const WfoStartButtonComboBox = ({
 
     return (
         <EuiPopover
+            css={{ display: 'flex' }}
             initialFocus={`.euiSelectable .euiFieldSearch`}
             button={Button}
             isOpen={isPopoverOpen}

package/src/components/WfoStartButton/styles.ts

@@ -1,19 +1,19 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const selectableStyle = css({
         '.euiFieldSearch': {
-            backgroundColor: theme.colors.body,
-            color: theme.colors.text,
+            backgroundColor: theme.colors.backgroundBasePlain,
+            color: theme.colors.textParagraph,
             '&:focus': {
-                backgroundColor: theme.colors.emptyShade,
+                backgroundColor: theme.colors.backgroundBaseNeutral,
             },
         },
 
         '.euiSelectableList .euiSelectableListItem': {
-            borderColor: theme.colors.lightShade,
+            borderColor: theme.colors.borderBaseSubdued,
         },
     });
 

package/src/components/WfoSubscription/WfoSubscriptionActions/styles.ts

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 const EXPANDED_CONTENT_LEFT_MARGIN = '52px';
 
-export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
+export const getSubscriptionActionStyles = ({ theme }: WfoThemeHelpers) => {
     const clickableStyle = css({
         '&:hover, & :hover': {
             cursor: 'pointer',
@@ -33,7 +33,7 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
 
     const linkMenuItemStyle = css({
         '&>:hover': {
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
             borderRadius: theme.border.radius.medium,
             cursor: 'pointer',
         },

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
 
-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 iconStyle = css({
         width: 45,
         height: 45,
@@ -17,8 +16,8 @@ export const getStyles = (wfoTheme: WfoTheme) => {
     const iconOutsideCurrentSubscriptionStyle = css([
         iconStyle,
         {
-            backgroundColor: theme.colors.lightShade,
-            color: theme.colors.darkestShade,
+            backgroundColor: theme.colors.borderBaseSubdued,
+            color: theme.colors.textParagraph,
         },
     ]);
 
@@ -30,8 +29,8 @@ export const getStyles = (wfoTheme: WfoTheme) => {
     });
 
     const panelStyleOutsideCurrentSubscription = css({
-        backgroundColor: toSecondaryColor(theme.colors.emptyShade),
-        border: `dashed 1px ${theme.colors.lightShade}`,
+        backgroundColor: toSecondaryColor(theme.colors.backgroundBaseNeutral),
+        border: `dashed 1px ${theme.colors.borderBaseSubdued}`,
     });
 
     const rowStyle = css({
@@ -39,9 +38,9 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         flexDirection: 'row',
         alignItems: 'flex-start',
         padding: `${theme.base / 2}px 0`,
-        borderBottom: `solid 1px ${theme.colors.lightShade}`,
+        borderBottom: `solid 1px ${theme.colors.borderBaseSubdued}`,
         '&:first-child': {
-            borderTop: `solid 1px ${theme.colors.lightShade}`,
+            borderTop: `solid 1px ${theme.colors.borderBaseSubdued}`,
         },
         '&:last-child': {
             borderBottom: 'none',

package/src/components/WfoSubscription/WfoTargetTypeIcon.tsx

@@ -53,7 +53,7 @@ export const WfoTargetTypeIcon: FC<WfoTargetTypeIconProps> = ({
 }) => {
     const { theme } = useOrchestratorTheme();
     const backGroundColor = disabled
-        ? theme.colors.lightShade
+        ? theme.colors.borderBaseSubdued
         : getWorkflowTargetColor(target, theme);
     const targetLetter = getWorkflowTargetIconContent(target);
     return (
@@ -66,7 +66,9 @@ export const WfoInSyncCompactIcon: FC<WfoInSyncCompactIconProps> = ({
 }) => {
     const { theme } = useOrchestratorTheme();
 
-    const color = disabled ? theme.colors.lightShade : theme.colors.danger;
+    const color = disabled
+        ? theme.colors.borderBaseSubdued
+        : theme.colors.danger;
     const name = 'S';
     return <Icon targetLetter={name} backgroundColor={color} />;
 };

package/src/components/WfoSubscription/styles.ts

@@ -1,8 +1,11 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
+export const getSubscriptionDetailStyles = ({
+    theme,
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const productBlockTreeWidth = theme.base * 28;
 
     const labelCellStyle = css({
@@ -25,7 +28,9 @@ export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
     });
 
     const tableStyle = css({
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: isDarkModeActive
+            ? theme.colors.backgroundBasePlain
+            : theme.colors.backgroundBaseSubdued,
         width: '100%',
         borderRadius: theme.border.radius.medium,
         marginTop: theme.base / 2,
@@ -37,7 +42,7 @@ export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
     const workflowTargetStyle = css({ fontWeight: theme.font.weight.bold });
 
     const inUseByRelationDetailsStyle = css({
-        borderColor: theme.colors.lightShade,
+        borderColor: theme.colors.borderBaseSubdued,
         borderStyle: 'solid',
         borderWidth: 'thin',
         marginBottom: theme.base / 4,

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

@@ -94,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>
             ),
         },
@@ -173,7 +173,7 @@ export const WfoAdvancedTable = <T extends object>({
                         <EuiButtonIcon
                             onClick={() => setShowSearchModal(true)}
                             iconSize={'xl'}
-                            iconType={'iInCircle'}
+                            iconType={'info'}
                             aria-label={t('searchModalTitle')}
                         />
                     )}

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({