@pega/cosmos-react-work 10.0.0-build.4.8 → 10.0.0-build.5.0

package/lib/components/CaseView/CaseView.styles.js

@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
-import { getContrast, hideVisually, mix, rgba, transparentize } from 'polished';
+import { hideVisually, mix, rgba, transparentize } from 'polished';
 import { useContext } from 'react';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, resolveSupplementalColor, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledInlineFieldValueRow, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem, StyledProgressBackdrop, Image, Icon, animations, useDirection } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, resolveSupplementalColor, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledInlineFieldValueRow, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, StyledCard, Text, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, resolveContrastColor, meetsMinContrast, StyledSummaryListItem, StyledProgressBackdrop, Image, Icon, animations, useDirection } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledAllTabsWrapper, StyledTabs, StylesAllTabsButtonWrapper } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
-import { resizeDrawerMinWidth, resizeDrawerMaxWidth, resizeDrawerDefaultWidth, wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';
+import { resizeDrawerMinWidth, resizeDrawerMaxWidth, resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
 import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
 import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
@@ -36,24 +36,35 @@ const getCaseTypeHeaderColors = (theme, color) => {
         ? mixCaseColorWithBackground(resolvedCaseTypeColor, theme.components.card.background)
         : theme.components['case-view'].header.background;
     const headerForeground = resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'
-        ? readableColor(headerBackground)
-        : calculateForegroundColor(headerBackground, theme.components['case-view'].header['foreground-color']);
+        ? resolveContrastColor({
+            background: headerBackground,
+            theme
+        })
+        : calculateForegroundColor(headerBackground, theme.components['case-view'].header['foreground-color'], theme);
     return { caseTypeColor: resolvedCaseTypeColor ?? undefined, headerBackground, headerForeground };
 };
 const getCaseViewColors = (theme, caseTypeColor) => {
     const interactive = theme.base.palette.interactive;
+    const minContrast = theme.base['min-contrast'];
     const caseTypeHeaderColors = getCaseTypeHeaderColors(theme, caseTypeColor);
     const headerBackground = caseTypeHeaderColors.headerBackground;
     const foregroundColor = caseTypeHeaderColors.headerForeground;
     const isGradientBackground = !isSolidColor(headerBackground);
     const elementBackground = isGradientBackground
-        ? readableColor(foregroundColor)
+        ? resolveContrastColor({
+            background: foregroundColor,
+            theme
+        })
         : headerBackground;
-    const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;
+    const interactiveUsable = meetsMinContrast(interactive, elementBackground, minContrast);
     const interactiveColor = !isGradientBackground && interactiveUsable ? interactive : foregroundColor;
     let hoverBackground = rgba(interactiveColor, 0.15);
     if (!isGradientBackground && interactiveUsable) {
-        hoverBackground = readableHue(interactive, interactiveColor);
+        hoverBackground = resolveContrastColor({
+            background: interactiveColor,
+            foreground: interactive,
+            theme
+        });
     }
     return {
         caseTypeColor: caseTypeHeaderColors.caseTypeColor,
@@ -290,7 +301,10 @@ export const StyledCaseHeaderText = styled.div(({ theme }) => {
 StyledCaseHeaderText.defaultProps = defaultThemeProp;
 export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
     const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
-    const color = readableColor(primary);
+    const color = resolveContrastColor({
+        background: primary,
+        theme
+    });
     const transparentColor = tryCatch(() => transparentize(0.5, color));
     return css `
     ${hasItems &&
@@ -604,124 +618,125 @@ export const StyledBannersStagesTasksContainer = styled.div(() => {
     }
   `;
 });
-export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-line': borderLine }, spacing, 'border-radius': borderRadius, breakpoints }, components: { 'case-view': { assignments: { detached: assignmentDetached, background: assignmentBackground, 'foreground-color': assignmentForegroundColor } }, tabs: { detached: tabsDetached }, card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius } } } }) => {
-    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
-    const foregroundColorForAssignment = calculateForegroundColor(assignmentBackground, assignmentForegroundColor);
+export const StyledWorkArea = styled.div(({ theme }) => {
+    const { base: { palette: { 'border-line': borderLine }, spacing, 'border-radius': borderRadius, breakpoints }, components: { 'case-view': { assignments: { detached: assignmentDetached, background: assignmentBackground, 'foreground-color': assignmentForegroundColor } }, tabs: { detached: tabsDetached }, card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius } } } = theme;
+    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor, theme);
+    const foregroundColorForAssignment = calculateForegroundColor(assignmentBackground, assignmentForegroundColor, theme);
     const { summaryExpanded, aboveMD, intelligentGuidance, isPreview } = useCaseViewContext();
     let pbeRem = 0;
     if (intelligentGuidance) {
         pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
     }
     return css `
-      grid-area: work-area;
-      margin-block: calc(2 * ${spacing});
-      padding-inline: calc(2 * ${spacing});
-      @media (width < ${breakpoints.sm}) {
-        padding-inline: calc(0.75 * ${spacing});
-      }
+    grid-area: work-area;
+    margin-block: calc(2 * ${spacing});
+    padding-inline: calc(2 * ${spacing});
+    @media (width < ${breakpoints.sm}) {
+      padding-inline: calc(0.75 * ${spacing});
+    }
 
-      /* Prevents unnecessary gap when case view has neither stages nor assignments */
-      &:has(> ${StyledBannersStagesTasksContainer} > ${StyledTasks}:first-child:empty) {
-        ${StyledBannersStagesTasksContainer} {
-          display: none;
-        }
+    /* Prevents unnecessary gap when case view has neither stages nor assignments */
+    &:has(> ${StyledBannersStagesTasksContainer} > ${StyledTasks}:first-child:empty) {
+      ${StyledBannersStagesTasksContainer} {
+        display: none;
       }
+    }
 
-      ${aboveMD &&
+    ${aboveMD &&
         css `
-        padding-inline: 0;
+      padding-inline: 0;
 
-        /* This is required to make scrollStick work. */
-        ${!isPreview &&
+      /* This is required to make scrollStick work. */
+      ${!isPreview &&
             css `
-          height: max-content;
-        `}
+        height: max-content;
+      `}
 
-        ${!summaryExpanded &&
+      ${!summaryExpanded &&
             css `
-          margin-inline-start: calc(2 * ${spacing});
-        `}
+        margin-inline-start: calc(2 * ${spacing});
       `}
-      /* Order of style here is necessary for overriding styles above. */
+    `}
+    /* Order of style here is necessary for overriding styles above. */
       ${pbeRem > 0 &&
         css `
-        /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
-        padding-block-end: ${pbeRem}rem;
-      `}
+      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
+      padding-block-end: ${pbeRem}rem;
+    `}
       &:has(${StyledAssignments}),
       &:has(${StyledHierarchicalAssignments}) {
-        ${StyledStagesWrapper} {
-          --stages-wrapper-bottom-radius: 0;
-        }
+      ${StyledStagesWrapper} {
+        --stages-wrapper-bottom-radius: 0;
+      }
 
-        ${StyledStages} {
-          border-block-end: 0.0625rem solid ${borderLine};
+      ${StyledStages} {
+        border-block-end: 0.0625rem solid ${borderLine};
 
-          &,
-          ${StyledStageContainer}:nth-of-type(2) > ${StyledStage} {
-            border-end-start-radius: 0;
-          }
+        &,
+        ${StyledStageContainer}:nth-of-type(2) > ${StyledStage} {
+          border-end-start-radius: 0;
+        }
 
-          &,
-          ${StyledStageContainer}:nth-last-of-type(2) > ${StyledStage} {
-            border-end-end-radius: 0;
-          }
+        &,
+        ${StyledStageContainer}:nth-last-of-type(2) > ${StyledStage} {
+          border-end-end-radius: 0;
         }
       }
+    }
 
-      ${tabsDetached &&
+    ${tabsDetached &&
         css `
-        ${StyledAllTabsWrapper} {
-          border-start-start-radius: ${cardBorderRadius};
-          border-start-end-radius: ${cardBorderRadius};
+      ${StyledAllTabsWrapper} {
+        border-start-start-radius: ${cardBorderRadius};
+        border-start-end-radius: ${cardBorderRadius};
 
-          ${StyledTabs} {
-            border-radius: unset;
-            border-start-end-radius: inherit;
-          }
+        ${StyledTabs} {
+          border-radius: unset;
+          border-start-end-radius: inherit;
+        }
 
-          ${StylesAllTabsButtonWrapper}, ${StyledMenuButton} {
-            border-start-start-radius: inherit;
-          }
+        ${StylesAllTabsButtonWrapper}, ${StyledMenuButton} {
+          border-start-start-radius: inherit;
         }
-      `}
+      }
+    `}
 
-      /* Ensure horizontal tabs stay above sliding tab content */
+    /* Ensure horizontal tabs stay above sliding tab content */
       ${StyledTabs}[aria-orientation='horizontal'],
       ${StyledAllTabsWrapper} {
-        z-index: 1;
+      z-index: 1;
+    }
+
+    &:has(${StyledStages}) {
+      ${StyledCard}${StyledAssignments},
+      ${StyledCard}${StyledHierarchicalAssignments} {
+        margin-block-start: calc(-2 * ${spacing});
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
       }
 
-      &:has(${StyledStages}) {
+      &:has(${StyledCard}${StyledAssignments} > ${StyledCardHeader}),
+      &:has(${StyledCard}${StyledHierarchicalAssignments} > ${StyledCardHeader}) {
         ${StyledCard}${StyledAssignments},
         ${StyledCard}${StyledHierarchicalAssignments} {
-          margin-block-start: calc(-2 * ${spacing});
-          border-start-start-radius: 0;
-          border-start-end-radius: 0;
-        }
-
-        &:has(${StyledCard}${StyledAssignments} > ${StyledCardHeader}),
-        &:has(${StyledCard}${StyledHierarchicalAssignments} > ${StyledCardHeader}) {
-          ${StyledCard}${StyledAssignments},
-          ${StyledCard}${StyledHierarchicalAssignments} {
-            background: ${assignmentBackground};
-            color: ${foregroundColorForAssignment};
-            ${assignmentDetached &&
+          background: ${assignmentBackground};
+          color: ${foregroundColorForAssignment};
+          ${assignmentDetached &&
         css `
-              ${StyledTaskList} {
-                background-color: ${backgroundColor};
-                border: solid 0.0625rem ${borderLine};
-                border-radius: var(--border-radius, ${borderRadius});
-
-                ${StyledSummaryListItem} {
-                  padding: calc(${spacing} / 2) ${spacing};
-                }
+            ${StyledTaskList} {
+              background-color: ${backgroundColor};
+              border: solid 0.0625rem ${borderLine};
+              border-radius: var(--border-radius, ${borderRadius});
+
+              ${StyledSummaryListItem} {
+                padding: calc(${spacing} / 2) ${spacing};
               }
-            `}
-          }
+            }
+          `}
         }
       }
-    `;
+    }
+  `;
 });
 StyledWorkArea.defaultProps = defaultThemeProp;
 export const StyledUtilitiesHeading = styled(Text) ``;
@@ -861,8 +876,8 @@ export const StyledPersistentUtility = styled.div(({ theme, persistentUtilityExp
       overflow: auto;
       position: sticky;
       z-index: 1;
-      height: var(--case-view-height);
-      inset-block-start: var(--top-offset);
+      height: calc(var(--case-view-height) - var(--summary-height, 0rem));
+      inset-block-start: calc(var(--top-offset) + var(--summary-height, 0rem));
       inset-block-end: var(--appshell-bottom-offset, 0);
       padding-block: calc(2 * ${theme.base.spacing});
     `;
@@ -888,74 +903,75 @@ export const ScrollStick = styled.div `
   position: sticky;
   top: 0;
 `;
-export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-background': appBackground }, spacing, 'border-radius': borderRadius }, components: { 'case-view': { utilities: { detached: utilitiesDetached, background: utilitiesBackground, 'foreground-color': utilitiesForegroundColor }, summary: { detached: summaryDetached } } } } }) => {
-    const utilitiesForegroundComputed = calculateForegroundColor(utilitiesBackground, utilitiesForegroundColor);
+export const StyledCaseView = styled.div(({ theme }) => {
+    const { base: { palette: { 'app-background': appBackground }, spacing, 'border-radius': borderRadius }, components: { 'case-view': { utilities: { detached: utilitiesDetached, background: utilitiesBackground, 'foreground-color': utilitiesForegroundColor }, summary: { detached: summaryDetached } } } } = theme;
+    const utilitiesForegroundComputed = calculateForegroundColor(utilitiesBackground, utilitiesForegroundColor, theme);
     const { aboveSM, aboveMD, isPreview, summaryExpanded } = useCaseViewContext();
     return css `
-      --top-offset: calc(
-        ${summaryExpanded ? 'var(--summary-height)' : '0rem'} + var(--appshell-top-offset, 0rem)
-      );
-      --case-view-height: calc(100dvh - var(--top-offset) - var(--appshell-bottom-offset, 0rem));
-      position: relative;
-      min-height: var(--case-view-height);
-      background: ${appBackground};
+    --top-offset: calc(
+      ${summaryExpanded ? 'var(--summary-height)' : '0rem'} + var(--appshell-top-offset, 0rem)
+    );
+    --case-view-height: calc(100dvh - var(--top-offset) - var(--appshell-bottom-offset, 0rem));
+    position: relative;
+    min-height: var(--case-view-height);
+    background: ${appBackground};
 
-      ${aboveMD &&
+    ${aboveMD &&
         css `
-        ${StyledUtilities}:last-child {
-          margin-inline-end: calc(2 * ${spacing});
-          color: ${utilitiesForegroundComputed};
+      ${StyledUtilities}:last-child {
+        margin-inline-end: calc(2 * ${spacing});
+        color: ${utilitiesForegroundComputed};
 
-          ${!utilitiesDetached &&
+        ${!utilitiesDetached &&
             css `
-            background: ${utilitiesBackground};
-            margin-inline-end: 0;
-            padding: calc(2 * ${spacing});
-            padding-inline-end: 0;
-            border-start-start-radius: ${borderRadius};
-            border-end-start-radius: ${borderRadius};
+          background: ${utilitiesBackground};
+          margin-inline-end: 0;
+          padding: calc(2 * ${spacing});
+          padding-inline-end: 0;
+          border-start-start-radius: ${borderRadius};
+          border-end-start-radius: ${borderRadius};
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+
+          ${StyledCard},
+          ${StyledGenAICoachContainer} {
             border-start-end-radius: 0;
             border-end-end-radius: 0;
+          }
 
-            ${StyledCard},
-            ${StyledGenAICoachContainer} {
-              border-start-end-radius: 0;
-              border-end-end-radius: 0;
-            }
-
-            ${StyledGenAICoachContainer} {
-              inset-inline-end: 0;
-            }
-          `}
-        }
-      `}
+          ${StyledGenAICoachContainer} {
+            inset-inline-end: 0;
+          }
+        `}
+      }
+    `}
 
-      ${aboveSM &&
+    ${aboveSM &&
         summaryDetached &&
         !isPreview &&
         css `
-        &:not(:has(${StyledUtilities})) {
-          ${StyledSummary} {
-            padding-inline-end: calc(2 * ${spacing});
-          }
+      &:not(:has(${StyledUtilities})) {
+        ${StyledSummary} {
+          padding-inline-end: calc(2 * ${spacing});
+        }
 
-          ${StyledCaseHeader} {
-            border-end-end-radius: ${borderRadius};
-          }
+        ${StyledCaseHeader} {
+          border-end-end-radius: ${borderRadius};
         }
-      `}
+      }
+    `}
 
       ${!aboveMD &&
         css `
-        ${StyledGenAICoachContainer} {
-          height: 42.5rem;
+      ${StyledGenAICoachContainer} {
+        height: 42.5rem;
 
-          ${StyledInitialMessageContainer} {
-            justify-content: center;
-          }
+        ${StyledInitialMessageContainer} {
+          justify-content: center;
         }
-      `}
-    `;
+      }
+    `}
+  `;
 });
 StyledCaseView.defaultProps = defaultThemeProp;
 export const StyledUtilitiesHeader = styled(Text) `