grey typefixes

Opentrons · Jan 11, 2024 · 9e52752 · 9e52752
2 parents dcd4cd8 + e08c9bd
commit 9e52752
Show file tree

Hide file tree

Showing 262 changed files with 1,155 additions and 829 deletions.
diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx
@@ -119,7 +119,7 @@ export const DesktopApp = (): JSX.Element => {
                         position={POSITION_RELATIVE}
                         width="100%"
                         height="100%"
-                        backgroundColor={COLORS.grey35}
+                        backgroundColor={COLORS.grey10}
                         overflow={OVERFLOW_AUTO}
                       >
                         <ModalPortalRoot />

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -63,14 +63,14 @@ const NavbarLink = styled(NavLink)`
 `
 const NavIconLink = styled(NavLink)`
   &.active > svg {
-    color: ${COLORS.grey35};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 const IconLink = styled(Link)`
   &.active > svg {
-    color: ${COLORS.grey35};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 
@@ -79,7 +79,7 @@ const NavbarIcon = styled(Icon)`
   height: ${SIZE_2};
   padding: ${SPACING.spacing6};
   border-radius: 50%;
-  color: ${COLORS.grey35};
+  color: ${COLORS.grey30};
   background-color: ${COLORS.transparent};
 
   &:hover {
@@ -93,13 +93,13 @@ const NavbarIcon = styled(Icon)`
   }
 
   &:active {
-    color: ${COLORS.grey35};
-    background-color: ${COLORS.darkBlackEnabled};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black90};
   }
 
   &.active {
-    color: ${COLORS.grey35};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 

diff --git a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx
@@ -48,7 +48,7 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
           <Box
             width="10rem"
             height="4rem"
-            backgroundColor={COLORS.blueEnabled}
+            backgroundColor={COLORS.blue50}
             borderRadius={br[1]}
           />
         </Flex>

diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -51,7 +51,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
           <Box
             width={spacing[1]}
             height="2rem"
-            backgroundColor={COLORS.blueEnabled}
+            backgroundColor={COLORS.blue50}
           />
         </Flex>
       ))}

diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
@@ -10,6 +10,7 @@ import {
   Icon,
   IconProps,
   JUSTIFY_SPACE_BETWEEN,
+  LEGACY_COLORS,
   RESPONSIVENESS,
   SIZE_1,
   SPACING,
@@ -64,13 +65,13 @@ const BANNER_PROPS_BY_TYPE: Record<
   },
   updating: {
     icon: { name: 'ot-spinner' },
-    backgroundColor: COLORS.grey50Disabled,
-    color: COLORS.grey50Enabled,
+    backgroundColor: COLORS.grey30,
+    color: COLORS.grey50,
   },
   informing: {
     icon: { name: 'information' },
-    backgroundColor: COLORS.grey35,
-    color: COLORS.grey50Enabled,
+    backgroundColor: COLORS.grey10,
+    color: COLORS.grey50,
   },
 }
 

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/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -6,6 +6,7 @@ import {
   BORDERS,
   COLOR_WARNING_DARK,
   COLORS,
+  LEGACY_COLORS,
   DIRECTION_COLUMN,
   DISPLAY_INLINE_BLOCK,
   Flex,
@@ -71,7 +72,11 @@ export function InputField(props: InputFieldProps): JSX.Element {
       lineHeight={1}
       fontSize={TYPOGRAPHY.fontSizeP}
       fontWeight={TYPOGRAPHY.fontWeightRegular}
-      color={props.error != null ? COLOR_WARNING_DARK : COLORS.darkBlackEnabled}
+      color={
+        props.error != null
+          ? COLOR_WARNING_DARK
+          : LEGACY_COLORS.darkBlackEnabled
+      }
       opacity={props.disabled ?? false ? 0.5 : ''}
     >
       <Input {...props} />
@@ -86,20 +91,20 @@ function Input(props: InputFieldProps): JSX.Element {
 
   const INPUT_FIELD = css`
     display: flex;
-    background-color: ${COLORS.white};
+    background-color: ${LEGACY_COLORS.white};
     border-radius: ${SPACING.spacing4};
     padding: ${SPACING.spacing8};
     border: 1px ${BORDERS.styleSolid}
-      ${error ? COLORS.errorEnabled : COLORS.grey35};
+      ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey30};
     font-size: ${TYPOGRAPHY.fontSizeP};
 
     &:active {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
     }
 
     & input {
       border-radius: inherit;
-      color: ${COLORS.darkBlackEnabled};
+      color: ${LEGACY_COLORS.darkBlackEnabled};
       border: none;
       flex: 1 1 auto;
       width: 100%;
@@ -111,13 +116,13 @@ function Input(props: InputFieldProps): JSX.Element {
 
     &:hover {
       border: 1px ${BORDERS.styleSolid}
-        ${error ? COLORS.errorEnabled : COLORS.grey55};
+        ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey55};
     }
     &:focus {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled};
+      border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
     }
     &:disabled {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Disabled};
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
     }
     input[type='number']::-webkit-inner-spin-button,
     input[type='number']::-webkit-outer-spin-button {
@@ -134,10 +139,10 @@ function Input(props: InputFieldProps): JSX.Element {
   `
 
   const ERROR_TEXT_STYLE = css`
-    color: ${COLORS.errorEnabled};
+    color: ${LEGACY_COLORS.errorEnabled};
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       font-size: ${TYPOGRAPHY.fontSize22};
-      color: ${COLORS.red2};
+      color: ${LEGACY_COLORS.red2};
     }
   `
 
@@ -155,15 +160,15 @@ function Input(props: InputFieldProps): JSX.Element {
             display={DISPLAY_INLINE_BLOCK}
             textAlign={TEXT_ALIGN_RIGHT}
             alignSelf={ALIGN_CENTER}
-            color={COLORS.grey50Enabled}
+            color={COLORS.grey50}
             fontSize={TYPOGRAPHY.fontSizeLabel}
           >
             {props.units}
           </Flex>
         )}
       </Flex>
       <Flex
-        color={COLORS.grey50Enabled}
+        color={COLORS.grey50}
         fontSize={TYPOGRAPHY.fontSizeLabel}
         paddingTop={SPACING.spacing4}
         flexDirection={DIRECTION_COLUMN}

diff --git a/app/src/atoms/Interstitial/Interstitial.tsx b/app/src/atoms/Interstitial/Interstitial.tsx
@@ -7,6 +7,7 @@ import {
   JUSTIFY_FLEX_START,
   POSITION_RELATIVE,
   COLORS,
+  LEGACY_COLORS,
   TYPOGRAPHY,
   SPACING,
   Overlay,
@@ -50,7 +51,7 @@ export function Interstitial(props: InterstitialProps): JSX.Element {
         padding={SPACING.spacing16}
         position={POSITION_RELATIVE}
         boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
-        border={`1px solid ${String(COLORS.grey35)}`}
+        border={`1px solid ${String(COLORS.grey30)}`}
         backgroundColor={COLORS.white}
         maxHeight="100%"
         overflowY="auto"

diff --git a/app/src/atoms/Link/ExternalLink.stories.tsx b/app/src/atoms/Link/ExternalLink.stories.tsx
@@ -10,7 +10,7 @@ export default {
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ExternalLink>> = args => (
-  <Flex backgroundColor={COLORS.grey35}>
+  <Flex backgroundColor={COLORS.grey10}>
     <ExternalLink {...args} />
   </Flex>
 )

diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
@@ -25,7 +25,7 @@ describe('ExternalLink', () => {
     const link = getByText('Test Link')
     expect(link).toHaveAttribute('href', 'https://opentrons.com')
     expect(link).toHaveAttribute('target', '_blank')
-    expect(link).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`)
+    expect(link).toHaveStyle(`color: ${String(COLORS.blue50)}`)
   })
 
   it('renders open-in-new icon', () => {

diff --git a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx b/app/src/atoms/ListItem/__tests__/ListItem.test.tsx
@@ -37,7 +37,7 @@ describe('ListItem', () => {
     const [{ getByText, getByTestId }] = render(props)
     getByText('mock listitem content')
     const listItem = getByTestId('ListItem_noActive')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.light1}`)
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey35}`)
     expect(listItem).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )

diff --git a/app/src/atoms/ListItem/index.tsx b/app/src/atoms/ListItem/index.tsx
@@ -21,7 +21,7 @@ const LISTITEM_PROPS_BY_TYPE: Record<
     backgroundColor: COLORS.red3,
   },
   noActive: {
-    backgroundColor: COLORS.light1,
+    backgroundColor: COLORS.grey35,
   },
   success: {
     backgroundColor: COLORS.green3,

diff --git a/app/src/atoms/MenuList/MenuItem.tsx b/app/src/atoms/MenuList/MenuItem.tsx
@@ -22,7 +22,7 @@ export const MenuItem = styled.button<ButtonProps>`
 
   &:hover,
   &:active {
-    background-color: ${COLORS.lightBlue};
+    background-color: ${COLORS.blue10};
   }
 
   &:disabled {
@@ -44,12 +44,12 @@ export const MenuItem = styled.button<ButtonProps>`
     &:hover,
     &:active {
       background-color: ${({ isAlert }) =>
-        isAlert ? COLORS.errorEnabled : COLORS.grey35};
+        isAlert ? LEGACY_COLORS.errorEnabled : COLORS.grey35};
     }
 
     &:disabled {
       background-color: ${({ isAlert }) =>
-        isAlert ? COLORS.errorEnabled : COLORS.transparent};
+        isAlert ? LEGACY_COLORS.errorEnabled : COLORS.transparent};
       color: ${({ isAlert }) => (isAlert ? COLORS.white : COLORS.grey50)};
     }
   }

diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { css } from 'styled-components'
-import { Btn, COLORS, SPACING } from '@opentrons/components'
+import { Btn, COLORS, LEGACY_COLORS, SPACING } from '@opentrons/components'
 
 export const OverflowBtn = React.forwardRef(
   (
@@ -14,7 +14,7 @@ export const OverflowBtn = React.forwardRef(
           max-height: ${SPACING.spacing32};
 
           &:hover {
-            background-color: ${COLORS.grey35};
+            background-color: ${COLORS.grey30};
           }
           &:hover circle {
             fill: ${COLORS.darkBlackEnabled};
@@ -53,7 +53,7 @@ export const OverflowBtn = React.forwardRef(
           width="19"
           height="31"
           viewBox="0 0 19 31"
-          fill={COLORS.grey50Enabled}
+          fill={COLORS.grey50}
           xmlns="http://www.w3.org/2000/svg"
         >
           <circle cx="9.5" cy="9.5" r="1.5" />

diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -1,7 +1,11 @@
 import 'jest-styled-components'
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { COLORS, renderWithProviders } from '@opentrons/components'
+import {
+  COLORS,
+  LEGACY_COLORS,
+  renderWithProviders,
+} from '@opentrons/components'
 import { OverflowBtn } from '../OverflowBtn'
 
 const render = (props: React.ComponentProps<typeof OverflowBtn>) => {
@@ -27,7 +31,7 @@ describe('OverflowBtn', () => {
 
     expect(getByRole('button')).toHaveStyleRule(
       'background-color',
-      `${String(COLORS.grey35)}`,
+      `${String(COLORS.grey30)}`,
       {
         modifier: ':hover',
       }

diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx
@@ -5,6 +5,7 @@ import {
   DIRECTION_COLUMN,
   SPACING,
   COLORS,
+  LEGACY_COLORS,
   SecondaryButton,
 } from '@opentrons/components'
 
@@ -33,7 +34,7 @@ const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing40}
-      backgroundColor={COLORS.grey50Disabled}
+      backgroundColor={COLORS.grey30}
       padding={SPACING.spacing16}
     >
       <StyledText>{'Add 5% to the current progress every 0.2 sec'}</StyledText>