grey typefixes

Opentrons · Jan 11, 2024 · e08c9bd · e08c9bd
1 parent e91eff1
commit e08c9bd
Show file tree

Hide file tree

Showing 220 changed files with 525 additions and 565 deletions.
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -19,8 +19,8 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, queryByLabelText }] = render(props)
     const chip = getByTestId('Chip_basic')
     const chipText = getByText('mockBasic')
-    expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.grey35}`)
-    expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
   })
 
@@ -94,11 +94,11 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_neutral')
     const chipText = getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.grey35}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
   it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
@@ -112,9 +112,9 @@ describe('Chip', () => {
     const chipText = getByText('mockNeutral')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
   it('should render text, icon, bgcolor with error colors', () => {

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

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

diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -22,7 +22,7 @@ export const OverflowBtn = React.forwardRef(
 
           &:active,
           &:focus {
-            background-color: ${LEGACY_COLORS.grey35};
+            background-color: ${COLORS.grey35};
           }
 
           &:active circle,

diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -45,7 +45,7 @@ describe('OverflowBtn', () => {
 
     expect(getByRole('button')).toHaveStyleRule(
       'background-color',
-      `${String(LEGACY_COLORS.grey35)}`,
+      `${String(COLORS.grey35)}`,
       {
         modifier: ':active',
       }

diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
@@ -11,7 +11,6 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   ALIGN_CENTER,
   COLORS,
-  LEGACY_COLORS,
   Overlay,
   POSITION_FIXED,
   TYPOGRAPHY,
@@ -103,7 +102,7 @@ const CLOSE_ICON_STYLE = css`
     background: ${COLORS.grey30};
   }
   &:active {
-    background: ${LEGACY_COLORS.grey35};
+    background: ${COLORS.grey35};
   }
 `
 

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: ${LEGACY_COLORS.grey50};
+  color: ${COLORS.grey50};
 
   &:hover {
     opacity: 70%;
@@ -59,7 +59,7 @@ const GO_BACK_BUTTON_STYLE = css`
 `
 const GO_BACK_BUTTON_DISABLED_STYLE = css`
   ${TYPOGRAPHY.pSemiBold};
-  color: ${LEGACY_COLORS.grey60};
+  color: ${COLORS.grey60};
 `
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};

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: ${LEGACY_COLORS.grey50};
+  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={LEGACY_COLORS.grey10}
+      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={LEGACY_COLORS.grey50}
+        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={LEGACY_COLORS.grey10}
+      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={LEGACY_COLORS.grey50}
+          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: ${LEGACY_COLORS.grey10};
+  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 ${LEGACY_COLORS.grey30} 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={LEGACY_COLORS.grey50}
+                    color={COLORS.grey50}
                     css={TYPOGRAPHY.labelRegular}
                   >
                     {subtitle}
@@ -330,7 +330,7 @@ const ARROW_GRID_STYLES = css`
   }
 `
 const ARROW_BUTTON_STYLES = css`
-  color: ${LEGACY_COLORS.grey50};
+  color: ${COLORS.grey50};
   background-color: ${COLORS.white};
 
   border: ${BORDERS.lineBorder};
