diff --git a/app/src/atoms/Snackbar/index.tsx b/app/src/atoms/Snackbar/index.tsx index d24314043d5..e33c5d00ab8 100644 --- 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 index 55526d82f43..54778dc824f 100644 --- 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 index bbd33df86a7..2039ee653dd 100644 --- 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 index 63b4dfeb894..63511c5969e 100644 --- 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 index 64036edd19b..050cd3d8571 100644 --- a/app/src/molecules/ODDBackButton/index.tsx +++ b/app/src/molecules/ODDBackButton/index.tsx @@ -21,7 +21,7 @@ export function ODDBackButton( - + {header} diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx index aa6869b94d9..2bcf4e3ca7e 100644 --- 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 index b286ca86ba8..fde0e21369b 100644 --- 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 index 5f7e4d97be6..c55c780a24d 100644 --- 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 index 8abf3c77435..669b80cca57 100644 --- 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} > - + {t('join_other_network')} {list != null && list.length > 0 ? null : } diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index 0318f909e95..09a911e18a6 100644 --- 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 index 2f96386d0bb..206523593a3 100644 --- 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({ {t('enter_network_name')} diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx index f6820bae20f..06a81ce138c 100644 --- 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} /> )} diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index 225a5f5db61..49268de7f14 100644 --- 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 index d5367c729a3..7c16c230aa3 100644 --- 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 index 6b4ef6f04d4..04554df3a84 100644 --- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx +++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx @@ -42,7 +42,7 @@ const OptionLabel = styled.label` 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 index f4982f1bcbf..6ba88f4bbd2 100644 --- 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} /> {t('view_details')} diff --git a/app/src/organisms/RobotSetupHeader/index.tsx b/app/src/organisms/RobotSetupHeader/index.tsx index e439f96e878..3313401ec65 100644 --- 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" > - + ) : null} diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx index 2bf1e76998a..69977923d10 100644 --- a/app/src/pages/NameRobot/index.tsx +++ b/app/src/pages/NameRobot/index.tsx @@ -179,7 +179,7 @@ export function NameRobot(): JSX.Element { } }} > - + diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx index fd508ca21c2..c58331e6cc8 100644 --- 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" > - + {title} @@ -189,9 +187,7 @@ export function ProtocolSetupStep({ {detail} {subDetail != null && detail != null ?
: null} diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx index e2282d507b6..c8f84ddaaf9 100644 --- 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 ? ( - + ) : null} - + )} diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx index f920ffab543..cb932e487f1 100644 --- 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} - + } /> @@ -224,7 +224,7 @@ function FeatureFlags(): JSX.Element { gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER} > - + { 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 index aeb4c35cb53..3207ded62a1 100644 --- 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({ ) : (