replace all COLORS with LEGACY_COLORS

Opentrons · Jan 11, 2024 · 4171724 · 4171724
1 parent d360c1f
commit 4171724
Show file tree

Hide file tree

Showing 433 changed files with 2,164 additions and 2,164 deletions.
diff --git a/api-client/src/protocols/utils.ts b/api-client/src/protocols/utils.ts
@@ -1,7 +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 { LEGACY_COLORS } from '@opentrons/components/src/ui-style-constants'
 import { getLabwareDefURI } from '@opentrons/shared-data'
 import type {
   Liquid,
@@ -254,7 +254,7 @@ export function parseLiquidsInLoadOrder(
       ...liquid,
       displayColor:
         liquid.displayColor ??
-        COLORS.liquidColors[index % COLORS.liquidColors.length],
+        LEGACY_COLORS.liquidColors[index % LEGACY_COLORS.liquidColors.length],
     }
   })
 

diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx
@@ -3,7 +3,7 @@ import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import {
   Box,
-  COLORS,
+  LEGACY_COLORS,
   OVERFLOW_AUTO,
   POSITION_RELATIVE,
 } from '@opentrons/components'
@@ -118,7 +118,7 @@ export const DesktopApp = (): JSX.Element => {
                         position={POSITION_RELATIVE}
                         width="100%"
                         height="100%"
-                        backgroundColor={COLORS.fundamentalsBackground}
+                        backgroundColor={LEGACY_COLORS.fundamentalsBackground}
                         overflow={OVERFLOW_AUTO}
                       >
                         <ModalPortalRoot />

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

diff --git a/app/src/App/OnDeviceDisplayApp.tsx b/app/src/App/OnDeviceDisplayApp.tsx
@@ -7,7 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import {
   Box,
   POSITION_RELATIVE,
-  COLORS,
+  LEGACY_COLORS,
   OVERFLOW_AUTO,
   useIdle,
   useScrolling,
@@ -242,7 +242,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     position: ${POSITION_RELATIVE};
     width: 100%;
     height: 100%;
-    background-color: ${COLORS.white};
+    background-color: ${LEGACY_COLORS.white};
     overflow-y: ${OVERFLOW_AUTO};
 
     &::-webkit-scrollbar {
@@ -256,7 +256,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: ${COLORS.darkBlack40};
+      background: ${LEGACY_COLORS.darkBlack40};
       border-radius: 11px;
     }
   `

diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -12,7 +12,7 @@ import {
   Flex,
   JUSTIFY_CENTER,
   SPACING,
-  COLORS,
+  LEGACY_COLORS,
 } from '@opentrons/components'
 
 import { StyledText } from '../atoms/text'
@@ -39,7 +39,7 @@ export function OnDeviceDisplayAppFallback({
   const modalHeader: ModalHeaderBaseProps = {
     title: t('error_boundary_title'),
     iconName: 'ot-alert',
-    iconColor: COLORS.red2,
+    iconColor: LEGACY_COLORS.red2,
   }
 
   // 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
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {
   Flex,
-  COLORS,
+  LEGACY_COLORS,
   DIRECTION_COLUMN,
   SPACING,
   TYPOGRAPHY,
@@ -48,7 +48,7 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
           <Box
             width="10rem"
             height="4rem"
-            backgroundColor={COLORS.blueEnabled}
+            backgroundColor={LEGACY_COLORS.blueEnabled}
             borderRadius={br[1]}
           />
         </Flex>

diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {
   Flex,
-  COLORS,
+  LEGACY_COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   SPACING,
@@ -51,7 +51,7 @@ const Template: Story<ColorsStorybookProps> = args => {
   }
 
   const handleClick = (colorName: string): void => {
-    navigator.clipboard.writeText(`COLORS.${colorName}`)
+    navigator.clipboard.writeText(`LEGACY_COLORS.${colorName}`)
     setCopiedColor(colorName)
     setTimeout(() => {
       setCopiedColor(null)
@@ -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 ${LEGACY_COLORS.darkBlackEnabled}`}
         >
           <StyledText
             color={invertColor(color[1])}
@@ -109,7 +109,7 @@ const Template: Story<ColorsStorybookProps> = args => {
 }
 
 export const AllColors = Template.bind({})
-const allColors = Object.entries(COLORS)
+const allColors = Object.entries(LEGACY_COLORS)
 AllColors.args = {
   colors: allColors,
 }
diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {
   Flex,
-  COLORS,
+  LEGACY_COLORS,
   DIRECTION_COLUMN,
   SPACING,
   TYPOGRAPHY,
@@ -51,7 +51,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
           <Box
             width={spacing[1]}
             height="2rem"
-            backgroundColor={COLORS.blueEnabled}
+            backgroundColor={LEGACY_COLORS.blueEnabled}
           />
         </Flex>
       ))}

diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
@@ -4,7 +4,7 @@ import {
   ALIGN_CENTER,
   BORDERS,
   Btn,
-  COLORS,
+  LEGACY_COLORS,
   DIRECTION_ROW,
   Flex,
   Icon,
@@ -49,28 +49,28 @@ const BANNER_PROPS_BY_TYPE: Record<
 > = {
   success: {
     icon: { name: 'check-circle' },
-    backgroundColor: COLORS.successBackgroundLight,
-    color: COLORS.successEnabled,
+    backgroundColor: LEGACY_COLORS.successBackgroundLight,
+    color: LEGACY_COLORS.successEnabled,
   },
   error: {
     icon: { name: 'alert-circle' },
-    backgroundColor: COLORS.errorBackgroundLight,
-    color: COLORS.errorEnabled,
+    backgroundColor: LEGACY_COLORS.errorBackgroundLight,
+    color: LEGACY_COLORS.errorEnabled,
   },
   warning: {
     icon: { name: 'alert-circle' },
-    backgroundColor: COLORS.warningBackgroundLight,
-    color: COLORS.warningEnabled,
+    backgroundColor: LEGACY_COLORS.warningBackgroundLight,
+    color: LEGACY_COLORS.warningEnabled,
   },
   updating: {
     icon: { name: 'ot-spinner' },
-    backgroundColor: COLORS.darkGreyDisabled,
-    color: COLORS.darkGreyEnabled,
+    backgroundColor: LEGACY_COLORS.darkGreyDisabled,
+    color: LEGACY_COLORS.darkGreyEnabled,
   },
   informing: {
     icon: { name: 'information' },
-    backgroundColor: COLORS.fundamentalsBackground,
-    color: COLORS.darkGreyEnabled,
+    backgroundColor: LEGACY_COLORS.fundamentalsBackground,
+    color: LEGACY_COLORS.darkGreyEnabled,
   },
 }
 
@@ -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: ${LEGACY_COLORS.yellow3};
       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
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Flex, COLORS, SPACING } from '@opentrons/components'
+import { Flex, LEGACY_COLORS, SPACING } from '@opentrons/components'
 import { touchScreenViewport } from '../../DesignTokens/constants'
 import { Chip } from '.'
 import type { Story, Meta } from '@storybook/react'
@@ -18,7 +18,7 @@ interface ChipStorybookProps extends React.ComponentProps<typeof Chip> {
 const Template: Story<ChipStorybookProps> = ({ ...args }) => (
   <Flex
     padding={SPACING.spacing16}
-    backgroundColor={COLORS.darkBlack40}
+    backgroundColor={LEGACY_COLORS.darkBlack40}
     width="59rem"
   >
     <Chip {...args} />