From d017d5ca19a23e5ab293645f1fbc8f93a586762a Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Fri, 16 Feb 2024 13:36:13 -0500
Subject: [PATCH 1/5] refactor(app): update slideout colors to match designs

---
 app/src/organisms/ChooseRobotSlideout/index.tsx             | 4 ++--
 .../organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx  | 2 +-
 .../AdvancedTabSlideouts/DeviceResetSlideout.tsx            | 6 +++---
 app/src/organisms/LabwareDetails/ManufacturerDetails.tsx    | 2 +-
 app/src/organisms/LabwareDetails/index.tsx                  | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx
index 40b5c7197dd..f9c9c37730c 100644
--- a/app/src/organisms/ChooseRobotSlideout/index.tsx
+++ b/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>
           ) : (
diff --git a/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx b/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx
index 1f592e1f2d3..c1fefbcb0d6 100644
--- a/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx
+++ b/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')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx
index 9973123e4c4..e176628cabd 100644
--- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx
+++ b/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>
diff --git a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx b/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx
index 09bb752ffc9..8744448a2e0 100644
--- a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx
+++ b/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}
diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx
index bf7b762961e..69003aef448 100644
--- a/app/src/organisms/LabwareDetails/index.tsx
+++ b/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}
       >

From 8bea0d976201aaef34d4e1517c94fd7f76ed0f13 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Fri, 16 Feb 2024 14:05:46 -0500
Subject: [PATCH 2/5] refactor(app): update robot setting page colors to match
 designs

---
 app/src/organisms/CalibrationStatusCard/index.tsx            | 5 ++++-
 .../RobotSettingsDeckCalibration.tsx                         | 2 +-
 app/src/pages/Devices/RobotSettings/index.tsx                | 1 -
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/organisms/CalibrationStatusCard/index.tsx b/app/src/organisms/CalibrationStatusCard/index.tsx
index bbedf033ff5..29e15b64510 100644
--- a/app/src/organisms/CalibrationStatusCard/index.tsx
+++ b/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"
           />
diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx
index 865556535ec..e8cbd89c5af 100644
--- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx
+++ b/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>
diff --git a/app/src/pages/Devices/RobotSettings/index.tsx b/app/src/pages/Devices/RobotSettings/index.tsx
index 9d21f8b3d4e..e8e01df97ef 100644
--- a/app/src/pages/Devices/RobotSettings/index.tsx
+++ b/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}

From a92fb772b787a576f765805dac35a7b0043eba85 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Fri, 16 Feb 2024 14:06:10 -0500
Subject: [PATCH 3/5] refactor(app): update wizard colors to match designs

---
 app/src/molecules/WizardHeader/index.tsx                | 2 +-
 app/src/molecules/WizardRequiredEquipmentList/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/molecules/WizardHeader/index.tsx b/app/src/molecules/WizardHeader/index.tsx
index a4d48e2db5c..d20dddb6767 100644
--- a/app/src/molecules/WizardHeader/index.tsx
+++ b/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%;
diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
index d069b64a536..94308b5dc0f 100644
--- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx
+++ b/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>

From 156c02ec4e1f6279ec455f94b6ebc0532cb64b4a Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Fri, 16 Feb 2024 14:17:44 -0500
Subject: [PATCH 4/5] refactor(app): update breadcrumbs to match designs

---
 app/src/organisms/Breadcrumbs/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/organisms/Breadcrumbs/index.tsx b/app/src/organisms/Breadcrumbs/index.tsx
index 2f25ea12fbf..55a15dc5f83 100644
--- a/app/src/organisms/Breadcrumbs/index.tsx
+++ b/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}`}

From 9464b894616bb270b7be38f71b2671d182be849f Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Fri, 16 Feb 2024 15:22:47 -0500
Subject: [PATCH 5/5] grey40 is #B7B8B9

---
 components/src/helix-design-system/colors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/helix-design-system/colors.ts b/components/src/helix-design-system/colors.ts
index 348ab87626e..0b7c0ba1ce6 100644
--- a/components/src/helix-design-system/colors.ts
+++ b/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'