@@ -342,15 +342,15 @@ const ARROW_BUTTON_STYLES = css`
   justify-content: ${JUSTIFY_CENTER};
   &:hover {
     background-color: ${COLORS.white};
-    color: ${LEGACY_COLORS.grey55};
+    color: ${COLORS.grey55};
     box-shadow: 0 0 0;
-    border: 1px ${LEGACY_COLORS.grey30} solid;
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:active {
     background-color: ${COLORS.white};
-    color: ${LEGACY_COLORS.grey60};
-    border: 1px ${LEGACY_COLORS.grey30} solid;
+    color: ${COLORS.grey60};
+    border: 1px ${COLORS.grey30} solid;
   }
 
   &:focus {
@@ -359,7 +359,7 @@ const ARROW_BUTTON_STYLES = css`
 
   &:disabled {
     background-color: ${COLORS.white};
-    color: ${LEGACY_COLORS.grey30};
+    color: ${COLORS.grey30};
   }
 
   @media (max-width: 750px) {
@@ -369,28 +369,28 @@ const ARROW_BUTTON_STYLES = css`
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     width: 125px;
     height: 125px;
-    background-color: ${LEGACY_COLORS.grey35};
+    background-color: ${COLORS.grey35};
     color: ${COLORS.black90};
     border-radius: ${BORDERS.borderRadiusSize4};
 
     &:hover {
-      background-color: ${LEGACY_COLORS.grey40};
+      background-color: ${COLORS.grey40};
       color: ${COLORS.black80};
       border: 1px ${COLORS.transparent} solid;
     }
 
     &:active {
-      background-color: ${LEGACY_COLORS.grey40};
-      color: ${LEGACY_COLORS.grey60};
+      background-color: ${COLORS.grey40};
+      color: ${COLORS.grey60};
     }
 
     &:focus {
-      background-color: ${LEGACY_COLORS.grey40};
+      background-color: ${COLORS.grey40};
     }
 
     &:disabled {
-      background-color: ${LEGACY_COLORS.grey35};
-      color: ${LEGACY_COLORS.grey50};
+      background-color: ${COLORS.grey35};
+      color: ${COLORS.grey50};
       border: 1px ${COLORS.transparent} solid;
     }
   }
@@ -457,7 +457,7 @@ export function TouchDirectionControl(
     <Flex
       flex="1"
       flexDirection={DIRECTION_COLUMN}
-      border={`1px solid ${LEGACY_COLORS.grey50}`}
+      border={`1px solid ${COLORS.grey50}`}
       borderRadius={BORDERS.borderRadiusSize4}
       padding={SPACING.spacing16}
       gridGap={SPACING.spacing16}

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 ${LEGACY_COLORS.grey30} 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={LEGACY_COLORS.grey50}
-            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={LEGACY_COLORS.grey50}
+                    color={COLORS.grey50}
                     css={TYPOGRAPHY.labelRegular}
                   >{`${stepSize} mm`}</StyledText>
                 </PrimaryButton>
@@ -173,7 +170,7 @@ export function TouchStepSizeControl(props: StepSizeControlProps): JSX.Element {
     <Flex
       flex="3"
       flexDirection={DIRECTION_COLUMN}
-      border={`1px solid ${LEGACY_COLORS.grey50}`}
+      border={`1px solid ${COLORS.grey50}`}
       borderRadius={BORDERS.borderRadiusSize4}
       padding={SPACING.spacing16}
       gridGap={SPACING.spacing16}
@@ -204,7 +201,7 @@ export function TouchStepSizeControl(props: StepSizeControlProps): JSX.Element {
               </StyledText>
               <StyledText
                 as="p"
-                color={selected ? COLORS.white : LEGACY_COLORS.grey60}
+                color={selected ? COLORS.white : COLORS.grey60}
               >
                 {`${stepSize} mm`}
               </StyledText>

diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx
@@ -86,7 +86,7 @@ const Overlay = styled.div`
   cursor: default;
 
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${LEGACY_COLORS.grey50};
+    background-color: ${COLORS.grey50};
   }
 `
 const ContentArea = styled.div<{ zIndex: string | number }>`

diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
@@ -74,13 +74,9 @@ describe('LegacyModalHeader', () => {
     expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey30, {
       modifier: ':hover',
     })
-    expect(closeIcon).toHaveStyleRule(
-      'background-color',
-      LEGACY_COLORS.grey35,
-      {
-        modifier: ':active',
-      }
-    )
+    expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey35, {
+      modifier: ':active',
+    })
     fireEvent.click(closeIcon)
     expect(mockClose).toHaveBeenCalled()
   })

diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -29,9 +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(LEGACY_COLORS.grey30)}`
-    )
+    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,14 +12,14 @@ interface MiniCardProps extends StyleProps {
 }
 const unselectedOptionStyles = css`
   background-color: ${COLORS.white};
-  border: 1px solid ${LEGACY_COLORS.grey30};
+  border: 1px solid ${COLORS.grey30};
   border-radius: ${BORDERS.radiusSoftCorners};
   padding: ${SPACING.spacing8};
   width: 100%;
   cursor: pointer;
 
   &:hover {
-    border: 1px solid ${LEGACY_COLORS.grey55};
+    border: 1px solid ${COLORS.grey55};
   }
 `
 const selectedOptionStyles = css`

diff --git a/app/src/molecules/Modal/SmallModalChildren.tsx b/app/src/molecules/Modal/SmallModalChildren.tsx
@@ -40,7 +40,7 @@ export function SmallModalChildren(
           {header}
         </StyledText>
         <StyledText
-          color={LEGACY_COLORS.grey60}
+          color={COLORS.grey60}
           fontSize={TYPOGRAPHY.fontSize22}
           fontWeight={TYPOGRAPHY.fontWeightRegular}
           lineHeight={TYPOGRAPHY.lineHeight28}