refactor(components): migrate colors to helix design system variables (…

…#14317) Migrate all usage of color constants from the legacy ui_style_constants to the new values taken from the helix design system Co-authored-by: koji <[email protected]> Co-authored-by: smb2268 <[email protected]> Co-authored-by: Brent Hagen <[email protected]>
Opentrons · Jan 17, 2024 · 15ece39 · 15ece39
1 parent 2a64068
commit 15ece39
Show file tree

Hide file tree

Showing 423 changed files with 1,672 additions and 1,934 deletions.
diff --git a/api-client/src/protocols/utils.ts b/api-client/src/protocols/utils.ts
@@ -1,8 +1,7 @@
 // set of functions that parse details out of a protocol record and it's internals
 import reduce from 'lodash/reduce'
 
-import { COLORS } from '@opentrons/components/src/ui-style-constants'
-import { getLabwareDefURI } from '@opentrons/shared-data'
+import { getLabwareDefURI, DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data'
 import type {
   Liquid,
   LoadedLabware,
@@ -254,7 +253,7 @@ export function parseLiquidsInLoadOrder(
       ...liquid,
       displayColor:
         liquid.displayColor ??
-        COLORS.liquidColors[index % COLORS.liquidColors.length],
+        DEFAULT_LIQUID_COLORS[index % DEFAULT_LIQUID_COLORS.length],
     }
   })
 

diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx
@@ -118,7 +118,7 @@ export const DesktopApp = (): JSX.Element => {
                         position={POSITION_RELATIVE}
                         width="100%"
                         height="100%"
-                        backgroundColor={COLORS.fundamentalsBackground}
+                        backgroundColor={COLORS.grey10}
                         overflow={OVERFLOW_AUTO}
                       >
                         <ModalPortalRoot />

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -32,16 +32,16 @@ const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/'
 const NavbarLink = styled(NavLink)`
   color: ${COLORS.white};
   align-self: ${ALIGN_STRETCH};
-  background-color: ${COLORS.darkBlackEnabled};
+  background-color: ${COLORS.black90};
 
   &:hover {
-    background-color: ${COLORS.darkBlackHover};
+    background-color: ${COLORS.black80};
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 3px ${COLORS.fundamentalsFocus};
+    box-shadow: inset 0 0 0 3px ${COLORS.blue50};
     outline: none;
-    background-color: ${COLORS.darkGreyHover};
+    background-color: ${COLORS.grey60};
   }
 
   &:focus-visible.active {
@@ -50,26 +50,26 @@ const NavbarLink = styled(NavLink)`
   }
 
   &:active {
-    background-color: ${COLORS.darkBlackEnabled};
+    background-color: ${COLORS.black90};
   }
 
   &.active {
-    background-color: ${COLORS.darkBlackSelected};
+    background-color: ${COLORS.black70};
   }
   &.active:has(svg) {
-    background-color: ${COLORS.darkBlackEnabled};
+    background-color: ${COLORS.black90};
   }
 `
 const NavIconLink = styled(NavLink)`
   &.active > svg {
-    color: ${COLORS.medGreyEnabled};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 const IconLink = styled(Link)`
   &.active > svg {
-    color: ${COLORS.medGreyEnabled};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 
@@ -78,27 +78,27 @@ const NavbarIcon = styled(Icon)`
   height: ${SIZE_2};
   padding: ${SPACING.spacing6};
   border-radius: 50%;
-  color: ${COLORS.medGreyEnabled};
+  color: ${COLORS.grey30};
   background-color: ${COLORS.transparent};
 
   &:hover {
-    background-color: ${COLORS.darkBlackHover};
+    background-color: ${COLORS.black80};
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 3px ${COLORS.fundamentalsFocus};
+    box-shadow: inset 0 0 0 3px ${COLORS.blue50};
     outline: none;
-    background-color: ${COLORS.darkGreyHover};
+    background-color: ${COLORS.grey60};
   }
 
   &:active {
-    color: ${COLORS.medGreyEnabled};
-    background-color: ${COLORS.darkBlackEnabled};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black90};
   }
 
   &.active {
-    color: ${COLORS.medGreyEnabled};
-    background-color: ${COLORS.darkBlackSelected};
+    color: ${COLORS.grey30};
+    background-color: ${COLORS.black70};
   }
 `
 
@@ -113,7 +113,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
   )
   return (
     <Flex
-      backgroundColor={COLORS.darkBlackEnabled}
+      backgroundColor={COLORS.black90}
       css={TYPOGRAPHY.h3Regular}
       flexDirection={DIRECTION_COLUMN}
       flex={FLEX_NONE}

diff --git a/app/src/App/OnDeviceDisplayApp.tsx b/app/src/App/OnDeviceDisplayApp.tsx
@@ -256,7 +256,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: ${COLORS.darkBlack40};
+      background: ${COLORS.grey50};
       border-radius: 11px;
     }
   `

diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -39,7 +39,7 @@ export function OnDeviceDisplayAppFallback({
   const modalHeader: ModalHeaderBaseProps = {
     title: t('error_boundary_title'),
     iconName: 'ot-alert',
-    iconColor: COLORS.red2,
+    iconColor: COLORS.red50,
   }
 
   // immediately report to robot logs that something fatal happened

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/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx
@@ -79,7 +79,7 @@ const Template: Story<ColorsStorybookProps> = args => {
           borderRadius={BORDERS.borderRadiusSize2}
           onClick={() => handleClick(color[0])}
           style={{ cursor: 'pointer' }}
-          border={`2px solid ${COLORS.darkBlackEnabled}`}
+          border={`2px solid ${COLORS.black90}`}
         >
           <StyledText
             color={invertColor(color[1])}

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
@@ -49,28 +49,28 @@ const BANNER_PROPS_BY_TYPE: Record<
 > = {
   success: {
     icon: { name: 'check-circle' },
-    backgroundColor: COLORS.successBackgroundLight,
-    color: COLORS.successEnabled,
+    backgroundColor: COLORS.green20,
+    color: COLORS.green50,
   },
   error: {
     icon: { name: 'alert-circle' },
-    backgroundColor: COLORS.errorBackgroundLight,
-    color: COLORS.errorEnabled,
+    backgroundColor: COLORS.red20,
+    color: COLORS.red50,
   },
   warning: {
     icon: { name: 'alert-circle' },
-    backgroundColor: COLORS.warningBackgroundLight,
-    color: COLORS.warningEnabled,
+    backgroundColor: COLORS.yellow20,
+    color: COLORS.yellow50,
   },
   updating: {
     icon: { name: 'ot-spinner' },
-    backgroundColor: COLORS.darkGreyDisabled,
-    color: COLORS.darkGreyEnabled,
+    backgroundColor: COLORS.grey30,
+    color: COLORS.grey50,
   },
   informing: {
     icon: { name: 'information' },
-    backgroundColor: COLORS.fundamentalsBackground,
-    color: COLORS.darkGreyEnabled,
+    backgroundColor: COLORS.grey10,
+    color: COLORS.grey50,
   },
 }
 
@@ -106,7 +106,7 @@ export function Banner(props: BannerProps): JSX.Element {
       font-size: 1.25rem;
       font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
       border: none;
-      background-color: ${COLORS.yellow3};
+      background-color: ${COLORS.yellow35};
       border-radius: ${BORDERS.borderRadiusSize3};
       line-height: 1.5rem;
     }

diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx
@@ -18,7 +18,7 @@ interface ChipStorybookProps extends React.ComponentProps<typeof Chip> {
 const Template: Story<ChipStorybookProps> = ({ ...args }) => (
   <Flex
     padding={SPACING.spacing16}
-    backgroundColor={COLORS.darkBlack40}
+    backgroundColor={COLORS.grey50}
     width="59rem"
   >
     <Chip {...args} />

diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -19,8 +19,10 @@ 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(chipText).toHaveStyle(`color: ${COLORS.darkBlack90}`)
+    expect(chip).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
   })
 
@@ -32,11 +34,11 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_success')
     const chipText = getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.green3}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green1}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
     const icon = getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green1}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
   })
 
   it('should render text, icon, no bgcolor with success colors and bg false', () => {
@@ -50,9 +52,9 @@ describe('Chip', () => {
     const chipText = getByText('mockSuccess')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green1}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
     const icon = getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green1}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
   })
 
   it('should render text, icon, bgcolor with warning colors', () => {
@@ -63,11 +65,11 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_warning')
     const chipText = getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow3}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow1}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
     const icon = getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow1}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
   })
 
   it('should render text, icon, no bgcolor with warning colors and bg false', () => {
@@ -81,9 +83,9 @@ describe('Chip', () => {
     const chipText = getByText('mockWarning')
     expect(chip).toHaveStyle(`background-color: ${String(COLORS.transparent)}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${String(COLORS.yellow1)}`)
+    expect(chipText).toHaveStyle(`color: ${String(COLORS.yellow60)}`)
     const icon = getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${String(COLORS.yellow1)}`)
+    expect(icon).toHaveStyle(`color: ${String(COLORS.yellow60)}`)
   })
 
   it('should render text, icon, bgcolor with neutral colors', () => {
@@ -94,11 +96,13 @@ 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.black90}${COLORS.opacity20HexCode}`
+    )
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.darkBlack70}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.darkBlack90}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
   it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
@@ -112,9 +116,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: ${COLORS.darkBlack70}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.darkBlack90}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
   it('should render text, icon, bgcolor with error colors', () => {
@@ -125,11 +129,11 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_error')
     const chipText = getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.red3}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red1}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
     const icon = getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red1}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
   })
 
   it('should render text, icon, no bgcolor with error colors and bg false', () => {
@@ -143,8 +147,8 @@ describe('Chip', () => {
     const chipText = getByText('mockError')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red1}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
     const icon = getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red1}`)
+    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
   })
 })