refactor(app): Update protocol page colors to helix designs (#14534)

Closes RAUT-987, RQA-2356, RAUT-988, RAUT-973, RAUT-980, and RAUT-981
Opentrons · Feb 21, 2024 · 4e42317 · 4e42317
1 parent f30f52a
commit 4e42317
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 40 deletions.
diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx
@@ -16,7 +16,7 @@ export const InstrumentContainer = (
 
   return (
     <Flex
-      backgroundColor={COLORS.grey20}
+      backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
       borderRadius={BORDERS.radiusSoftCorners}
       paddingX={SPACING.spacing8}
       paddingY={SPACING.spacing2}

diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
@@ -6,7 +6,7 @@ import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
-  color: ${COLORS.grey60};
+  color: ${COLORS.grey50};
 
   &:hover {
     color: ${COLORS.grey55};
@@ -17,7 +17,7 @@ const TOGGLE_DISABLED_STYLES = css`
   }
 
   &:disabled {
-    color: ${COLORS.grey40};
+    color: ${COLORS.grey30};
   }
 `
 
@@ -33,7 +33,7 @@ const TOGGLE_ENABLED_STYLES = css`
   }
 
   &:disabled {
-    color: ${COLORS.grey40};
+    color: ${COLORS.grey30};
   }
 `
 

diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -57,7 +57,7 @@ describe('ToggleButton', () => {
     props.disabled = true
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyleRule('color', `${String(COLORS.grey40)}`, {
+    expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, {
       modifier: ':disabled',
     })
   })
@@ -73,7 +73,7 @@ describe('ToggleButton', () => {
     props.toggledOn = false
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyle(`color: ${String(COLORS.grey60)}`)
+    expect(button).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     expect(button).toHaveStyle(`height: ${String(SIZE_2)}`)
     expect(button).toHaveStyle(`width: ${String(SIZE_2)}`)
     expect(button).toHaveAttribute('aria-checked', 'false')
@@ -106,7 +106,7 @@ describe('ToggleButton', () => {
     props.disabled = true
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyleRule('color', `${String(COLORS.grey40)}`, {
+    expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, {
       modifier: ':disabled',
     })
   })

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -120,7 +120,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element {
     border: 1px solid ${COLORS.white};
     &:hover {
       cursor: pointer;
-      ${BORDERS.cardOutlineBorder}
+      border: 1px solid ${COLORS.grey30};
     }
   `
   const handleSetOpenItem = (): void => {

diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
@@ -186,7 +186,7 @@ export const BeforeBeginning = (
 
 const UNSELECTED_OPTIONS_STYLE = css`
   background-color: ${COLORS.white};
-  border: 1px solid ${COLORS.grey20};
+  border: 1px solid ${COLORS.grey30};
   border-radius: ${BORDERS.radiusSoftCorners};
   height: 12.5625rem;
   width: 14.5625rem;
@@ -197,7 +197,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
   grid-gap: ${SPACING.spacing8};
 
   &:hover {
-    border: 1px solid ${COLORS.grey30};
+    border: 1px solid ${COLORS.grey35};
   }
 
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {

diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
@@ -74,7 +74,7 @@ export const ProtocolLiquidsDetails = (
           flexDirection={DIRECTION_COLUMN}
         >
           <Icon
-            color={COLORS.grey30}
+            color={COLORS.grey50}
             alignSelf={ALIGN_CENTER}
             size="1.25rem"
             name="ot-alert"

diff --git a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
@@ -155,7 +155,7 @@ export const RobotConfigurationDetails = (
                     moduleType={getModuleType(module.params.model)}
                     marginRight={SPACING.spacing4}
                     alignSelf={ALIGN_CENTER}
-                    color={COLORS.grey60}
+                    color={COLORS.grey50}
                     height={SIZE_1}
                     minWidth={SIZE_1}
                     minHeight={SIZE_1}
@@ -208,7 +208,7 @@ export const RobotConfigurationDetailsItem = (
         flex="0 0 auto"
         fontWeight={TYPOGRAPHY.fontWeightSemiBold}
         marginRight={SPACING.spacing16}
-        color={COLORS.grey50}
+        color={COLORS.grey60}
         textTransform={TYPOGRAPHY.textTransformCapitalize}
         width="4.625rem"
       >

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -425,7 +425,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_creationMethod"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('creation_method')}
                   </StyledText>
                   <StyledText as="p">
@@ -438,7 +438,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastUpdated"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('last_updated')}
                   </StyledText>
                   <StyledText as="p">
@@ -451,7 +451,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastAnalyzed"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('last_analyzed')}
                   </StyledText>
                   <StyledText as="p">
@@ -481,7 +481,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_author"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('org_or_author')}
                   </StyledText>
                   <StyledText
@@ -498,7 +498,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_description"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('description')}
                   </StyledText>
                   {analysisStatus === 'loading' ? (
@@ -567,7 +567,7 @@ export function ProtocolDetails(
                     color={
                       analysisStatus !== 'complete'
                         ? COLORS.grey40
-                        : COLORS.grey50
+                        : COLORS.grey60
                     }
                   />
                 </Btn>

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -168,8 +168,22 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
       >
         {
           {
-            missing: <Icon name="ot-spinner" spin size={SIZE_3} />,
-            loading: <Icon name="ot-spinner" spin size={SIZE_3} />,
+            missing: (
+              <Icon
+                name="ot-spinner"
+                color={COLORS.grey60}
+                spin
+                size={SIZE_3}
+              />
+            ),
+            loading: (
+              <Icon
+                name="ot-spinner"
+                color={COLORS.grey60}
+                spin
+                size={SIZE_3}
+              />
+            ),
             error: <Box size="6rem" backgroundColor={COLORS.grey30} />,
             stale: <Box size="6rem" backgroundColor={COLORS.grey30} />,
             complete:
@@ -208,7 +222,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
         </Flex>
         {/* data section */}
         {analysisStatus === 'loading' ? (
-          <StyledText as="p" flex="1" color={COLORS.grey50}>
+          <StyledText as="p" flex="1" color={COLORS.grey60}>
             {t('loading_data')}
           </StyledText>
         ) : (
@@ -303,7 +317,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
               justifyContent={JUSTIFY_FLEX_END}
               data-testid={`ProtocolCard_date_${protocolDisplayName}`}
             >
-              <StyledText as="label" color={COLORS.grey50}>
+              <StyledText as="label" color={COLORS.grey60}>
                 {`${t('updated')} ${format(
                   new Date(modified),
                   'M/d/yy HH:mm'

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
@@ -42,7 +42,7 @@ const SORT_BY_BUTTON_STYLE = css`
   background-color: ${COLORS.transparent};
   cursor: pointer;
   &:hover {
-    background-color: ${COLORS.grey60};
+    background-color: ${COLORS.grey30};
   }
   &:active,
   &:focus {
@@ -161,7 +161,7 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
             <StyledText
               as="p"
               fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-              color={COLORS.grey50}
+              color={COLORS.grey60}
             >
               {t('shared:sort_by')}
             </StyledText>

diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx
@@ -95,9 +95,8 @@ export const RunPreviewComponent = (
       >
         {(command, index) => {
           const isCurrent = index === currentRunCommandIndex
-          const borderColor = isCurrent ? COLORS.blue50 : COLORS.transparent
-          const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey10
-          const contentColor = isCurrent ? COLORS.blue60 : COLORS.grey50
+          const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey20
+          const iconColor = isCurrent ? COLORS.blue60 : COLORS.grey50
           return (
             <Flex
               key={command.id}
@@ -114,9 +113,6 @@ export const RunPreviewComponent = (
                 flexDirection={DIRECTION_COLUMN}
                 gridGap={SPACING.spacing4}
                 width="100%"
-                border={`solid 1px ${
-                  index === jumpedIndex ? COLORS.purple40 : borderColor
-                }`}
                 backgroundColor={
                   index === jumpedIndex ? '#F5E3FF' : backgroundColor
                 }
@@ -129,12 +125,12 @@ export const RunPreviewComponent = (
                 `}
               >
                 <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
-                  <CommandIcon command={command} color={contentColor} />
+                  <CommandIcon command={command} color={iconColor} />
                   <CommandText
                     command={command}
                     robotSideAnalysis={robotSideAnalysis}
                     robotType={robotType}
-                    color={contentColor}
+                    color={COLORS.black90}
                   />
                 </Flex>
               </Flex>

diff --git a/app/src/organisms/RunProgressMeter/index.tsx b/app/src/organisms/RunProgressMeter/index.tsx
@@ -230,7 +230,11 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
             textTransform={TYPOGRAPHY.textTransformCapitalize}
             onClick={onDownloadClick}
           >
-            <Flex gridGap={SPACING.spacing2} alignItems={ALIGN_CENTER}>
+            <Flex
+              gridGap={SPACING.spacing2}
+              alignItems={ALIGN_CENTER}
+              color={COLORS.grey60}
+            >
               <Icon name="download" size={SIZE_1} />
               {t('download_run_log')}
             </Flex>
@@ -259,7 +263,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
             `}
             innerStyles={css`
               height: 0.375rem;
-              background-color: ${COLORS.grey50};
+              background-color: ${COLORS.grey60};
               border-radius: ${BORDERS.radiusSoftCorners};
             `}
           >

diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx
@@ -218,7 +218,11 @@ function SubTask({
       backgroundColor={isActiveSubTask ? COLORS.blue10 : COLORS.white}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       padding={SPACING.spacing16}
-      border={isActiveSubTask ? BORDERS.activeLineBorder : TASK_CONNECTOR_STYLE}
+      border={
+        isActiveSubTask
+          ? BORDERS.activeLineBorder
+          : `1px solid ${COLORS.grey30}`
+      }
       borderRadius={BORDERS.radiusSoftCorners}
       gridGap={SPACING.spacing24}
       width="100%"

diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx
@@ -13,7 +13,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
 })<SecondaryButtonProps>`
   appearance: none;
   cursor: pointer;
-  color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue50)};
+  color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue50)};
   border: ${BORDERS.lineBorder};
   border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')};
   border-radius: ${BORDERS.radiusSoftCorners};
@@ -28,7 +28,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   }
 
   &:hover {
-    color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue60)};
+    color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue60)};
     border-color: ${props =>
       props.isDangerous ? COLORS.red50 : COLORS.blue55};
     box-shadow: 0 0 0;
@@ -45,7 +45,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
     box-shadow: none;
     color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue55)};
     border-color: ${props =>
-      props.isDangerous ? COLORS.red50 : COLORS.blue55};
+      props.isDangerous ? COLORS.red60 : COLORS.blue55};
   }
 
   &:disabled,

diff --git a/components/src/helix-design-system/colors.ts b/components/src/helix-design-system/colors.ts
@@ -59,7 +59,7 @@ export const blue10 = '#F1F8FF'
  * grey
  */
 export const grey60 = '#4A4C4E'
-export const grey55 = '#737578'
+export const grey55 = '#626467'
 export const grey50 = '#737578'
 export const grey40 = '#B7B8B9'
 export const grey35 = '#CBCCCC'