grey typefixes

Opentrons · Jan 11, 2024 · bae62d7 · bae62d7
1 parent dcd4cd8
commit bae62d7
Show file tree

Hide file tree

Showing 163 changed files with 356 additions and 354 deletions.
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -19,7 +19,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, queryByLabelText }] = render(props)
     const chip = getByTestId('Chip_basic')
     const chipText = getByText('mockBasic')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.darkBlack20}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
   })
@@ -94,7 +94,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_neutral')
     const chipText = getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.darkBlack20}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = getByLabelText('icon_mockNeutral')

diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
@@ -39,7 +39,7 @@ const CHIP_PROPS_BY_TYPE: Record<
   }
 > = {
   basic: {
-    backgroundColor: COLORS.darkBlack20,
+    backgroundColor: COLORS.grey35,
     borderRadius: BORDERS.borderRadiusSize1,
     textColor: COLORS.grey60,
   },
@@ -50,7 +50,7 @@ const CHIP_PROPS_BY_TYPE: Record<
     textColor: COLORS.red1,
   },
   neutral: {
-    backgroundColor: COLORS.darkBlack20,
+    backgroundColor: COLORS.grey35,
     borderRadius: BORDERS.borderRadiusSize5,
     iconColor: COLORS.grey60,
     textColor: COLORS.grey60,

diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
@@ -47,7 +47,7 @@ const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
   neutral: {
     icon: { name: 'information' },
     backgroundColor: COLORS.grey35,
-    color: COLORS.darkBlackEnabled,
+    color: COLORS.black90,
   },
   success: {
     icon: { name: 'ot-check' },

diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
@@ -40,7 +40,7 @@ const CAPITALIZE_FIRST_LETTER_STYLE = css`
 `
 const GO_BACK_BUTTON_STYLE = css`
   ${TYPOGRAPHY.pSemiBold};
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
 
   &:hover {
     opacity: 70%;

diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx
@@ -49,7 +49,7 @@ const MODAL_STYLE = css`
   }
 `
 const SPINNER_STYLE = css`
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
   opacity: 100%;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     color: ${COLORS.darkBlackEnabled};

diff --git a/app/src/molecules/InfoMessage/index.tsx b/app/src/molecules/InfoMessage/index.tsx
@@ -23,7 +23,7 @@ export interface InfoMessageProps {
 export function InfoMessage({ title, body }: InfoMessageProps): JSX.Element {
   return (
     <Flex
-      backgroundColor={COLORS.grey35}
+      backgroundColor={COLORS.grey10}
       flexDirection={DIRECTION_ROW}
       alignItems={body != null ? ALIGN_FLEX_START : ALIGN_CENTER}
       borderRadius={BORDERS.radiusSoftCorners}
@@ -32,7 +32,7 @@ export function InfoMessage({ title, body }: InfoMessageProps): JSX.Element {
       data-testid={`InfoMessage_${title}`}
     >
       <Icon
-        color={COLORS.grey50Enabled}
+        color={COLORS.grey50}
         name="information"
         aria-label="icon_information"
         size={SIZE_1}

diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
@@ -61,7 +61,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
   return (
     <Flex
       alignItems={ALIGN_FLEX_START}
-      backgroundColor={COLORS.grey35}
+      backgroundColor={COLORS.grey10}
       borderRadius={BORDERS.radiusSoftCorners}
       gridGap={SPACING.spacing8}
       padding={SPACING.spacing16}
@@ -97,7 +97,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
         {banner}
         <StyledText
           textTransform={TYPOGRAPHY.textTransformUppercase}
-          color={COLORS.grey50Enabled}
+          color={COLORS.grey50}
           fontWeight={TYPOGRAPHY.fontWeightSemiBold}
           fontSize={TYPOGRAPHY.fontSizeH6}
         >

diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx
@@ -17,7 +17,7 @@ interface ControlContainerProps extends StyleProps {
 }
 
 const CONTROL_CHILDREN_STYLES = css`
-  background-color: ${COLORS.grey35};
+  background-color: ${COLORS.grey10};
   border-radius: ${BORDERS.radiusSoftCorners};
   padding: ${SPACING.spacing16};
   width: 100%;

diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx
@@ -186,7 +186,7 @@ const DEFAULT_BUTTON_STYLE = css`
     background-color: ${COLORS.white};
     color: ${COLORS.black};
     box-shadow: 0 0 0;
-    border: 1px ${COLORS.grey35} solid;
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:active {
@@ -266,7 +266,7 @@ export function DirectionControl(props: DirectionControlProps): JSX.Element {
                   <StyledText
                     textAlign={TEXT_ALIGN_LEFT}
                     alignSelf={ALIGN_STRETCH}
-                    color={COLORS.grey50Enabled}
+                    color={COLORS.grey50}
                     css={TYPOGRAPHY.labelRegular}
                   >
                     {subtitle}
@@ -330,7 +330,7 @@ const ARROW_GRID_STYLES = css`
   }
 `
 const ARROW_BUTTON_STYLES = css`
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
   background-color: ${COLORS.white};
 
   border: ${BORDERS.lineBorder};
@@ -344,13 +344,13 @@ const ARROW_BUTTON_STYLES = css`
     background-color: ${COLORS.white};
     color: ${COLORS.grey55};
     box-shadow: 0 0 0;
-    border: 1px ${COLORS.grey35} solid;
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:active {
     background-color: ${COLORS.white};
     color: ${COLORS.grey60};
-    border: 1px ${COLORS.grey35} solid;
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:focus {
@@ -359,7 +359,7 @@ const ARROW_BUTTON_STYLES = css`
 
   &:disabled {
     background-color: ${COLORS.white};
-    color: ${COLORS.grey50Disabled};
+    color: ${COLORS.grey30};
   }
 
   @media (max-width: 750px) {
@@ -369,13 +369,13 @@ const ARROW_BUTTON_STYLES = css`
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     width: 125px;
     height: 125px;
-    background-color: ${COLORS.light1};
-    color: ${COLORS.darkBlackEnabled};
+    background-color: ${COLORS.grey35};
+    color: ${COLORS.black90};
     border-radius: ${BORDERS.borderRadiusSize4};
 
     &:hover {
       background-color: ${COLORS.grey40};
-      color: ${COLORS.darkBlackHover};
+      color: ${COLORS.black80};
       border: 1px ${COLORS.transparent} solid;
     }
 

diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx
@@ -60,7 +60,7 @@ const DEFAULT_BUTTON_STYLE = css`
     background-color: ${COLORS.white};
     color: ${COLORS.black};
     box-shadow: 0 0 0;
-    border: 1px ${COLORS.grey35} solid;
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:active {
@@ -132,10 +132,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
               {t('jump_size')}
             </StyledText>
           </Flex>
-          <StyledText
-            color={COLORS.grey50Enabled}
-            css={TYPOGRAPHY.labelRegular}
-          >
+          <StyledText color={COLORS.grey50} css={TYPOGRAPHY.labelRegular}>
             {JUMP_SIZE_SUBTITLE}
           </StyledText>
           <Box css={BUTTON_WRAPPER_STYLE}>
@@ -153,7 +150,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
                 >
                   {t(stepSizeTranslationKeyByStep[stepSize])}
                   <StyledText
-                    color={COLORS.grey50Enabled}
+                    color={COLORS.grey50}
                     css={TYPOGRAPHY.labelRegular}
                   >{`${stepSize} mm`}</StyledText>
                 </PrimaryButton>

diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -29,7 +29,7 @@ describe('MiniCard', () => {
     const { getByText } = render(props)
     const miniCard = getByText('mock mini card')
     expect(miniCard).toHaveStyle(`background-color: ${String(COLORS.white)}`)
-    expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.grey35)}`)
+    expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.grey30)}`)
     expect(miniCard).toHaveStyle(
       `border-radius: ${String(BORDERS.radiusSoftCorners)}`
     )

diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx
@@ -12,7 +12,7 @@ interface MiniCardProps extends StyleProps {
 }
 const unselectedOptionStyles = css`
   background-color: ${COLORS.white};
-  border: 1px solid ${COLORS.grey35};
+  border: 1px solid ${COLORS.grey30};
   border-radius: ${BORDERS.radiusSoftCorners};
   padding: ${SPACING.spacing8};
   width: 100%;

diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -55,7 +55,7 @@ describe('ModuleIcon', () => {
   it('renders SharedIcon with correct style', () => {
     const { getByTestId } = render(props)
     const module = getByTestId('ModuleIcon_ot-temperature-v2')
-    expect(module).toHaveStyle(`color: ${String(COLORS.grey50Enabled)}`)
+    expect(module).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`)

diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx
@@ -33,7 +33,7 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element {
           moduleType={module.moduleType}
           size={SPACING.spacing16}
           marginX={SPACING.spacing2}
-          color={COLORS.grey50Enabled}
+          color={COLORS.grey50}
           css={MODULE_ICON_STYLE}
         />
       </Flex>

diff --git a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
@@ -44,7 +44,7 @@ describe('NavTab', () => {
     expect(tab).toHaveStyle(
       `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}`
     )
-    expect(tab).toHaveStyle(`color: ${String(COLORS.grey50Enabled)}`)
+    expect(tab).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     fireEvent.click(tab)
     expect(tab).toHaveStyle(`color: ${String(COLORS.darkBlackEnabled)}`)
     expect(tab).toHaveStyle(

diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx
@@ -13,7 +13,7 @@ interface NavTabProps {
 const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
   padding: 0 ${SPACING.spacing4} ${SPACING.spacing8};
   ${TYPOGRAPHY.labelSemiBold}
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
 
   &.active {
     color: ${COLORS.darkBlackEnabled};

diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -29,8 +29,8 @@ const BUTTON_GROUP_STYLES = css`
     }
 
     &:hover {
-      background-color: ${COLORS.grey35};
-      color: ${COLORS.black};
+      background-color: ${COLORS.grey10};
+      color: ${LEGACY_COLORS.black};
       box-shadow: 0 0 0;
     }
 
@@ -68,8 +68,8 @@ const DEFAULT_STYLE = css`
   padding-left: ${SPACING.spacing8};
   padding-right: ${SPACING.spacing8};
   background-color: ${COLORS.white};
-  color: ${COLORS.black};
-  border: 1px ${COLORS.grey35} solid;
+  color: ${LEGACY_COLORS.black};
+  border: 1px ${COLORS.grey30} solid;
 `
 
 export const useToggleGroup = (

diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx
@@ -23,7 +23,7 @@ const StyledLabel = styled.label`
   align-items: ${ALIGN_CENTER};
   width: 100%;
   padding: ${SPACING.spacing32};
-  border: 2px dashed ${COLORS.grey35};
+  border: 2px dashed ${COLORS.grey30};
   border-radius: ${BORDERS.radiusSoftCorners};
   text-align: center;
   background-color: ${COLORS.white};
@@ -120,7 +120,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
       >
         <Icon
           width={SIZE_3}
-          color={COLORS.grey50Enabled}
+          color={COLORS.grey50}
           name="upload"
           marginBottom={SPACING.spacing24}
         />

diff --git 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.grey50Enabled};
+  color: ${COLORS.grey50};
 
   &:hover {
     opacity: 70%;
@@ -89,7 +89,7 @@ export const WizardHeader = (props: WizardHeaderProps): JSX.Element => {
           </StyledText>
 
           {currentStep != null && totalSteps != null && currentStep > 0 ? (
-            <StyledText css={STEP_TEXT_STYLE} color={COLORS.grey50Enabled}>
+            <StyledText css={STEP_TEXT_STYLE} color={COLORS.grey50}>
               {t('step', { current: currentStep, max: totalSteps })}
             </StyledText>
           ) : null}

diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
@@ -98,7 +98,7 @@ export function WizardRequiredEquipmentList(
             <StyledText
               marginTop={SPACING.spacing8}
               as="label"
-              color={COLORS.grey50Enabled}
+              color={COLORS.grey50}
             >
               {footer}
             </StyledText>
@@ -160,7 +160,7 @@ function RequiredEquipmentCard(props: RequiredEquipmentCardProps): JSX.Element {
         >
           <StyledText as="p">{displayName}</StyledText>
           {subtitle != null ? (
-            <StyledText as="p" color={COLORS.grey50Enabled}>
+            <StyledText as="p" color={COLORS.grey50}>
               {subtitle}
             </StyledText>
           ) : null}

diff --git a/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx b/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx
@@ -105,7 +105,7 @@ export function ConnectRobotSlideout({
             <Flex flexDirection={DIRECTION_ROW}>
               <StyledText
                 as="p"
-                color={COLORS.grey50Enabled}
+                color={COLORS.grey50}
                 marginRight={SPACING.spacing8}
               >
                 {t('searching')}
@@ -118,7 +118,7 @@ export function ConnectRobotSlideout({
                 <>
                   <StyledText
                     as="p"
-                    color={COLORS.grey50Enabled}
+                    color={COLORS.grey50}
                     marginX={SPACING.spacing4}
                   >
                     {t('discovery_timeout')}

diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx
@@ -34,12 +34,12 @@ const StyledInput = styled.input`
   margin: ${SPACING.spacing4} 0;
   background-color: ${COLORS.white};
   border-radius: ${SPACING.spacing4};
-  border: 1px ${BORDERS.styleSolid} ${COLORS.grey35};
+  border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
   height: ${SIZE_2};
   font-size: ${TYPOGRAPHY.fontSizeP};
 
   &:active {
-    border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
   }
 
   &:hover {
@@ -51,7 +51,7 @@ const StyledInput = styled.input`
   }
 
   &:disabled {
-    border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Disabled};
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
   }
 `
 
@@ -79,7 +79,7 @@ export function ManualIpHostnameForm({
       const ip = values.ip.trim()
       const inputForm = document.getElementById('ip')
       if (inputForm != null)
-        inputForm.style.border = `1px solid ${String(COLORS.grey35)}`
+        inputForm.style.border = `1px solid ${String(COLORS.grey30)}`
       addManualIpAndHostname(ip)
       resetForm()
       setMostRecentAddition(ip)

diff --git a/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx b/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx
@@ -21,7 +21,7 @@ const OffsetTableHeader = styled('th')`
   padding: ${SPACING.spacing4};
 `
 const OffsetTableRow = styled('tr')`
-  background-color: ${COLORS.grey35};
+  background-color: ${COLORS.grey10};
   padding: ${SPACING.spacing8};
 `