migrate transparent and export COLORS from top index

app/src/App/Navbar.tsx

@@ -6,6 +6,7 @@ import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
   ALIGN_STRETCH,
+  COLORS,
   LEGACY_COLORS,
   DIRECTION_COLUMN,
   FLEX_NONE,
@@ -79,7 +80,7 @@ const NavbarIcon = styled(Icon)`
   padding: ${SPACING.spacing6};
   border-radius: 50%;
   color: ${LEGACY_COLORS.medGreyEnabled};
-  background-color: ${LEGACY_COLORS.transparent};
+  background-color: ${COLORS.transparent};
 
   &:hover {
     background-color: ${LEGACY_COLORS.darkBlackHover};

app/src/atoms/Chip/__tests__/Chip.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { BORDERS, LEGACY_COLORS, renderWithProviders } from '@opentrons/components'
+import { BORDERS, COLORS, LEGACY_COLORS, renderWithProviders } from '@opentrons/components'
 
 import { Chip } from '..'
 
@@ -48,7 +48,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_success')
     const chipText = getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.green1}`)
     const icon = getByLabelText('icon_mockSuccess')
@@ -79,7 +79,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_warning')
     const chipText = getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${String(LEGACY_COLORS.transparent)}`)
+    expect(chip).toHaveStyle(`background-color: ${String(COLORS.transparent)}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${String(LEGACY_COLORS.yellow1)}`)
     const icon = getByLabelText('icon_mockWarning')
@@ -110,7 +110,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_neutral')
     const chipText = getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.darkBlack70}`)
     const icon = getByLabelText('icon_mockNeutral')
@@ -141,7 +141,7 @@ describe('Chip', () => {
     const [{ getByTestId, getByText, getByLabelText }] = render(props)
     const chip = getByTestId('Chip_error')
     const chipText = getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`)
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.red1}`)
     const icon = getByLabelText('icon_mockError')

app/src/atoms/Chip/index.tsx

@@ -8,6 +8,7 @@ import {
   SPACING,
   TYPOGRAPHY,
   Icon,
+  COLORS,
   LEGACY_COLORS,
 } from '@opentrons/components'
 
@@ -79,7 +80,7 @@ export function Chip({
 }: ChipProps): JSX.Element {
   const backgroundColor =
     background === false && type !== 'basic'
-      ? LEGACY_COLORS.transparent
+      ? COLORS.transparent
       : CHIP_PROPS_BY_TYPE[type].backgroundColor
   const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
   return (

app/src/atoms/MenuList/MenuItem.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import {
   SPACING,
+  COLORS,
   LEGACY_COLORS,
   TYPOGRAPHY,
   ALIGN_CENTER,
@@ -15,7 +16,7 @@ interface ButtonProps extends StyleProps {
 export const MenuItem = styled.button<ButtonProps>`
   text-align: ${TYPOGRAPHY.textAlignLeft};
   font-size: ${TYPOGRAPHY.fontSizeP};
-  background-color: ${LEGACY_COLORS.transparent};
+  background-color: ${COLORS.transparent};
   color: ${LEGACY_COLORS.darkBlackEnabled};
   padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
     ${SPACING.spacing12};
@@ -26,7 +27,7 @@ export const MenuItem = styled.button<ButtonProps>`
   }
 
   &:disabled {
-    background-color: ${LEGACY_COLORS.transparent};
+    background-color: ${COLORS.transparent};
     color: ${LEGACY_COLORS.black}${LEGACY_COLORS.opacity50HexCode};
   }
 
@@ -35,7 +36,7 @@ export const MenuItem = styled.button<ButtonProps>`
     text-align: ${TYPOGRAPHY.textAlignCenter};
     font-size: ${TYPOGRAPHY.fontSize28};
     background-color: ${({ isAlert }) =>
-      isAlert ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.transparent};
+      isAlert ? LEGACY_COLORS.errorEnabled : COLORS.transparent};
     color: ${({ isAlert }) =>
       isAlert ? LEGACY_COLORS.white : LEGACY_COLORS.darkBlackEnabled};
     padding: ${SPACING.spacing24};
@@ -49,7 +50,7 @@ export const MenuItem = styled.button<ButtonProps>`
 
     &:disabled {
       background-color: ${({ isAlert }) =>
-        isAlert ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.transparent};
+        isAlert ? LEGACY_COLORS.errorEnabled : COLORS.transparent};
       color: ${({ isAlert }) => (isAlert ? LEGACY_COLORS.white : LEGACY_COLORS.darkBlack60)};
     }
   }

app/src/atoms/MenuList/hooks.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { LEGACY_COLORS, Overlay } from '@opentrons/components'
+import { COLORS, Overlay } from '@opentrons/components'
 
 interface MenuHandleClickOutside {
   menuOverlay: JSX.Element
@@ -28,7 +28,7 @@ export function useMenuHandleClickOutside(): MenuHandleClickOutside {
       {showOverflowMenu ? (
         <Overlay
           onClick={handleClickOutside}
-          backgroundColor={LEGACY_COLORS.transparent}
+          backgroundColor={COLORS.transparent}
         />
       ) : null}
     </>

app/src/atoms/buttons/MediumButton.tsx

@@ -4,6 +4,7 @@ import {
   ALIGN_CENTER,
   BORDERS,
   Btn,
+  COLORS,
   LEGACY_COLORS,
   DIRECTION_ROW,
   Icon,
@@ -91,14 +92,14 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
       activeBackgroundColor: LEGACY_COLORS.darkBlack20,
       defaultBackgroundColor: LEGACY_COLORS.white,
       defaultColor: LEGACY_COLORS.darkBlack100,
-      disabledBackgroundColor: LEGACY_COLORS.transparent,
+      disabledBackgroundColor: COLORS.transparent,
       iconColor: LEGACY_COLORS.darkBlack100,
     },
     tertiaryLowLight: {
       activeBackgroundColor: LEGACY_COLORS.darkBlack20,
       defaultBackgroundColor: LEGACY_COLORS.white,
       defaultColor: LEGACY_COLORS.darkBlack70,
-      disabledBackgroundColor: LEGACY_COLORS.transparent,
+      disabledBackgroundColor: COLORS.transparent,
       iconColor: LEGACY_COLORS.darkBlack70,
     },
   }

app/src/molecules/JogControls/DirectionControl.tsx

@@ -11,6 +11,7 @@ import {
   ALIGN_CENTER,
   JUSTIFY_CENTER,
   BORDERS,
+  COLORS,
   LEGACY_COLORS,
   SPACING,
   TYPOGRAPHY,
@@ -376,7 +377,7 @@ const ARROW_BUTTON_STYLES = css`
     &:hover {
       background-color: ${LEGACY_COLORS.light1Pressed};
       color: ${LEGACY_COLORS.darkBlackHover};
-      border: 1px ${LEGACY_COLORS.transparent} solid;
+      border: 1px ${COLORS.transparent} solid;
     }
 
     &:active {
@@ -391,7 +392,7 @@ const ARROW_BUTTON_STYLES = css`
     &:disabled {
       background-color: ${LEGACY_COLORS.darkBlack20};
       color: ${LEGACY_COLORS.darkBlack40};
-      border: 1px ${LEGACY_COLORS.transparent} solid;
+      border: 1px ${COLORS.transparent} solid;
     }
   }
 `

app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders, LEGACY_COLORS } from '@opentrons/components'
+import { renderWithProviders, COLORS } from '@opentrons/components'
 import { ODDBackButton } from '..'
 
 const render = (props: React.ComponentProps<typeof ODDBackButton>) => {
@@ -26,7 +26,7 @@ describe('ODDBackButton', () => {
     screen.getByText('button label')
     expect(screen.getByTestId('back_icon')).toBeInTheDocument()
     const button = screen.getByRole('button')
-    expect(button).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`)
     fireEvent.click(button)
     expect(props.onClick).toHaveBeenCalled()
   })

