switch LEGACY_COLORS.darkBlack100 to COLORS.black90

Opentrons · Jan 11, 2024 · c76d767 · c76d767
1 parent da4747b
commit c76d767
Show file tree

Hide file tree

Showing 25 changed files with 43 additions and 40 deletions.
diff --git a/app/src/atoms/Snackbar/index.tsx b/app/src/atoms/Snackbar/index.tsx
@@ -79,7 +79,7 @@ export function Snackbar(props: SnackbarProps): JSX.Element {
       alignItems={ALIGN_CENTER}
       borderRadius={BORDERS.borderRadiusSize3}
       boxShadow={BORDERS.shadowSmall}
-      backgroundColor={LEGACY_COLORS.darkBlack100}
+      backgroundColor={COLORS.black90}
       maxWidth="max-content"
       padding={`${SPACING.spacing20} ${SPACING.spacing24}`}
       data-testid="Snackbar"

diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx
@@ -91,9 +91,9 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
     tertiaryHigh: {
       activeBackgroundColor: LEGACY_COLORS.darkBlack20,
       defaultBackgroundColor: COLORS.white,
-      defaultColor: LEGACY_COLORS.darkBlack100,
+      defaultColor: COLORS.black90,
       disabledBackgroundColor: COLORS.transparent,
-      iconColor: LEGACY_COLORS.darkBlack100,
+      iconColor: COLORS.black90,
     },
     tertiaryLowLight: {
       activeBackgroundColor: LEGACY_COLORS.darkBlack20,

diff --git a/app/src/atoms/buttons/TabbedButton.tsx b/app/src/atoms/buttons/TabbedButton.tsx
@@ -25,7 +25,7 @@ const SELECTED_STYLE = css`
 
 const UNSELECTED_STYLE = css`
   background-color: ${LEGACY_COLORS.highlightPurple2};
-  color: ${LEGACY_COLORS.darkBlack100};
+  color: ${COLORS.black90};
 
   &:focus,
   &:hover {

diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
@@ -46,7 +46,7 @@ describe('Unselected TabbedButton', () => {
       `text-transform: ${String(TYPOGRAPHY.textTransformNone)}`
     )
     expect(button).toHaveStyle(`box-shadow: none`)
-    expect(button).toHaveStyle(`color: ${String(LEGACY_COLORS.darkBlack100)}`)
+    expect(button).toHaveStyle(`color: ${String(COLORS.black90)}`)
   })
 
   it('renders unselected tabbed button with text and disabled', () => {

diff --git a/app/src/molecules/ODDBackButton/index.tsx b/app/src/molecules/ODDBackButton/index.tsx
@@ -21,7 +21,7 @@ export function ODDBackButton(
     <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing16}>
       <Btn onClick={onClick}>
         <Icon
-          color={LEGACY_COLORS.darkBlack100}
+          color={COLORS.black90}
           data-testid="back_icon"
           name="back"
           width="3rem"

diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx
@@ -68,7 +68,7 @@ export function ChildNavigation({
           onClick={onClickBack}
           data-testid="ChildNavigation_Back_Button"
         >
-          <Icon name="back" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+          <Icon name="back" size="3rem" color={COLORS.black90} />
         </IconButton>
         <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightBold}>
           {header}

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx
@@ -36,7 +36,7 @@ export function DeckFixtureSetupInstructionsModal({
   const modalHeader: ModalHeaderBaseProps = {
     title: t('deck_fixture_setup_instructions'),
     iconName: 'information',
-    iconColor: LEGACY_COLORS.darkBlack100,
+    iconColor: COLORS.black90,
     hasExitIcon: true,
     onClick: () => setShowSetupInstructionsModal(false),
   }

diff --git a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx
@@ -28,7 +28,7 @@ const INTERVENTION_COMMAND_NOTES_STYLE = css`
   text-transform: ${TEXT_TRANSFORM_UPPERCASE};
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     ${TYPOGRAPHY.smallBodyTextBold}
-    color: ${LEGACY_COLORS.darkBlack100};
+    color: ${COLORS.black90};
     text-transform: ${TEXT_TRANSFORM_CAPITALIZE};
   }
 `

diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
@@ -73,7 +73,7 @@ const LABWARE_NAME_STYLE = css`
   color: ${LEGACY_COLORS.errorDisabled};
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     ${TYPOGRAPHY.bodyTextBold}
-    color: ${LEGACY_COLORS.darkBlack100};
+    color: ${COLORS.black90};
   }
 `
 

diff --git a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx
@@ -39,17 +39,17 @@ const NETWORK_ROW_STYLE = css`
     border: none;
     box-shadow: none;
     background-color: ${LEGACY_COLORS.light1};
-    color: ${LEGACY_COLORS.darkBlack100};
+    color: ${COLORS.black90};
   }
 
   &:focus {
     background-color: ${LEGACY_COLORS.light1Pressed};
-    color: ${LEGACY_COLORS.darkBlack100};
+    color: ${COLORS.black90};
     box-shadow: none;
   }
   &:active {
     background-color: ${LEGACY_COLORS.light1Pressed};
-    color: ${LEGACY_COLORS.darkBlack100};
+    color: ${COLORS.black90};
   }
   &:focus-visible {
     box-shadow: ${ODD_FOCUS_VISIBLE};
@@ -115,7 +115,7 @@ export function DisplayWifiList({
           alignItems={ALIGN_CENTER}
           gridGap={SPACING.spacing4}
         >
-          <Icon name="plus" size="2.5rem" color={LEGACY_COLORS.darkBlack100} />
+          <Icon name="plus" size="2.5rem" color={COLORS.black90} />
           <StyledText as="h4">{t('join_other_network')}</StyledText>
         </Btn>
         {list != null && list.length > 0 ? null : <DisplaySearchNetwork />}

diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx
@@ -30,7 +30,7 @@ const SSID_INPUT_FIELD_STYLE = css`
   font-size: ${TYPOGRAPHY.fontSize28};
   line-height: ${TYPOGRAPHY.lineHeight36};
   font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  color: ${LEGACY_COLORS.darkBlack100};
+  color: ${COLORS.black90};
   padding-left: ${SPACING.spacing24};
   box-sizing: border-box;
   width: 42.625rem;

diff --git a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx
@@ -24,7 +24,7 @@ const SSID_INPUT_FIELD_STYLE = css`
   font-size: ${TYPOGRAPHY.fontSize28};
   line-height: ${TYPOGRAPHY.lineHeight36};
   font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  color: ${LEGACY_COLORS.darkBlack100};
+  color: ${COLORS.black90};
   padding-left: ${SPACING.spacing24};
   box-sizing: border-box;
 
@@ -61,7 +61,7 @@ export function SetWifiSsid({
         <StyledText
           as="p"
           fontWeight={TYPOGRAPHY.fontWeightRegular}
-          color={errorMessage != null ? LEGACY_COLORS.red2 : LEGACY_COLORS.darkBlack100}
+          color={errorMessage != null ? LEGACY_COLORS.red2 : COLORS.black90}
         >
           {t('enter_network_name')}
         </StyledText>

diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
@@ -157,7 +157,9 @@ export function ProtocolWithLastRun({
       flexDirection={DIRECTION_COLUMN}
       padding={SPACING.spacing24}
       gridGap={SPACING.spacing24}
-      backgroundColor={isReadyToBeReRun ? LEGACY_COLORS.green3 : LEGACY_COLORS.yellow3}
+      backgroundColor={
+        isReadyToBeReRun ? LEGACY_COLORS.green3 : LEGACY_COLORS.yellow3
+      }
       width="25.8125rem"
       height="24.5rem"
       borderRadius={BORDERS.borderRadiusSize4}
@@ -176,7 +178,7 @@ export function ProtocolWithLastRun({
             aria-label="icon_ot-spinner"
             spin={true}
             size="2.5rem"
-            color={LEGACY_COLORS.darkBlack100}
+            color={COLORS.black90}
           />
         )}
       </Flex>

diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -414,7 +414,7 @@ function LabwareLatch({
       css={labwareLatchStyles}
       color={
         isLatchLoading
-          ? `${LEGACY_COLORS.darkBlack100}${LEGACY_COLORS.opacity60HexCode}`
+          ? `${COLORS.black90}${LEGACY_COLORS.opacity60HexCode}`
           : COLORS.black90
       }
       height="6.5rem"

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx
@@ -30,7 +30,7 @@ export function SetupInstructionsModal({
   const modalHeader: ModalHeaderBaseProps = {
     title: i18n.format(t('setup_instructions'), 'capitalize'),
     iconName: 'information',
-    iconColor: LEGACY_COLORS.darkBlack100,
+    iconColor: COLORS.black90,
     hasExitIcon: true,
   }
 

diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
@@ -42,7 +42,7 @@ const OptionLabel = styled.label<LabelProps>`
   padding: ${SPACING.spacing16} ${SPACING.spacing24};
   border-radius: ${BORDERS.borderRadiusSize4};
   color: ${({ isSelected }) =>
-    isSelected === true ? COLORS.white : LEGACY_COLORS.darkBlack100};
+    isSelected === true ? COLORS.white : COLORS.black90};
   background: ${({ isSelected }) =>
     isSelected === true
       ? LEGACY_COLORS.blueEnabled

diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx
@@ -124,7 +124,7 @@ export function WifiConnectionDetails({
                     size="2.5rem"
                     name="info"
                     aria-label={`${activeSsid}_info_icon`}
-                    color={LEGACY_COLORS.darkBlack100}
+                    color={COLORS.black90}
                   />
                   <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                     {t('view_details')}

diff --git a/app/src/organisms/RobotSetupHeader/index.tsx b/app/src/organisms/RobotSetupHeader/index.tsx
@@ -49,7 +49,7 @@ export function RobotSetupHeader({
             position={POSITION_ABSOLUTE}
             left="0"
           >
-            <Icon name="back" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+            <Icon name="back" size="3rem" color={COLORS.black90} />
           </Btn>
         ) : null}
         <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightBold}>

diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx
@@ -179,7 +179,7 @@ export function NameRobot(): JSX.Element {
                     }
                   }}
                 >
-                  <Icon name="back" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+                  <Icon name="back" size="3rem" color={COLORS.black90} />
                 </Btn>
               </Flex>
               <Flex marginLeft={isUnboxingFlowOngoing ? '0' : '4rem'}>

diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx
@@ -107,7 +107,7 @@ const ProtocolHeader = ({
           onClick={() => history.push('/protocols')}
           width="3rem"
         >
-          <Icon name="back" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+          <Icon name="back" size="3rem" color={COLORS.black90} />
         </Btn>
         <Flex
           flexDirection={DIRECTION_COLUMN}

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
@@ -179,19 +179,15 @@ export function ProtocolSetupStep({
         <StyledText
           as="h4"
           fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          color={
-            disabled ? LEGACY_COLORS.darkBlack60 : LEGACY_COLORS.darkBlack100
-          }
+          color={disabled ? LEGACY_COLORS.darkBlack60 : COLORS.black90}
         >
           {title}
         </StyledText>
         <Flex flex="1" justifyContent={JUSTIFY_END}>
           <StyledText
             as="p"
             textAlign={TEXT_ALIGN_RIGHT}
-            color={
-              disabled ? LEGACY_COLORS.darkBlack60 : LEGACY_COLORS.darkBlack100
-            }
+            color={disabled ? LEGACY_COLORS.darkBlack60 : COLORS.black90}
           >
             {detail}
             {subDetail != null && detail != null ? <br /> : null}

diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx
@@ -69,7 +69,7 @@ export function RobotSettingButton({
         whiteSpace="nowrap"
       >
         {iconName != null ? (
-          <Icon name={iconName} size="3rem" color={LEGACY_COLORS.darkBlack100} />
+          <Icon name={iconName} size="3rem" color={COLORS.black90} />
         ) : null}
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -96,7 +96,7 @@ export function RobotSettingButton({
         rightElement
       ) : (
         <Flex gridGap={SPACING.spacing40} alignItems={ALIGN_CENTER}>
-          <Icon name="more" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+          <Icon name="more" size="3rem" color={COLORS.black90} />
         </Flex>
       )}
     </Btn>

diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx
@@ -119,7 +119,7 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
                   hug={true}
                 />
               ) : null}
-              <Icon name="more" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+              <Icon name="more" size="3rem" color={COLORS.black90} />
             </Flex>
           }
         />
@@ -224,7 +224,7 @@ function FeatureFlags(): JSX.Element {
             gridGap={SPACING.spacing24}
             alignItems={ALIGN_CENTER}
           >
-            <Icon name="alert-circle" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+            <Icon name="alert-circle" size="3rem" color={COLORS.black90} />
             <Flex
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing2}

diff --git a/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx b/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx
@@ -24,7 +24,7 @@ describe('LocationIcon', () => {
     expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`)
     expect(locationIcon).toHaveStyle('height: 2rem')
     expect(locationIcon).toHaveStyle('width: max-content')
-    expect(locationIcon).toHaveStyle(`border: 2px solid ${LEGACY_COLORS.darkBlack100}`)
+    expect(locationIcon).toHaveStyle(`border: 2px solid ${COLORS.black90}`)
     expect(locationIcon).toHaveStyle(
       `border-radius: ${BORDERS.borderRadiusSize3}`
     )

diff --git a/components/src/molecules/LocationIcon/index.tsx b/components/src/molecules/LocationIcon/index.tsx
@@ -4,7 +4,12 @@ import { css } from 'styled-components'
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER } from '../../styles'
-import { BORDERS, LEGACY_COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import {
+  BORDERS,
+  LEGACY_COLORS,
+  SPACING,
+  TYPOGRAPHY,
+} from '../../ui-style-constants'
 
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
@@ -31,7 +36,7 @@ const LOCATION_ICON_STYLE = css<{
   width?: string
 }>`
   align-items: ${ALIGN_CENTER};
-  border: 2px solid ${props => props.color ?? LEGACY_COLORS.darkBlack100};
+  border: 2px solid ${props => props.color ?? COLORS.black90};
   border-radius: ${BORDERS.borderRadiusSize3};
   height: ${props => props.height ?? SPACING.spacing32};
   width: ${props => props.width ?? 'max-content'};
@@ -63,7 +68,7 @@ export function LocationIcon({
         <Icon
           name={iconName}
           size="1.25rem"
-          color={color ?? LEGACY_COLORS.darkBlack100}
+          color={color ?? COLORS.black90}
           aria-label={iconName}
         />
       ) : (
-Original file line number
+Diff line change
@@ Expand Up / @@ -179,7 +179,7 @@ export function NameRobot(): JSX.Element { @@
                         }
                       }}
                     >
-                      <Icon name="back" size="3rem" color={LEGACY_COLORS.darkBlack100} />
+                      <Icon name="back" size="3rem" color={COLORS.black90} />
                     </Btn>
                   </Flex>
                   <Flex marginLeft={isUnboxingFlowOngoing ? '0' : '4rem'}>
@@ Expand Down @@