refactor(app): Update robot settings colors

app/src/molecules/WizardHeader/index.tsx

@@ -28,7 +28,7 @@ interface WizardHeaderProps {
 const EXIT_BUTTON_STYLE = css`
   ${TYPOGRAPHY.pSemiBold};
   text-transform: ${TYPOGRAPHY.textTransformCapitalize};
-  color: ${COLORS.grey50};
+  color: ${COLORS.grey60};
 
   &:hover {
     opacity: 70%;

app/src/molecules/WizardRequiredEquipmentList/index.tsx

@@ -99,7 +99,7 @@ export function WizardRequiredEquipmentList(
             <StyledText
               marginTop={SPACING.spacing8}
               as="label"
-              color={COLORS.grey50}
+              color={COLORS.grey60}
             >
               {footer}
             </StyledText>

app/src/organisms/Breadcrumbs/index.tsx

@@ -11,6 +11,7 @@ import {
   Icon,
   ALIGN_CENTER,
   ALIGN_FLEX_START,
+  BORDERS,
   COLORS,
   DIRECTION_ROW,
   SPACING,
@@ -40,7 +41,7 @@ function CrumbName({ crumbName, isLastCrumb }: CrumbNameProps): JSX.Element {
   return (
     <Flex
       alignItems={ALIGN_CENTER}
-      color={isLastCrumb ? COLORS.grey60 : COLORS.blue50}
+      color={isLastCrumb ? COLORS.grey50 : COLORS.blue50}
     >
       <Box
         paddingRight={SPACING.spacing4}
@@ -121,6 +122,7 @@ function BreadcrumbsComponent(): JSX.Element | null {
     <Flex
       alignItems={ALIGN_FLEX_START}
       backgroundColor={COLORS.white}
+      borderBottom={BORDERS.lineBorder}
       css={TYPOGRAPHY.labelRegular}
       flexDirection={DIRECTION_ROW}
       padding={`${SPACING.spacing4} 0 ${SPACING.spacing4} ${SPACING.spacing8}`}

app/src/organisms/CalibrationStatusCard/index.tsx

@@ -40,18 +40,21 @@ export function CalibrationStatusCard({
   let statusLabelBackgroundColor: string = COLORS.red30
   let statusLabelIconColor: string = COLORS.red60
   let statusLabelText = t('missing_calibration_data')
+  let statusLabelTextColor = COLORS.red60
 
   // if the tasklist is empty, though, all calibrations are good
   if (taskListStatus === 'complete') {
     statusLabelBackgroundColor = COLORS.green30
     statusLabelIconColor = COLORS.green60
     statusLabelText = t('calibration_complete')
+    statusLabelTextColor = COLORS.green60
     // if we have tasks and they are all marked bad, then we should
     // strongly suggest they re-do those calibrations
   } else if (taskListStatus === 'bad') {
     statusLabelBackgroundColor = COLORS.yellow30
     statusLabelIconColor = COLORS.yellow60
     statusLabelText = t('calibration_recommended')
+    statusLabelTextColor = COLORS.yellow60
   }
 
   return (
@@ -77,7 +80,7 @@ export function CalibrationStatusCard({
             status={statusLabelText}
             backgroundColor={statusLabelBackgroundColor}
             iconColor={statusLabelIconColor}
-            textColor={COLORS.black90}
+            textColor={statusLabelTextColor}
             fontWeight={TYPOGRAPHY.fontWeightSemiBold}
             iconSize="0.313rem"
           />

app/src/organisms/ChooseRobotSlideout/index.tsx

@@ -190,7 +190,7 @@ export function ChooseRobotSlideout(
             <Flex flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER}>
               <StyledText
                 as="p"
-                color={COLORS.grey50}
+                color={COLORS.grey60}
                 marginRight={SPACING.spacing12}
               >
                 {t('app_settings:searching')}
@@ -199,7 +199,7 @@ export function ChooseRobotSlideout(
                 name="ot-spinner"
                 spin
                 size="1.25rem"
-                color={COLORS.grey50}
+                color={COLORS.grey60}
               />
             </Flex>
           ) : (

app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx

@@ -73,7 +73,7 @@ export const AboutPipetteSlideout = (
         <StyledText
           as="h6"
           fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          color={COLORS.grey50}
+          color={COLORS.grey60}
           data-testid={`AboutPipetteSlideout_serial_number_text_${pipetteId}`}
         >
           {i18n.format(t('serial_number'), 'upperCase')}

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx

@@ -168,17 +168,17 @@ export function DeviceResetSlideout({
         <Flex
           flexDirection={DIRECTION_ROW}
           alignItems={ALIGN_CENTER}
-          backgroundColor={COLORS.yellow20}
+          backgroundColor={COLORS.yellow30}
           borderRadius={BORDERS.borderRadiusSize1}
           padding={SPACING.spacing8}
-          border={`1px solid ${COLORS.yellow50}`}
+          border={`1px solid ${COLORS.yellow60}`}
           marginBottom={SPACING.spacing24}
         >
           <Icon
             name="alert-circle"
             size="1rem"
             marginRight={SPACING.spacing8}
-            color={COLORS.yellow50}
+            color={COLORS.yellow60}
           />
           <StyledText as="p">{t('resets_cannot_be_undone')}</StyledText>
         </Flex>

app/src/organisms/LabwareDetails/ManufacturerDetails.tsx

@@ -28,7 +28,7 @@ export function ManufacturerDetails(
     brandName === 'all' || brandName === 'generic' ? t(brandName) : brandName
 
   return (
-    <Box backgroundColor={COLORS.grey10} padding={SPACING.spacing16}>
+    <Box backgroundColor={COLORS.grey20} padding={SPACING.spacing16}>
       <Flex
         flexDirection={DIRECTION_ROW}
         justifyContent={JUSTIFY_SPACE_BETWEEN}

app/src/organisms/LabwareDetails/index.tsx

@@ -160,7 +160,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element {
     <Slideout onCloseClick={props.onClose} title={slideoutHeader} isExpanded>
       <Gallery definition={definition} />
       <Box
-        backgroundColor={COLORS.grey10}
+        backgroundColor={COLORS.grey20}
         padding={SPACING.spacing16}
         marginBottom={SPACING.spacing24}
       >

app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx

@@ -62,7 +62,7 @@ export function RobotSettingsDeckCalibration({
         {t('deck_calibration_title')}
       </StyledText>
       <StyledText as="p">{t('deck_calibration_description')}</StyledText>
-      <StyledText as="label" color={COLORS.grey50}>
+      <StyledText as="label" color={COLORS.grey60}>
         {deckLastModified}
       </StyledText>
     </Flex>

app/src/pages/Devices/RobotSettings/index.tsx

@@ -103,7 +103,6 @@ export function RobotSettings(): JSX.Element | null {
     <Box minWidth={SIZE_6} height="max-content" padding={SPACING.spacing16}>
       <Flex
         backgroundColor={COLORS.white}
-        border={BORDERS.lineBorder}
         borderRadius={BORDERS.radiusSoftCorners}
         flexDirection={DIRECTION_COLUMN}
         marginBottom={SPACING.spacing16}

components/src/helix-design-system/colors.ts

@@ -61,7 +61,7 @@ export const blue10 = '#F1F8FF'
 export const grey60 = '#4A4C4E'
 export const grey55 = '#737578'
 export const grey50 = '#9C9C9C'
-export const grey40 = '#D0D0D0'
+export const grey40 = '#B7B8B9'
 export const grey35 = '#CBCCCC'
 export const grey30 = '#DEDEDE'
 export const grey20 = '#E9E9E9'