app/src/organisms/Devices/ModuleInfo.tsx

@@ -5,6 +5,7 @@ import {
   Icon,
   RobotCoordsForeignObject,
   ALIGN_CENTER,
+  COLORS,
   LEGACY_COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -64,7 +65,7 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
         backgroundColor:
           moduleDef.moduleType === THERMOCYCLER_MODULE_TYPE
             ? LEGACY_COLORS.white
-            : LEGACY_COLORS.transparent,
+            : COLORS.transparent,
       }}
     >
       <Flex

app/src/organisms/ProtocolsLanding/ProtocolList.tsx

@@ -14,6 +14,7 @@ import {
   TYPOGRAPHY,
   BORDERS,
   POSITION_ABSOLUTE,
+  COLORS,
   LEGACY_COLORS,
   SecondaryButton,
   DIRECTION_COLUMN,
@@ -39,7 +40,7 @@ import type { ProtocolSort } from './hooks'
 import type { Dispatch } from '../../redux/types'
 
 const SORT_BY_BUTTON_STYLE = css`
-  background-color: ${LEGACY_COLORS.transparent};
+  background-color: ${COLORS.transparent};
   cursor: pointer;
   &:hover {
     background-color: ${LEGACY_COLORS.medGreyHover};
@@ -225,7 +226,7 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
           {showSortByMenu ? (
             <Overlay
               onClick={handleClickOutside}
-              backgroundColor={LEGACY_COLORS.transparent}
+              backgroundColor={COLORS.transparent}
             />
           ) : null}
           <SecondaryButton onClick={() => setShowImportProtocolSlideout(true)}>

app/src/organisms/RunPreview/index.tsx

@@ -13,6 +13,7 @@ import {
   PrimaryButton,
   TYPOGRAPHY,
   BORDERS,
+  COLORS,
   LEGACY_COLORS,
   POSITION_FIXED,
 } from '@opentrons/components'
@@ -93,7 +94,7 @@ export const RunPreviewComponent = (
           const isCurrent = index === currentRunCommandIndex
           const borderColor = isCurrent
             ? LEGACY_COLORS.blueEnabled
-            : LEGACY_COLORS.transparent
+            : COLORS.transparent
           const backgroundColor = isCurrent
             ? LEGACY_COLORS.lightBlue
             : LEGACY_COLORS.fundamentalsBackground

app/src/organisms/TaskList/index.tsx

@@ -7,6 +7,7 @@ import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
   BORDERS,
+  COLORS,
   LEGACY_COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -167,7 +168,7 @@ function ProgressTrackerItem({
                   borderColor={
                     // do not show the subtask connector if it's the final subtask of the task list
                     isFinalSubTaskOfTaskList
-                      ? LEGACY_COLORS.transparent
+                      ? COLORS.transparent
                       : isTaskListComplete || isPastSubTask
                       ? LEGACY_COLORS.blueEnabled
                       : LEGACY_COLORS.medGreyEnabled

app/src/pages/Labware/index.tsx

@@ -8,6 +8,7 @@ import {
   Flex,
   Link,
   SPACING,
+  COLORS,
   LEGACY_COLORS,
   BORDERS,
   TYPOGRAPHY,
@@ -64,7 +65,7 @@ const FILTER_OPTIONS: DropdownOption[] = labwareDisplayCategoryFilters.map(
 )
 
 const SORT_BY_BUTTON_STYLE = css`
-  background-color: ${LEGACY_COLORS.transparent};
+  background-color: ${COLORS.transparent};
   cursor: pointer;
   &:hover {
     background-color: ${LEGACY_COLORS.medGreyHover};

app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx

@@ -8,6 +8,7 @@ import {
   DIRECTION_COLUMN,
   SPACING,
   Btn,
+  COLORS,
   LEGACY_COLORS,
   BORDERS,
   DISPLAY_FLEX,
@@ -250,7 +251,7 @@ export function OnOffToggle(props: { isOn: boolean }): JSX.Element {
       flexDirection={DIRECTION_ROW}
       gridGap={SPACING.spacing12}
       alignItems={ALIGN_CENTER}
-      backgroundColor={LEGACY_COLORS.transparent}
+      backgroundColor={COLORS.transparent}
       padding={`${SPACING.spacing12} ${SPACING.spacing4}`}
       borderRadius={BORDERS.borderRadiusSize4}
     >

components/src/atoms/buttons/SecondaryButton.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import { LEGACY_COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants'
 import { isntStyleProp, styleProps } from '../../primitives'
-
+import { COLORS } from '../../helix-design-system'
 import type { StyleProps } from '../../index'
 
 interface SecondaryButtonProps extends StyleProps {
@@ -10,7 +10,7 @@ interface SecondaryButtonProps extends StyleProps {
 }
 export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
-})<SecondaryButtonProps>`
+}) <SecondaryButtonProps>`
   appearance: none;
   cursor: pointer;
   color: ${props =>
@@ -21,7 +21,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   border-radius: ${BORDERS.radiusSoftCorners};
   padding: ${SPACING.spacing8} ${SPACING.spacing16};
   text-transform: ${TYPOGRAPHY.textTransformNone};
-  background-color: ${LEGACY_COLORS.transparent};
+  background-color: ${COLORS.transparent};
   ${TYPOGRAPHY.pSemiBold}
 
   &:hover,

components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -7,6 +7,7 @@ import {
   TYPOGRAPHY,
   SPACING,
 } from '../../../ui-style-constants'
+import { COLORS } from '../../../helix-design-system'
 
 import { SecondaryButton } from '../SecondaryButton'
 
@@ -26,7 +27,7 @@ describe('SecondaryButton', () => {
   it('renders primary button with text', () => {
     const { getByText } = render(props)
     const button = getByText('secondary button')
-    expect(button).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )

components/src/hardware-sim/BaseDeck/BaseDeck.tsx

@@ -22,6 +22,7 @@ import { LabwareRender } from '../Labware'
 import { FlexTrash } from '../Deck/FlexTrash'
 import { DeckFromLayers } from '../Deck/DeckFromLayers'
 import { SlotLabels } from '../Deck'
+import { COLORS } from '../../helix-design-system'
 import { LEGACY_COLORS } from '../../ui-style-constants'
 
 import { Svg } from '../../primitives'
@@ -172,7 +173,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               <SingleSlotFixture
                 cutoutId={fixture.cutoutId}
                 deckDefinition={deckDef}
-                slotClipColor={LEGACY_COLORS.transparent}
+                slotClipColor={COLORS.transparent}
                 fixtureBaseColor={lightFill}
               />
               <FlexTrash

components/src/hardware-sim/DeckConfigurator/index.tsx

@@ -10,6 +10,7 @@ import {
   WASTE_CHUTE_STAGING_AREA_FIXTURES,
 } from '@opentrons/shared-data'
 
+import { COLORS } from '../../helix-design-system'
 import { LEGACY_COLORS } from '../../ui-style-constants'
 import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture'
 import { SlotLabels } from '../Deck'
@@ -95,7 +96,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
           key={cutout.id}
           cutoutId={cutout.id as CutoutId}
           deckDefinition={deckDef}
-          slotClipColor={LEGACY_COLORS.transparent}
+          slotClipColor={COLORS.transparent}
           fixtureBaseColor={lightFill}
           showExpansion={showExpansion}
         />